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

21 files changed, 183 insertions, 219 deletions

diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
index 681d384..8ada948 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
@@ -1,17 +1,18 @@
-import { ChangeEvent, FC, useState } from 'react';
+/* eslint-disable max-statements */
+import { type ChangeEvent, type FC, useState, useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
   type AckeeOptions,
   useLocalStorage,
   useUpdateAckeeOptions,
 } from '../../../../utils/hooks';
-import { Legend, List } from '../../../atoms';
+import { Legend, List, ListItem } from '../../../atoms';
 import {
   Switch,
-  SwitchOption,
-  SwitchProps,
+  type SwitchOption,
+  type SwitchProps,
   Tooltip,
-  TooltipProps,
+  type TooltipProps,
 } from '../../../molecules';
 
 export type AckeeToggleProps = Omit<
@@ -85,29 +86,24 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({
     id: '7zDlQo',
   });
 
-  const options: [SwitchOption, SwitchOption] = [
-    {
-      id: 'ackee-full',
-      label: fullLabel,
-      value: 'full',
-    },
-    {
-      id: 'ackee-partial',
-      label: partialLabel,
-      value: 'partial',
-    },
-  ];
+  const options = [
+    { id: 'ackee-full' as const, label: fullLabel, value: 'full' },
+    { id: 'ackee-partial' as const, label: partialLabel, value: 'partial' },
+  ] satisfies [SwitchOption, SwitchOption];
 
-  const updateSetting = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value === 'full' ? 'full' : 'partial');
-  };
+  const updateSetting = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === 'full' ? 'full' : 'partial');
+    },
+    [setValue]
+  );
 
