diff options
Diffstat (limited to 'src/components/molecules/layout/card.stories.tsx')
| -rw-r--r-- | src/components/molecules/layout/card.stories.tsx | 69 |
1 files changed, 60 insertions, 9 deletions
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx index a07f8dc..ed78d00 100644 --- a/src/components/molecules/layout/card.stories.tsx +++ b/src/components/molecules/layout/card.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import CardComponent from './card'; +import Card from './card'; +/** + * Card - Storybook Meta + */ export default { - title: 'Molecules/Layout', - component: CardComponent, + title: 'Molecules/Layout/Card', + component: Card, argTypes: { cover: { description: 'The card cover data (src, dimensions, alternative text).', @@ -53,6 +56,8 @@ export default { titleLevel: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The title level.', type: { @@ -71,17 +76,16 @@ export default { }, }, }, -} as ComponentMeta<typeof CardComponent>; +} as ComponentMeta<typeof Card>; -const Template: ComponentStory<typeof CardComponent> = (args) => ( - <CardComponent {...args} /> -); +const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />; const cover = { alt: 'A picture', height: 480, src: 'http://placeimg.com/640/480', width: 640, + unoptimized: true, }; const meta = [ @@ -92,10 +96,57 @@ const meta = [ }, ]; -export const Card = Template.bind({}); -Card.args = { +/** + * Card Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { + cover, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With meta + */ +export const WithMeta = Template.bind({}); +WithMeta.args = { + meta, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With tagline + */ +export const WithTagline = Template.bind({}); +WithTagline.args = { + tagline: 'Ullam accusantium ipsa', + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With all data + */ +export const WithAll = Template.bind({}); +WithAll.args = { cover, meta, + tagline: 'Ullam accusantium ipsa', title: 'Veritatis dicta quod', titleLevel: 2, url: '#', |
