From c153f93dc8691a71dc76aad3dd618298da9d238a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 17 Oct 2023 19:46:08 +0200 Subject: refactor(components): rewrite Card component * make the component more generic * merge `` and `` styles into card component to avoid repeating the same structure * remove most of the props to use composition However the CSS is a bit complex because of the two variants... Also, the component should be refactored when the CSS pseudo-class `:has` has enough support: the provider and the `cover` and `meta` props should be removed. --- src/components/molecules/card/card.stories.tsx | 545 +++++++++++++++++++++++++ 1 file changed, 545 insertions(+) create mode 100644 src/components/molecules/card/card.stories.tsx (limited to 'src/components/molecules/card/card.stories.tsx') diff --git a/src/components/molecules/card/card.stories.tsx b/src/components/molecules/card/card.stories.tsx new file mode 100644 index 0000000..74f426c --- /dev/null +++ b/src/components/molecules/card/card.stories.tsx @@ -0,0 +1,545 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import NextImage from 'next/image'; +import { Button, ButtonLink, Link, Time } from '../../atoms'; +import { Card, type CardProps } from './card'; +import { CardActions } from './card-actions'; +import { CardBody } from './card-body'; +import { CardCover } from './card-cover'; +import { CardFooter } from './card-footer'; +import { CardHeader } from './card-header'; +import { CardMeta } from './card-meta'; +import { CardTitle } from './card-title'; + +/** + * Card - Storybook Meta + */ +export default { + title: 'Molecules/Card', + component: Card, + argTypes: {}, +} as ComponentMeta; + +const Template: ComponentStory = ( + args: CardProps +) => ; + +/** + * Card Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + children: 'The card contents.', +}; + +/** + * Card Stories - AsLink + */ +export const AsLink = Template.bind({}); +AsLink.args = { + 'aria-label': 'Learn more about this card', + children: 'The card contents.', + linkTo: '#card', +}; + +export const HeaderCover = Template.bind({}); +HeaderCover.args = { + children: , + cover: ( + + + + ), +}; + +export const HeaderTitle = Template.bind({}); +HeaderTitle.args = { + children: ( + + The card title + + ), +}; + +export const HeaderMeta = Template.bind({}); +HeaderMeta.args = { + children: ( + + , + }, + ]} + /> + + ), +}; + +export const BodyContents = Template.bind({}); +BodyContents.args = { + children: The card contents, +}; + +export const FooterActions = Template.bind({}); +FooterActions.args = { + children: ( + + + Read more + + + + ), +}; + +export const FooterMeta = Template.bind({}); +FooterMeta.args = { + children: , + meta: ( + Category 1 }, + { id: 'cat-2', value: Category 2 }, + ], + }, + { + id: 'tags', + label: 'Tags:', + value: [ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ], + }, + ]} + /> + ), +}; + +export const CompositionCoverTitle = Template.bind({}); +CompositionCoverTitle.args = { + children: ( + + The card title + + ), + cover: ( + + + + ), +}; + +export const CompositionTitleMeta = Template.bind({}); +CompositionTitleMeta.args = { + children: ( + + The card title + , + }, + ]} + /> + + ), +}; + +export const CompositionCoverTitleMeta = Template.bind({}); +CompositionCoverTitleMeta.args = { + children: ( + + The card title + , + }, + ]} + /> + + ), + cover: ( + + + + ), +}; + +export const CompositionTitleBody = Template.bind({}); +CompositionTitleBody.args = { + children: ( + <> + + The card title + + + 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. + + + ), +}; + +export const CompositionCoverTitleBody = Template.bind({}); +CompositionCoverTitleBody.args = { + children: ( + <> + + The card title + + + 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. + + + ), + cover: ( + + + + ), +}; + +export const CompositionTitleMetaBody = Template.bind({}); +CompositionTitleMetaBody.args = { + children: ( + <> + + The card title + , + }, + ]} + /> + + + 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. + + + ), +}; + +export const CompositionCoverTitleMetaBody = Template.bind({}); +CompositionCoverTitleMetaBody.args = { + children: ( + <> + + The card title + , + }, + ]} + /> + + + 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. + + + ), + cover: ( + + + + ), +}; + +export const CompositionTitleActions = Template.bind({}); +CompositionTitleActions.args = { + children: ( + <> + + The card title + + + + Read more + + + + + ), +}; + +export const CompositionCoverTitleActions = Template.bind({}); +CompositionCoverTitleActions.args = { + children: ( + <> + + The card title + + + + Read more + + + + + ), + cover: ( + + + + ), +}; + +export const CompositionTitleBodyActions = Template.bind({}); +CompositionTitleBodyActions.args = { + children: ( + <> + + The card title + + + 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. + + + + Read more + + + + + ), +}; + +export const CompositionTitleBodyActionsMeta = Template.bind({}); +CompositionTitleBodyActionsMeta.args = { + children: ( + <> + + The card title + + + 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. + + + + Read more + + + + + ), + meta: ( + Category 1 }, + { id: 'cat-2', value: Category 2 }, + ], + }, + { + id: 'tags', + label: 'Tags:', + value: [ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ], + }, + ]} + /> + ), +}; + +export const CompositionCoverTitleBodyActionsMeta = Template.bind({}); +CompositionCoverTitleBodyActionsMeta.args = { + children: ( + <> + + The card title + + + 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. + + + + Read more + + + + + ), + cover: ( + + + + ), + meta: ( + Category 1 }, + { id: 'cat-2', value: Category 2 }, + ], + }, + { + id: 'tags', + label: 'Tags:', + value: [ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ], + }, + ]} + /> + ), +}; + +export const CompositionAllContents = Template.bind({}); +CompositionAllContents.args = { + children: ( + <> + + The card title + , + }, + ]} + /> + + + 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. + + + + Read more + + + + + ), + cover: ( + + + + ), + meta: ( + Category 1 }, + { id: 'cat-2', value: Category 2 }, + ], + }, + { + id: 'tags', + label: 'Tags:', + value: [ + { id: 'tag-1', value: 'Tag 1' }, + { id: 'tag-2', value: 'Tag 2' }, + { id: 'tag-3', value: 'Tag 3' }, + ], + }, + ]} + /> + ), +}; -- cgit v1.2.3