-  const closeTooltip = () => {
+  const closeTooltip = useCallback(() => {
     setIsTooltipOpened(false);
-  };
-  const toggleTooltip = () => {
+  }, []);
+  const toggleTooltip = useCallback(() => {
     setIsTooltipOpened((prev) => !prev);
-  };
+  }, []);
 
   return (
     <Switch
@@ -125,12 +121,13 @@ export const AckeeToggle: FC<AckeeToggleProps> = ({
           onClickOutside={closeTooltip}
           onToggle={toggleTooltip}
         >
-          <List
-            items={[
-              { id: 'partial', value: tooltipPartial },
-              { id: 'full', value: tooltipFull },
-            ]}
-          />
+          <List>
+            {options.map((option) => (
+              <ListItem key={option.id}>
+                {option.id === 'ackee-full' ? tooltipFull : tooltipPartial}
+              </ListItem>
+            ))}
+          </List>
         </Tooltip>
       }
       value={value}
diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss
index f4faa63..31960a4 100644
--- a/src/components/organisms/images/gallery.module.scss
+++ b/src/components/organisms/images/gallery.module.scss
@@ -2,8 +2,6 @@
 @use "../../../styles/abstracts/placeholders";
 
 .wrapper {
-  @extend %reset-list;
-
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--spacing-sm);
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 8b68777..5005ed8 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ResponsiveImage } from '../../molecules';
 import { Gallery } from './gallery';
 
@@ -37,7 +37,7 @@ export default {
 const image = {
   alt: 'Modi provident omnis',
   height: 480,
-  src: 'http://placeimg.com/640/480/fashion',
+  src: 'http://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
index ae773f6..b35acfe 100644
--- a/src/components/organisms/images/gallery.tsx
+++ b/src/components/organisms/images/gallery.tsx
@@ -1,7 +1,9 @@
-import { Children, FC, ReactElement } from 'react';
-import { type ResponsiveImageProps } from '../../molecules';
+import { Children, type FC, type ReactElement } from 'react';
+import { List, ListItem } from '../../atoms';
+import type { ResponsiveImageProps } from '../../molecules';
 import styles from './gallery.module.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
 export type GalleryColumn = 2 | 3 | 4;
 
 export type GalleryProps = {
@@ -24,10 +26,10 @@ export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
   const columnsClass = `wrapper--${columns}-columns`;
 
   return (
-    <ul className={`${styles.wrapper} ${styles[columnsClass]}`}>
-      {Children.map(children, (child) => {
-        return <li className={styles.item}>{child}</li>;
-      })}
-    </ul>
+    <List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker>
+      {Children.map(children, (child) => (
+        <ListItem className={styles.item}>{child}</ListItem>
+      ))}
+    </List>
   );
 };
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>
   );
 
   /**
diff --git a/src/components/organisms/widgets/links-list-widget.module.scss b/src/components/organisms/widgets/links-list-widget.module.scss
index 26f1549..4efc2d4 100644
--- a/src/components/organisms/widgets/links-list-widget.module.scss
+++ b/src/components/organisms/widgets/links-list-widget.module.scss
@@ -4,6 +4,8 @@
 .widget {
   .list {
     .list {
+      padding: 0;
+
       > *:first-child {
         border-top: fun.convert-px(1) solid var(--color-primary);
       }
@@ -35,8 +37,6 @@
     }
 
     &--ordered {
-      @extend %reset-ordered-list;
-
       counter-reset: link;
 
       .list__link {
@@ -50,10 +50,6 @@
       }
     }
 
-    &--unordered {
-      @extend %reset-list;
-    }
-
     &__item {
       &:not(:last-child) {
         border-bottom: fun.convert-px(1) solid var(--color-primary);
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index 3f62502..2180de4 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { LinksListWidget } from './links-list-widget';
 
 /**
@@ -8,7 +8,7 @@ export default {
   title: 'Organisms/Widgets/LinksList',
   component: LinksListWidget,
   args: {
-    kind: 'unordered',
+    isOrdered: false,
   },
   argTypes: {
     className: {
@@ -32,21 +32,6 @@ export default {
         value: {},
       },
     },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The list kind: either ordered or unordered.',
-      options: ['ordered', 'unordered'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'unordered' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
     level: {
       control: {
         type: 'number',
@@ -105,7 +90,6 @@ const items = [
 export const Unordered = Template.bind({});
 Unordered.args = {
   items,
-  kind: 'unordered',
   level: 2,
   title: 'A list of links',
 };
@@ -115,8 +99,8 @@ Unordered.args = {
  */
 export const Ordered = Template.bind({});
 Ordered.args = {
+  isOrdered: true,
   items,
-  kind: 'ordered',
   level: 2,
   title: 'A list of links',
 };
diff --git a/src/components/organisms/widgets/links-list-widget.test.tsx b/src/components/organisms/widgets/links-list-widget.test.tsx
index 2d36eb5..6323e19 100644
--- a/src/components/organisms/widgets/links-list-widget.test.tsx
+++ b/src/components/organisms/widgets/links-list-widget.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { LinksListWidget } from './links-list-widget';
 
 const title = 'Voluptatem minus autem';
@@ -14,20 +14,19 @@ describe('LinksListWidget', () => {
   it('renders a widget title', () => {
     render(<LinksListWidget items={items} title={title} level={2} />);
     expect(
-      screen.getByRole('heading', { level: 2, name: new RegExp(title, 'i') })
+      rtlScreen.getByRole('heading', { level: 2, name: new RegExp(title, 'i') })
     ).toBeInTheDocument();
   });
 
   it('renders the correct number of items', () => {
     render(<LinksListWidget items={items} title={title} level={2} />);
-    expect(screen.getAllByRole('listitem')).toHaveLength(items.length);
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length);
   });
 
   it('renders some links', () => {
     render(<LinksListWidget items={items} title={title} level={2} />);
-    expect(screen.getByRole('link', { name: items[0].name })).toHaveAttribute(
-      'href',
-      items[0].url
-    );
+    expect(
+      rtlScreen.getByRole('link', { name: items[0].name })
+    ).toHaveAttribute('href', items[0].url);
   });
 });
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index df8430d..8f71efd 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { slugify } from '../../../utils/helpers';
-import { Link, List, type ListItem, type ListProps } from '../../atoms';
+import { Link, List, ListItem } from '../../atoms';
 import { Widget, type WidgetProps } from '../../molecules';
 import styles from './links-list-widget.module.scss';
 
@@ -19,13 +19,19 @@ export type LinksListItems = {
   url: string;
 };
 
-export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
-  Pick<ListProps, 'className' | 'kind'> & {
-    /**
-     * An array of name/url couple.
-     */
-    items: LinksListItems[];
-  };
+export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> & {
+  className?: string;
+  /**
+   * Should the links be ordered?
+   *
+   * @default false
+   */
+  isOrdered?: boolean;
+  /**
+   * An array of name/url couple.
+   */
+  items: LinksListItems[];
+};
 
 /**
  * LinksListWidget component
@@ -34,11 +40,11 @@ export type LinksListWidgetProps = Pick<WidgetProps, 'level' | 'title'> &
  */
 export const LinksListWidget: FC<LinksListWidgetProps> = ({
   className = '',
+  isOrdered = false,
   items,
-  kind = 'unordered',
   ...props
 }) => {
-  const listKindClass = `list--${kind}`;
+  const listKindClass = `list--${isOrdered ? 'ordered' : 'unordered'}`;
 
   /**
    * Format the widget data to be used as List items.
@@ -46,19 +52,23 @@ export const LinksListWidget: FC<LinksListWidgetProps> = ({
    * @param {LinksListItems[]} data - The widget data.
    * @returns {ListItem[]} The list items data.
    */
-  const getListItems = (data: LinksListItems[]): ListItem[] => {
-    return data.map((item) => {
-      return {
-        id: slugify(item.name),
-        child: item.child && getListItems(item.child),
-        value: (
-          <Link href={item.url} className={styles.list__link}>
-            {item.name}
-          </Link>
-        ),
-      };
-    });
-  };
+  const getListItems = (data: LinksListItems[]) =>
+    data.map((item) => (
+      <ListItem className={styles.list__item} key={slugify(item.name)}>
+        <Link className={styles.list__link} href={item.url}>
+          {item.name}
+        </Link>
+        {item.child?.length ? (
+          <List
+            className={`${styles.list} ${styles[listKindClass]} ${className}`}
+            hideMarker
+            isOrdered={isOrdered}
+          >
+            {getListItems(item.child)}
+          </List>
+        ) : null}
+      </ListItem>
+    ));
 
   return (
     <Widget
@@ -70,10 +80,11 @@ export const LinksListWidget: FC<LinksListWidgetProps> = ({
     >
       <List
         className={`${styles.list} ${styles[listKindClass]} ${className}`}
-        items={getListItems(items)}
-        itemsClassName={styles.list__item}
-        kind={kind}
-      />
+        hideMarker
+        isOrdered={isOrdered}
+      >
+        {getListItems(items)}
+      </List>
     </Widget>
   );
 };
diff --git a/src/components/organisms/widgets/social-media.module.scss b/src/components/organisms/widgets/social-media.module.scss
index b7191be..1cd3f57 100644
--- a/src/components/organisms/widgets/social-media.module.scss
+++ b/src/components/organisms/widgets/social-media.module.scss
@@ -1,10 +1,5 @@
 @use "../../../styles/abstracts/placeholders";
 
 .list {
-  @extend %reset-list;
-
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--spacing-xs);
   padding: 0 var(--spacing-2xs);
 }
diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
index 40513f8..f9dea58 100644
--- a/src/components/organisms/widgets/social-media.tsx
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { SocialLink, type SocialLinkProps } from '../../atoms';
+import type { FC } from 'react';
+import { List, ListItem, SocialLink, type SocialLinkProps } from '../../atoms';
 import { Widget, type WidgetProps } from '../../molecules';
 import styles from './social-media.module.scss';
 
@@ -21,17 +21,18 @@ export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
    * @param {SocialMedia[]} links - An array of social media name and url.
    * @returns {JSX.Element[]} The social links.
    */
-  const getItems = (links: Media[]): JSX.Element[] => {
-    return links.map((link, index) => (
-      <li key={`media-${index}`}>
+  const getItems = (links: Media[]): JSX.Element[] =>
+    links.map((link, index) => (
+      <ListItem key={`media-${index}`}>
         <SocialLink name={link.name} url={link.url} />
-      </li>
+      </ListItem>
     ));
-  };
 
   return (
     <Widget expanded={true} {...props}>
-      <ul className={styles.list}>{getItems(media)}</ul>
+      <List className={styles.list} hideMarker isInline spacing="xs">
+        {getItems(media)}
+      </List>
     </Widget>
   );
 };
diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
index 3078e35..d464715 100644
--- a/src/components/organisms/widgets/table-of-contents.stories.tsx
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { TableOfContents as ToCWidget } from './table-of-contents';
 
 /**
@@ -26,7 +26,8 @@ const Template: ComponentStory<typeof ToCWidget> = (args) => (
   <ToCWidget {...args} />
 );
 
-const GetWrapper = () => {
+/* eslint-disable max-statements */
+const getWrapper = () => {
   const wrapper = document.createElement('div');
   const firstTitle = document.createElement('h2');
   const firstParagraph = document.createElement('p');
@@ -50,5 +51,5 @@ const GetWrapper = () => {
  */
 export const TableOfContents = Template.bind({});
 TableOfContents.args = {
-  wrapper: GetWrapper(),
+  wrapper: getWrapper(),
 };
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
index 0e8789a..e67b495 100644
--- a/src/components/organisms/widgets/table-of-contents.tsx
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { useHeadingsTree, type Heading } from '../../../utils/hooks';
 import { type LinksListItems, LinksListWidget } from './links-list-widget';
@@ -31,21 +31,20 @@ export const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
    * @param {Heading[]} tree - The headings tree.
    * @returns {LinksListItems[]} The list items.
    */
-  const getItems = (tree: Heading[]): LinksListItems[] => {
-    return tree.map((heading) => {
+  const getItems = (tree: Heading[]): LinksListItems[] =>
+    tree.map((heading) => {
       return {
         name: heading.title,
         url: `#${heading.id}`,
         child: getItems(heading.children),
       };
     });
-  };
 
   return (
     <LinksListWidget
       className={styles.list}
+      isOrdered
       items={getItems(headingsTree)}
-      kind="ordered"
       level={2}
       title={title}
     />