From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001 From: Armand Philippot 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 --- .../molecules/nav/breadcrumb.module.scss | 9 ------- src/components/molecules/nav/breadcrumb.tsx | 29 +++++++++++++--------- src/components/molecules/nav/nav-list.module.scss | 11 -------- src/components/molecules/nav/nav-list.tsx | 11 ++++---- .../molecules/nav/pagination.module.scss | 8 ------ src/components/molecules/nav/pagination.tsx | 14 ++++++----- 6 files changed, 31 insertions(+), 51 deletions(-) (limited to 'src/components/molecules/nav') 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 = ({ * @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 ( -
  • + {isLastItem ? item.name : {item.name}} -
    • + ); }); - }; /** * 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 = ({ id: '16zl9Z', })} -
      {getListItems(items)}
    + + {getListItems(items)} + ); 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 = ({ }) => { 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 = ({ */ const getItems = (): JSX.Element[] => items.map(({ id, href, label, logo }) => ( -
  • + {kind === 'main' ? ( ) : ( {label} )} -
    • + )); return ( ); }; 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 = ({ const disabledLinkClass = `${styles.link} ${styles['link--disabled']}`; return ( -
  • + {link ? ( {body} @@ -148,7 +148,7 @@ export const Pagination: FC = ({ ) : ( {body} )} -
    • + ); }; @@ -202,13 +202,15 @@ export const Pagination: FC = ({ return ( ); }; -- cgit v1.2.3