2 files changed, 377 insertions, 313 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',
+  },
 };
diff --git a/src/components/atoms/lists/list/list.stories.tsx b/src/components/atoms/lists/list/list.stories.tsx
index 538947a..6e7d254 100644
--- a/src/components/atoms/lists/list/list.stories.tsx
+++ b/src/components/atoms/lists/list/list.stories.tsx
@@ -1,196 +1,140 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { List, type ListProps } from './list';
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './list';
 import { ListItem } from './list-item';
 
-/**
- * List - Storybook Meta
- */
-export default {
-  title: 'Atoms/Lists',
+const meta = {
   component: List,
-  args: {},
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the list wrapper',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof List>;
+  title: 'Atoms/Lists/List',
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: ComponentStory<typeof List> = <
-  O extends boolean,
-  H extends boolean,
->(
-  args: ListProps<O, H>
-) => <List {...args} />;
+export const Default: Story = {
+  args: {
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
+};
 
-/**
- * List Stories - Hierarchical list
- */
-export const Hierarchical = Template.bind({});
-Hierarchical.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isHierarchical isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isHierarchical isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isHierarchical: true,
+export const OrderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: true,
+  },
 };
 
-/**
- * List Stories - Ordered list
- */
-export const Ordered = Template.bind({});
-Ordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List isOrdered>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
-  isOrdered: true,
+export const UnorderedList: Story = {
+  args: {
+    ...Default.args,
+    isOrdered: false,
+  },
 };
 
-/**
- * List Stories - Unordered list
- */
-export const Unordered = Template.bind({});
-Unordered.args = {
-  children: [
-    <ListItem key="item-1">
-      Item 1
-      <List>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>Subitem 2</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-2">
-      Item 2
-      <List isOrdered>
-        <ListItem>Subitem 1</ListItem>
-        <ListItem>
-          Subitem 2
-          <List>
-            <ListItem>Nested item 1</ListItem>
-            <ListItem>Nested item 2</ListItem>
-          </List>
-        </ListItem>
-        <ListItem>Subitem 3</ListItem>
-      </List>
-    </ListItem>,
-    <ListItem key="item-3">Item 3</ListItem>,
-  ],
+export const Nested: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isOrdered>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+          <ListItem>
+            Nested item 3
+            <List>
+              <ListItem>Deeper item 1</ListItem>
+              <ListItem>Deeper item 2</ListItem>
+              <ListItem>Deeper item 3</ListItem>
+            </List>
+          </ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isOrdered: false,
+  },
 };
 
-const items = [
-  { id: 'item-1', label: 'Item 1' },
-  { id: 'item-2', label: 'Item 2' },
-  {
-    id: 'item-3',
-    label: (
-      <>
-        Item 3
-        <List>
+export const HierarchicalList: Story = {
+  args: {
+    ...OrderedList.args,
+    children: [
+      <ListItem key="item-1">
+        Item 1
+        <List isHierarchical isOrdered>
           <ListItem>Subitem 1</ListItem>
           <ListItem>Subitem 2</ListItem>
         </List>
-      </>
-    ),
+      </ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List isHierarchical isOrdered>
+          <ListItem>Subitem 1</ListItem>
+          <ListItem>
+            Subitem 2
+            <List isHierarchical isOrdered>
+              <ListItem>Nested item 1</ListItem>
+              <ListItem>Nested item 2</ListItem>
+            </List>
+          </ListItem>
+          <ListItem>Subitem 3</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    isHierarchical: true,
   },
-  { id: 'item-4', label: 'Item 4' },
-  { id: 'item-5', label: 'Item 5' },
-];
+};
 
-/**
- * List Stories - Inline and ordered list
- */
-export const InlineOrdered = Template.bind({});
-InlineOrdered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  isOrdered: true,
-  spacing: 'sm',
+export const WithMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: false,
+  },
 };
 
-/**
- * List Stories - Inline and unordered list
- */
-export const InlineUnordered = Template.bind({});
-InlineUnordered.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  isInline: true,
-  spacing: 'sm',
+export const WithoutMarker: Story = {
+  args: {
+    ...Default.args,
+    hideMarker: true,
+  },
 };
 
-/**
- * List Stories - Ordered list without marker
- */
-export const OrderedHideMarker = Template.bind({});
-OrderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
-  isOrdered: true,
+export const InlineList: Story = {
+  args: {
+    ...Default.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="sep-1">{'>'}</ListItem>,
+      <ListItem key="item-2">Item 2</ListItem>,
+      <ListItem key="sep-2">{'>'}</ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+    hideMarker: true,
+    isInline: true,
+    spacing: 'xs',
+  },
 };
 
-/**
- * List Stories - Unordered list without marker
- */
-export const UnorderedHideMarker = Template.bind({});
-UnorderedHideMarker.args = {
-  children: items.map((item) => (
-    <ListItem key={item.id}>{item.label}</ListItem>
-  )),
-  hideMarker: true,
+export const ListInInlineList: Story = {
+  args: {
+    ...InlineList.args,
+    children: [
+      <ListItem key="item-1">Item 1</ListItem>,
+      <ListItem key="item-2">
+        Item 2
+        <List>
+          <ListItem>Nested item 1</ListItem>
+          <ListItem>Nested item 2</ListItem>
+        </List>
+      </ListItem>,
+      <ListItem key="item-3">Item 3</ListItem>,
+    ],
+  },
 };