@purpurds/breadcrumbs 4.6.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/breadcrumbs",
-  "version": "4.6.0",
+  "version": "5.1.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": "4.6.0",
-    "@purpurds/icon": "4.6.0"
+    "@purpurds/icon": "5.1.0",
+    "@purpurds/tokens": "5.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/breadcrumbs.stories.tsx

@@ -2,16 +2,21 @@ import React, { ReactElement, ReactNode, useEffect, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import "@purpurds/icon/styles";
-import {
-  Breadcrumbs,
-  BreadcrumbsItemProps,
-  BreadcrumbVariant,
-  breadcrumbVariants,
-} from "./breadcrumbs";
+import { Breadcrumbs, BreadcrumbsItemProps } from "./breadcrumbs";
 
 const meta: Meta<typeof Breadcrumbs> = {
   title: "Components/Breadcrumbs",
   component: Breadcrumbs,
+  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",
+      },
+    ],
+  },
+  args: { negative: false },
 };
 
 export default meta;
@@ -25,7 +30,7 @@ type LinkProps = {
 
 type RendererProps = {
   children: ReactElement<BreadcrumbsItemProps>;
-  variant: BreadcrumbVariant;
+  negative: boolean;
 };
 
 const MetaData = () => {
@@ -74,31 +79,28 @@ const Link = ({ href, children }: LinkProps) => <a href={href}>{children}</a>;
 
 const Renderer =
   (showMeta = false) =>
-  ({ children, variant, ...args }: RendererProps) => {
-    return (
+  ({ children, negative, ...args }: RendererProps) =>
+    (
       <>
         <div
           style={{
-            backgroundColor:
-              variant && variant.endsWith("negative")
-                ? "var(--purpur-color-background-tone-on-tone-primary)"
-                : undefined,
+            backgroundColor: negative
+              ? "var(--purpur-color-background-tone-on-tone-primary)"
+              : undefined,
           }}
         >
-          <Breadcrumbs variant={variant} {...args}>
+          <Breadcrumbs negative={negative} {...args}>
             {children}
           </Breadcrumbs>
         </div>
-        {showMeta ? <MetaData /> : null}
+        {showMeta && <MetaData />}
       </>
     );
-  };
 
 export const DefaultVariant: Story = {
   name: "Default variant",
   args: {
     meta: true,
-    variant: breadcrumbVariants[0],
     children: [
       <Breadcrumbs.Item href="/products" key={1}>
         Products
@@ -111,21 +113,13 @@ export const DefaultVariant: Story = {
       </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",
-      },
-    ],
-  },
+  render: Renderer(false),
 };
 
 export const NegativeVariant: Story = {
   name: "Negative variant",
   args: {
-    variant: breadcrumbVariants[1],
+    negative: true,
     children: [
       <Breadcrumbs.Item href="/galaxies" key={0}>
         Galaxies
@@ -144,7 +138,6 @@ export const NegativeVariant: Story = {
 export const CustomItem: Story = {
   name: "Custom Breadcrumb Items",
   args: {
-    variant: breadcrumbVariants[0],
     children: [
       <Breadcrumbs.Item key={0} href="/products">
         Products
@@ -163,7 +156,6 @@ export const CustomItem: Story = {
 export const BreadcrumbMetaData: Story = {
   name: "Meta data by default",
   args: {
-    variant: breadcrumbVariants[0],
     children: [
       <Breadcrumbs.Item key={0} href="/ships">
         Ships

package/src/breadcrumbs.tsx

@@ -5,26 +5,18 @@ 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;
+  negative?: boolean;
 };
 
 type CommonItemProps = {
   current?: boolean;
-  variant?: BreadcrumbVariant;
+  negative?: boolean;
   ["data-testid"]?: string;
   ariaLabel?: string;
   meta?: boolean;
@@ -52,9 +44,13 @@ const Breadcrumbs = ({
   children,
   className,
   meta = true,
-  variant = "default",
+  negative = false,
 }: BreadcrumbsProps) => {
-  const classes = c([className, styles[rootClassName], styles[`${rootClassName}--${variant}`]]);
+  const classes = c([
+    className,
+    styles[rootClassName],
+    styles[`${rootClassName}--${negative ? "negative" : "default"}`],
+  ]);
 
   const maxIndex = Children.count(children);
 
@@ -84,7 +80,7 @@ const Breadcrumbs = ({
 
     const child = cloneElement(item, {
       current,
-      variant,
+      negative,
       ...(position === 1 && {
         children: (
           <>
@@ -122,13 +118,16 @@ const Item = ({
   ["data-testid"]: dataTestId,
   children,
   current = false,
-  variant = "default",
+  negative = false,
   onClick,
   ...rest
 }: BreadcrumbsItemProps) => {
-  const classes = c([styles[itemClassName], styles[`${itemClassName}--${variant}`]], {
-    [styles[`${itemClassName}--current`]]: current,
-  });
+  const classes = c(
+    [styles[itemClassName], styles[`${itemClassName}--${negative ? "negative" : "default"}`]],
+    {
+      [styles[`${itemClassName}--current`]]: current,
+    }
+  );
 
   const link = () => {
     const commonProps = {