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, 70 insertions, 0 deletions

diff --git a/src/components/atoms/lists/description-list/description-list.test.tsx b/src/components/atoms/lists/description-list/description-list.test.tsx
new file mode 100644
index 0000000..3f9a1b5
--- /dev/null
+++ b/src/components/atoms/lists/description-list/description-list.test.tsx
@@ -0,0 +1,70 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Description } from './description';
+import { DescriptionList } from './description-list';
+import { Group } from './group';
+import { Term } from './term';
+
+describe('DescriptionList', () => {
+  it('renders a list of terms and description', () => {
+    const term = 'A term';
+    const desc = 'A description of the term.';
+
+    render(
+      <DescriptionList>
+        <Term>{term}</Term>
+        <Description>{desc}</Description>
+      </DescriptionList>
+    );
+
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(desc);
+    expect(rtlScreen.getByRole('term')).toHaveTextContent(term);
+  });
+
+  it('can renders a list of terms and description wrapped in a div', () => {
+    const term = 'A term';
+    const desc = 'A description of the term.';
+
+    render(
+      <DescriptionList>
+        <Group>
+          <Term>{term}</Term>
+          <Description>{desc}</Description>
+        </Group>
+      </DescriptionList>
+    );
+
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(desc);
+    expect(rtlScreen.getByRole('term')).toHaveTextContent(term);
+  });
+
+  it('can render terms and description inlined', () => {
+    const term = 'A term';
+    const desc = 'A description of the term.';
+
+    render(
+      <DescriptionList isInline>
+        <Term>{term}</Term>
+        <Description>{desc}</Description>
+      </DescriptionList>
+    );
+
+    const list = rtlScreen.getByRole('term').parentElement;
+    expect(list).toHaveClass('list--inline');
+  });
+
+  it('can render terms and description stacked', () => {
+    const term = 'A term';
+    const desc = 'A description of the term.';
+
+    render(
+      <DescriptionList>
+        <Term>{term}</Term>
+        <Description>{desc}</Description>
+      </DescriptionList>
+    );
+
+    const list = rtlScreen.getByRole('term').parentElement;
+    expect(list).toHaveClass('list--stack');
+  });
+});