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

diff --git a/src/components/atoms/lists/description-list/description.tsx b/src/components/atoms/lists/description-list/description.tsx
new file mode 100644
index 0000000..9fa7ecd
--- /dev/null
+++ b/src/components/atoms/lists/description-list/description.tsx
@@ -0,0 +1,28 @@
+import {
+  forwardRef,
+  type ForwardRefRenderFunction,
+  type HTMLAttributes,
+} from 'react';
+import styles from './description-list.module.scss';
+
+export type DescriptionProps = HTMLAttributes<HTMLElement>;
+
+const DescriptionWithRef: ForwardRefRenderFunction<
+  HTMLElement,
+  DescriptionProps
+> = ({ children, className = '', ...props }, ref) => {
+  const descriptionClass = `${styles.description} ${className}`;
+
+  return (
+    <dd {...props} className={descriptionClass} ref={ref}>
+      {children}
+    </dd>
+  );
+};
+
+/**
+ * Description component.
+ *
+ * Use it inside a `DescriptionList` or a `Group` component.
+ */
+export const Description = forwardRef(DescriptionWithRef);