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,8 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.0.0",
     "@types/color": "^3.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/react": "^18.0.18",
     "@types/styled-components": "5.1.29",
     "@types/uuid": "^9.0.6",

lib/setupJestAxe.js

@@ -1,3 +1,3 @@
-import { toHaveNoViolations } from "jest-axe";
+import { toHaveNoViolations } from 'jest-axe';
 
 expect.extend(toHaveNoViolations);

lib/src/breadcrumbs/Breadcrumbs.accessibility.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "../../test/accessibility/axe-helper.js";
+import DxcBreadcrumbs from "./Breadcrumbs";
+import { disabledRules as rules } from "../../test/accessibility/rules/specific/breadcrumbs/disabledRules.js";
+
+const disabledRules = {
+  rules: rules.reduce((rulesObj, rule) => {
+    rulesObj[rule] = { enabled: false };
+    return rulesObj;
+  }, {}),
+};
+
+const items = [
+  {
+    label: "Home",
+    href: "/",
+  },
+  {
+    label: "User Menu",
+    href: "",
+  },
+  {
+    label: "Preferences",
+    href: "",
+  },
+  {
+    label: "Dark Mode",
+    href: "",
+  },
+];
+
+describe("Breadcrumbs component accessibility tests", () => {
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(<DxcBreadcrumbs items={items} itemsBeforeCollapse={3} ariaLabel="example" />);
+    const results = await axe(container, disabledRules);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("Should not have basic accessibility issues without root", async () => {
+    const { container } = render(
+      <DxcBreadcrumbs items={items} itemsBeforeCollapse={3} ariaLabel="example" showRoot={false} />
+    );
+    const results = await axe(container, disabledRules);
+    expect(results).toHaveNoViolations();
+  });
+});

lib/src/breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,194 @@
+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";
+import { disabledRules } from "../../test/accessibility/rules/specific/breadcrumbs/disabledRules";
+import preview from "../../.storybook/preview";
+
+export default {
+  title: "Breadcrumbs",
+  component: DxcBreadcrumbs,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, enabled: false })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
+};
+
+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]);
+};