From 73e12fe8ae059ef70bbdf8716af421cb72aec76c Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 24 Oct 2023 19:26:47 +0200 Subject: refactor(components): rewrite Breadcrumbs component --- .../molecules/nav/breadcrumb.module.scss | 10 -- .../molecules/nav/breadcrumb.stories.tsx | 81 ------------- src/components/molecules/nav/breadcrumb.test.tsx | 16 --- src/components/molecules/nav/breadcrumb.tsx | 130 --------------------- src/components/molecules/nav/index.ts | 1 - 5 files changed, 238 deletions(-) delete mode 100644 src/components/molecules/nav/breadcrumb.module.scss delete mode 100644 src/components/molecules/nav/breadcrumb.stories.tsx delete mode 100644 src/components/molecules/nav/breadcrumb.test.tsx delete mode 100644 src/components/molecules/nav/breadcrumb.tsx (limited to 'src/components/molecules') diff --git a/src/components/molecules/nav/breadcrumb.module.scss b/src/components/molecules/nav/breadcrumb.module.scss deleted file mode 100644 index 6786896..0000000 --- a/src/components/molecules/nav/breadcrumb.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "../../../styles/abstracts/placeholders"; - -.item { - &:not(:last-of-type) { - &::after { - content: ">"; - margin-left: var(--spacing-2xs); - } - } -} diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx deleted file mode 100644 index b6dd619..0000000 --- a/src/components/molecules/nav/breadcrumb.stories.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Breadcrumb } from './breadcrumb'; - -/** - * Breadcrumb - Storybook Meta - */ -export default { - title: 'Molecules/Navigation/Breadcrumb', - component: Breadcrumb, - argTypes: { - className: { - control: { - type: 'text', - }, - table: { - category: 'Styles', - }, - description: 'Set additional classnames to the nav element.', - type: { - name: 'string', - required: false, - }, - }, - itemClassName: { - control: { - type: 'text', - }, - table: { - category: 'Styles', - }, - description: 'Set additional classnames to the breadcrumb items.', - type: { - name: 'string', - required: false, - }, - }, - items: { - description: 'The breadcrumb items.', - type: { - name: 'object', - required: true, - value: {}, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Breadcrumb Stories - One item - */ -export const OneItem = Template.bind({}); -OneItem.args = { - items: [{ id: 'home', url: '#', name: 'Home' }], -}; - -/** - * Breadcrumb Stories - Two items - */ -export const TwoItems = Template.bind({}); -TwoItems.args = { - items: [ - { id: 'home', url: '#', name: 'Home' }, - { id: 'blog', url: '#', name: 'Blog' }, - ], -}; - -/** - * Breadcrumb Stories - Three items - */ -export const ThreeItems = Template.bind({}); -ThreeItems.args = { - items: [ - { id: 'home', url: '#', name: 'Home' }, - { id: 'blog', url: '#', name: 'Blog' }, - { id: 'post1', url: '#', name: 'A Post' }, - ], -}; diff --git a/src/components/molecules/nav/breadcrumb.test.tsx b/src/components/molecules/nav/breadcrumb.test.tsx deleted file mode 100644 index 8aa0d63..0000000 --- a/src/components/molecules/nav/breadcrumb.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { Breadcrumb, type BreadcrumbItem } from './breadcrumb'; - -const items: BreadcrumbItem[] = [ - { id: 'home', url: '#', name: 'Home' }, - { id: 'blog', url: '#', name: 'Blog' }, - { id: 'post1', url: '#', name: 'A Post' }, -]; - -describe('Breadcrumb', () => { - it('renders a navigation', () => { - render(); - expect(screen.getByRole('navigation')).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx deleted file mode 100644 index 51f4633..0000000 --- a/src/components/molecules/nav/breadcrumb.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import Script from 'next/script'; -import type { FC } from 'react'; -import { useIntl } from 'react-intl'; -import type { - BreadcrumbList, - ListItem as ListItemType, - WithContext, -} from 'schema-dts'; -import { settings } from '../../../utils/config'; -import { Link, List, ListItem } from '../../atoms'; -import styles from './breadcrumb.module.scss'; - -export type BreadcrumbItem = { - /** - * The item id. - */ - id: string; - /** - * The item URL. - */ - url: string; - /** - * The item name. - */ - name: string; -}; - -export type BreadcrumbProps = { - /** - * Set additional classnames to the nav element. - */ - className?: string; - /** - * Set additional classnames to the breadcrumb items. - */ - itemClassName?: string; - /** - * The breadcrumb items - */ - items: BreadcrumbItem[]; -}; - -/** - * Breadcrumb component - * - * Render a breadcrumb navigation. - */ -export const Breadcrumb: FC = ({ - itemClassName = '', - items, - ...props -}) => { - const intl = useIntl(); - - const ariaLabel = intl.formatMessage({ - defaultMessage: 'Breadcrumb', - description: 'Breadcrumb: an accessible name for the breadcrumb nav.', - id: '28nnDY', - }); - - /** - * Retrieve the breadcrumb list items. - * - * @param {BreadcrumbItem[]} list - The breadcrumb items. - * @returns {JSX.Element[]} The list items. - */ - 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 {ListItemType[]} An array of list items using Schema.org format. - */ - const getSchemaItems = (list: BreadcrumbItem[]): ListItemType[] => { - const schemaItems: ListItemType[] = []; - - list.forEach((item, index) => { - schemaItems.push({ - '@type': 'ListItem', - position: index + 1, - name: item.name, - item: item.url, - }); - }); - - return schemaItems; - }; - - const schemaJsonLd: WithContext = { - '@context': 'https://schema.org', - '@type': 'BreadcrumbList', - '@id': `${settings.url}/#breadcrumb`, - itemListElement: getSchemaItems(items), - }; - - return ( - <> -