refactor(components): rewrite List component

* change `items` prop to children
* replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props
* add `hideMarker` prop
* add `spacing` prop to control item spacing
* move lists styles to Sass placeholders to avoid repeats because of
headless WordPress

1 files changed, 0 insertions, 74 deletions

diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
deleted file mode 100644
index 8fc9672..0000000
--- a/src/components/atoms/lists/list.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { FC } from 'react';
-import styles from './list.module.scss';
-
-export type ListItem = {
-  /**
-   * Nested list.
-   */
-  child?: ListItem[];
-  /**
-   * Item id.
-   */
-  id: string;
-  /**
-   * Item value.
-   */
-  value: any;
-};
-
-export type ListProps = {
-  /**
-   * Set additional classnames to the list wrapper.
-   */
-  className?: string;
-  /**
-   * An array of list items.
-   */
-  items: ListItem[];
-  /**
-   * Set additional classnames to the list items.
-   */
-  itemsClassName?: string;
-  /**
-   * The list kind.
-   */
-  kind?: 'ordered' | 'unordered' | 'flex';
-};
-
-/**
- * List component
- *
- * Render either an ordered or an unordered list.
- */
-export const List: FC<ListProps> = ({
-  className = '',
-  items,
-  itemsClassName = '',
-  kind = 'unordered',
-}) => {
-  const ListTag = kind === 'ordered' ? 'ol' : 'ul';
-  const kindClass = `list--${kind}`;
-  const listClass = `${styles.list} ${styles[kindClass]} ${className}`;
-
-  /**
-   * Retrieve the list items.
-   * @param array - An array of items.
-   * @returns {JSX.Element[]} - An array of li elements.
-   */
-  const getItems = (array: ListItem[]): JSX.Element[] => {
-    return array.map(({ child, id, value }) => (
-      <li key={id} className={`${styles.list__item} ${itemsClassName}`}>
-        {value}
-        {child && (
-          <ListTag
-            className={`${styles.list} ${styles[kindClass]} ${className}`}
-          >
-            {getItems(child)}
-          </ListTag>
-        )}
-      </li>
-    ));
-  };
-
-  return <ListTag className={listClass}>{getItems(items)}</ListTag>;
-};