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, 33 insertions, 38 deletions

diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index e3d1156..29add3b 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { List, type ListItem, type ListProps } from '../../atoms';
+import type { FC } from 'react';
+import { List, ListItem } from '../../atoms';
 import { Card, type CardProps } from '../../molecules';
 import styles from './cards-list.module.scss';
 
@@ -10,17 +10,22 @@ export type CardsListItem = Omit<CardProps, 'className' | 'titleLevel'> & {
   id: string;
 };
 
-export type CardsListProps = Pick<CardProps, 'titleLevel'> &
-  Pick<ListProps, 'kind'> & {
-    /**
-     * Set additional classnames to the list wrapper.
-     */
-    className?: string;
-    /**
-     * The cards data.
-     */
-    items: CardsListItem[];
-  };
+export type CardsListProps = Pick<CardProps, 'titleLevel'> & {
+  /**
+   * Set additional classnames to the list wrapper.
+   */
+  className?: string;
+  /**
+   * Should the cards list be ordered?
+   *
+   * @default false
+   */
+  isOrdered?: boolean;
+  /**
+   * The cards data.
+   */
+  items: CardsListItem[];
+};
 
 /**
  * CardsList component
@@ -29,40 +34,30 @@ export type CardsListProps = Pick<CardProps, 'titleLevel'> &
  */
 export const CardsList: FC<CardsListProps> = ({
   className = '',
+  isOrdered = false,
   items,
-  kind = 'unordered',
   titleLevel,
 }) => {
-  const kindModifier = `wrapper--${kind}`;
+  const kindModifier = `wrapper--${isOrdered ? 'ordered' : 'unordered'}`;
 
-  /**
-   * Format the cards data to be used by the List component.
-   *
-   * @param {CardsListItem[]} cards - An array of card data.
-   * @returns {ListItem[]} The formatted cards data.
-   */
-  const getCards = (cards: CardsListItem[]): ListItem[] => {
-    return cards.map(({ id, ...card }) => {
-      return {
-        id,
-        value: (
+  return (
+    <List
+      className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
+      hideMarker
+      isInline
+      isOrdered={isOrdered}
+    >
+      {items.map(({ id, ...item }) => (
+        <ListItem key={id}>
           <Card
-            {...card}
+            {...item}
             className={styles.card}
             key={id}
             id={id}
             titleLevel={titleLevel}
           />
-        ),
-      };
-    });
-  };
-
-  return (
-    <List
-      className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
-      kind="flex"
-      items={getCards(items)}
-    />
+        </ListItem>
+      ))}
+    </List>
   );
 };