New Breadcrumbs component

lib/.storybook/components/ExampleContainer.tsx

@@ -1,9 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 
+type PseudoStates =
+  | "pseudo-active"
+  | "pseudo-focus"
+  | "pseudo-focus-visible"
+  | "pseudo-focus-within"
+  | "pseudo-hover"
+  | "pseudo-link"
+  | "pseudo-target"
+  | "pseudo-visited";
+
 type Props = {
   children?: React.ReactNode;
-  pseudoState?: string;
+  pseudoState?: PseudoStates;
   expanded?: boolean;
 };
 

lib/package.json

@@ -56,6 +56,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/color": "^3.0.3",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.0.18",
     "@types/styled-components": "5.1.29",
     "@types/uuid": "^9.0.6",

lib/src/breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcBreadcrumbs from "./Breadcrumbs";
+import DxcContainer from "../container/Container";
+import { HalstackProvider } from "../HalstackContext";
+import { userEvent, within } from "@storybook/testing-library";
+
+export default {
+  title: "Breadcrumbs",
+  component: DxcBreadcrumbs,
+};
+
+const items = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "User Menu",
+    href: "",
+  },
+  {
+    label: "Preferences",
+    href: "",
+  },
+  {
+    label: "Customization",
+    href: "",
+  },
+  {
+    label: "Dark Mode",
+    href: "",
+  },
+];
+
+const Breadcrumbs = () => (
+  <>
+    <Title title="Default" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcBreadcrumbs
+        items={[
+          {
+            label: "Home",
+            href: "/",
+          },
+          {
+            label: "User Menu",
+            href: "",
+          },
+          {
+            label: "Preferences",
+            href: "",
+          },
+          {
+            label: "Dark Mode",
+            href: "",
+          },
+        ]}
+      />
+    </ExampleContainer>
+    <Title title="Collapsed variant" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcBreadcrumbs items={items} />
+    </ExampleContainer>
+    <Title title="Collapsed variant without root" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcBreadcrumbs items={items} showRoot={false} />
+    </ExampleContainer>
+    <Title title="Focus state" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-focus">
+      <DxcBreadcrumbs items={items} />
+    </ExampleContainer>
+    <Title title="Hover state" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <DxcBreadcrumbs items={items} />
+    </ExampleContainer>
+    <Title title="Active state" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-active">
+      <DxcBreadcrumbs items={items} />
+    </ExampleContainer>
+    <Title title="Truncation and text ellipsis with tooltip (only when collapsed)" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="200px">
+        <DxcBreadcrumbs
+          items={[
+            {
+              label: "Root",
+              href: "/",
+            },
+            {
+              label: "Main folder",
+              href: "",
+            },
+            {
+              label: "User",
+              href: "",
+            },
+            {
+              label: "Very long label for the link",
+              href: "",
+            },
+          ]}
+          itemsBeforeCollapse={3}
+        />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="Truncation, text ellipsis with tooltip and without root" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer width="200px">
+        <DxcBreadcrumbs
+          items={[
+            {
+              label: "Root",
+              href: "/",
+            },
+            {
+              label: "Main folder",
+              href: "",
+            },
+            {
+              label: "User",
+              href: "",
+            },
+            {
+              label: "Very long label for the link",
+              href: "",
+            },
+          ]}
+          itemsBeforeCollapse={3}
+          showRoot={false}
+        />
+      </DxcContainer>
+    </ExampleContainer>
+    <Title title="Dropdown theming doesn't affect the collapsed trigger" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Opinionated theming" theme="light" level={4} />
+      <ExampleContainer>
+        <HalstackProvider
+          theme={{
+            dropdown: {
+              baseColor: "#fabada",
+              fontColor: "#999",
+              optionFontColor: "#4d4d4d",
+            },
+          }}
+        >
+          <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} />
+        </HalstackProvider>
+      </ExampleContainer>
+      <Title title="Advanced theming" theme="light" level={4} />
+      <ExampleContainer>
+        <HalstackProvider
+          advancedTheme={{
+            dropdown: {
+              buttonBackgroundColor: "#fabada",
+              buttonHeight: "100px",
+              buttonBorderThickness: "2px",
+              buttonBorderStyle: "solid",
+              buttonBorderColor: "#000",
+            },
+          }}
+        >
+          <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} />
+        </HalstackProvider>
+      </ExampleContainer>
+    </ExampleContainer>
+    <Title title="Collapsed variant with dropdown menu opened" theme="light" level={3} />
+    <ExampleContainer>
+      <DxcContainer height="200px">
+        <DxcBreadcrumbs items={items} />
+      </DxcContainer>
+    </ExampleContainer>
+  </>
+);
+
+export const Chromatic = Breadcrumbs.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const dropdowns = canvas.getAllByRole("button");
+  await userEvent.click(dropdowns[dropdowns.length - 1]);
+};

