diff options
Diffstat (limited to 'src/components/molecules/nav')
3 files changed, 111 insertions, 178 deletions
diff --git a/src/components/molecules/nav/nav-item/nav-item.stories.tsx b/src/components/molecules/nav/nav-item/nav-item.stories.tsx index df736a4..3d77b4d 100644 --- a/src/components/molecules/nav/nav-item/nav-item.stories.tsx +++ b/src/components/molecules/nav/nav-item/nav-item.stories.tsx @@ -1,37 +1,25 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { NavLink } from '../nav-link'; -import { NavItem } from './nav-item'; +import { NavItem, type NavItemProps } from './nav-item'; -/** - * NavItem - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavItem', - component: NavItem, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'Define the nav item contents.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NavItem>; - -const Template: ComponentStory<typeof NavItem> = (args) => ( +const WrappedNavItem = (args: NavItemProps) => ( <ul style={{ margin: 0, padding: 0 }}> <NavItem {...args} /> </ul> ); -/** - * NavItem Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: <NavLink href="#example" label="Example" />, +const meta = { + component: NavItem, + title: 'Molecules/Nav/Item', + render: WrappedNavItem, +} satisfies Meta<typeof NavItem>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: <NavLink href="#example" label="Example" />, + }, }; diff --git a/src/components/molecules/nav/nav-link/nav-link.stories.tsx b/src/components/molecules/nav/nav-link/nav-link.stories.tsx index b0ad76a..ba13d33 100644 --- a/src/components/molecules/nav/nav-link/nav-link.stories.tsx +++ b/src/components/molecules/nav/nav-link/nav-link.stories.tsx @@ -1,148 +1,100 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../../atoms'; -import { NavLink as NavLinkComponent } from './nav-link'; +import { NavLink, type NavLinkProps } from './nav-link'; -/** - * NavLink - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavLink', - component: NavLinkComponent, - argTypes: { - href: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'The link label.', - type: { - name: 'string', - required: true, - }, - }, - logo: { - control: { - type: null, - }, - description: 'The link logo.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof NavLinkComponent>; - -const Template: ComponentStory<typeof NavLinkComponent> = (args) => ( +const WrappedNavLink = (args: NavLinkProps) => ( <div style={{ width: 'fit-content' }}> - <NavLinkComponent {...args} /> + <NavLink {...args} /> </div> ); -/** - * NavLink Stories - Regular - */ -export const Regular = Template.bind({}); -Regular.args = { - href: '#', - label: 'A nav link', +const meta = { + component: NavLink, + title: 'Molecules/Nav/Link', + render: WrappedNavLink, +} satisfies Meta<typeof NavLink>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Regular: Story = { + args: { + href: '#', + label: 'A nav link', + }, }; -/** - * NavLink Stories - RegularInlineWithLogo - */ -export const RegularInlineWithLogo = Template.bind({}); -RegularInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, +export const RegularInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + }, }; -/** - * NavLink Stories - RegularStackWithLogo - */ -export const RegularStackWithLogo = Template.bind({}); -RegularStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, +export const RegularStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + }, }; -/** - * NavLink Stories - Block - */ -export const Block = Template.bind({}); -Block.args = { - href: '#', - label: 'A nav link', - variant: 'block', +export const Block: Story = { + args: { + href: '#', + label: 'A nav link', + variant: 'block', + }, }; -/** - * NavLink Stories - BlockInlineWithLogo - */ -export const BlockInlineWithLogo = Template.bind({}); -BlockInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'block', +export const BlockInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'block', + }, }; -/** - * NavLink Stories - BlockStackWithLogo - */ -export const BlockStackWithLogo = Template.bind({}); -BlockStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'block', +export const BlockStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'block', + }, }; -/** - * NavLink Stories - Main - */ -export const Main = Template.bind({}); -Main.args = { - href: '#', - label: 'A nav link', - variant: 'main', +export const Main: Story = { + args: { + href: '#', + label: 'A nav link', + variant: 'main', + }, }; -/** - * NavLink Stories - MainInlineWithLogo - */ -export const MainInlineWithLogo = Template.bind({}); -MainInlineWithLogo.args = { - href: '#example', - isStack: false, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'main', +export const MainInlineWithLogo: Story = { + args: { + href: '#example', + isStack: false, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'main', + }, }; -/** - * NavLink Stories - MainStackWithLogo - */ -export const MainStackWithLogo = Template.bind({}); -MainStackWithLogo.args = { - href: '#example', - isStack: true, - label: 'A nav link', - logo: <Icon aria-hidden shape="home" />, - variant: 'main', +export const MainStackWithLogo: Story = { + args: { + href: '#example', + isStack: true, + label: 'A nav link', + logo: <Icon aria-hidden shape="home" />, + variant: 'main', + }, }; diff --git a/src/components/molecules/nav/nav-list/nav-list.stories.tsx b/src/components/molecules/nav/nav-list/nav-list.stories.tsx index c165ac7..702acfe 100644 --- a/src/components/molecules/nav/nav-list/nav-list.stories.tsx +++ b/src/components/molecules/nav/nav-list/nav-list.stories.tsx @@ -1,19 +1,16 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { NavItem } from '../nav-item'; import { NavLink } from '../nav-link'; import { NavList } from './nav-list'; -/** - * Nav - Storybook Meta - */ -export default { - title: 'Molecules/Nav/NavList', +const meta = { component: NavList, -} as ComponentMeta<typeof NavList>; + title: 'Molecules/Nav/List', +} satisfies Meta<typeof NavList>; -const Template: ComponentStory<typeof NavList> = (args) => ( - <NavList {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; const NavItems = () => ( <> @@ -32,20 +29,16 @@ const NavItems = () => ( </> ); -/** - * NavList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: <NavItems />, +export const Example: Story = { + args: { + children: <NavItems />, + }, }; -/** - * NavList Stories - Inlined - */ -export const Inlined = Template.bind({}); -Inlined.args = { - children: <NavItems />, - isInline: true, - spacing: 'sm', +export const Inlined: Story = { + args: { + children: <NavItems />, + isInline: true, + spacing: 'sm', + }, }; |