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

9 files changed, 78 insertions, 97 deletions

diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss
index ff79f33..8b18c08 100644
--- a/src/components/organisms/layout/cards-list.module.scss
+++ b/src/components/organisms/layout/cards-list.module.scss
@@ -17,14 +17,6 @@
       gap: var(--spacing-lg);
     }
   }
-
-  &--ordered {
-    @extend %reset-ordered-list;
-  }
-
-  &--unordered {
-    @extend %reset-list;
-  }
 }
 
 .card {
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index b5f697a..1b5051f 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import {
   CardsList as CardsListComponent,
   type CardsListItem,
@@ -90,7 +90,7 @@ const items: CardsListItem[] = [
     id: 'card-1',
     cover: {
       alt: 'card 1 picture',
-      src: 'http://placeimg.com/640/480',
+      src: 'http://picsum.photos/640/480',
       width: 640,
       height: 480,
     },
@@ -103,7 +103,7 @@ const items: CardsListItem[] = [
     id: 'card-2',
     cover: {
       alt: 'card 2 picture',
-      src: 'http://placeimg.com/640/480',
+      src: 'http://picsum.photos/640/480',
       width: 640,
       height: 480,
     },
@@ -116,7 +116,7 @@ const items: CardsListItem[] = [
     id: 'card-3',
     cover: {
       alt: 'card 3 picture',
-      src: 'http://placeimg.com/640/480',
+      src: 'http://picsum.photos/640/480',
       width: 640,
       height: 480,
     },
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>
   );
 };
diff --git a/src/components/organisms/layout/comments-list.fixture.tsx b/src/components/organisms/layout/comments-list.fixture.ts
index 5842129..30a4f11 100644
--- a/src/components/organisms/layout/comments-list.fixture.tsx
+++ b/src/components/organisms/layout/comments-list.fixture.ts
@@ -1,4 +1,4 @@
-import { SingleComment } from '../../../types/app';
+import type { SingleComment } from '../../../types/app';
 
 export const comments: SingleComment[] = [
   {
@@ -11,7 +11,7 @@ export const comments: SingleComment[] = [
         avatar: {
           alt: 'Author 1 avatar',
           height: 480,
-          src: 'http://placeimg.com/640/480',
+          src: 'http://picsum.photos/640/480',
           width: 640,
         },
         name: 'Author 1',
@@ -24,14 +24,14 @@ export const comments: SingleComment[] = [
   {
     approved: true,
     content:
-      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
+      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam rerum.',
     id: 2,
     meta: {
       author: {
         avatar: {
           alt: 'Author 2 avatar',
           height: 480,
-          src: 'http://placeimg.com/640/480',
+          src: 'http://picsum.photos/640/480',
           width: 640,
         },
         name: 'Author 2',
@@ -51,7 +51,7 @@ export const comments: SingleComment[] = [
             avatar: {
               alt: 'Author 4 avatar',
               height: 480,
-              src: 'http://placeimg.com/640/480',
+              src: 'http://picsum.photos/640/480',
               width: 640,
             },
             name: 'Author 4',
@@ -71,7 +71,7 @@ export const comments: SingleComment[] = [
             avatar: {
               alt: 'Author 1 avatar',
               height: 480,
-              src: 'http://placeimg.com/640/480',
+              src: 'http://picsum.photos/640/480',
               width: 640,
             },
             name: 'Author 1',
@@ -93,7 +93,7 @@ export const comments: SingleComment[] = [
         avatar: {
           alt: 'Author 3',
           height: 480,
-          src: 'http://placeimg.com/640/480',
+          src: 'http://picsum.photos/640/480',
           width: 640,
         },
         name: 'Author 3',
diff --git a/src/components/organisms/layout/comments-list.module.scss b/src/components/organisms/layout/comments-list.module.scss
deleted file mode 100644
index f7a0cf0..0000000
--- a/src/components/organisms/layout/comments-list.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use "../../../styles/abstracts/placeholders";
-
-.list {
-  @extend %reset-ordered-list;
-
-  & & {
-    margin: var(--spacing-sm) 0;
-    padding-left: var(--spacing-sm);
-  }
-}
-
-.item {
-  &:not(:last-child) {
-    margin-bottom: var(--spacing-sm);
-  }
-}
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index 1ce0cf5..103bfb4 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -1,7 +1,12 @@
-import { FC } from 'react';
-import { type SingleComment } from '../../../types';
+import type { FC } from 'react';
+import type { SingleComment } from '../../../types';
+import { List, ListItem } from '../../atoms';
+
+// eslint-disable-next-line @typescript-eslint/no-shadow
 import { Comment, type CommentProps } from './comment';
-import styles from './comments-list.module.scss';
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+export type CommentsListDepth = 0 | 1 | 2 | 3 | 4;
 
 export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
   /**
@@ -11,7 +16,7 @@ export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
   /**
    * The maximum depth. Use `0` to not display nested comments.
    */
-  depth: 0 | 1 | 2 | 3 | 4;
+  depth: CommentsListDepth;
 };
 
 /**
@@ -38,19 +43,25 @@ export const CommentsList: FC<CommentsListProps> = ({
     const isLastLevel = startLevel === depth;
 
     return commentsList.map(({ replies, ...comment }) => (
-      <li key={comment.id} className={styles.item}>
+      <ListItem key={comment.id}>
         <Comment
           canReply={!isLastLevel}
           Notice={Notice}
           saveComment={saveComment}
           {...comment}
         />
-        {replies && !isLastLevel && (
-          <ol className={styles.list}>{getItems(replies, startLevel + 1)}</ol>
-        )}
-      </li>
+        {replies.length && !isLastLevel ? (
+          <List hideMarker isOrdered spacing="sm">
+            {getItems(replies, startLevel + 1)}
+          </List>
+        ) : null}
+      </ListItem>
     ));
   };
 
-  return <ol className={styles.list}>{getItems(comments, 0)}</ol>;
+  return (
+    <List hideMarker isOrdered spacing="sm">
+      {getItems(comments, 0)}
+    </List>
+  );
 };
diff --git a/src/components/organisms/layout/posts-list.fixture.tsx b/src/components/organisms/layout/posts-list.fixture.ts
index 97a746f..6109411 100644
--- a/src/components/organisms/layout/posts-list.fixture.tsx
+++ b/src/components/organisms/layout/posts-list.fixture.ts
@@ -1,4 +1,4 @@
-import { type Post } from './posts-list';
+import type { Post } from './posts-list';
 
 export const introPost1 =
   'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.';
@@ -12,7 +12,7 @@ export const introPost3 =
 export const cover = {
   alt: 'cover',
   height: 480,
-  src: 'http://placeimg.com/640/480',
+  src: 'http://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index 49993da..759902a 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -18,14 +18,8 @@
 }
 
 .list {
-  @extend %reset-ordered-list;
-
   .item {
     border-bottom: fun.convert-px(1) solid var(--color-border);
-
-    &:not(:last-child) {
-      margin-bottom: var(--spacing-md);
-    }
   }
 }
 
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 86c3d12..cde81e6 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -8,6 +8,8 @@ import {
   type HeadingLevel,
   ProgressBar,
   Spinner,
+  List,
+  ListItem,
 } from '../../atoms';
 import { Pagination, type PaginationProps } from '../../molecules';
 import { NoResults, type NoResultsProps } from './no-results';
@@ -115,25 +117,28 @@ export const PostsList: FC<PostsListProps> = ({
     allPosts: Post[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => (
-    <ol
+    <List
       aria-busy={isLoading}
       aria-describedby={progressBarId}
       className={styles.list}
+      hideMarker
+      isOrdered
       ref={listRef}
+      spacing="md"
     >
       {allPosts.map(({ id, ...post }) => (
         <Fragment key={id}>
-          <li className={styles.item}>
+          <ListItem className={styles.item}>
             <Summary {...post} titleLevel={headingLevel} />
-          </li>
+          </ListItem>
           {id === lastPostId && (
-            <li>
+            <ListItem>
               <span ref={lastPostRef} tabIndex={-1} />
-            </li>
+            </ListItem>
           )}
         </Fragment>
       ))}
-    </ol>
+    </List>
   );
 
   /**