diff options
Diffstat (limited to 'src/components/organisms/nav')
5 files changed, 176 insertions, 267 deletions
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts new file mode 100644 index 0000000..4667caf --- /dev/null +++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.ts @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Breadcrumbs } from './breadcrumbs'; + +const meta = { + component: Breadcrumbs, + title: 'Organisms/Nav/Breadcrumbs', +} satisfies Meta<typeof Breadcrumbs>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const OneItem: Story = { + args: { + items: [{ id: 'home', slug: '#', label: 'Home' }], + }, +}; + +export const TwoItems: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + ], + }, +}; + +export const ThreeItemsOrMore: Story = { + args: { + items: [ + { id: 'home', slug: '#', label: 'Home' }, + { id: 'blog', slug: '#', label: 'Blog' }, + { id: 'post1', slug: '#', label: 'A Post' }, + ], + }, +}; diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx deleted file mode 100644 index 0b6fd27..0000000 --- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Breadcrumbs } from './breadcrumbs'; - -/** - * Breadcrumbs - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Breadcrumbs', - component: Breadcrumbs, - argTypes: { - items: { - description: 'The breadcrumb items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Breadcrumbs>; - -const Template: ComponentStory<typeof Breadcrumbs> = (args) => ( - <Breadcrumbs {...args} /> -); - -/** - * Breadcrumbs Stories - One item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - items: [{ id: 'home', slug: '#', label: 'Home' }], -}; - -/** - * Breadcrumbs Stories - Two items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - ], -}; - -/** - * Breadcrumbs Stories - Three items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - items: [ - { id: 'home', slug: '#', label: 'Home' }, - { id: 'blog', slug: '#', label: 'Blog' }, - { id: 'post1', slug: '#', label: 'A Post' }, - ], -}; diff --git a/src/components/organisms/nav/main-nav/main-nav.stories.tsx b/src/components/organisms/nav/main-nav/main-nav.stories.tsx index 6333f2c..c18d0d5 100644 --- a/src/components/organisms/nav/main-nav/main-nav.stories.tsx +++ b/src/components/organisms/nav/main-nav/main-nav.stories.tsx @@ -1,71 +1,54 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../../atoms'; import { MainNav } from './main-nav'; -/** - * MainNav - Storybook Meta - */ -export default { - title: 'Organisms/Nav/MainNav', +const meta = { component: MainNav, - argTypes: { - items: { - description: 'The main nav items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof MainNav>; + title: 'Organisms/Nav/MainNav', +} satisfies Meta<typeof MainNav>; + +export default meta; -const Template: ComponentStory<typeof MainNav> = (args) => ( - <MainNav {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * MainNav Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - items: [ - { id: 'home', label: 'Home', href: '#home' }, - { id: 'blog', label: 'Blog', href: '#blog' }, - { id: 'projects', label: 'Projects', href: '#projects' }, - { id: 'contact', label: 'Contact', href: '#contact' }, - ], +export const Example: Story = { + args: { + items: [ + { id: 'home', label: 'Home', href: '#home' }, + { id: 'blog', label: 'Blog', href: '#blog' }, + { id: 'projects', label: 'Projects', href: '#projects' }, + { id: 'contact', label: 'Contact', href: '#contact' }, + ], + }, }; -/** - * MainNav Stories - WithLogo - */ -export const WithLogo = Template.bind({}); -WithLogo.args = { - items: [ - { - id: 'home', - label: 'Home', - href: '#home', - logo: <Icon aria-hidden shape="home" />, - }, - { - id: 'blog', - label: 'Blog', - href: '#blog', - logo: <Icon aria-hidden shape="posts-stack" />, - }, - { - id: 'projects', - label: 'Projects', - href: '#projects', - logo: <Icon aria-hidden shape="computer" />, - }, - { - id: 'contact', - label: 'Contact', - href: '#contact', - logo: <Icon aria-hidden shape="envelop" />, - }, - ], +export const WithLogo: Story = { + args: { + items: [ + { + id: 'home', + label: 'Home', + href: '#home', + logo: <Icon aria-hidden shape="home" />, + }, + { + id: 'blog', + label: 'Blog', + href: '#blog', + logo: <Icon aria-hidden shape="posts-stack" />, + }, + { + id: 'projects', + label: 'Projects', + href: '#projects', + logo: <Icon aria-hidden shape="computer" />, + }, + { + id: 'contact', + label: 'Contact', + href: '#contact', + logo: <Icon aria-hidden shape="envelop" />, + }, + ], + }, }; diff --git a/src/components/organisms/nav/pagination/pagination.stories.ts b/src/components/organisms/nav/pagination/pagination.stories.ts new file mode 100644 index 0000000..fb1875f --- /dev/null +++ b/src/components/organisms/nav/pagination/pagination.stories.ts @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { + Pagination, + type RenderPaginationItemAriaLabel, + type RenderPaginationLink, +} from './pagination'; + +const meta = { + component: Pagination, + title: 'Organisms/Nav/Pagination', +} satisfies Meta<typeof Pagination>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; + +const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ + kind, + pageNumber, + isCurrentPage, +}) => { + switch (kind) { + case 'backward': + return 'Go to previous page'; + case 'forward': + return 'Go to next page'; + case 'number': + default: + return isCurrentPage + ? `Current page, page ${pageNumber}` + : `Go to page ${pageNumber}`; + } +}; + +export const RightEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const LeftEllipsis: Story = { + args: { + current: 49, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const BothEllipsis: Story = { + args: { + current: 25, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 50, + }, +}; + +export const WithoutEllipsis: Story = { + args: { + current: 2, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutBackwardLink: Story = { + args: { + current: 1, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; + +export const WithoutForwardLink: Story = { + args: { + current: 5, + siblings: 2, + renderItemAriaLabel, + renderLink, + total: 5, + }, +}; diff --git a/src/components/organisms/nav/pagination/pagination.stories.tsx b/src/components/organisms/nav/pagination/pagination.stories.tsx deleted file mode 100644 index 83f3a63..0000000 --- a/src/components/organisms/nav/pagination/pagination.stories.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { - Pagination, - type RenderPaginationItemAriaLabel, - type RenderPaginationLink, -} from './pagination'; - -/** - * Pagination - Storybook Meta - */ -export default { - title: 'Organisms/Nav/Pagination', - component: Pagination, - args: { - siblings: 1, - }, - argTypes: { - current: { - control: { - type: 'number', - }, - description: 'The current page number.', - type: { - name: 'number', - required: true, - }, - }, - siblings: { - control: { - type: 'number', - }, - description: - 'The number of pages to show next to the current page for one side.', - table: { - category: 'Options', - defaultValue: { summary: 1 }, - }, - type: { - name: 'number', - required: false, - }, - }, - total: { - control: { - type: 'number', - }, - description: 'The total number of items.', - type: { - name: 'number', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Pagination>; - -const Template: ComponentStory<typeof Pagination> = (args) => ( - <Pagination {...args} /> -); - -const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`; - -const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ - kind, - pageNumber, - isCurrentPage, -}) => { - switch (kind) { - case 'backward': - return 'Go to previous page'; - case 'forward': - return 'Go to next page'; - case 'number': - default: - return isCurrentPage - ? `Current page, page ${pageNumber}` - : `Go to page ${pageNumber}`; - } -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the beginning - */ -export const RightEllipsis = Template.bind({}); -RightEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the end - */ -export const LeftEllipsis = Template.bind({}); -LeftEllipsis.args = { - current: 49, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - More than 5 pages and current page is near the middle - */ -export const BothEllipsis = Template.bind({}); -BothEllipsis.args = { - current: 25, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 50, -}; - -/** - * Pagination Stories - Less than 5 pages - */ -export const WithoutEllipsis = Template.bind({}); -WithoutEllipsis.args = { - current: 2, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - First page selected - */ -export const WithoutBackwardLink = Template.bind({}); -WithoutBackwardLink.args = { - current: 1, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; - -/** - * Pagination Stories - Last page selected - */ -export const WithoutForwardLink = Template.bind({}); -WithoutForwardLink.args = { - current: 5, - siblings: 2, - renderItemAriaLabel, - renderLink, - total: 5, -}; |