refactor(hooks): rewrite useBreadcrumbs hook

* use next/router to get the slug instead of using props
* handle cases where the current page title is not provided
* update JSON-LD schema to match the example in documentation
* add tests

3 files changed, 15 insertions, 15 deletions

diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx
index 4736b26..0b6fd27 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx
@@ -28,7 +28,7 @@ const Template: ComponentStory<typeof Breadcrumbs> = (args) => (
  */
 export const OneItem = Template.bind({});
 OneItem.args = {
-  items: [{ id: 'home', url: '#', name: 'Home' }],
+  items: [{ id: 'home', slug: '#', label: 'Home' }],
 };
 
 /**
@@ -37,8 +37,8 @@ OneItem.args = {
 export const TwoItems = Template.bind({});
 TwoItems.args = {
   items: [
-    { id: 'home', url: '#', name: 'Home' },
-    { id: 'blog', url: '#', name: 'Blog' },
+    { id: 'home', slug: '#', label: 'Home' },
+    { id: 'blog', slug: '#', label: 'Blog' },
   ],
 };
 
@@ -48,8 +48,8 @@ TwoItems.args = {
 export const ThreeItems = Template.bind({});
 ThreeItems.args = {
   items: [
-    { id: 'home', url: '#', name: 'Home' },
-    { id: 'blog', url: '#', name: 'Blog' },
-    { id: 'post1', url: '#', name: 'A Post' },
+    { id: 'home', slug: '#', label: 'Home' },
+    { id: 'blog', slug: '#', label: 'Blog' },
+    { id: 'post1', slug: '#', label: 'A Post' },
   ],
 };
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx
index 40bb1b8..ab72a31 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx
@@ -3,9 +3,9 @@ import { render, screen as rtlScreen } from '@testing-library/react';
 import { Breadcrumbs, type BreadcrumbsItem } from './breadcrumbs';
 
 const items: BreadcrumbsItem[] = [
-  { id: 'home', url: '#', name: 'Home' },
-  { id: 'blog', url: '#', name: 'Blog' },
-  { id: 'post1', url: '#', name: 'A Post' },
+  { id: 'home', slug: '#', label: 'Home' },
+  { id: 'blog', slug: '#', label: 'Blog' },
+  { id: 'post1', slug: '#', label: 'A Post' },
 ];
 
 describe('Breadcrumbs', () => {
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
index b6d3843..13434e1 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
@@ -9,13 +9,13 @@ export type BreadcrumbsItem = {
    */
   id: string;
   /**
-   * The item URL.
+   * The item label.
    */
-  url: string;
+  label: string;
   /**
-   * The item name.
+   * The item slug.
    */
-  name: string;
+  slug: string;
 };
 
 export type BreadcrumbsProps = Omit<NavProps, 'children'> & {
@@ -46,10 +46,10 @@ const BreadcrumbsWithRef: ForwardRefRenderFunction<
           return (
             <NavItem key={item.id}>
               {isLastItem ? (
-                <VisuallyHidden>{item.name}</VisuallyHidden>
+                <VisuallyHidden>{item.label}</VisuallyHidden>
               ) : (
                 <>
-                  <NavLink href={item.url} label={item.name} />
+                  <NavLink href={item.slug} label={item.label} />
                   <span aria-hidden className={styles.sep}>
                     {sep}
                   </span>