@purpurds/breadcrumbs 5.31.0 → 5.33.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-breadcrumbs_465gy_1{font-family:var(--purpur-typography-family-default);padding:var(--purpur-spacing-150) 0}._purpur-breadcrumbs_465gy_1 a,._purpur-breadcrumbs_465gy_1 li:only-child:not(:has(a)){display:inline-flex;gap:var(--purpur-spacing-50);font-size:var(--purpur-typography-scale-75);text-underline-offset:3px;text-decoration-skip-ink:none;padding:14px 2px;letter-spacing:.3px}._purpur-breadcrumbs_465gy_1 a:hover,._purpur-breadcrumbs_465gy_1 a:active,._purpur-breadcrumbs_465gy_1 li:only-child:not(:has(a)):hover,._purpur-breadcrumbs_465gy_1 li:only-child:not(:has(a)):active{text-decoration-thickness:2px;text-underline-offset:2px}._purpur-breadcrumbs--default_465gy_21,._purpur-breadcrumbs--default_465gy_21 a{color:var(--purpur-color-text-interactive-primary)}._purpur-breadcrumbs--default_465gy_21 a:hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-breadcrumbs--default_465gy_21 a:active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-breadcrumbs--negative_465gy_35,._purpur-breadcrumbs--negative_465gy_35 a{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-breadcrumbs--negative_465gy_35 a:hover{color:var(--purpur-color-text-interactive-primary-negative-hover);background:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-breadcrumbs--negative_465gy_35 a:active{color:var(--purpur-color-text-interactive-primary-negative-active);background:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-breadcrumbs__list_465gy_49{display:flex;flex-direction:row;align-items:center;gap:var(--purpur-spacing-50);padding:0;list-style:none}._purpur-breadcrumbs__home_465gy_57{display:none}@media screen and (min-width: 600px){._purpur-breadcrumbs__home_465gy_57{display:inline-flex;align-items:center}}._purpur-breadcrumb-item_465gy_67{white-space:nowrap;display:flex;align-items:center}._purpur-breadcrumb-item--current_465gy_72{overflow:hidden}._purpur-breadcrumb-item--current_465gy_72 a{display:block;text-overflow:ellipsis;overflow:hidden;color:var(--purpur-color-text-default);text-decoration:none;font-weight:var(--purpur-typography-weight-medium)}._purpur-breadcrumb-item--current_465gy_72 a:hover{background:none}._purpur-breadcrumb-item_465gy_67:not(:nth-last-child(2)):not(:last-child){display:none}@media screen and (min-width: 600px){._purpur-breadcrumb-item_465gy_67:not(:nth-last-child(2)):not(:last-child){display:flex}}._purpur-breadcrumb-item--negative_465gy_94._purpur-breadcrumb-item--current_465gy_72 a{color:var(--purpur-color-text-default-negative)}._purpur-breadcrumb-item_465gy_67:not(:last-child):after{font-size:var(--purpur-typography-scale-75);margin-left:var(--purpur-spacing-50);content:"/"/""}
+._purpur-breadcrumbs_1xh80_1{font-family:var(--purpur-typography-family-default)}._purpur-breadcrumbs_1xh80_1 a,._purpur-breadcrumbs_1xh80_1 li:only-child:not(:has(a)){display:inline-flex;gap:var(--purpur-spacing-50);font-size:var(--purpur-typography-scale-75);text-underline-offset:3px;text-decoration-skip-ink:none;padding:14px 2px;letter-spacing:.3px}._purpur-breadcrumbs_1xh80_1 a:hover,._purpur-breadcrumbs_1xh80_1 a:active,._purpur-breadcrumbs_1xh80_1 li:only-child:not(:has(a)):hover,._purpur-breadcrumbs_1xh80_1 li:only-child:not(:has(a)):active{text-decoration-thickness:2px;text-underline-offset:2px}._purpur-breadcrumbs--default_1xh80_20,._purpur-breadcrumbs--default_1xh80_20 a{color:var(--purpur-color-text-interactive-primary)}._purpur-breadcrumbs--default_1xh80_20 a:hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-breadcrumbs--default_1xh80_20 a:active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-breadcrumbs--negative_1xh80_34,._purpur-breadcrumbs--negative_1xh80_34 a{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-breadcrumbs--negative_1xh80_34 a:hover{color:var(--purpur-color-text-interactive-primary-negative-hover);background:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-breadcrumbs--negative_1xh80_34 a:active{color:var(--purpur-color-text-interactive-primary-negative-active);background:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-breadcrumbs__list_1xh80_48{display:flex;flex-direction:row;align-items:center;gap:var(--purpur-spacing-50);margin:0;padding:0;list-style:none}._purpur-breadcrumbs__home_1xh80_57{display:none}@media screen and (min-width: 600px){._purpur-breadcrumbs__home_1xh80_57{display:inline-flex;align-items:center}}._purpur-breadcrumb-item_1xh80_67{white-space:nowrap;display:flex;align-items:center}._purpur-breadcrumb-item--current_1xh80_72{overflow:hidden}._purpur-breadcrumb-item--current_1xh80_72 a{display:block;text-overflow:ellipsis;overflow:hidden;color:var(--purpur-color-text-default);text-decoration:none;font-weight:var(--purpur-typography-weight-medium)}._purpur-breadcrumb-item--current_1xh80_72 a:hover{background:none}._purpur-breadcrumb-item_1xh80_67:not(:nth-last-child(2)):not(:last-child){display:none}@media screen and (min-width: 600px){._purpur-breadcrumb-item_1xh80_67:not(:nth-last-child(2)):not(:last-child){display:flex}}._purpur-breadcrumb-item--negative_1xh80_94._purpur-breadcrumb-item--current_1xh80_72 a{color:var(--purpur-color-text-default-negative)}._purpur-breadcrumb-item_1xh80_67:not(:last-child):after{font-size:var(--purpur-typography-scale-75);margin-left:var(--purpur-spacing-50);content:"/"/""}

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export type DataAttributes = {
+    [key: `data-${string}`]: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;CACjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/breadcrumbs",
-  "version": "5.31.0",
+  "version": "5.33.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/breadcrumbs.cjs.js",
   "types": "./dist/breadcrumbs.d.ts",
@@ -15,8 +15,8 @@
   "source": "src/breadcrumbs.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "5.31.0",
-    "@purpurds/icon": "5.31.0"
+    "@purpurds/tokens": "5.33.0",
+    "@purpurds/icon": "5.33.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/breadcrumbs.module.scss

@@ -3,7 +3,7 @@
 .purpur-breadcrumbs {
   font-family: var(--purpur-typography-family-default);
 
-  padding: var(--purpur-spacing-150) 0;
+  
 
   a,
   li:only-child:not(:has(a)) {
@@ -63,7 +63,7 @@
     flex-direction: row;
     align-items: center;
     gap: var(--purpur-spacing-50);
-
+    margin: 0;
     padding: 0;
 
     list-style: none;

package/src/breadcrumbs.stories.tsx

@@ -1,8 +1,8 @@
-import React, { ReactElement, ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
-import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsItemProps } from "./breadcrumbs";
+import { Breadcrumbs, BreadcrumbsItem, BreadcrumbsProps } from "./breadcrumbs";
 
 const meta = {
   title: "Components/Breadcrumbs",
@@ -57,11 +57,6 @@ type LinkProps = {
   children: ReactNode;
 };
 
-type RendererProps = {
-  children: ReactElement<BreadcrumbsItemProps>;
-  negative: boolean;
-};
-
 const MetaData = () => {
   const [code, setCode] = useState("");
 
@@ -108,7 +103,7 @@ const Link = ({ href, children }: LinkProps) => <a href={href}>{children}</a>;
 
 const Renderer =
   (showMeta = false) =>
-  ({ children, negative, ...args }: RendererProps) =>
+  ({ children, negative, ...args }: BreadcrumbsProps) =>
     (
       <>
         <div

package/src/breadcrumbs.test.tsx

@@ -11,7 +11,7 @@ afterEach(cleanup);
 describe("Breadcrumbs", () => {
   it("renders a breadcrumb item", () => {
     render(
-      <Breadcrumbs variant="default">
+      <Breadcrumbs>
         <Breadcrumbs.Item href="/link" data-testid="item">
           Products
         </Breadcrumbs.Item>
@@ -22,7 +22,7 @@ describe("Breadcrumbs", () => {
 
   it("renders custom link", () => {
     render(
-      <Breadcrumbs variant="default">
+      <Breadcrumbs>
         <Breadcrumbs.Item href="/link">Products</Breadcrumbs.Item>
         <Breadcrumbs.Item data-testid="custom">
           <a href="/">Custom link</a>
@@ -34,7 +34,7 @@ describe("Breadcrumbs", () => {
 
   it("marks the last breadcrumb item as aria-current=page", () => {
     render(
-      <Breadcrumbs variant="default">
+      <Breadcrumbs>
         <Breadcrumbs.Item href="/link">Products</Breadcrumbs.Item>
         <Breadcrumbs.Item href="/link/sub" data-testid="last">
           Sub
@@ -55,5 +55,5 @@ describe("Breadcrumbs", () => {
     );
     const parsedMeta = JSON.parse(screen.getByTestId("breadcrumbs-meta").innerHTML);
     expect(parsedMeta["itemListElement"].length).toEqual(2);
-  })
+  });
 });

package/src/breadcrumbs.tsx

@@ -4,8 +4,9 @@ import c from "classnames";
 
 import styles from "./breadcrumbs.module.scss";
 import { MetaListItem, metaListItem, metaSchema } from "./meta";
+import { DataAttributes } from "./types.ts";
 
-export type BreadcrumbsProps = {
+export type BreadcrumbsProps = DataAttributes & {
   ["data-testid"]?: string;
   ariaLabel?: string;
   children: ReactElement<BreadcrumbsItemProps> | Array<ReactElement<BreadcrumbsItemProps>>;
@@ -53,6 +54,7 @@ const Breadcrumbs = ({
   negative = false,
   highlightLast = true,
   hideHomeIcon,
+  ...props
 }: BreadcrumbsProps) => {
   const classes = c([
     className,
@@ -110,7 +112,12 @@ const Breadcrumbs = ({
   const schema = metaListItems.length === maxIndex ? metaSchema(metaListItems) : null;
 
   return (
-    <nav data-testid={dataTestId} aria-label={ariaLabel || "Breadcrumb"} className={classes}>
+    <nav
+      data-testid={dataTestId}
+      aria-label={ariaLabel || "Breadcrumb"}
+      className={classes}
+      {...props}
+    >
       <ol className={styles[`${rootClassName}__list`]}>{items}</ol>
       {meta && schema ? (
         <script

package/src/types.ts

@@ -0,0 +1,5 @@
+// TODO: move to reusable package, once decided where it should be placed
+
+export type DataAttributes = {
+  [key: `data-${string}`]: string;
+};