diff options
Diffstat (limited to 'src/components/organisms/post-preview')
| -rw-r--r-- | src/components/organisms/post-preview/post-preview.stories.tsx | 204 |
1 files changed, 63 insertions, 141 deletions
diff --git a/src/components/organisms/post-preview/post-preview.stories.tsx b/src/components/organisms/post-preview/post-preview.stories.tsx index c22698f..e7edfdb 100644 --- a/src/components/organisms/post-preview/post-preview.stories.tsx +++ b/src/components/organisms/post-preview/post-preview.stories.tsx @@ -1,157 +1,79 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import NextImage from 'next/image'; import { PostPreview } from './post-preview'; -/** - * PostPreview - Storybook Meta - */ -export default { - title: 'Organisms/PostPreview', +const meta = { component: PostPreview, - argTypes: { - cover: { - description: 'The cover data.', - table: { - category: 'Options', - }, - type: { - name: 'object', - required: false, - value: {}, - }, - }, - excerpt: { - control: { - type: 'text', - }, - description: 'The page excerpt.', - type: { - name: 'string', - required: true, - }, - }, - meta: { - description: 'The page metadata.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - heading: { - control: { - type: 'text', - }, - description: 'The page title', - type: { - name: 'string', - required: true, - }, - }, - headingLvl: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The page title level (hn)', - table: { - category: 'Options', - defaultValue: { summary: 2 }, - }, - type: { - name: 'number', - required: false, - }, - }, - url: { - control: { - type: 'text', - }, - description: 'The page url.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta<typeof PostPreview>; + title: 'Organisms/PostPreview', +} satisfies Meta<typeof PostPreview>; -const Template: ComponentStory<typeof PostPreview> = (args) => ( - <PostPreview {...args} /> -); +export default meta; -/** - * PostPreview Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +type Story = StoryObj<typeof meta>; + +export const Example: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithCover - */ -export const WithCover = Template.bind({}); -WithCover.args = { - cover: ( - <NextImage - alt="" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - url: '#post', +export const WithCover: Story = { + args: { + cover: ( + <NextImage + alt="" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + url: '#post', + }, }; -/** - * PostPreview Stories - WithMeta - */ -export const WithMeta = Template.bind({}); -WithMeta.args = { - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - wordsCount: 300, +export const WithMeta: Story = { + args: { + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + wordsCount: 300, + }, + url: '#post', }, - url: '#post', }; -/** - * PostPreview Stories - WithCoverAndMeta - */ -export const WithCoverAndMeta = Template.bind({}); -WithCoverAndMeta.args = { - cover: ( - <NextImage - alt="" - height={480} - src="https://picsum.photos/640/480" - width={640} - /> - ), - excerpt: - 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', - heading: 'The post title', - meta: { - publicationDate: '06/11/2023', - wordsCount: 300, - thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], - comments: { - count: 3, - postHeading: 'The post title', - url: '#comments', +export const WithCoverAndMeta: Story = { + args: { + cover: ( + <NextImage + alt="" + height={480} + src="https://picsum.photos/640/480" + width={640} + /> + ), + excerpt: + 'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.', + heading: 'The post title', + meta: { + publicationDate: '06/11/2023', + wordsCount: 300, + thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }], + comments: { + count: 3, + postHeading: 'The post title', + url: '#comments', + }, }, + url: '#post', }, - url: '#post', }; |
