From 4296ddbdcc9c708603d2ab739c1c4be992990e6c Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Mon, 9 Dec 2024 14:45:23 +0100
Subject: [PATCH] Add breadcrumb component

---
 ...Breadcrumb-Controlled-1-chromium-linux.png | Bin 0 -> 11330 bytes
 .../Breadcrumb-Default-1-chromium-linux.png   | Bin 0 -> 7697 bytes
 .../Breadcrumb/Breadcrumb.module.css          |  65 +++++++++
 .../Breadcrumb/Breadcrumb.stories.tsx         |  81 +++++++++++
 src/components/Breadcrumb/Breadcrumb.test.tsx |  63 +++++++++
 src/components/Breadcrumb/Breadcrumb.tsx      | 126 ++++++++++++++++++
 .../__snapshots__/Breadcrumb.test.tsx.snap    |  68 ++++++++++
 src/components/Breadcrumb/index.ts            |  17 +++
 src/index.ts                                  |   1 +
 9 files changed, 421 insertions(+)
 create mode 100644 playwright/visual.test.ts-snapshots/Breadcrumb-Controlled-1-chromium-linux.png
 create mode 100644 playwright/visual.test.ts-snapshots/Breadcrumb-Default-1-chromium-linux.png
 create mode 100644 src/components/Breadcrumb/Breadcrumb.module.css
 create mode 100644 src/components/Breadcrumb/Breadcrumb.stories.tsx
 create mode 100644 src/components/Breadcrumb/Breadcrumb.test.tsx
 create mode 100644 src/components/Breadcrumb/Breadcrumb.tsx
 create mode 100644 src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
 create mode 100644 src/components/Breadcrumb/index.ts

diff --git a/playwright/visual.test.ts-snapshots/Breadcrumb-Controlled-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Breadcrumb-Controlled-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3bd0b523d0e9a15a708d2471bfdd4800016d2783
GIT binary patch
literal 11330
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
TK7ua=L*Tb9|55gLx0wG1dZg-m

literal 0
HcmV?d00001

