From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 21:29:45 +0200
Subject: 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
---
 src/components/atoms/lists/list.tsx | 74 -------------------------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 src/components/atoms/lists/list.tsx

(limited to 'src/components/atoms/lists/list.tsx')

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>;
-};
-- 
cgit v1.2.3