@purpurds/breadcrumbs 3.0.0

package/dist/meta.d.ts

@@ -0,0 +1,11 @@
+export type MetaListItem = {
+    "@type": string;
+    position: number;
+    name: string;
+    item: string;
+};
+type MakeMetaListItem = (name: string, item: string, position: number) => MetaListItem;
+export declare const metaListItem: MakeMetaListItem;
+export declare const metaSchema: (itemListElement: MetaListItem[]) => string;
+export {};
+//# sourceMappingURL=meta.d.ts.map

package/dist/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../src/meta.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,gBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,YAAY,CAAC;AAEvF,eAAO,MAAM,YAAY,EAAE,gBAKzB,CAAC;AAEH,eAAO,MAAM,UAAU,oBAAqB,YAAY,EAAE,WAKtD,CAAC"}

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-breadcrumbs_hceki_1{font-family:var(--purpur-typography-family-default);padding:var(--purpur-spacing-150) 0}._purpur-breadcrumbs_hceki_1 a{font-size:var(--purpur-typography-scale-75);text-underline-offset:3px;padding:14px 2px;letter-spacing:.3px}._purpur-breadcrumbs_hceki_1 a:hover,._purpur-breadcrumbs_hceki_1 a:active{text-decoration-thickness:2px;text-underline-offset:2px}._purpur-breadcrumbs--default_hceki_15,._purpur-breadcrumbs--default_hceki_15 a{color:var(--purpur-color-text-interactive-primary)}._purpur-breadcrumbs--default_hceki_15 a:hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-breadcrumbs--default_hceki_15 a:active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-breadcrumbs--negative_hceki_29,._purpur-breadcrumbs--negative_hceki_29 a{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-breadcrumbs--negative_hceki_29 a:hover{color:var(--purpur-color-text-interactive-primary-negative-hover);background:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-breadcrumbs--negative_hceki_29 a:active{color:var(--purpur-color-text-interactive-primary-negative-active);background:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-breadcrumbs__list_hceki_43{display:flex;flex-direction:row;align-items:center;gap:var(--purpur-spacing-50);padding:0;list-style:none}._purpur-breadcrumbs__home_hceki_51{display:none}@media screen and (min-width: 600px){._purpur-breadcrumbs__home_hceki_51{display:flex;align-items:center}}._purpur-breadcrumb-item_hceki_61{white-space:nowrap}._purpur-breadcrumb-item--current_hceki_64{text-overflow:ellipsis;overflow:hidden}._purpur-breadcrumb-item--current_hceki_64 a{color:var(--purpur-color-text-default);text-decoration:none;font-weight:var(--purpur-typography-weight-medium)}._purpur-breadcrumb-item--current_hceki_64 a:hover{background:none}._purpur-breadcrumb-item_hceki_61:not(:nth-last-child(2)):not(:last-child){display:none}@media screen and (min-width: 600px){._purpur-breadcrumb-item_hceki_61:not(:nth-last-child(2)):not(:last-child){display:initial}}._purpur-breadcrumb-item--negative_hceki_84._purpur-breadcrumb-item--current_hceki_64 a{color:var(--purpur-color-text-default-negative)}._purpur-breadcrumb-item__separator_hceki_87{font-size:var(--purpur-typography-scale-75);margin-left:var(--purpur-spacing-50)}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@purpurds/breadcrumbs",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/breadcrumbs.cjs.js",
+  "types": "./dist/breadcrumbs.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/breadcrumbs.cjs.js",
+      "systemjs": "./dist/breadcrumbs.system.js",
+      "types": "./dist/breadcrumbs.d.ts",
+      "default": "./dist/breadcrumbs.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/breadcrumbs.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,101 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as BreadcrumbsStories from "./src/breadcrumbs.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Breadcrumbs" of={BreadcrumbsStories} />
+
+# Breadcrumbs
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+When a website has a lot of pages, breadcrumbs can help a user find their current location within the overal hierarchy. This page shows how you can make breadcrumbs accessible to all users.
+
+Use them when you have several levels of navigation and want to make the parent pages available as navigation.
+
+### Accessibility
+
+The Purpur breadcrumbs are accessible by default according to best practices. The last BreadcrumbsItem is the one belonging to the page the user is currently on.
+
+### Meta Data & SEO
+
+Another benefit of helping the user find their way, is that we also help the search engines increasing understanding of our site.
+
+By default, the breadcrumbs will render a [`JSON+LD` script tag](?path=/story/components-breadcrumbs--breadcrumb-meta-data) with [structured meta data](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#json-ld) extracted from the breadcrumb items.
+
+### Custom Link Component
+
+If you need a [custom link](#custom-link), perhaps to use a router, like the `next/link` component, you can simply [pass your custom link](#custom-link) component and skip the `href` property on Breadcrumbs.Item, only passing it directly to `<Link />`.
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/breadcrumbs": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/breadcrumbs/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Breadcrumbs } from "@purpurds/breadcrumbs";
+
+export const MyComponent = () => {
+  return (
+    <Breadcrumbs>
+      <Breadcrumbs.Item href="/ships">Ships</Breadcrumbs.Item>
+      <Breadcrumbs.Item href="/ships/twin-seaters/">Twin Seaters</Breadcrumbs.Item>
+      <Breadcrumbs.Item href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Breadcrumbs.Item>
+    </Breadcrumbs>
+  );
+};
+```
+
+### Custom Link
+
+With a custom link component such as `next/link`:
+
+```tsx
+import { Breadcrumbs } from "@purpurds/breadcrumbs";
+import Link from "next/link";
+
+export const MyComponent = () => {
+  return (
+    <Breadcrumbs>
+      <Breadcrumbs.Item>
+        <Link href="/ships">Ships</Link>
+      </Breadcrumbs.Item>
+      <Breadcrumbs.Item>
+        <Link href="/ships/twin-seaters">Twin Seaters</Link>
+      </Breadcrumbs.Item>
+      <Breadcrumbs.Item>
+        <Link href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Link>
+      </Breadcrumbs.Item>
+    </Breadcrumbs>
+  );
+};
+```

package/src/breadcrumbs.module.scss

@@ -0,0 +1,118 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-breadcrumbs {
+  font-family: var(--purpur-typography-family-default);
+
+  padding: var(--purpur-spacing-150) 0;
+
+  a {
+    font-size: var(--purpur-typography-scale-75);
+    text-underline-offset: 3px;
+    padding: 14px 2px;
+    letter-spacing: 0.3px;
+
+    &:hover,
+    &:active {
+      text-decoration-thickness: 2px;
+      text-underline-offset: 2px;
+    }
+  }
+
+  &--default {
+    color: var(--purpur-color-text-interactive-primary);
+
+    a {
+      color: var(--purpur-color-text-interactive-primary);
+
+      &:hover {
+        color: var(--purpur-color-text-interactive-primary-hover);
+        background: var(--purpur-color-background-interactive-transparent-hover);
+      }
+
+      &:active {
+        color: var(--purpur-color-text-interactive-primary-active);
+        background: var(--purpur-color-background-interactive-transparent-active);
+      }
+    }
+  }
+
+  &--negative {
+    color: var(--purpur-color-text-interactive-primary-negative);
+
+    a {
+      color: var(--purpur-color-text-interactive-primary-negative);
+
+      &:hover {
+        color: var(--purpur-color-text-interactive-primary-negative-hover);
+        background: var(--purpur-color-background-interactive-transparent-negative-hover);
+      }
+
+      &:active {
+        color: var(--purpur-color-text-interactive-primary-negative-active);
+        background: var(--purpur-color-background-interactive-transparent-negative-active);
+      }
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--purpur-spacing-50);
+
+    padding: 0;
+
+    list-style: none;
+  }
+
+  &__home {
+    display: none;
+  }
+
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    &__home {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.purpur-breadcrumb-item {
+  white-space: nowrap;
+
+  &--current {
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    a {
+      color: var(--purpur-color-text-default);
+      text-decoration: none;
+      font-weight: var(--purpur-typography-weight-medium);
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  &:not(:nth-last-child(2)):not(:last-child) {
+    display: none;
+  }
+
+  @media screen and (min-width: #{$purpur-breakpoint-md}) {
+    &:not(:nth-last-child(2)):not(:last-child) {
+      display: initial;
+    }
+  }
+
+  &--negative.purpur-breadcrumb-item--current {
+    a {
+      color: var(--purpur-color-text-default-negative);
+    }
+  }
+
+  &__separator {
+    font-size: var(--purpur-typography-scale-75);
+    margin-left: var(--purpur-spacing-50);
+  }
+}

package/src/breadcrumbs.stories.tsx

@@ -0,0 +1,180 @@
+import React, { ReactElement, ReactNode, useEffect, useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/icon/styles";
+import {
+  Breadcrumbs,
+  breadcrumbVariants,
+  BreadcrumbVariant,
+  BreadcrumbsItemProps,
+} from "./breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+type LinkProps = {
+  href?: string;
+  children: ReactNode;
+};
+
+type RendererProps = {
+  children: ReactElement<BreadcrumbsItemProps>;
+  variant: BreadcrumbVariant;
+};
+
+const MetaData = () => {
+  const [code, setCode] = useState("");
+
+  useEffect(() => {
+    const meta = document.querySelector<HTMLScriptElement>(
+      "script[type='application/ld+json']"
+    )?.text;
+
+    if (meta) {
+      const stringified = JSON.parse(meta);
+      const clean = JSON.stringify(stringified, null, 2);
+      setCode(clean);
+    }
+  }, []);
+
+  return (
+    <>
+      <p>
+        This is outputted as a{" "}
+        <a
+          href="https://developers.google.com/search/docs/appearance/structured-data/breadcrumb"
+          target="_blank"
+          rel="noopener noreferer"
+        >
+          BreadcrumbList
+        </a>{" "}
+        in JSON-LD schema format:
+      </p>
+      <pre
+        style={{
+          backgroundColor: "var(--purpur-color-beige-50)",
+          padding: "1rem",
+        }}
+      >
+        {`<script type="application/ld+json">\n`}
+        {code}
+        {`\n</script>`}
+      </pre>
+    </>
+  );
+};
+
+const Link = ({ href, children }: LinkProps) => <a href={href}>{children}</a>;
+
+const Renderer =
+  (showMeta = false) =>
+  ({ children, variant, ...args }: RendererProps) => {
+    return (
+      <>
+        <div
+          style={{
+            backgroundColor:
+              variant && variant.endsWith("negative")
+                ? "var(--purpur-color-background-tone-on-tone-primary)"
+                : undefined,
+          }}
+        >
+          <Breadcrumbs variant={variant} {...args}>
+            {children}
+          </Breadcrumbs>
+        </div>
+        {showMeta ? <MetaData /> : null}
+      </>
+    );
+  };
+
+export const DefaultVariant: Story = {
+  name: "Default variant",
+  args: {
+    meta: true,
+    variant: breadcrumbVariants[0],
+    children: [
+      <Breadcrumbs.Item href="/products" key={1}>
+        Products
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={2}>
+        <a href="/products/steel">Steel</a>
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={3}>
+        <Link href="/products/steel/beskar">Beskar</Link>
+      </Breadcrumbs.Item>,
+    ],
+  },
+  parameters: {
+    design: [
+      {
+        name: "Breadcrumbs",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=27132%3A14635&mode=dev",
+      },
+    ],
+  },
+};
+
+export const NegativeVariant: Story = {
+  name: "Negative variant",
+  args: {
+    variant: breadcrumbVariants[1],
+    children: [
+      <Breadcrumbs.Item href="/galaxies" key={0}>
+        Galaxies
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item href="/outer-rim" key={1}>
+        Outer Rim
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item href="/mandalore" key={2}>
+        Mandalore
+      </Breadcrumbs.Item>,
+    ],
+  },
+  render: Renderer(false),
+};
+
+export const CustomItem: Story = {
+  name: "Custom Breadcrumb Items",
+  args: {
+    variant: breadcrumbVariants[0],
+    children: [
+      <Breadcrumbs.Item key={0} href="/products">
+        Products
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={1}>
+        <Link href="/products/laser-swords">Laser Swords</Link>
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={2}>
+        <a href="/products/laser-swords/darksaber">Darksaber</a>
+      </Breadcrumbs.Item>,
+    ],
+  },
+  render: Renderer(false),
+};
+
+export const BreadcrumbMetaData: Story = {
+  name: "Meta data by default",
+  args: {
+    variant: breadcrumbVariants[0],
+    children: [
+      <Breadcrumbs.Item key={0} href="/ships">
+        Ships
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={1} href="/ships/twin-seaters/">
+        Twin Seaters
+      </Breadcrumbs.Item>,
+      <Breadcrumbs.Item key={2}>
+        <Link href="/ships/twin-seaters/naboo-n1">N1 Starfighter</Link>
+      </Breadcrumbs.Item>,
+    ],
+  },
+  render: Renderer(true),
+};

package/src/breadcrumbs.test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Breadcrumbs } from "./breadcrumbs";
+
+expect.extend(matchers);
+afterEach(cleanup);
+
+describe("Breadcrumbs", () => {
+  it("renders a breadcrumb item", () => {
+    render(
+      <Breadcrumbs variant="default">
+        <Breadcrumbs.Item href="/link" data-testid="item">
+          Products
+        </Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByTestId("item")).toBeInstanceOf(HTMLAnchorElement);
+  });
+
+  it("renders custom link", () => {
+    render(
+      <Breadcrumbs variant="default">
+        <Breadcrumbs.Item href="/link">Products</Breadcrumbs.Item>
+        <Breadcrumbs.Item data-testid="custom">
+          <a href="/">Custom link</a>
+        </Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByTestId("custom")).toBeInTheDocument();
+  });
+
+  it("marks the last breadcrumb item as aria-current=page", () => {
+    render(
+      <Breadcrumbs variant="default">
+        <Breadcrumbs.Item href="/link">Products</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/link/sub" data-testid="last">
+          Sub
+        </Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText("Sub").getAttribute("aria-current")).toEqual("page");
+  });
+
+  it("renders schema+ld json for meta data", () => {
+    render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/link">Products</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/link/sub" data-testid="last">
+          Sub
+        </Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    const parsedMeta = JSON.parse(screen.getByTestId("breadcrumbs-meta").innerHTML);
+    expect(parsedMeta["itemListElement"].length).toEqual(2);
+  })
+});

package/src/breadcrumbs.tsx

@@ -0,0 +1,157 @@
+import React, { Children, cloneElement, createElement, ReactElement } from "react";
+import { IconHome } from "@purpurds/icon";
+import c from "classnames";
+
+import styles from "./breadcrumbs.module.scss";
+import { MetaListItem, metaListItem, metaSchema } from "./meta";
+
+export const BREADCRUMB_VARIANT = {
+  DEFAULT: "default",
+  NEGATIVE: "negative",
+} as const;
+
+export const breadcrumbVariants = Object.values(BREADCRUMB_VARIANT);
+export type BreadcrumbVariant = (typeof BREADCRUMB_VARIANT)[keyof typeof BREADCRUMB_VARIANT];
+
+export type BreadcrumbsProps = {
+  ["data-testid"]?: string;
+  ariaLabel?: string;
+  children: ReactElement<BreadcrumbsItemProps> | Array<ReactElement<BreadcrumbsItemProps>>;
+  className?: string;
+  meta?: boolean;
+  variant?: BreadcrumbVariant;
+};
+
+type CommonItemProps = {
+  current?: boolean;
+  variant?: BreadcrumbVariant;
+  ["data-testid"]?: string;
+  ariaLabel?: string;
+  meta?: boolean;
+};
+
+export type BreadcrumbsItemProps = CommonItemProps & Conditional;
+
+type Conditional =
+  | {
+      href?: string;
+      children: string;
+    }
+  | {
+      href?: never;
+      children: ReactElement<HTMLAnchorElement>;
+    };
+
+const rootClassName = "purpur-breadcrumbs";
+const itemClassName = "purpur-breadcrumb-item";
+
+const Breadcrumbs = ({
+  ["data-testid"]: dataTestId,
+  ariaLabel,
+  children,
+  className,
+  meta = true,
+  variant = "default",
+}: BreadcrumbsProps) => {
+  const classes = c([className, styles[rootClassName], styles[`${rootClassName}--${variant}`]]);
+
+  const maxIndex = Children.count(children);
+
+  const metaListItems: MetaListItem[] = [];
+
+  const items = Children.map(children, (item, index) => {
+    const position = index + 1;
+    const current = maxIndex === position;
+
+    const grandChildren = item.props.children;
+    const grandGrandChildren = typeof grandChildren === "string" ? null : grandChildren.props;
+
+    let name = null,
+      href = null;
+
+    if (typeof grandChildren === "string") {
+      name = grandChildren;
+      href = item.props.href;
+    } else if (grandGrandChildren?.children && typeof grandGrandChildren?.children === "string") {
+      name = grandGrandChildren.children;
+      href = grandGrandChildren.href;
+    }
+
+    if (name && href) {
+      metaListItems.push(metaListItem(name, href, position));
+    }
+
+    const child = cloneElement(item, {
+      current,
+      variant,
+    });
+
+    return child;
+  });
+
+  const schema = metaListItems.length === maxIndex ? metaSchema(metaListItems) : null;
+
+  return (
+    <nav data-testid={dataTestId} aria-label={ariaLabel || "Breadcrumb"} className={classes}>
+      <ol className={styles[`${rootClassName}__list`]}>
+        <li aria-hidden="true" className={styles[`${rootClassName}__home`]}>
+          <IconHome size="xs" />
+        </li>
+        {items}
+      </ol>
+      {meta && schema ? (
+        <script
+          type="application/ld+json"
+          data-testid="breadcrumbs-meta"
+          dangerouslySetInnerHTML={{ __html: schema }}
+        />
+      ) : null}
+    </nav>
+  );
+};
+
+const Item = ({
+  href,
+  ["data-testid"]: dataTestId,
+  children,
+  current = false,
+  variant = "default",
+  ...rest
+}: BreadcrumbsItemProps) => {
+  const classes = c([styles[itemClassName], styles[`${itemClassName}--${variant}`]], {
+    [styles[`${itemClassName}--current`]]: current,
+  });
+
+  const link = () => {
+    const commonProps = {
+      href,
+      ["data-testid"]: dataTestId,
+      "aria-current": current ? "page" : undefined,
+    };
+
+    const component =
+      href || typeof children === "string"
+        ? createElement("a", commonProps, children)
+        : cloneElement(children, {
+            ...commonProps,
+            ...children.props,
+          });
+
+    return component;
+  };
+
+  return (
+    <li {...rest} className={classes}>
+      {link()}
+      {!current ? (
+        <span aria-hidden className={styles[`${itemClassName}__separator`]}>
+          /
+        </span>
+      ) : null}
+    </li>
+  );
+};
+
+Breadcrumbs.Item = Item;
+
+export { Breadcrumbs };