refactor(stories): migrate stories to CSF3 format

1 files changed, 260 insertions, 140 deletions

diff --git a/src/components/atoms/lists/description-list/description-list.stories.tsx b/src/components/atoms/lists/description-list/description-list.stories.tsx
index d051fcd..65efc28 100644
--- a/src/components/atoms/lists/description-list/description-list.stories.tsx
+++ b/src/components/atoms/lists/description-list/description-list.stories.tsx
@@ -1,150 +1,270 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Description } from './description';
 import { DescriptionList } from './description-list';
 import { Group } from './group';
 import { Term } from './term';
 
-/**
- * DescriptionList - Storybook Meta
- */
-export default {
-  title: 'Atoms/Lists/DescriptionList',
+const meta = {
   component: DescriptionList,
+  title: 'Atoms/Lists/Description List',
+} satisfies Meta<typeof DescriptionList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Default: Story = {
+  args: {
+    children: [
+      <Term key="term">A term</Term>,
+      <Description key="description">A description of the term.</Description>,
+    ],
+  },
+};
+
+export const SingleTermSingleDescription: Story = {
+  args: {
+    ...Default.args,
+  },
+};
+
+export const MultipleTermsSingleDescription: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">First term</Term>,
+      <Term key="term-2">Second term</Term>,
+      <Term key="term-3">Third term</Term>,
+      <Description key="description-1">Description of the terms</Description>,
+    ],
+  },
+};
+
+export const SingleTermMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">A term</Term>,
+      <Description key="description-1">
+        First description of the term
+      </Description>,
+      <Description key="description-2">
+        Second description of the term
+      </Description>,
+      <Description key="description-3">
+        Third description of the term
+      </Description>,
+    ],
+  },
+};
+
+export const MultipleTermsMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term-1">First term</Term>,
+      <Description key="description-1">
+        Description of the first term
+      </Description>,
+      <Term key="term-2">Second term</Term>,
+      <Term key="term-2-alternative">Alternative of second term</Term>,
+      <Description key="description-2">
+        Description of the second term
+      </Description>,
+      <Term key="term-3">Third term</Term>,
+      <Description key="first-description-3">
+        First description of the third term
+      </Description>,
+      <Description key="second-description-3">
+        Second description of the third term
+      </Description>,
+    ],
+  },
+};
+
+export const GroupOfMultipleTermsMultipleDescriptions: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group-1">
+        <Term>First term</Term>
+        <Description>Description of the first term</Description>
+      </Group>,
+      <Group key="group-2">
+        <Term>Second term</Term>
+        <Term>Alternative of second term</Term>
+        <Description>Description of the second term</Description>
+      </Group>,
+      <Group key="group-3">
+        <Term>Third term</Term>
+        <Description>First description of the third term</Description>
+        <Description>Second description of the third term</Description>
+      </Group>,
+    ],
+  },
+};
+
+export const SpacingXXSWithoutGroup: Story = {
+  name: 'Spacing: Double extra-small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: '2xs',
+  },
+};
+
+export const SpacingXSWithoutGroup: Story = {
+  name: 'Spacing: Extra-small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'xs',
+  },
+};
+
+export const SpacingSMWithoutGroup: Story = {
+  name: 'Spacing: Small (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'sm',
+  },
+};
+
+export const SpacingMDWithoutGroup: Story = {
+  name: 'Spacing: Medium (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'md',
+  },
+};
+
+export const SpacingLGWithoutGroup: Story = {
+  name: 'Spacing: Large (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'lg',
+  },
+};
+
+export const SpacingXLWithoutGroup: Story = {
+  name: 'Spacing: Extra-large (without group)',
   args: {
-    isInline: false,
-  },
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof DescriptionList>;
-
-const Template: ComponentStory<typeof DescriptionList> = (args) => (
-  <DescriptionList {...args} />
-);
-
-/**
- * Description List Stories - Single term, single description
- */
-export const SingleTermSingleDescription = Template.bind({});
-SingleTermSingleDescription.args = {
-  children: (
-    <>
-      <Term>A term</Term>
-      <Description>A description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Multiple terms, single description
- */
-export const MultipleTermsSingleDescription = Template.bind({});
-MultipleTermsSingleDescription.args = {
-  children: (
-    <>
-      <Term>A first term</Term>
-      <Term>A second term</Term>
-      <Term>A third term</Term>
-      <Description>A description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Single term, multiple descriptions
- */
-export const SingleTermMultipleDescriptions = Template.bind({});
-SingleTermMultipleDescriptions.args = {
-  children: (
-    <>
-      <Term>A term</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Multiple terms, multiple descriptions
- */
-export const MultipleTermsMultipleDescriptions = Template.bind({});
-MultipleTermsMultipleDescriptions.args = {
-  children: (
-    <>
-      <Term>A first term</Term>
-      <Term>A second term</Term>
-      <Term>A third term</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Group of terms & descriptions
- */
-export const GroupOfTermsDescriptions = Template.bind({});
-GroupOfTermsDescriptions.args = {
-  children: (
-    <>
-      <Group>
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: 'xl',
+  },
+};
+
+export const SpacingXXLWithoutGroup: Story = {
+  name: 'Spacing: Double extra-large (without group)',
+  args: {
+    ...MultipleTermsMultipleDescriptions.args,
+    spacing: '2xl',
+  },
+};
+
+export const SpacingXXSWithGroup: Story = {
+  name: 'Spacing: Double extra-small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: '2xs',
+  },
+};
+
+export const SpacingXSWithGroup: Story = {
+  name: 'Spacing: Extra-small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'xs',
+  },
+};
+
+export const SpacingSMWithGroup: Story = {
+  name: 'Spacing: Small (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'sm',
+  },
+};
+
+export const SpacingMDWithGroup: Story = {
+  name: 'Spacing: Medium (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'md',
+  },
+};
+
+export const SpacingLGWithGroup: Story = {
+  name: 'Spacing: Large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'lg',
+  },
+};
+
+export const SpacingXLWithGroup: Story = {
+  name: 'Spacing: Extra-large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: 'xl',
+  },
+};
+
+export const SpacingXXLWithGroup: Story = {
+  name: 'Spacing: Double extra-large (with group)',
+  args: {
+    ...GroupOfMultipleTermsMultipleDescriptions.args,
+    spacing: '2xl',
+  },
+};
+
+export const InlinedWithoutGroups: Story = {
+  name: 'Alignment: inlined without groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Term key="term1">A term</Term>,
+      <Description key="description1">A description.</Description>,
+      <Term key="term2">Another term</Term>,
+      <Description key="description2">Another description.</Description>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
+};
+
+export const InlinedWithGroups: Story = {
+  name: 'Alignment: inlined with groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group1">
         <Term>A term</Term>
-        <Description>A description of the term.</Description>
-      </Group>
-      <Group>
+        <Description>A description.</Description>
+      </Group>,
+      <Group key="group2">
         <Term>Another term</Term>
-        <Description>A description of the other term.</Description>
-      </Group>
-    </>
-  ),
-};
-
-/**
- * Description List Stories - Inlined list of term and descriptions
- */
-export const InlinedList = Template.bind({});
-InlinedList.args = {
-  children: (
-    <>
-      <Term>A term:</Term>
-      <Description>A first description of the term.</Description>
-      <Description>A second description of the term.</Description>
-      <Description>A third description of the term.</Description>
-    </>
-  ),
-  isInline: true,
-  spacing: 'xs',
-};
-
-/**
- * Description List Stories - Inlined group of terms & descriptions
- */
-export const InlinedGroupOfTermsDescriptions = Template.bind({});
-InlinedGroupOfTermsDescriptions.args = {
-  children: (
-    <>
-      <Group isInline spacing="2xs">
-        <Term>A term:</Term>
-        <Description>A description of the term.</Description>
-      </Group>
-      <Group isInline spacing="2xs">
-        <Term>Another term:</Term>
-        <Description>A description of the other term.</Description>
-      </Group>
-    </>
-  ),
+        <Description>Another description.</Description>
+      </Group>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
+};
+
+export const InlinedWithInlinedGroups: Story = {
+  name: 'Alignment: inlined with inlined groups',
+  args: {
+    ...Default.args,
+    children: [
+      <Group key="group1" isInline spacing="xs">
+        <Term>A term</Term>
+        <Description>A description.</Description>
+      </Group>,
+      <Group key="group2" isInline spacing="xs">
+        <Term>Another term</Term>
+        <Description>Another description.</Description>
+      </Group>,
+    ],
+    isInline: true,
+    spacing: 'xs',
+  },
 };