diff options
Diffstat (limited to 'src/components/molecules/card')
| -rw-r--r-- | src/components/molecules/card/card.stories.tsx | 871 |
1 files changed, 440 insertions, 431 deletions
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> + ), + }, }; |