diff --git a/playwright/visual.test.ts-snapshots/Breadcrumb-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Breadcrumb-Default-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f7320bc6ced3b7f0c685c8f907fbe871c7aa3da
GIT binary patch
literal 7697
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
Qj~4{J<oN^n`<r+F2QLeiq5uE@

literal 0
HcmV?d00001

diff --git a/src/components/Breadcrumb/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css
new file mode 100644
index 00000000..c7156df2
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.module.css
@@ -0,0 +1,65 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  block-size: 40px;
+  gap: var(--cpd-space-3x);
+  padding-block-end: var(--cpd-space-3x);
+  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
+  box-sizing: border-box;
+
+  .pages {
+    display: flex;
+    gap: var(--cpd-space-1x);
+
+    /* override list styles */
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    a {
+      cursor: pointer;
+    }
+
+    .last-page {
+      font: var(--cpd-font-body-sm-regular);
+      color: var(--cpd-color-text-secondary);
+    }
+
+    /*
+     * Breadcrumb separator
+     * We want this separator to be only visual and to not be in the accessibility tree.
+     * The nav html element already provides an accessible way to separate the links.
+     */
+    li + li::before {
+      display: inline-block;
+      margin: 0 0.3em 0 0.25em;
+      transform: rotate(15deg);
+      border-inline-end: 1px solid var(--cpd-color-text-secondary);
+      block-size: var(--cpd-space-3x);
+      content: "";
+    }
+
+    /* Last page */
+    :last-child {
+      span {
+        padding-inline-start: var(--cpd-space-1x);
+      }
+    }
+  }
+}
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx
new file mode 100644
index 00000000..115c44c5
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -0,0 +1,81 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Breadcrumb as BreadcrumbComponent } from "./Breadcrumb";
+import { Meta, StoryFn } from "@storybook/react";
+import React, { ComponentProps, useState } from "react";
+import { Button } from "../Button";
+import { fn } from "@storybook/test";
+
+export default {
+  title: "Breadcrumb",
+  component: BreadcrumbComponent,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    pages: ["1st level page", "2nd level page", "Current page"],
+    onPageClick: fn(),
+    onBackClick: fn(),
+    backLabel: "Back",
+  },
+} as Meta<typeof BreadcrumbComponent>;
+
+const Template: StoryFn<typeof BreadcrumbComponent> = (
+  args: ComponentProps<typeof BreadcrumbComponent>,
+) => {
+  return <BreadcrumbComponent {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+function ControlledBreadcrumb(
+  args: ComponentProps<typeof BreadcrumbComponent>,
+) {
+  const pagesContent = ["Page 1", "Page 2", "Page 3"];
+  const [currentIndex, setCurrentIndex] = useState(2);
+  const currentPage = pagesContent[currentIndex];
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        alignItems: "flex-start",
+      }}
+    >
+      <BreadcrumbComponent
+        backLabel="Back"
+        pages={args.pages.slice(0, currentIndex + 1)}
+        onPageClick={(_page, index) => setCurrentIndex(index)}
+        onBackClick={() =>
+          setCurrentIndex((_currentIndex) =>
+            _currentIndex === 0 ? 0 : _currentIndex - 1,
+          )
+        }
+      />
+      {currentPage}
+      <Button onClick={() => setCurrentIndex(2)}>Reset</Button>
+    </div>
+  );
+}
+
+export const Controlled: StoryFn<typeof BreadcrumbComponent> = (
+  args: ComponentProps<typeof BreadcrumbComponent>,
+) => {
+  return <ControlledBreadcrumb {...args} />;
+};
diff --git a/src/components/Breadcrumb/Breadcrumb.test.tsx b/src/components/Breadcrumb/Breadcrumb.test.tsx
new file mode 100644
index 00000000..1105a2d1
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { composeStories } from "@storybook/react";
+import * as stories from "./Breadcrumb.stories.tsx";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { Breadcrumb } from "./Breadcrumb.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("Breadcrumb", () => {
+  it("should render", () => {
+    render(<Default />);
+    expect(screen.getByRole("navigation")).toMatchSnapshot();
+  });
+
+  it("should call onPageClick when a page is clicked", async () => {
+    const user = userEvent.setup();
+    const onPageClick = vi.fn();
+    const onBackClick = vi.fn();
+
+    render(
+      <Breadcrumb
+        pages={["1st level page", "2nd level page", "Current page"]}
+        onPageClick={onPageClick}
+        onBackClick={onBackClick}
+        backLabel="Back"
+      />,
+    );
+
+    // Click listener
+    await user.click(screen.getByRole("button", { name: "1st level page" }));
+    expect(onPageClick).toHaveBeenCalledWith("1st level page", 0);
+
+    onPageClick.mockReset();
+    // Keyboard listener
+    await user.type(
+      screen.getByRole("button", { name: "1st level page" }),
+      " ",
+    );
+    expect(onPageClick).toHaveBeenCalledWith("1st level page", 0);
+
+    // Back button
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    expect(onBackClick).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 00000000..dcc82688
--- /dev/null
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,126 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from "react";
+import { IconButton } from "../Button";
+import Chevron from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
+import styles from "./Breadcrumb.module.css";
+import { Link } from "../Link/Link.tsx";
+import classNames from "classnames";
+
+interface BreadcrumbProps extends HTMLProps<HTMLElement> {
+  /**
+   * The label for the back button.
+   */
+  backLabel: string;
+  /**
+   * The click handler for the back button.
+   */
+  onBackClick: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * The pages to display in the breadcrumb.
+   * All the pages except the last one are displayed as links.
+   */
+  pages: string[];
+  /**
+   * The click handler for a page.
+   * @param page - The page that was clicked.
+   * @param index - The index of the page that was clicked.
+   */
+  onPageClick: (page: string, index: number) => void;
+}
+
+/**
+ * A breadcrumb component.
+ */
+export function Breadcrumb({
+  backLabel,
+  onBackClick,
+  pages,
+  onPageClick,
+  className,
+  ...props
+}: BreadcrumbProps): JSX.Element {
+  return (
+    <nav className={classNames(styles.breadcrumb, className)} {...props}>
+      <IconButton
+        subtleBackground={true}
+        size="28px"
+        aria-label={backLabel}
+        onClick={onBackClick}
+      >
+        <Chevron />
+      </IconButton>
+      <ol className={styles.pages}>
+        {pages.map((page, index) => (
+          <Page
+            key={index}
+            page={page}
+            isLastPage={index === pages.length - 1}
+            onClick={() => onPageClick(page, index)}
+          />
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+interface PageProps {
+  /**
+   * The page to display.
+   */
+  page: string;
+  /**
+   * Whether this is the last page in the breadcrumb.
+   */
+  isLastPage: boolean;
+  /**
+   * The click handler for the page, ignore for last page.
+   */
+  onClick: () => void;
+}
+
+/**
+ * A breadcrumb page.
+ * If not the last page, the page is displayed in a link.
+ */
+function Page({ page, isLastPage, onClick }: PageProps): JSX.Element {
+  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {
+    if (event.key === " ") {
+      onClick();
+    }
+  };
+
+  return (
+    <li>
+      {isLastPage ? (
+        <span className={styles["last-page"]} aria-current="page">
+          {page}
+        </span>
+      ) : (
+        <Link
+          size="small"
+          role="button"
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          tabIndex={0}
+        >
+          {page}
+        </Link>
+      )}
+    </li>
+  );
+}
diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
new file mode 100644
index 00000000..53e277db
--- /dev/null
+++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -0,0 +1,68 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Breadcrumb > should render 1`] = `
+<nav
+  class="_breadcrumb_c693d3"
+>
+  <button
+    aria-label="Back"
+    class="_icon-button_e3253e _subtle-bg_e3253e"
+    role="button"
+    style="--cpd-icon-button-size: 28px;"
+    tabindex="0"
+  >
+    <div
+      class="_indicator-icon_ab1fc6"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+        />
+      </svg>
+    </div>
+  </button>
+  <ol
+    class="_pages_c693d3"
+  >
+    <li>
+      <a
+        class="_link_379d57"
+        data-kind="primary"
+        data-size="small"
+        rel="noreferrer noopener"
+        role="button"
+        tabindex="0"
+      >
+        1st level page
+      </a>
+    </li>
+    <li>
+      <a
+        class="_link_379d57"
+        data-kind="primary"
+        data-size="small"
+        rel="noreferrer noopener"
+        role="button"
+        tabindex="0"
+      >
+        2nd level page
+      </a>
+    </li>
+    <li>
+      <span
+        aria-current="page"
+        class="_last-page_c693d3"
+      >
+        Current page
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts
new file mode 100644
index 00000000..c760b48f
--- /dev/null
+++ b/src/components/Breadcrumb/index.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export { Breadcrumb } from "./Breadcrumb";
diff --git a/src/index.ts b/src/index.ts
index 6bd84107..7017a0bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -51,6 +51,7 @@ export { ReleaseAnnouncement } from "./components/ReleaseAnnouncement";
 export { Toast } from "./components/Toast/Toast";
 export { Dropdown } from "./components/Dropdown";
 export { InlineSpinner } from "./components/InlineSpinner";
+export { Breadcrumb } from "./components/Breadcrumb";
 
 export {
   TextControl,