diff options
Diffstat (limited to 'src/components/organisms/navbar')
3 files changed, 73 insertions, 103 deletions
diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts new file mode 100644 index 0000000..6311a95 --- /dev/null +++ b/src/components/organisms/navbar/navbar-item/navbar-item.stories.ts @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { NavbarItem } from './navbar-item'; + +const meta = { + component: NavbarItem, + title: 'Organisms/Navbar/Item', +} satisfies Meta<typeof NavbarItem>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'default', + label: 'Open example', + }, +}; + +export const ModalVisibleAfterBreakpoint: Story = { + args: { + children: 'The modal contents.', + icon: 'cog', + id: 'modal-visible', + label: 'Open example', + modalVisibleFrom: 'md', + }, +}; diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx b/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx deleted file mode 100644 index 93b7281..0000000 --- a/src/components/organisms/navbar/navbar-item/navbar-item.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { NavbarItem } from './navbar-item'; - -/** - * NavbarItem - Storybook Meta - */ -export default { - title: 'Organisms/Navbar/Item', - component: NavbarItem, - argTypes: {}, -} as ComponentMeta<typeof NavbarItem>; - -const Template: ComponentStory<typeof NavbarItem> = (args) => ( - <NavbarItem {...args} /> -); - -/** - * NavbarItem Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'default', - label: 'Open example', -}; - -/** - * NavbarItem Stories - ModalVisibleAfterBreakpoint - */ -export const ModalVisibleAfterBreakpoint = Template.bind({}); -ModalVisibleAfterBreakpoint.args = { - children: 'The modal contents.', - icon: 'cog', - id: 'modal-visible', - label: 'Open example', - modalVisibleFrom: 'md', -}; diff --git a/src/components/organisms/navbar/navbar.stories.tsx b/src/components/organisms/navbar/navbar.stories.tsx index 95b71ef..a52602e 100644 --- a/src/components/organisms/navbar/navbar.stories.tsx +++ b/src/components/organisms/navbar/navbar.stories.tsx @@ -1,77 +1,55 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Navbar as NavbarComponent } from './navbar'; +import type { Meta, StoryObj } from '@storybook/react'; +import { Navbar } from './navbar'; import { NavbarItem } from './navbar-item'; -/** - * Navbar - Storybook Meta - */ -export default { +const meta = { + component: Navbar, title: 'Organisms/Navbar', - component: NavbarComponent, - argTypes: { - children: { - description: 'The navbar items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, - parameters: { - layout: 'fullscreen', - }, -} as ComponentMeta<typeof NavbarComponent>; +} satisfies Meta<typeof Navbar>; -const Template: ComponentStory<typeof NavbarComponent> = (args) => ( - <NavbarComponent {...args} /> -); +export default meta; -/** - * Navbar Stories - 1 item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - children: ( - <NavbarItem icon="hamburger" id="main-nav" label="Nav"> - The main nav contents - </NavbarItem> - ), -}; +type Story = StoryObj<typeof meta>; -/** - * Navbar Stories - 2 items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - children: ( - <> +export const OneItem: Story = { + args: { + children: ( <NavbarItem icon="hamburger" id="main-nav" label="Nav"> The main nav contents </NavbarItem> - <NavbarItem icon="magnifying-glass" id="search" label="Search"> - A search form - </NavbarItem> - </> - ), + ), + }, }; -/** - * Navbar Stories - 3 items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - children: ( - <> - <NavbarItem icon="hamburger" id="main-nav" label="Nav"> - The main nav contents - </NavbarItem> - <NavbarItem icon="magnifying-glass" id="search" label="Search"> - A search form - </NavbarItem> - <NavbarItem icon="cog" id="settings" label="Settings"> - A settings form - </NavbarItem> - </> - ), +export const TwoItems: Story = { + args: { + children: ( + <> + <NavbarItem icon="hamburger" id="main-nav" label="Nav"> + The main nav contents + </NavbarItem> + <NavbarItem icon="magnifying-glass" id="search" label="Search"> + A search form + </NavbarItem> + </> + ), + }, +}; + +export const ThreeItems: Story = { + args: { + children: ( + <> + <NavbarItem icon="hamburger" id="main-nav" label="Nav"> + The main nav contents + </NavbarItem> + <NavbarItem icon="magnifying-glass" id="search" label="Search"> + A search form + </NavbarItem> + <NavbarItem icon="cog" id="settings" label="Settings"> + A settings form + </NavbarItem> + </> + ), + }, }; |