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

6 files changed, 31 insertions, 51 deletions

diff --git a/src/components/molecules/nav/breadcrumb.module.scss b/src/components/molecules/nav/breadcrumb.module.scss
index c72e349..6786896 100644
--- a/src/components/molecules/nav/breadcrumb.module.scss
+++ b/src/components/molecules/nav/breadcrumb.module.scss
@@ -1,14 +1,5 @@
 @use "../../../styles/abstracts/placeholders";
 
-.list {
-  @extend %reset-ordered-list;
-
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-2xs);
-}
-
 .item {
   &:not(:last-of-type) {
     &::after {
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx
index 247bc2b..51f4633 100644
--- a/src/components/molecules/nav/breadcrumb.tsx
+++ b/src/components/molecules/nav/breadcrumb.tsx
@@ -1,9 +1,13 @@
 import Script from 'next/script';
-import { FC } from 'react';
+import type { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { BreadcrumbList, ListItem, WithContext } from 'schema-dts';
+import type {
+  BreadcrumbList,
+  ListItem as ListItemType,
+  WithContext,
+} from 'schema-dts';
 import { settings } from '../../../utils/config';
-import { Link } from '../../atoms';
+import { Link, List, ListItem } from '../../atoms';
 import styles from './breadcrumb.module.scss';
 
 export type BreadcrumbItem = {
@@ -60,29 +64,28 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({
    * @param {BreadcrumbItem[]} list - The breadcrumb items.
    * @returns {JSX.Element[]} The list items.
    */
-  const getListItems = (list: BreadcrumbItem[]): JSX.Element[] => {
-    return list.map((item, index) => {
+  const getListItems = (list: BreadcrumbItem[]): JSX.Element[] =>
+    list.map((item, index) => {
       const isLastItem = index === list.length - 1;
       const itemStyles = isLastItem
         ? `${styles.item} screen-reader-text`
         : styles.item;
 
       return (
-        <li key={item.id} className={`${itemStyles} ${itemClassName}`}>
+        <ListItem key={item.id} className={`${itemStyles} ${itemClassName}`}>
           {isLastItem ? item.name : <Link href={item.url}>{item.name}</Link>}
-        </li>
+        </ListItem>
       );
     });
-  };
 
   /**
    * Retrieve the breadcrumb list items with Schema.org format.
    *
    * @param {BreadcrumbItem[]} list - The breadcrumb items.
-   * @returns {ListItem[]} An array of list items using Schema.org format.
+   * @returns {ListItemType[]} An array of list items using Schema.org format.
    */
-  const getSchemaItems = (list: BreadcrumbItem[]): ListItem[] => {
-    const schemaItems: ListItem[] = [];
+  const getSchemaItems = (list: BreadcrumbItem[]): ListItemType[] => {
+    const schemaItems: ListItemType[] = [];
 
     list.forEach((item, index) => {
       schemaItems.push({
@@ -118,7 +121,9 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({
             id: '16zl9Z',
           })}
         </span>
-        <ol className={styles.list}>{getListItems(items)}</ol>
+        <List hideMarker isInline isOrdered spacing="2xs">
+          {getListItems(items)}
+        </List>
       </nav>
     </>
   );
diff --git a/src/components/molecules/nav/nav-list.module.scss b/src/components/molecules/nav/nav-list.module.scss
index a6d43bc..ff99581 100644
--- a/src/components/molecules/nav/nav-list.module.scss
+++ b/src/components/molecules/nav/nav-list.module.scss
@@ -1,15 +1,4 @@
-@use "../../../styles/abstracts/placeholders";
-
 .nav {
-  &__list {
-    @extend %reset-list;
-
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--spacing-2xs);
-    align-items: center;
-  }
-
   &--footer & {
     &__item:not(:first-child) {
       &::before {
diff --git a/src/components/molecules/nav/nav-list.tsx b/src/components/molecules/nav/nav-list.tsx
index 59556ce..55c2aa9 100644
--- a/src/components/molecules/nav/nav-list.tsx
+++ b/src/components/molecules/nav/nav-list.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { Link, Nav, NavLink, type NavProps } from '../../atoms';
+import { Link, List, ListItem, Nav, NavLink, type NavProps } from '../../atoms';
 import styles from './nav-list.module.scss';
 
 export type NavItem = {
@@ -50,7 +50,6 @@ export const NavList: FC<NavListProps> = ({
 }) => {
   const kindClass = `nav--${kind}`;
   const navClass = `${styles[kindClass]} ${className}`;
-  const listClass = `${styles.nav__list} ${listClassName}`;
 
   /**
    * Get the nav items.
@@ -58,18 +57,20 @@ export const NavList: FC<NavListProps> = ({
    */
   const getItems = (): JSX.Element[] =>
     items.map(({ id, href, label, logo }) => (
-      <li key={id} className={styles.nav__item}>
+      <ListItem key={id} className={styles.nav__item}>
         {kind === 'main' ? (
           <NavLink href={href} label={label} logo={logo} />
         ) : (
           <Link href={href}>{label}</Link>
         )}
-      </li>
+      </ListItem>
     ));
 
   return (
     <Nav {...props} className={navClass}>
-      <ul className={listClass}>{getItems()}</ul>
+      <List className={listClassName} hideMarker isInline spacing="2xs">
+        {getItems()}
+      </List>
     </Nav>
   );
 };
diff --git a/src/components/molecules/nav/pagination.module.scss b/src/components/molecules/nav/pagination.module.scss
index 4ffad5a..8b06a95 100644
--- a/src/components/molecules/nav/pagination.module.scss
+++ b/src/components/molecules/nav/pagination.module.scss
@@ -1,18 +1,10 @@
 @use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/placeholders";
 
 .wrapper {
   .list {
-    @extend %flex-list;
-
-    align-items: stretch;
     justify-content: center;
-    position: relative;
-    row-gap: var(--spacing-xs);
-    column-gap: var(--spacing-sm);
 
     &--pages {
-      column-gap: var(--spacing-2xs);
       margin-bottom: var(--spacing-sm);
     }
   }
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index 27ef1ec..73517c3 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable max-statements */
 import { type FC, Fragment, type ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import { ButtonLink } from '../../atoms';
+import { ButtonLink, List, ListItem } from '../../atoms';
 import styles from './pagination.module.scss';
 
 export type PaginationProps = {
@@ -140,7 +140,7 @@ export const Pagination: FC<PaginationProps> = ({
     const disabledLinkClass = `${styles.link} ${styles['link--disabled']}`;
 
     return (
-      <li className={styles.item}>
+      <ListItem className={styles.item}>
         {link ? (
           <ButtonLink className={linkClass} kind={kind} to={link}>
             {body}
@@ -148,7 +148,7 @@ export const Pagination: FC<PaginationProps> = ({
         ) : (
           <span className={disabledLinkClass}>{body}</span>
         )}
-      </li>
+      </ListItem>
     );
   };
 
@@ -202,13 +202,15 @@ export const Pagination: FC<PaginationProps> = ({
 
   return (
     <nav {...props} className={navClass}>
-      <ul className={listClass}>{getPages(current, totalPages)}</ul>
-      <ul className={styles.list}>
+      <List className={listClass} hideMarker isInline spacing="2xs">
+        {getPages(current, totalPages)}
+      </List>
+      <List className={styles.list} hideMarker isInline spacing="xs">
         {hasPreviousPage
           ? getItem('previous', previousPageName, previousPageUrl)
           : null}
         {hasNextPage ? getItem('next', nextPageName, nextPageUrl) : null}
-      </ul>
+      </List>
     </nav>
   );
 };