diff options
Diffstat (limited to 'src/components/molecules')
24 files changed, 1641 insertions, 1877 deletions
diff --git a/src/components/molecules/branding/branding.stories.tsx b/src/components/molecules/branding/branding.stories.tsx index c2f216a..e0b8a16 100644 --- a/src/components/molecules/branding/branding.stories.tsx +++ b/src/components/molecules/branding/branding.stories.tsx @@ -1,92 +1,42 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Heading } from '../../atoms'; import { Branding } from './branding'; -/** - * Branding - Storybook Meta - */ -export default { - title: 'Molecules/Branding', +const meta = { component: Branding, - args: {}, - argTypes: { - baseline: { - control: { - type: 'object', - }, - description: 'The brand baseline.', - type: { - name: 'function', - required: false, - }, - }, - logo: { - control: { - type: 'object', - }, - description: 'The brand logo.', - type: { - name: 'function', - required: true, - }, - }, - name: { - control: { - type: 'object', - }, - description: 'The brand name.', - type: { - name: 'function', - required: true, - }, - }, - url: { - control: { - type: 'string', - }, - description: 'The homepage url.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Branding>; + title: 'Molecules/Branding', +} satisfies Meta<typeof Branding>; -const Template: ComponentStory<typeof Branding> = (args) => ( - <Branding {...args} /> -); +export default meta; -/** - * Branding Stories - Logo and title - */ -export const LogoAndTitle = Template.bind({}); -LogoAndTitle.args = { - logo: ( - <NextImage - alt="Your brand logo" - height={150} - src="https://picsum.photos/150" - width={150} - /> - ), - name: <Heading level={1}>Your brand name</Heading>, +type Story = StoryObj<typeof meta>; + +export const LogoAndTitle: Story = { + args: { + logo: ( + <NextImage + alt="Your brand logo" + height={150} + src="https://picsum.photos/150" + width={150} + /> + ), + name: <Heading level={1}>Your brand name</Heading>, + }, }; -/** - * Branding Stories - Logo, title and baseline - */ -export const LogoTitleAndBaseline = Template.bind({}); -LogoTitleAndBaseline.args = { - baseline: <div>Your brand baseline if any</div>, - logo: ( - <NextImage - alt="Your brand logo" - height={150} - src="https://picsum.photos/150" - width={150} - /> - ), - name: <Heading level={1}>Your brand name</Heading>, +export const LogoTitleAndBaseline: Story = { + args: { + baseline: <div>Your brand baseline if any</div>, + logo: ( + <NextImage + alt="Your brand logo" + height={150} + src="https://picsum.photos/150" + width={150} + /> + ), + name: <Heading level={1}>Your brand name</Heading>, + }, }; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts b/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts new file mode 100644 index 0000000..dddfa18 --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.stories.ts @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { BackToTop } from './back-to-top'; + +const meta = { + component: BackToTop, + title: 'Molecules/Buttons/BackToTop', +} satisfies Meta<typeof BackToTop>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + anchor: '#top', + label: 'Back to top', + }, +}; diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx deleted file mode 100644 index 3abb59d..0000000 --- a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { BackToTop as BackToTopComponent } from './back-to-top'; - -/** - * BackToTop - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: BackToTopComponent, - argTypes: { - anchor: { - control: { - type: 'text', - }, - description: 'An element id with leading hashtag to use as anchor.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'An accessible name for the button.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof BackToTopComponent>; - -const Template: ComponentStory<typeof BackToTopComponent> = (args) => ( - <BackToTopComponent {...args} /> -); - -/** - * Buttons Stories - Back to top - */ -export const BackToTop = Template.bind({}); -BackToTop.args = { - anchor: '#top', - label: 'Back to top', -}; diff --git a/src/components/molecules/buttons/help-button/help-button.stories.ts b/src/components/molecules/buttons/help-button/help-button.stories.ts new file mode 100644 index 0000000..294959b --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HelpButton } from './help-button'; + +const meta = { + component: HelpButton, + title: 'Molecules/Buttons/Help', +} satisfies Meta<typeof HelpButton>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + label: 'Help', + }, +}; diff --git a/src/components/molecules/buttons/help-button/help-button.stories.tsx b/src/components/molecules/buttons/help-button/help-button.stories.tsx deleted file mode 100644 index 556dd74..0000000 --- a/src/components/molecules/buttons/help-button/help-button.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { HelpButton as HelpButtonComponent } from './help-button'; - -/** - * HelpButton - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: HelpButtonComponent, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - onClick: { - control: { - type: null, - }, - description: 'A callback function to handle click on button.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta<typeof HelpButtonComponent>; - -const Template: ComponentStory<typeof HelpButtonComponent> = (args) => ( - <HelpButtonComponent {...args} /> -); - -/** - * Help Button Stories - Level 1 - */ -export const HelpButton = Template.bind({}); -HelpButton.args = { - label: 'Help', -}; diff --git a/src/components/molecules/card/card.stories.tsx b/src/components/molecules/card/card.stories.tsx index 7cc2ad4..55a0609 100644 --- a/src/components/molecules/card/card.stories.tsx +++ b/src/components/molecules/card/card.stories.tsx @@ -1,8 +1,8 @@ -import type { ComponentMeta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Button, ButtonLink, Link, Time } from '../../atoms'; import { MetaItem } from '../meta-list'; -import { Card, type CardProps } from './card'; +import { Card } from './card'; import { CardActions } from './card-actions'; import { CardBody } from './card-body'; import { CardCover } from './card-cover'; @@ -11,228 +11,138 @@ import { CardHeader } from './card-header'; import { CardMeta } from './card-meta'; import { CardTitle } from './card-title'; -/** - * Card - Storybook Meta - */ -export default { - title: 'Molecules/Card', +const meta = { component: Card, - argTypes: {}, -} as ComponentMeta<typeof Card>; - -const Template: Story<CardProps<string | undefined>> = < - T extends string | undefined, ->( - args: CardProps<T> -) => <Card {...args} />; + title: 'Molecules/Card', +} satisfies Meta<typeof Card>; -/** - * Card Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'The card contents.', -}; +export default meta; -/** - * Card Stories - AsLink - */ -export const AsLink = Template.bind({}); -AsLink.args = { - 'aria-label': 'Learn more about this card', - children: 'The card contents.', - linkTo: '#card', -}; +type Story = StoryObj<typeof meta>; -export const HeaderCover = Template.bind({}); -HeaderCover.args = { - children: <CardHeader />, - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const Default: Story = { + args: { + children: 'The card contents.', + }, }; -export const HeaderTitle = Template.bind({}); -HeaderTitle.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - ), +export const AsLink: Story = { + args: { + 'aria-label': 'Learn more about this card', + children: 'The card contents.', + linkTo: '#card', + }, }; -export const HeaderMeta = Template.bind({}); -HeaderMeta.args = { - children: ( - <CardHeader> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> - <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} +export const HeaderCover: Story = { + args: { + children: <CardHeader />, + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} /> - </CardMeta> - </CardHeader> - ), + </CardCover> + ), + }, }; -export const BodyContents = Template.bind({}); -BodyContents.args = { - children: <CardBody>The card contents</CardBody>, +export const HeaderTitle: Story = { + args: { + children: ( + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + ), + }, }; -export const FooterActions = Template.bind({}); -FooterActions.args = { - children: ( - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - ), +export const HeaderMeta: Story = { + args: { + children: ( + <CardHeader> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + ), + }, }; -export const FooterMeta = Template.bind({}); -FooterMeta.args = { - children: <CardFooter />, - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const BodyContents: Story = { + args: { + children: <CardBody>The card contents</CardBody>, + }, }; -export const CompositionCoverTitle = Template.bind({}); -CompositionCoverTitle.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const FooterActions: Story = { + args: { + children: ( + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + ), + }, }; -export const CompositionTitleMeta = Template.bind({}); -CompositionTitleMeta.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> +export const FooterMeta: Story = { + args: { + children: <CardFooter />, + meta: ( + <CardMeta> <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} /> - </CardMeta> - </CardHeader> - ), -}; - -export const CompositionCoverTitleMeta = Template.bind({}); -CompositionCoverTitleMeta.args = { - children: ( - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} /> </CardMeta> - </CardHeader> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), -}; - -export const CompositionTitleBody = Template.bind({}); -CompositionTitleBody.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), + ), + }, }; -export const CompositionCoverTitleBody = Template.bind({}); -CompositionCoverTitleBody.args = { - children: ( - <> +export const CompositionCoverTitle: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleMetaBody = Template.bind({}); -CompositionTitleMetaBody.args = { - children: ( - <> +export const CompositionTitleMeta: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> <CardMeta isInline> @@ -243,20 +153,13 @@ CompositionTitleMetaBody.args = { /> </CardMeta> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), + ), + }, }; -export const CompositionCoverTitleMetaBody = Template.bind({}); -CompositionCoverTitleMetaBody.args = { - children: ( - <> +export const CompositionCoverTitleMeta: Story = { + args: { + children: ( <CardHeader> <CardTitle>The card title</CardTitle> <CardMeta isInline> @@ -267,242 +170,348 @@ CompositionCoverTitleMetaBody.args = { /> </CardMeta> </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleActions = Template.bind({}); -CompositionTitleActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), +export const CompositionTitleBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + }, }; -export const CompositionCoverTitleActions = Template.bind({}); -CompositionCoverTitleActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), +export const CompositionCoverTitleBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionTitleBodyActions = Template.bind({}); -CompositionTitleBodyActions.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), +export const CompositionTitleMetaBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + }, }; -export const CompositionTitleBodyActionsMeta = Template.bind({}); -CompositionTitleBodyActionsMeta.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionCoverTitleMetaBody: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, }; -export const CompositionCoverTitleBodyActionsMeta = Template.bind({}); -CompositionCoverTitleBodyActionsMeta.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionTitleActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + }, }; -export const CompositionAllContents = Template.bind({}); -CompositionAllContents.args = { - children: ( - <> - <CardHeader> - <CardTitle>The card title</CardTitle> - <CardMeta isInline> - <MetaItem label="Written by:" value="The author" /> - <MetaItem - label="Published on:" - value={<Time date={new Date().toISOString()} />} - /> - </CardMeta> - </CardHeader> - <CardBody> - Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et - necessitatibus esse laudantium sequi ad. Et est quas pariatur facere - velit veritatis nihil. Ratione aperiam omnis quia ut asperiores tenetur - dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. - </CardBody> - <CardFooter> - <CardActions> - <ButtonLink to="#post">Read more</ButtonLink> - <Button>Share</Button> - </CardActions> - </CardFooter> - </> - ), - cover: ( - <CardCover> - <NextImage - alt="A cover example" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - </CardCover> - ), - meta: ( - <CardMeta> - <MetaItem - label="Categories:" - value={[ - { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, - { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, - ]} - /> - <MetaItem - label="Tags:" - value={[ - { id: 'tag-1', value: 'Tag 1' }, - { id: 'tag-2', value: 'Tag 2' }, - { id: 'tag-3', value: 'Tag 3' }, - ]} - /> - </CardMeta> - ), +export const CompositionCoverTitleActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + }, +}; + +export const CompositionTitleBodyActions: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + }, +}; + +export const CompositionTitleBodyActionsMeta: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, +}; + +export const CompositionCoverTitleBodyActionsMeta: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, +}; + +export const CompositionAllContents: Story = { + args: { + children: ( + <> + <CardHeader> + <CardTitle>The card title</CardTitle> + <CardMeta isInline> + <MetaItem label="Written by:" value="The author" /> + <MetaItem + label="Published on:" + value={<Time date={new Date().toISOString()} />} + /> + </CardMeta> + </CardHeader> + <CardBody> + Nihil magnam tempora voluptatem. Reiciendis ut cum vel. Odit et + necessitatibus esse laudantium sequi ad. Et est quas pariatur facere + velit veritatis nihil. Ratione aperiam omnis quia ut asperiores + tenetur dolores veniam. Nostrum est ullam aliquam aliquid expedita ea. + </CardBody> + <CardFooter> + <CardActions> + <ButtonLink to="#post">Read more</ButtonLink> + <Button>Share</Button> + </CardActions> + </CardFooter> + </> + ), + cover: ( + <CardCover> + <NextImage + alt="A cover example" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + </CardCover> + ), + meta: ( + <CardMeta> + <MetaItem + label="Categories:" + value={[ + { id: 'cat-1', value: <Link href="#cat1">Category 1</Link> }, + { id: 'cat-2', value: <Link href="#cat2">Category 2</Link> }, + ]} + /> + <MetaItem + label="Tags:" + value={[ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ]} + /> + </CardMeta> + ), + }, }; diff --git a/src/components/molecules/code/code.stories.tsx b/src/components/molecules/code/code.stories.ts index 1127839..38a9ef8 100644 --- a/src/components/molecules/code/code.stories.tsx +++ b/src/components/molecules/code/code.stories.ts @@ -1,58 +1,14 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Code } from './code'; -/** - * Code - Storybook Meta - */ -export default { - title: 'Molecules/Code', +const meta = { component: Code, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The code sample.', - type: { - name: 'string', - required: true, - }, - }, - filterPattern: { - control: { - type: 'text', - }, - description: 'Define a pattern to filter the command line output.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - language: { - control: { - type: 'text', - }, - description: 'The code sample language.', - type: { - name: 'string', - required: true, - }, - }, - plugins: { - description: 'An array of Prism plugins to activate.', - type: { - name: 'object', - required: false, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Code>; + title: 'Molecules/Code', +} satisfies Meta<typeof Code>; -const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />; +export default meta; + +type Story = StoryObj<typeof meta>; const javascriptCodeSample = ` const foo = () => { @@ -60,25 +16,22 @@ const foo = () => { } `; -/** - * Code Stories - Code sample - */ -export const CodeSample = Template.bind({}); -CodeSample.args = { - children: javascriptCodeSample, - language: 'javascript', +export const CodeSample: Story = { + args: { + children: javascriptCodeSample, + language: 'javascript', + }, }; /** - * Code Stories - Highlighting - * * @todo Find a way to make it working: line-highlight plugin is not loaded. */ -export const Highlighting = Template.bind({}); -Highlighting.args = { - children: javascriptCodeSample, - highlight: '3', - language: 'javascript', +export const Highlighting: Story = { + args: { + children: javascriptCodeSample, + highlight: '3', + language: 'javascript', + }, }; // cSpell:ignore xinitrc @@ -89,15 +42,13 @@ ls -lah #output#-rw-r--r-- 1 armand armand 2,0K 21 jul. 2021 .xinitrc `; -/** - * Code Stories - Command Line - */ -export const CommandLine = Template.bind({}); -CommandLine.args = { - children: commandLineCode, - cmdOutputFilter: '#output#', - isCmd: true, - language: 'bash', +export const CommandLine: Story = { + args: { + children: commandLineCode, + cmdOutputFilter: '#output#', + isCmd: true, + language: 'bash', + }, }; // cSpell:ignore lcov @@ -163,14 +114,13 @@ const treeSample = ` └── yarn.lock`; /** - * Code Stories - Tree view - * * @todo Find a way to make it working: treeview plugin is not loaded. */ -export const TreeView = Template.bind({}); -TreeView.args = { - children: treeSample, - language: 'treeview', +export const TreeView: Story = { + args: { + children: treeSample, + language: 'treeview', + }, }; const diffSample = ` @@ -181,12 +131,10 @@ const diffSample = ` -foo = foo + 1; +const foo = bar.baz([1, 2, 3]) + 1;`; -/** - * Code Stories - Diff - */ -export const Diff = Template.bind({}); -Diff.args = { - children: diffSample, - isDiff: true, - language: 'diff', +export const Diff: Story = { + args: { + children: diffSample, + isDiff: true, + language: 'diff', + }, }; diff --git a/src/components/molecules/collapsible/collapsible.stories.ts b/src/components/molecules/collapsible/collapsible.stories.ts new file mode 100644 index 0000000..e869306 --- /dev/null +++ b/src/components/molecules/collapsible/collapsible.stories.ts @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Collapsible } from './collapsible'; + +const meta = { + component: Collapsible, + title: 'Molecules/Collapsible', +} satisfies Meta<typeof Collapsible>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const heading = 'Your title'; +const body = + 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.'; + +export const Collapsed: Story = { + args: { + children: body, + heading, + isCollapsed: true, + }, +}; + +export const Expanded: Story = { + args: { + children: body, + heading, + isCollapsed: false, + }, +}; diff --git a/src/components/molecules/collapsible/collapsible.stories.tsx b/src/components/molecules/collapsible/collapsible.stories.tsx deleted file mode 100644 index 7cac64d..0000000 --- a/src/components/molecules/collapsible/collapsible.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Heading } from '../../atoms'; -import { Collapsible } from './collapsible'; - -/** - * HeadingButton - Storybook Meta - */ -export default { - title: 'Molecules/Collapsible', - component: Collapsible, - argTypes: { - heading: { - control: { - type: 'text', - }, - description: 'Define the collapsible heading.', - type: { - name: 'function', - required: true, - }, - }, - isCollapsed: { - control: { - type: 'boolean', - }, - description: 'Define if the component should be collapsed or expanded.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: true, - }, - }, - }, -} as ComponentMeta<typeof Collapsible>; - -const Template: ComponentStory<typeof Collapsible> = ({ heading, ...args }) => ( - <Collapsible - {...args} - heading={ - <Heading isFake level={3}> - {heading} - </Heading> - } - /> -); - -const heading = 'Your title'; -const body = - 'Eius et eum ex voluptas laboriosam aliquid quas necessitatibus. Molestiae eius voluptatem qui voluptas eaque et totam. Ut ipsum ea sit. Quos molestiae id est consequatur. Suscipit illo at. Omnis non suscipit. Qui itaque laboriosam quos ut est laudantium. Iusto recusandae excepturi quia labore voluptatem quod recusandae. Quod ducimus ut rem dolore et.'; - -/** - * Collapsible Stories - Collapsed - */ -export const Collapsed = Template.bind({}); -Collapsed.args = { - children: body, - heading, - isCollapsed: true, -}; - -/** - * Collapsible Stories - Expanded - */ -export const Expanded = Template.bind({}); -Expanded.args = { - children: body, - heading, - isCollapsed: false, -}; diff --git a/src/components/molecules/colophon/colophon.stories.tsx b/src/components/molecules/colophon/colophon.stories.tsx index 7baecad..83db4f4 100644 --- a/src/components/molecules/colophon/colophon.stories.tsx +++ b/src/components/molecules/colophon/colophon.stories.tsx @@ -1,83 +1,47 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Icon } from '../../atoms'; import { Copyright } from '../copyright'; import { Colophon } from './colophon'; -/** - * Colophon - Storybook Meta - */ -export default { - title: 'Molecules/Colophon', +const meta = { component: Colophon, - argTypes: { - copyright: { - description: 'The website copyright.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - links: { - control: { - type: 'object', - }, - description: - 'Adds links to the colophon (a Legal Notice link for example).', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Colophon>; + title: 'Molecules/Colophon', +} satisfies Meta<typeof Colophon>; + +export default meta; -const Template: ComponentStory<typeof Colophon> = (args) => ( - <Colophon {...args} /> -); +type Story = StoryObj<typeof meta>; -/** - * Colophon Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, +export const Default: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + }, }; -/** - * Colophon Stories - WithLicense - */ -export const WithLicense = Template.bind({}); -WithLicense.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - license: <Icon heading="CC BY SA" shape="cc-by-sa" />, +export const WithLicense: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + license: <Icon heading="CC BY SA" shape="cc-by-sa" />, + }, }; -/** - * Colophon Stories - WithLinks - */ -export const WithLinks = Template.bind({}); -WithLinks.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - links: [ - { href: '#legal', id: 'item-1', label: 'Legal notice' }, - { href: '#credits', id: 'item-2', label: 'Credits' }, - ], +export const WithLinks: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + links: [ + { href: '#legal', id: 'item-1', label: 'Legal notice' }, + { href: '#credits', id: 'item-2', label: 'Credits' }, + ], + }, }; -/** - * Colophon Stories - WithLicenseAndLinks - */ -export const WithLicenseAndLinks = Template.bind({}); -WithLicenseAndLinks.args = { - copyright: <Copyright from="2021" owner="Brand" to="2023" />, - license: <Icon heading="CC BY SA" shape="cc-by-sa" />, - links: [ - { href: '#legal', id: 'item-1', label: 'Legal notice' }, - { href: '#credits', id: 'item-2', label: 'Credits' }, - ], +export const WithLicenseAndLinks: Story = { + args: { + copyright: <Copyright from="2021" owner="Brand" to="2023" />, + license: <Icon heading="CC BY SA" shape="cc-by-sa" />, + links: [ + { href: '#legal', id: 'item-1', label: 'Legal notice' }, + { href: '#credits', id: 'item-2', label: 'Credits' }, + ], + }, }; diff --git a/src/components/molecules/copyright/copyright.stories.ts b/src/components/molecules/copyright/copyright.stories.ts new file mode 100644 index 0000000..6ef32c9 --- /dev/null +++ b/src/components/molecules/copyright/copyright.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Copyright } from './copyright'; + +const meta = { + component: Copyright, + title: 'Molecules/Copyright', +} satisfies Meta<typeof Copyright>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Default: Story = { + args: { + from: '2012', + owner: 'Your brand', + }, +}; + +export const WithEndYear: Story = { + args: { + from: '2012', + owner: 'Your brand', + to: '2023', + }, +}; diff --git a/src/components/molecules/copyright/copyright.stories.tsx b/src/components/molecules/copyright/copyright.stories.tsx deleted file mode 100644 index 58a82e9..0000000 --- a/src/components/molecules/copyright/copyright.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Copyright } from './copyright'; - -/** - * Copyright - Storybook Meta - */ -export default { - title: 'Molecules/Copyright', - component: Copyright, - argTypes: { - from: { - control: { - type: 'text', - }, - description: 'The copyright start date.', - type: { - name: 'string', - required: true, - }, - }, - owner: { - control: { - type: 'text', - }, - description: 'The copyright owner.', - type: { - name: 'string', - required: true, - }, - }, - to: { - control: { - type: 'text', - }, - description: 'The copyright end date.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Copyright>; - -const Template: ComponentStory<typeof Copyright> = (args) => ( - <Copyright {...args} /> -); - -/** - * Copyright Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - from: '2012', - owner: 'Your brand', -}; - -/** - * Copyright Stories - WithEndYear - */ -export const WithEndYear = Template.bind({}); -WithEndYear.args = { - from: '2012', - owner: 'Your brand', - to: '2023', -}; diff --git a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx index 1d1af70..47ded7b 100644 --- a/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field/labelled-field.stories.tsx @@ -1,130 +1,270 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { type ChangeEvent, useState, useCallback } from 'react'; -import { Input, Label } from '../../../atoms'; +import type { Meta, StoryObj } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; +import { + Checkbox, + type CheckboxProps, + Radio, + type RadioProps, + Input, + type InputProps, + type TextAreaProps, + TextArea, + Label, +} from '../../../atoms'; +import { ControlledSelect } from '../../../atoms/forms/fields/select/select.stories'; import { LabelledField } from './labelled-field'; -/** - * LabelledField - Storybook Meta - */ -export default { - title: 'Molecules/Forms/Field', +const meta = { + title: 'Molecules/Forms/Labelled Field', component: LabelledField, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the field.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - field: { - control: { - type: null, - }, - description: 'A component: Checkbox, Input, Select, Radio or TextArea.', - type: { - name: 'function', - required: true, - }, - }, - label: { - control: { - type: null, - }, - description: 'A Label component.', - type: { - name: 'function', - required: true, - }, - }, - isInline: { - control: { - type: 'boolean', - }, - description: 'Should the label and the field be inlined?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - isReversedOrder: { - control: { - type: 'boolean', - }, - description: 'Should the label and the field be reversed?', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - }, -} as ComponentMeta<typeof LabelledField>; - -const Template: ComponentStory<typeof LabelledField> = ({ ...args }) => { - const id = 'sunt'; - const [value, setValue] = useState<string>(''); - const updateValue = useCallback((e: ChangeEvent<HTMLInputElement>) => { +} satisfies Meta<typeof LabelledField>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +const ControlledCheckbox = ({ + isChecked: checked = false, + ...args +}: CheckboxProps) => { + const [isChecked, setIsChecked] = useState<boolean>(checked); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setIsChecked(e.target.checked); + }, []); + + return <Checkbox {...args} isChecked={isChecked} onChange={handleChange} />; +}; + +const ControlledInput = ({ value: defaultValue, ...args }: InputProps) => { + const [value, setValue] = useState(defaultValue); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setValue(e.target.value); + }, []); + + return <Input {...args} onChange={handleChange} value={value} />; +}; + +const ControlledRadio = ({ + isChecked: checked = false, + ...args +}: RadioProps) => { + const [isChecked, setIsChecked] = useState<boolean>(checked); + + const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { + setIsChecked(e.target.checked); + }, []); + + return <Radio {...args} isChecked={isChecked} onChange={handleChange} />; +}; + +const ControlledTextArea = ({ + value: defaultValue, + ...args +}: TextAreaProps) => { + const [value, setValue] = useState(defaultValue); + + const handleChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => { setValue(e.target.value); }, []); - return ( - <LabelledField - {...args} - field={ - <Input - id={id} - name={id} - onChange={updateValue} - type="text" - value={value} - /> - } - label={<Label htmlFor={id}>A label</Label>} - /> - ); -}; - -/** - * Labelled Field Stories - Left - */ -export const Left = Template.bind({}); -Left.args = { - isInline: true, -}; - -/** - * Labelled Field Stories - Right - */ -export const Right = Template.bind({}); -Right.args = { - isInline: true, - isReversedOrder: true, -}; - -/** - * Labelled Field Stories - Top - */ -export const Top = Template.bind({}); -Top.args = {}; - -/** - * Labelled Field Stories - Bottom - */ -export const Bottom = Template.bind({}); -Bottom.args = { - isReversedOrder: true, + return <TextArea {...args} onChange={handleChange} value={value} />; +}; + +export const Default: Story = { + args: { + field: ( + <ControlledInput id="default-field" name="default-field" type="text" /> + ), + label: <Label>A field label</Label>, + }, +}; + +export const LabelledCheckbox: Story = { + name: 'Field: Checkbox', + args: { + ...Default.args, + field: ( + <ControlledCheckbox + id="checkbox-field" + name="checkbox-field" + value="checkbox-field" + /> + ), + }, +}; + +export const LabelledRadio: Story = { + name: 'Field: Radio', + args: { + ...Default.args, + field: ( + <ControlledRadio + id="radio-field" + name="radio-field" + value="radio-field" + /> + ), + }, +}; + +export const LabelledDateField: Story = { + name: 'Field: Date', + args: { + ...Default.args, + field: <ControlledInput id="date-field" name="date-field" type="date" />, + }, +}; + +export const LabelledDateTimeField: Story = { + name: 'Field: Datetime', + args: { + ...Default.args, + field: ( + <ControlledInput + id="datetime-field" + name="datetime-field" + type="datetime-local" + /> + ), + }, +}; + +export const LabelledEmailField: Story = { + name: 'Field: Email', + args: { + ...Default.args, + field: <ControlledInput id="email-field" name="email-field" type="email" />, + }, +}; + +export const LabelledMonthField: Story = { + name: 'Field: Month', + args: { + ...Default.args, + field: <ControlledInput id="month-field" name="month-field" type="month" />, + }, +}; + +export const LabelledNumberField: Story = { + name: 'Field: Number', + args: { + ...Default.args, + field: ( + <ControlledInput id="number-field" name="number-field" type="number" /> + ), + }, +}; + +export const LabelledPasswordField: Story = { + name: 'Field: Password', + args: { + ...Default.args, + field: ( + <ControlledInput + id="password-field" + name="password-field" + type="password" + /> + ), + }, +}; + +export const LabelledSearchField: Story = { + name: 'Field: Search', + args: { + ...Default.args, + field: ( + <ControlledInput id="search-field" name="search-field" type="search" /> + ), + }, +}; + +export const LabelledSelect: Story = { + name: 'Field: Select', + args: { + ...Default.args, + field: ( + <ControlledSelect + id="select-field" + name="select-field" + options={[]} + value="" + /> + ), + }, +}; + +export const LabelledTelField: Story = { + name: 'Field: Tel', + args: { + ...Default.args, + field: <ControlledInput id="tel-field" name="tel-field" type="tel" />, + }, +}; + +export const LabelledTextField: Story = { + name: 'Field: Text', + args: { + ...Default.args, + }, +}; + +export const LabelledTextArea: Story = { + name: 'Field: Textarea', + args: { + ...Default.args, + field: <ControlledTextArea id="textarea-field" name="textarea-field" />, + }, +}; + +export const LabelledTimeField: Story = { + name: 'Field: Time', + args: { + ...Default.args, + field: <ControlledInput id="time-field" name="time-field" type="time" />, + }, +}; + +export const LabelledUrlField: Story = { + name: 'Field: Url', + args: { + ...Default.args, + field: <ControlledInput id="url-field" name="url-field" type="url" />, + }, +}; + +export const LayoutColumn: Story = { + name: 'Layout: Column', + args: { + ...LabelledCheckbox.args, + isInline: false, + }, +}; + +export const LayoutReversedColumn: Story = { + name: 'Layout: Reversed column', + args: { + ...LabelledCheckbox.args, + isInline: false, + isReversedOrder: true, + }, +}; + +export const LayoutRow: Story = { + name: 'Layout: Row', + args: { + ...LabelledCheckbox.args, + isInline: true, + }, +}; + +export const LayoutReversedRow: Story = { + name: 'Layout: Reversed row', + args: { + ...LabelledCheckbox.args, + isInline: true, + isReversedOrder: true, + }, }; diff --git a/src/components/molecules/forms/radio-group/radio-group.stories.tsx b/src/components/molecules/forms/radio-group/radio-group.stories.tsx index 4b92c34..2917efb 100644 --- a/src/components/molecules/forms/radio-group/radio-group.stories.tsx +++ b/src/components/molecules/forms/radio-group/radio-group.stories.tsx @@ -1,55 +1,9 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { type ChangeEventHandler, useCallback, useState } from 'react'; import { Legend } from '../../../atoms'; -import { RadioGroup as RadioGroupComponent } from './radio-group'; -import { getOptions, initialChoice } from './radio-group.fixture'; +import { RadioGroup, type RadioGroupProps } from './radio-group'; -/** - * RadioGroup - Storybook Meta - */ -export default { - title: 'Molecules/Forms', - component: RadioGroupComponent, - args: {}, - argTypes: { - onChange: { - control: { - type: null, - }, - description: 'A callback function to handle selected option change.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - options: { - description: 'An array of radio option object.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - value: { - control: { - type: 'text', - }, - description: 'The default selected option id.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof RadioGroupComponent>; - -const Template: ComponentStory<typeof RadioGroupComponent> = ({ - value, - ...args -}) => { +const ControlledRadioGroup = ({ value, ...props }: RadioGroupProps) => { const [selection, setSelection] = useState(value); const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback( @@ -59,17 +13,83 @@ const Template: ComponentStory<typeof RadioGroupComponent> = ({ [] ); - return ( - <RadioGroupComponent {...args} onSwitch={handleChange} value={selection} /> - ); + return <RadioGroup {...props} onSwitch={handleChange} value={selection} />; }; -/** - * Radio Group Story - */ -export const RadioGroup = Template.bind({}); -RadioGroup.args = { - legend: <Legend>Options:</Legend>, - options: getOptions('group1'), - value: initialChoice, +const meta = { + title: 'Molecules/Forms/Radio Group', + component: RadioGroup, + render: ControlledRadioGroup, +} satisfies Meta<typeof RadioGroup>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + legend: <Legend>Select your preferred option:</Legend>, + name: 'example', + options: [ + { id: 'example-1', label: 'Option 1', value: 'example-1' }, + { id: 'example-2', label: 'Option 2', value: 'example-2' }, + { id: 'example-3', label: 'Option 3', value: 'example-3' }, + ], + }, +}; + +export const Inline: Story = { + args: { + ...Example.args, + isInline: true, + name: 'inline', + options: [ + { id: 'inline-1', label: 'Option 1', value: 'inline-1' }, + { id: 'inline-2', label: 'Option 2', value: 'inline-2' }, + { id: 'inline-3', label: 'Option 3', value: 'inline-3' }, + ], + }, +}; + +export const DisabledGroup: Story = { + args: { + ...Example.args, + isDisabled: true, + name: 'disabled', + options: [ + { id: 'disabled-1', label: 'Option 1', value: 'disabled-1' }, + { id: 'disabled-2', label: 'Option 2', value: 'disabled-2' }, + { id: 'disabled-3', label: 'Option 3', value: 'disabled-3' }, + ], + }, +}; + +export const DisabledOption: Story = { + args: { + ...Example.args, + name: 'disabled-option', + options: [ + { id: 'option-1', label: 'Option 1', value: 'option-1' }, + { + id: 'option-2', + isDisabled: true, + label: 'Option 2', + value: 'option-2', + }, + { id: 'option-3', label: 'Option 3', value: 'option-3' }, + ], + }, +}; + +export const DefaultValue: Story = { + args: { + ...Example.args, + name: 'default-value', + options: [ + { id: 'value-1', label: 'Option 1', value: 'value-1' }, + { id: 'value-2', label: 'Option 2', value: 'value-2' }, + { id: 'value-3', label: 'Option 3', value: 'value-3' }, + ], + value: 'value-2', + }, }; diff --git a/src/components/molecules/forms/switch/switch.stories.tsx b/src/components/molecules/forms/switch/switch.stories.tsx index a88e6ab..9a59b83 100644 --- a/src/components/molecules/forms/switch/switch.stories.tsx +++ b/src/components/molecules/forms/switch/switch.stories.tsx @@ -1,25 +1,14 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { type ChangeEventHandler, useCallback, useState } from 'react'; -import { Legend } from '../../../atoms'; -import { Switch as SwitchComponent, type SwitchOption } from './switch'; - -/** - * Switch - Storybook Meta - */ -export default { - title: 'Molecules/Forms', - component: SwitchComponent, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof SwitchComponent>; - -const Template: ComponentStory<typeof SwitchComponent> = ({ - value, - ...args -}) => { - const [selection, setSelection] = useState(value); - - const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback( +import { Icon } from '../../../atoms'; +import { Switch, type SwitchProps } from './switch'; + +type ControlledSwitchProps = Omit<SwitchProps, 'onSwitch' | 'selectedItem'>; + +const ControlledSwitch = ({ items, ...props }: ControlledSwitchProps) => { + const [selection, setSelection] = useState(items[0].value); + + const handleSwitch: ChangeEventHandler<HTMLInputElement> = useCallback( (e) => { setSelection(e.target.value); }, @@ -27,22 +16,60 @@ const Template: ComponentStory<typeof SwitchComponent> = ({ ); return ( - <SwitchComponent {...args} onSwitch={handleChange} value={selection} /> + <Switch + {...props} + items={items} + onSwitch={handleSwitch} + value={selection} + /> ); }; -const items: [SwitchOption, SwitchOption] = [ - { id: 'option-1', label: 'Choice 1', value: 'option-1' }, - { id: 'option-2', label: 'Choice 2', value: 'option-2' }, -]; - -/** - * Radio Group Story - */ -export const Switch = Template.bind({}); -Switch.args = { - items, - legend: <Legend>Choose the best option:</Legend>, - name: 'example', - value: items[0].value, +const meta = { + title: 'Molecules/Forms/Switch', + component: Switch, + render: ControlledSwitch, +} satisfies Meta<typeof Switch>; + +export default meta; + +type Story = StoryObj<typeof ControlledSwitch>; + +export const Example: Story = { + args: { + items: [ + { id: 'item-1', label: 'Item 1', value: 'item-1' }, + { id: 'item-2', label: 'Item 2', value: 'item-2' }, + ], + name: 'example', + }, +}; + +export const Disabled: Story = { + args: { + isDisabled: true, + items: [ + { id: 'disabled-item-1', label: 'Item 1', value: 'item-1' }, + { id: 'disabled-item-2', label: 'Item 2', value: 'item-2' }, + ], + name: 'disabled', + }, +}; + +export const Icons: Story = { + args: { + items: [ + { + id: 'light-theme', + label: <Icon aria-label="Light theme" shape="sun" size="xs" />, + value: 'light-theme', + }, + { + id: 'dark-theme', + label: <Icon aria-label="Dark theme" shape="moon" size="xs" />, + value: 'dark-theme', + }, + ], + name: 'theme', + }, }; diff --git a/src/components/molecules/grid/grid.stories.tsx b/src/components/molecules/grid/grid.stories.tsx index 4e12af4..69ab2f8 100644 --- a/src/components/molecules/grid/grid.stories.tsx +++ b/src/components/molecules/grid/grid.stories.tsx @@ -1,230 +1,246 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Grid } from './grid'; import { GridItem } from './grid-item'; -export default { - title: 'Molecules/Grid', +const meta = { component: Grid, - argTypes: { - items: { - description: 'The grid items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof Grid>; + title: 'Molecules/Grid', +} satisfies Meta<typeof Grid>; + +export default meta; -const Template: ComponentStory<typeof Grid> = (args) => <Grid {...args} />; +type Story = StoryObj<typeof meta>; -export const Default = Template.bind({}); -Default.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), +export const Example: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + }, }; -export const OneColumn = Template.bind({}); -OneColumn.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - </> - ), - col: 1, - gap: 'sm', +export const OneColumn: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 1, + gap: 'sm', + }, }; -export const TwoColumns = Template.bind({}); -TwoColumns.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - </> - ), - col: 2, - gap: 'sm', +export const TwoColumns: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 2, + gap: 'sm', + }, }; -export const ThreeColumns = Template.bind({}); -ThreeColumns.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - </> - ), - col: 3, - gap: 'sm', +export const ThreeColumns: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 3, + gap: 'sm', + }, }; -export const FixedSize = Template.bind({}); -FixedSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - size: '300px', - gap: 'sm', +export const FixedSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + size: '300px', + gap: 'sm', + }, }; -export const MaxSize = Template.bind({}); -MaxSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMax: '300px', - gap: 'sm', +export const MaxSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMax: '300px', + gap: 'sm', + }, }; -export const MinSize = Template.bind({}); -MinSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMin: '100px', - gap: 'sm', +export const MinSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMin: '100px', + gap: 'sm', + }, }; -export const MinAndMaxSize = Template.bind({}); -MinAndMaxSize.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - sizeMax: '300px', - sizeMin: '100px', - gap: 'sm', +export const MinAndMaxSize: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + sizeMax: '300px', + sizeMin: '100px', + gap: 'sm', + }, }; -export const Fill = Template.bind({}); -Fill.args = { - children: ( - <> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 1 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 2 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 3 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 4 - </GridItem> - <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> - Item 5 - </GridItem> - </> - ), - col: 'auto-fill', - sizeMin: '100px', - gap: 'sm', +export const Fill: Story = { + args: { + children: ( + <> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 1 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 2 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 3 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 4 + </GridItem> + <GridItem style={{ border: '1px solid #000', padding: '1rem' }}> + Item 5 + </GridItem> + </> + ), + col: 'auto-fill', + sizeMin: '100px', + gap: 'sm', + }, }; diff --git a/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx index 43ef150..7e5647c 100644 --- a/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx +++ b/src/components/molecules/images/flipping-logo/flipping-logo.stories.tsx @@ -1,34 +1,27 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { Logo } from '../../../atoms'; -import { FlippingLogo as FlippingLogoComponent } from './flipping-logo'; +import { FlippingLogo } from './flipping-logo'; -/** - * FlippingLogo - Storybook Meta - */ -export default { +const meta = { + component: FlippingLogo, title: 'Molecules/Images/Flipping Logo', - component: FlippingLogoComponent, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof FlippingLogoComponent>; +} satisfies Meta<typeof FlippingLogo>; -const Template: ComponentStory<typeof FlippingLogoComponent> = (args) => ( - <FlippingLogoComponent {...args} /> -); +export default meta; -/** - * FlippingLogo Story - */ -export const FlippingLogo = Template.bind({}); -FlippingLogo.args = { - back: <Logo heading="A logo example" />, - front: ( - <NextImage - alt="A photo example" - height={200} - src="https://picsum.photos/200" - width={200} - /> - ), +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + back: <Logo heading="A logo example" />, + front: ( + <NextImage + alt="A photo example" + height={200} + src="https://picsum.photos/200" + width={200} + /> + ), + }, }; diff --git a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx index 3ddb8f1..9b1596a 100644 --- a/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx +++ b/src/components/molecules/meta-list/meta-item/meta-item.stories.tsx @@ -1,108 +1,79 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Link } from '../../../atoms'; import { MetaItem } from './meta-item'; -/** - * MetaItem - Storybook Meta - */ -export default { - title: 'Molecules/MetaList/Item', +const meta = { component: MetaItem, - argTypes: { - label: { - control: { - type: 'text', - }, - description: 'The item label.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof MetaItem>; + title: 'Molecules/MetaList/Item', +} satisfies Meta<typeof MetaItem>; -const Template: ComponentStory<typeof MetaItem> = (args) => ( - <MetaItem {...args} /> -); +export default meta; -/** - * MetaItem Stories - SingleValue - */ -export const SingleValue = Template.bind({}); -SingleValue.args = { - label: 'Comments', - value: 'No comments', +type Story = StoryObj<typeof meta>; + +export const SingleValue: Story = { + args: { + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValues - */ -export const MultipleValues = Template.bind({}); -MultipleValues.args = { - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValues: Story = { + args: { + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - SingleValueBordered - */ -export const SingleValueBordered = Template.bind({}); -SingleValueBordered.args = { - hasBorderedValues: true, - label: 'Comments', - value: 'No comments', +export const SingleValueBordered: Story = { + args: { + hasBorderedValues: true, + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValuesBordered - */ -export const MultipleValuesBordered = Template.bind({}); -MultipleValuesBordered.args = { - hasBorderedValues: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValuesBordered: Story = { + args: { + hasBorderedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - SingleValueInlined - */ -export const SingleValueInlined = Template.bind({}); -SingleValueInlined.args = { - isInline: true, - label: 'Comments', - value: 'No comments', +export const SingleValueInlined: Story = { + args: { + isInline: true, + label: 'Comments', + value: 'No comments', + }, }; -/** - * MetaItem Stories - MultipleValuesInlined - */ -export const MultipleValuesInlined = Template.bind({}); -MultipleValuesInlined.args = { - isInline: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, - ], +export const MultipleValuesInlined: Story = { + args: { + isInline: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">Tag 2</Link> }, + ], + }, }; -/** - * MetaItem Stories - InlinedValues - */ -export const InlinedValues = Template.bind({}); -InlinedValues.args = { - hasInlinedValues: true, - label: 'Tags', - value: [ - { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, - { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> }, - { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> }, - ], +export const InlinedValues: Story = { + args: { + hasInlinedValues: true, + label: 'Tags', + value: [ + { id: 'tag1', value: <Link href="#tag1">Tag 1</Link> }, + { id: 'tag2', value: <Link href="#tag2">A long tag 2</Link> }, + { id: 'tag3', value: <Link href="#tag3">Tag 3</Link> }, + ], + }, }; diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx index d73c5b9..f6015bd 100644 --- a/src/components/molecules/meta-list/meta-list.stories.tsx +++ b/src/components/molecules/meta-list/meta-list.stories.tsx @@ -1,29 +1,16 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Link } from '../../atoms'; import { MetaItem } from './meta-item'; import { MetaList } from './meta-list'; -/** - * MetaList - Storybook Meta - */ -export default { - title: 'Molecules/MetaList', +const meta = { component: MetaList, - argTypes: { - items: { - description: 'The meta items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta<typeof MetaList>; + title: 'Molecules/MetaList', +} satisfies Meta<typeof MetaList>; -const Template: ComponentStory<typeof MetaList> = (args) => ( - <MetaList {...args} /> -); +export default meta; + +type Story = StoryObj<typeof meta>; const items = [ { id: 'comments', label: 'Comments', value: 'No comments.' }, @@ -53,19 +40,15 @@ const items = [ }, ]; -/** - * MetaList Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), +export const Example: Story = { + args: { + children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), + }, }; -/** - * MetaList Stories - Inlined - */ -export const Inlined = Template.bind({}); -Inlined.args = { - children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), - isInline: true, +export const Inlined: Story = { + args: { + children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />), + isInline: true, + }, }; diff --git a/src/components/molecules/modals/modal/modal.stories.tsx b/src/components/molecules/modals/modal/modal.stories.tsx index 744d21f..d4afc5c 100644 --- a/src/components/molecules/modals/modal/modal.stories.tsx +++ b/src/components/molecules/modals/modal/modal.stories.tsx @@ -1,191 +1,156 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { Heading, Icon } from '../../../atoms'; import { Modal } from './modal'; -/** - * Modals - Storybook Meta - */ -export default { - title: 'Molecules/Modals/Modal', +const meta = { component: Modal, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof Modal>; - -const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />; - -/** - * Modal Stories - Primary - */ -export const Primary = Template.bind({}); -Primary.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', -}; - -/** - * Modal Stories - Primary with close button - */ -export const PrimaryWithCloseBtn = Template.bind({}); -PrimaryWithCloseBtn.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Primary with icon - */ -export const PrimaryWithIcon = Template.bind({}); -PrimaryWithIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with heading - */ -export const PrimaryWithHeading = Template.bind({}); -PrimaryWithHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, -}; - -/** - * Modal Stories - Primary with icon and heading - */ -export const PrimaryWithIconAndHeading = Template.bind({}); -PrimaryWithIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with close button and heading - */ -export const PrimaryWithCloseBtnAndHeading = Template.bind({}); -PrimaryWithCloseBtnAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - heading: <Heading level={3}>Aut provident eum</Heading>, -}; - -/** - * Modal Stories - Primary with close button and icon - */ -export const PrimaryWithCloseBtnAndIcon = Template.bind({}); -PrimaryWithCloseBtnAndIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Primary with close button, icon and heading - */ -export const PrimaryWithCloseBtnIconAndHeading = Template.bind({}); -PrimaryWithCloseBtnIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Secondary - */ -export const Secondary = Template.bind({}); -Secondary.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with close button - */ -export const SecondaryWithCloseBtn = Template.bind({}); -SecondaryWithCloseBtn.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Secondary with heading - */ -export const SecondaryWithHeading = Template.bind({}); -SecondaryWithHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with icon - */ -export const SecondaryWithIcon = Template.bind({}); -SecondaryWithIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - kind: 'secondary', - icon: <Icon aria-hidden shape="help" />, -}; - -/** - * Modal Stories - Secondary with close button and heading - */ -export const SecondaryWithCloseBtnAndHeading = Template.bind({}); -SecondaryWithCloseBtnAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - kind: 'secondary', - closeBtnLabel: 'Close the modal', -}; - -/** - * Modal Stories - Secondary with close button and icon - */ -export const SecondaryWithCloseBtnAndIcon = Template.bind({}); -SecondaryWithCloseBtnAndIcon.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with icon and heading - */ -export const SecondaryWithIconAndHeading = Template.bind({}); -SecondaryWithIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', -}; - -/** - * Modal Stories - Secondary with close button, icon and heading - */ -export const SecondaryWithCloseBtnIconAndHeading = Template.bind({}); -SecondaryWithCloseBtnIconAndHeading.args = { - children: - 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', - heading: <Heading level={3}>Aut provident eum</Heading>, - closeBtnLabel: 'Close the modal', - icon: <Icon aria-hidden shape="help" />, - kind: 'secondary', + title: 'Molecules/Modals/Modal', +} satisfies Meta<typeof Modal>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Primary: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + }, +}; + +export const PrimaryWithCloseBtn: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + }, +}; + +export const PrimaryWithIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + }, +}; + +export const PrimaryWithIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithCloseBtnAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + }, +}; + +export const PrimaryWithCloseBtnAndIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const PrimaryWithCloseBtnIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + }, +}; + +export const Secondary: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtn: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + kind: 'secondary', + }, +}; + +export const SecondaryWithHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + kind: 'secondary', + }, +}; + +export const SecondaryWithIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnAndIcon: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, +}; + +export const SecondaryWithCloseBtnIconAndHeading: Story = { + args: { + children: + 'Sed atque molestiae voluptatem possimus nisi recusandae qui assumenda. Quia rerum sed. Et autem impedit ut nam impedit. Quam ex facere pariatur est. Voluptatem hic beatae asperiores suscipit. Accusamus dolorum fugit placeat alias vel tenetur. Expedita fuga quos ipsum cum ea est expedita quia eaque.', + closeBtnLabel: 'Close the modal', + heading: <Heading level={3}>Aut provident eum</Heading>, + icon: <Icon aria-hidden shape="help" />, + kind: 'secondary', + }, }; diff --git a/src/components/molecules/modals/tooltip/tooltip.stories.tsx b/src/components/molecules/modals/tooltip/tooltip.stories.tsx index 0cff339..d128f51 100644 --- a/src/components/molecules/modals/tooltip/tooltip.stories.tsx +++ b/src/components/molecules/modals/tooltip/tooltip.stories.tsx @@ -1,22 +1,12 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { useBoolean } from '../../../../utils/hooks'; -import { Tooltip } from './tooltip'; +import { Tooltip, type TooltipProps } from './tooltip'; -/** - * Switch - Storybook Meta - */ -export default { - title: 'Molecules/Modals/Tooltip', - component: Tooltip, - args: {}, - argTypes: {}, -} as ComponentMeta<typeof Tooltip>; - -const Template: ComponentStory<typeof Tooltip> = ({ +const ControlledTooltip = ({ isOpen, onToggle: _onToggle, ...args -}) => { +}: TooltipProps) => { const { deactivate, state: isOpened, toggle } = useBoolean(isOpen); return ( @@ -31,13 +21,21 @@ const Template: ComponentStory<typeof Tooltip> = ({ ); }; -/** - * Tooltip Stories - Example - */ -export const Example = Template.bind({}); -Example.args = { - children: - 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', - heading: 'A title', - isOpen: false, +const meta = { + component: Tooltip, + title: 'Molecules/Modals/Tooltip', + render: ControlledTooltip, +} satisfies Meta<typeof Tooltip>; + +export default meta; + +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + children: + 'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.', + heading: 'A title', + isOpen: false, + }, }; 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', + }, }; |