lib/src/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DxcBreadcrumbs from "./Breadcrumbs";
+import userEvent from "@testing-library/user-event";
+
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+const items = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "User Menu",
+    href: "",
+  },
+  {
+    label: "Preferences",
+    href: "",
+  },
+  {
+    label: "Dark Mode",
+    href: "",
+  },
+];
+
+describe("Breadcrumbs component tests", () => {
+  test("Renders with correct aria accessibility attributes", () => {
+    const { getByText, getByRole } = render(<DxcBreadcrumbs items={items} ariaLabel="example" />);
+    const breadcrumbs = getByRole("navigation");
+    expect(breadcrumbs.getAttribute("aria-label")).toBe("example");
+    expect(getByText("Dark Mode").parentElement.getAttribute("aria-current")).toBe("page");
+  });
+  test("Collapsed variant renders all the items inside the dropdown menu except the root and the current page", async () => {
+    const { queryByText, getByText, getByRole } = render(<DxcBreadcrumbs items={items} itemsBeforeCollapse={3} />);
+    const dropdown = getByRole("button");
+    expect(queryByText("User Menu")).toBeFalsy();
+    expect(queryByText("Preferences")).toBeFalsy();
+    await userEvent.click(dropdown);
+    expect(getByText("User Menu")).toBeTruthy();
+    expect(getByText("Preferences")).toBeTruthy();
+  });
+  test("Collapsed variant, with show root set to false, renders all the items inside the dropdown menu except the current page", async () => {
+    const { queryByText, getByText, getByRole } = render(
+      <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} showRoot={false} />
+    );
+    const dropdown = getByRole("button");
+    expect(queryByText("Home")).toBeFalsy();
+    expect(queryByText("User Menu")).toBeFalsy();
+    expect(queryByText("Preferences")).toBeFalsy();
+    await userEvent.click(dropdown);
+    expect(getByText("Home")).toBeTruthy();
+    expect(getByText("User Menu")).toBeTruthy();
+    expect(getByText("Preferences")).toBeTruthy();
+  });
+  test("If itemsBeforeCollapse value is below two, ignores it and renders a collapsed variant", async () => {
+    const { getByText, getByRole } = render(<DxcBreadcrumbs items={items} itemsBeforeCollapse={-1} />);
+    expect(getByText("Home")).toBeTruthy();
+    expect(getByRole("button")).toBeTruthy();
+    expect(getByText("Dark Mode")).toBeTruthy();
+  });
+  test("The onClick prop from an item is properly called", () => {
+    const onItemClick = jest.fn();
+    const { getByText } = render(
+      <DxcBreadcrumbs
+        onItemClick={onItemClick}
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Preferences", href: "/" },
+        ]}
+      />
+    );
+    userEvent.click(getByText("Home"));
+    expect(onItemClick).toHaveBeenCalled();
+  });
+  test("The onClick prop from an item is properly called (collapsed)", async () => {
+    const onItemClick = jest.fn();
+    const { getByText, getByRole } = render(
+      <DxcBreadcrumbs
+        onItemClick={onItemClick}
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Preferences", href: "/" },
+          { label: "Dark Mode", href: "/" },
+        ]}
+        itemsBeforeCollapse={2}
+      />
+    );
+    await userEvent.click(getByRole("button"));
+    await userEvent.click(getByText("Preferences"));
+    expect(onItemClick).toHaveBeenCalled();
+  });
+});