refactor(components): rewrite DescriptionList component

* add a `spacing` prop
* replace `layout` prop with `isInline` prop
* remove `items` prop (and classNames props) in favor of new components:
Description, Group, Term
* remove `withSeparator` prop (CSS content is announced by screen readers
and Firefox/Safari have no support for alternative text so the consumer
should add itself an element with `aria-hidden` if it need a separator)

Be aware, Meta component and its consumers can be visually broken, they
should be refactored before using them in production.

1 files changed, 5 insertions, 29 deletions

diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index 50ed252..6faa265 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,7 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import descriptionListItemStories from '../../atoms/lists/description-list-group.stories';
-import descriptionListStories from '../../atoms/lists/description-list.stories';
-import { Meta as MetaComponent, MetaData } from './meta';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta as MetaComponent, type MetaData } from './meta';
 
 /**
  * Meta - Storybook Meta
@@ -9,12 +7,8 @@ import { Meta as MetaComponent, MetaData } from './meta';
 export default {
   title: 'Molecules/Layout',
   component: MetaComponent,
-  args: {
-    itemsLayout: 'inline-values',
-    withSeparator: false,
-  },
+  args: {},
   argTypes: {
-    className: descriptionListStories.argTypes?.className,
     data: {
       description: 'The page metadata.',
       type: {
@@ -23,24 +17,6 @@ export default {
         value: {},
       },
     },
-    groupClassName: descriptionListStories.argTypes?.groupClassName,
-    itemsLayout: {
-      ...descriptionListItemStories.argTypes?.layout,
-      table: {
-        ...descriptionListItemStories.argTypes?.layout?.table,
-        defaultValue: { summary: 'inline-values' },
-      },
-    },
-    labelClassName: descriptionListStories.argTypes?.labelClassName,
-    layout: descriptionListStories.argTypes?.layout,
-    valueClassName: descriptionListStories.argTypes?.valueClassName,
-    withSeparator: {
-      ...descriptionListStories.argTypes?.withSeparator,
-      table: {
-        ...descriptionListStories.argTypes?.withSeparator?.table,
-        defaultValue: { summary: true },
-      },
-    },
   },
 } as ComponentMeta<typeof MetaComponent>;
 
@@ -51,10 +27,10 @@ const Template: ComponentStory<typeof MetaComponent> = (args) => (
 const data: MetaData = {
   publication: { date: '2022-04-09', time: '01:04:00' },
   thematics: [
-    <a key="category1" href="#">
+    <a key="category1" href="#a">
       Category 1
     </a>,
-    <a key="category2" href="#">
+    <a key="category2" href="#b">
       Category 2
     </a>,
   ],