From 0f936ec0e7606cb79434d94096b6e113a7ce78eb Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 15 Dec 2023 18:35:16 +0100 Subject: refactor(stories): migrate stories to CSF3 format --- src/components/molecules/grid/grid.stories.tsx | 430 +++++++++++++------------ 1 file changed, 223 insertions(+), 207 deletions(-) (limited to 'src/components/molecules/grid/grid.stories.tsx') 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; + title: 'Molecules/Grid', +} satisfies Meta; + +export default meta; -const Template: ComponentStory = (args) => ; +type Story = StoryObj; -export const Default = Template.bind({}); -Default.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), +export const Example: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + }, }; -export const OneColumn = Template.bind({}); -OneColumn.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - ), - col: 1, - gap: 'sm', +export const OneColumn: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + col: 1, + gap: 'sm', + }, }; -export const TwoColumns = Template.bind({}); -TwoColumns.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - ), - col: 2, - gap: 'sm', +export const TwoColumns: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + col: 2, + gap: 'sm', + }, }; -export const ThreeColumns = Template.bind({}); -ThreeColumns.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - ), - col: 3, - gap: 'sm', +export const ThreeColumns: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + col: 3, + gap: 'sm', + }, }; -export const FixedSize = Template.bind({}); -FixedSize.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), - size: '300px', - gap: 'sm', +export const FixedSize: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + size: '300px', + gap: 'sm', + }, }; -export const MaxSize = Template.bind({}); -MaxSize.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), - sizeMax: '300px', - gap: 'sm', +export const MaxSize: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + sizeMax: '300px', + gap: 'sm', + }, }; -export const MinSize = Template.bind({}); -MinSize.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), - sizeMin: '100px', - gap: 'sm', +export const MinSize: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + sizeMin: '100px', + gap: 'sm', + }, }; -export const MinAndMaxSize = Template.bind({}); -MinAndMaxSize.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), - sizeMax: '300px', - sizeMin: '100px', - gap: 'sm', +export const MinAndMaxSize: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + sizeMax: '300px', + sizeMin: '100px', + gap: 'sm', + }, }; -export const Fill = Template.bind({}); -Fill.args = { - children: ( - <> - - Item 1 - - - Item 2 - - - Item 3 - - - Item 4 - - - Item 5 - - - ), - col: 'auto-fill', - sizeMin: '100px', - gap: 'sm', +export const Fill: Story = { + args: { + children: ( + <> + + Item 1 + + + Item 2 + + + Item 3 + + + Item 4 + + + Item 5 + + + ), + col: 'auto-fill', + sizeMin: '100px', + gap: 'sm', + }, }; -- cgit v1.2.3