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, 15 insertions, 13 deletions

diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 1aa9e4a..b64f84a 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Comment } from './comment';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { UserComment } from './comment';
 import {
   author,
   data,
@@ -9,40 +9,42 @@ import {
   id,
 } from './comment.fixture';
 
-describe('Comment', () => {
+describe('UserComment', () => {
   it('renders an avatar', () => {
-    render(<Comment canReply={true} {...data} />);
+    render(<UserComment canReply={true} {...data} />);
     expect(
-      screen.getByRole('img', { name: author.avatar.alt })
+      rtlScreen.getByRole('img', { name: author.avatar.alt })
     ).toBeInTheDocument();
   });
 
   it('renders the author website url', () => {
-    render(<Comment canReply={true} {...data} />);
-    expect(screen.getByRole('link', { name: author.name })).toHaveAttribute(
+    render(<UserComment canReply={true} {...data} />);
+    expect(rtlScreen.getByRole('link', { name: author.name })).toHaveAttribute(
       'href',
       author.website
     );
   });
 
   it('renders a permalink to the comment', () => {
-    render(<Comment canReply={true} {...data} />);
+    render(<UserComment canReply={true} {...data} />);
     expect(
-      screen.getByRole('link', {
+      rtlScreen.getByRole('link', {
         name: `${formattedDate} at ${formattedTime}`,
       })
     ).toHaveAttribute('href', `#comment-${id}`);
   });
 
   it('renders a reply button', () => {
-    render(<Comment canReply={true} {...data} />);
-    expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
+    render(<UserComment canReply={true} {...data} />);
+    expect(
+      rtlScreen.getByRole('button', { name: 'Reply' })
+    ).toBeInTheDocument();
   });
 
   it('does not render a reply button', () => {
-    render(<Comment canReply={false} {...data} />);
+    render(<UserComment canReply={false} {...data} />);
     expect(
-      screen.queryByRole('button', { name: 'Reply' })
+      rtlScreen.queryByRole('button', { name: 'Reply' })
     ).not.toBeInTheDocument();
   });
 });