refactor(components): rewrite Breadcrumbs component

2 files changed, 11 insertions, 8 deletions

diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index 09bb957..4615f60 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -6,13 +6,11 @@
   @extend %grid;
 
   grid-column: 1 / -1;
+  width: 100%;
   padding: var(--spacing-md) 0;
 
   > * {
     grid-column: 2;
-  }
-
-  &__items {
     font-size: var(--font-size-sm);
   }
 }
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index dbac43e..3fd5b02 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -14,8 +14,6 @@ import type { Approved, SendCommentInput, SingleComment } from '../../../types';
 import { useIsMounted } from '../../../utils/hooks';
 import { Heading, Notice, type NoticeKind, Sidebar } from '../../atoms';
 import {
-  Breadcrumb,
-  type BreadcrumbItem,
   PageFooter,
   type PageFooterProps,
   PageHeader,
@@ -27,6 +25,8 @@ import {
   CommentsList,
   type CommentsListProps,
   TableOfContents,
+  Breadcrumbs,
+  type BreadcrumbsItem,
 } from '../../organisms';
 import styles from './page-layout.module.scss';
 
@@ -62,7 +62,7 @@ export type PageLayoutProps = {
   /**
    * The breadcrumb items.
    */
-  breadcrumb: BreadcrumbItem[];
+  breadcrumb: BreadcrumbsItem[];
   /**
    * The breadcrumb JSON schema.
    */
@@ -127,6 +127,11 @@ export const PageLayout: FC<PageLayoutProps> = ({
   withToC = false,
 }) => {
   const intl = useIntl();
+  const breadcrumbsLabel = intl.formatMessage({
+    defaultMessage: 'Breadcrumb',
+    description: 'PageLayout: an accessible name for the breadcrumb nav.',
+    id: 'm6a3BD',
+  });
   const commentsTitle = intl.formatMessage({
     defaultMessage: 'Comments',
     description: 'PageLayout: comments title',
@@ -211,9 +216,9 @@ export const PageLayout: FC<PageLayoutProps> = ({
         id="schema-breadcrumb"
         type="application/ld+json"
       />
-      <Breadcrumb
+      <Breadcrumbs
+        aria-label={breadcrumbsLabel}
         className={styles.breadcrumb}
-        itemClassName={styles.breadcrumb__items}
         items={breadcrumb}
       />
       <PageHeader