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

diff --git a/src/components/atoms/lists/description-list-group.tsx b/src/components/atoms/lists/description-list-group.tsx
deleted file mode 100644
index 63ae541..0000000
--- a/src/components/atoms/lists/description-list-group.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { FC, ReactNode, useId } from 'react';
-import styles from './description-list-group.module.scss';
-
-export type ItemLayout = 'inline' | 'inline-values' | 'stacked';
-
-export type DescriptionListGroupProps = {
-  /**
-   * Set additional classnames to the list item wrapper.
-   */
-  className?: string;
-  /**
-   * Set additional classnames to the list item description.
-   */
-  descriptionClassName?: string;
-  /**
-   * The item label.
-   */
-  label: string;
-  /**
-   * The item layout.
-   */
-  layout?: ItemLayout;
-  /**
-   * Set additional classnames to the list item term.
-   */
-  termClassName?: string;
-  /**
-   * The item value.
-   */
-  value: ReactNode | ReactNode[];
-  /**
-   * If true, use a slash to delimitate multiple values.
-   */
-  withSeparator?: boolean;
-};
-
-/**
- * DescriptionListItem component
- *
- * Render a couple of dt/dd wrapped in a div.
- */
-export const DescriptionListGroup: FC<DescriptionListGroupProps> = ({
-  className = '',
-  descriptionClassName = '',
-  label,
-  termClassName = '',
-  value,
-  layout = 'stacked',
-  withSeparator = false,
-}) => {
-  const id = useId();
-  const layoutStyles = styles[`wrapper--${layout}`];
-  const separatorStyles = withSeparator ? styles['wrapper--has-separator'] : '';
-  const itemValues = Array.isArray(value) ? value : [value];
-  const groupClass = `${styles.wrapper} ${layoutStyles} ${separatorStyles} ${className}`;
-
-  return (
-    <div className={groupClass}>
-      <dt className={`${styles.term} ${termClassName}`}>{label}</dt>
-      {itemValues.map((currentValue, index) => (
-        <dd
-          className={`${styles.description} ${descriptionClassName}`}
-          key={`${id}-${index}`}
-        >
-          {currentValue}
-        </dd>
-      ))}
-    </div>
-  );
-};