refactor(components): rewrite Breadcrumbs component

6 files changed, 152 insertions, 0 deletions

diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
new file mode 100644
index 0000000..1be81c4
--- /dev/null
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
@@ -0,0 +1,7 @@
+.wrapper {
+  width: fit-content;
+}
+
+.sep {
+  margin-inline-start: var(--spacing-xs);
+}
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx
new file mode 100644
index 0000000..4736b26
--- /dev/null
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.stories.tsx
@@ -0,0 +1,55 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Breadcrumbs } from './breadcrumbs';
+
+/**
+ * Breadcrumbs - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Nav/Breadcrumbs',
+  component: Breadcrumbs,
+  argTypes: {
+    items: {
+      description: 'The breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof Breadcrumbs>;
+
+const Template: ComponentStory<typeof Breadcrumbs> = (args) => (
+  <Breadcrumbs {...args} />
+);
+
+/**
+ * Breadcrumbs Stories - One item
+ */
+export const OneItem = Template.bind({});
+OneItem.args = {
+  items: [{ id: 'home', url: '#', name: 'Home' }],
+};
+
+/**
+ * Breadcrumbs Stories - Two items
+ */
+export const TwoItems = Template.bind({});
+TwoItems.args = {
+  items: [
+    { id: 'home', url: '#', name: 'Home' },
+    { id: 'blog', url: '#', name: 'Blog' },
+  ],
+};
+
+/**
+ * Breadcrumbs 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/organisms/nav/breadcrumbs/breadcrumbs.test.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx
new file mode 100644
index 0000000..40bb1b8
--- /dev/null
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.test.tsx
@@ -0,0 +1,22 @@
+import { describe, expect, it } from '@jest/globals';
+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' },
+];
+
+describe('Breadcrumbs', () => {
+  it('renders a list of items wrapped in a nav element', () => {
+    const ariaLabel = 'error tempore iure';
+
+    render(<Breadcrumbs aria-label={ariaLabel} items={items} />);
+
+    expect(rtlScreen.getByRole('navigation')).toHaveAccessibleName(ariaLabel);
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(items.length);
+    // The last item should not be linked
+    expect(rtlScreen.getAllByRole('link')).toHaveLength(items.length - 1);
+  });
+});
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 0000000..b6d3843
--- /dev/null
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,66 @@
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
+import { Nav, VisuallyHidden, type NavProps } from '../../../atoms';
+import { NavItem, NavLink, NavList } from '../../../molecules';
+import styles from './breadcrumbs.module.scss';
+
+export type BreadcrumbsItem = {
+  /**
+   * The item id.
+   */
+  id: string;
+  /**
+   * The item URL.
+   */
+  url: string;
+  /**
+   * The item name.
+   */
+  name: string;
+};
+
+export type BreadcrumbsProps = Omit<NavProps, 'children'> & {
+  /**
+   * The breadcrumbs items.
+   */
+  items: BreadcrumbsItem[];
+};
+
+const BreadcrumbsWithRef: ForwardRefRenderFunction<
+  HTMLElement,
+  BreadcrumbsProps
+> = ({ className = '', items, ...props }, ref) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+  const sep = '>';
+
+  return (
+    <Nav {...props} className={wrapperClass} ref={ref}>
+      <NavList
+        isInline
+        isOrdered
+        // eslint-disable-next-line react/jsx-no-literals
+        spacing="xs"
+      >
+        {items.map((item, index) => {
+          const isLastItem = items.length === index + 1;
+
+          return (
+            <NavItem key={item.id}>
+              {isLastItem ? (
+                <VisuallyHidden>{item.name}</VisuallyHidden>
+              ) : (
+                <>
+                  <NavLink href={item.url} label={item.name} />
+                  <span aria-hidden className={styles.sep}>
+                    {sep}
+                  </span>
+                </>
+              )}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};
+
+export const Breadcrumbs = forwardRef(BreadcrumbsWithRef);
diff --git a/src/components/organisms/nav/breadcrumbs/index.ts b/src/components/organisms/nav/breadcrumbs/index.ts
new file mode 100644
index 0000000..8d59853
--- /dev/null
+++ b/src/components/organisms/nav/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './breadcrumbs';
diff --git a/src/components/organisms/nav/index.ts b/src/components/organisms/nav/index.ts
index cb72765..ad899e0 100644
--- a/src/components/organisms/nav/index.ts
+++ b/src/components/organisms/nav/index.ts
@@ -1 +1,2 @@
+export * from './breadcrumbs';
 export * from './pagination';