@nypl/design-system-react-components 0.25.1 → 0.25.5

package/dist/theme/foundations/spacing.d.ts

@@ -7,14 +7,14 @@
  * That'll give you 10. Then use it in your component.
  *
  * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
- *   --space-xxs = 4px or 0.25rem
- *   --space-xs = 8px or 0.5rem
- *   --space-s = 16px or 1rem
- *   --space-m = 24px or 1.5rem
- *   --space-l = 32px or 2rem
- *   --space-xl = 48px or 3rem
- *   --space-xxl = 64px or 4rem
- *   --space-xxxl = 96px or 6rem
+ *   --nypl-space-xxs = 4px or 0.25rem
+ *   --nypl-space-xs = 8px or 0.5rem
+ *   --nypl-space-s = 16px or 1rem
+ *   --nypl-space-m = 24px or 1.5rem
+ *   --nypl-space-l = 32px or 2rem
+ *   --nypl-space-xl = 48px or 3rem
+ *   --nypl-space-xxl = 64px or 4rem
+ *   --nypl-space-xxxl = 96px or 6rem
  *
  * @note Even though all the following values are available through Chakra,
  * we recommend to only use the spacing values that map to the DS values
@@ -22,14 +22,14 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        1            |         xxs       |   --space-xxs
- *        2            |         xs        |   --space-xs
- *        4            |         s         |   --space-s
- *        6            |         m         |   --space-m
- *        8            |         l         |   --space-l
- *        12           |         xl        |   --space-xl
- *        16           |         xxl       |   --space-xxl
- *        24           |         xxxl      |   --space-xxxl
+ *        1            |         xxs       |   --nypl-space-xxs
+ *        2            |         xs        |   --nypl-space-xs
+ *        4            |         s         |   --nypl-space-s
+ *        6            |         m         |   --nypl-space-m
+ *        8            |         l         |   --nypl-space-l
+ *        12           |         xl        |   --nypl-space-xl
+ *        16           |         xxl       |   --nypl-space-xxl
+ *        24           |         xxxl      |   --nypl-space-xxxl
  */
 export declare const spacing: {
     px: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.1",
+  "version": "0.25.5",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "src"
   ],
   "engines": {
-    "node": ">10"
+    "node": ">10 <=12.22"
   },
   "author": "NYPL",
   "license": "Apache-2.0",
@@ -34,23 +34,19 @@
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
-    "prebuild:storybook": "npm run test:generate-output",
-    "stylelint": "stylelint \"**/*.scss\""
+    "prebuild:storybook": "npm run test:generate-output"
   },
   "dependencies": {
-    "@chakra-ui/react": "1.6.8",
-    "@chakra-ui/system": "1.7.3",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@mdx-js/react": "^1.6.22",
-    "cpy-cli": "^3.1.1",
-    "framer-motion": "^4.1.17",
-    "he": "^1.2.0",
+    "@chakra-ui/react": "1.7.1",
+    "@chakra-ui/system": "1.8.1",
+    "@emotion/react": "11.4.1",
+    "@emotion/styled": "11.3.0",
+    "framer-motion": "4.1.17",
+    "he": "1.2.0",
     "react-datepicker": "4.1.1",
-    "react-uid": "^2.3.0",
-    "system-font-css": "^2.0.2",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
+    "system-font-css": "2.0.2",
+    "typescript": "4.3.5",
+    "uuid": "8.3.2"
   },
   "peerDependencies": {
     "react": ">=16.13.0",
@@ -78,77 +74,70 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@size-limit/preset-small-lib": "^5.0.1",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-jest": "^6.3.6",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
+    "@babel/core": "7.14.6",
+    "@mdx-js/react": "1.6.22",
+    "@size-limit/preset-small-lib": "5.0.1",
+    "@storybook/addon-a11y": "6.4.8",
+    "@storybook/addon-actions": "6.4.8",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-jest": "6.4.8",
+    "@storybook/addon-links": "6.4.8",
     "@storybook/addon-queryparams": "6.2.9",
-    "@storybook/addons": "^6.3.2",
-    "@storybook/react": "^6.3.2",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@storybook/addons": "6.4.8",
+    "@storybook/react": "6.4.8",
+    "@svgr/rollup": "5.5.0",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.2.1",
     "@types/jest": "26.0.20",
-    "@types/jest-axe": "3.5.1",
-    "@types/jsdom": "^12.2.4",
-    "@types/node": "^12.7.12",
-    "@types/react": "^16.9.5",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.2",
-    "breakpoint-sass": "^2.7.1",
-    "css-loader": "^5.2.7",
-    "cssnano": "^5.0.7",
-    "eslint": "^7.31.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.8.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "gulp": "^4.0.2",
-    "gulp-scss-combine": "^1.0.0",
-    "husky": "^4.2.5",
-    "import-glob-loader": "^1.1.0",
-    "jest": "^27.0.6",
-    "jest-axe": "4.1.0",
-    "jsdom": "^15.2.1",
-    "node-sass": "^4.14.1",
-    "node-sass-glob-importer": "^5.3.2",
-    "normalize.css": "^8.0.1",
+    "@types/jest-axe": "3.5.3",
+    "@types/jsdom": "12.2.4",
+    "@types/node": "12.7.12",
+    "@types/react": "16.14.21",
+    "@types/testing-library__jest-dom": "5.14.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "autoprefixer": "9.8.6",
+    "babel-loader": "8.2.2",
+    "breakpoint-sass": "2.7.1",
+    "css-loader": "5.2.7",
+    "cssnano": "5.0.7",
+    "eslint": "7.31.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.8.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "gulp": "4.0.2",
+    "gulp-scss-combine": "1.0.0",
+    "husky": "4.2.5",
+    "import-glob-loader": "1.1.0",
+    "jest": "27.3.1",
+    "jest-axe": "5.0.1",
+    "jsdom": "15.2.1",
+    "node-sass": "4.14.1",
+    "node-sass-glob-importer": "5.3.2",
+    "normalize.css": "8.0.1",
     "postcss": "8.3.6",
-    "prettier": "2.1.1",
-    "pretty-quick": "^3.1.1",
+    "prettier": "2.4.1",
+    "pretty-quick": "3.1.1",
     "react": "16.14.0",
-    "react-autosuggest": "^10.0.2",
-    "react-docgen-typescript-loader": "^3.1.0",
+    "react-autosuggest": "10.0.2",
+    "react-docgen-typescript-loader": "3.1.0",
     "react-dom": "16.14.0",
-    "react-is": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.14.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "sass": "^1.35.1",
-    "sass-loader": "^8.0.2",
-    "semantic-release-slack-bot": "^2.1.0",
-    "size-limit": "^5.0.1",
-    "storybook-addon-designs": "^5.4.2",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-prettier": "^1.1.2",
-    "stylelint-scss": "^3.18.0",
-    "ts-jest": "^27.0.4",
-    "ts-loader": "^6.2.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.0"
+    "react-router-dom": "5.2.0",
+    "react-test-renderer": "16.14.0",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-svg": "2.0.0",
+    "sass": "1.35.1",
+    "sass-loader": "10.0.0",
+    "semantic-release-slack-bot": "2.1.0",
+    "size-limit": "5.0.1",
+    "storybook-addon-designs": "6.2.0",
+    "style-loader": "2.0.0",
+    "ts-jest": "27.0.4",
+    "tsdx": "0.14.1",
+    "tslib": "2.3.0"
   }
 }

package/src/__tests__/setup.ts

@@ -12,8 +12,8 @@ const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
 const { window } = jsdom;
 const exposedProperties = ["window", "navigator", "document"];
 
-global.window = window;
-global.document = window.document;
+(global as any).window = window;
+(global as any).document = window.document;
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === "undefined") {
     exposedProperties.push(property);

package/src/components/Accordion/Accordion.stories.mdx

@@ -7,10 +7,9 @@ import {
 } from "@storybook/addon-docs/blocks";
 import Accordion from "./Accordion";
 import { withDesign } from "storybook-addon-designs";
-import { listRenderer as ListStory } from "../List/List.stories.tsx";
-import { ListTypes } from "../List/ListTypes";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { CardImageRatios, CardLayouts } from "../Card/CardTypes";
+import { CardLayouts } from "../Card/CardTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import { Source } from "@storybook/addon-docs/blocks";
 import ReactDOMServer from "react-dom/server";
@@ -61,36 +60,32 @@ necessary icon, Chakra components, and styles.
     name="Basic"
     args={{
       isDefaultOpen: false,
+      contentData: [
+        {
+          label: "Tom Nook",
+          panel: (
+            <Card
+              layout={CardLayouts.Row}
+              center
+              imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+              imageAlt="Alt text"
+              imageAspectRatio={ImageRatios.TwoByOne}
+            >
+              <CardHeading level={HeadingLevels.Four} id="heading1">
+                Tom Nook
+              </CardHeading>
+              <CardContent>
+                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+                character in the Animal Crossing series who operates the village
+                store.
+              </CardContent>
+            </Card>
+          ),
+        },
+      ],
     }}
   >
-    {(args) => (
-      <Accordion
-        {...args}
-        contentData={[
-          {
-            label: "Tom Nook",
-            panel: (
-              <Card
-                layout={CardLayouts.Row}
-                center
-                imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-                imageAlt="Alt text"
-                imageAspectRatio={CardImageRatios.TwoByOne}
-              >
-                <CardHeading level={HeadingLevels.Four} id="heading1">
-                  Tom Nook
-                </CardHeading>
-                <CardContent>
-                  Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
-                  character in the Animal Crossing series who operates the
-                  village store.
-                </CardContent>
-              </Card>
-            ),
-          },
-        ]}
-      />
-    )}
+    {(args) => <Accordion {...args} />}
   </Story>
 </Canvas>
 
@@ -104,7 +99,7 @@ const contentData = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Tom Nook
@@ -137,9 +132,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -157,9 +152,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -179,9 +174,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>
@@ -216,9 +211,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -236,9 +231,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -258,9 +253,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>

package/src/components/Autosuggest/Autosuggest.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import Autosuggest from "react-autosuggest";
 import * as stories from "./Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -19,9 +19,9 @@ every input element. Since the suggestion dropdown will appear on top of page co
 we've added a min-height to make it easier to see the dropdown. This is for demonstration
 purposes only and you will not need to do this in your application.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" story={stories.AutosuggestLibrary} />
-</Preview>
+</Canvas>
 
 ## With custom icons
 

package/src/components/Autosuggest/Autosuggest.stories.tsx

@@ -29,7 +29,7 @@ const libraryRenderInputComponent = (
       >
         Home Library
       </Label>
-      <HelperErrorText id="id-helperText" isError={false}>
+      <HelperErrorText id="id-helperText" isInvalid={false}>
         Select your home library. Start by typing the name of the library. Try{" "}
         {'"'}ba{'"'}.
       </HelperErrorText>
@@ -99,6 +99,7 @@ const LibraryExample = ({ renderInputComponent }) => {
   const renderSuggestion = (suggestion) => <span>{suggestion.label}</span>;
   // Autosuggest will pass through all these props to the Input component.
   const inputProps = {
+    "aria-label": "Home Library",
     placeholder: "Type a library name",
     value,
     onChange,

package/src/components/Autosuggest/_Autosuggest.scss

@@ -25,11 +25,11 @@
 }
 
 .react-autosuggest__suggestions-container--open {
-  background-color: var(--ui-white);
+  background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
   margin-top: -6px; // accounts for the focus ring on the input
-  outline: 1px solid var(--ui-gray-light-cool);
+  outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -43,13 +43,13 @@
 
 .react-autosuggest__suggestion {
   cursor: pointer;
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 .react-autosuggest__suggestion--highlighted {
-  background-color: var(--ui-gray-light-cool);
+  background-color: var(--nypl-colors-ui-gray-light-cool);
 }
 
 .auto-suggest-bottom {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -22,14 +22,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
     },
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
+    additionalStyles: { control: false },
     className: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -38,7 +38,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Breadcrumbs} />
 
@@ -76,8 +76,7 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
         },
         {
           url: "#",
-          text:
-            "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
+          text: "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
         },
       ]}
     />
@@ -89,9 +88,14 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
 The `Breadcrumbs` component background color can be set using the `colorVariant` prop and the `ColorVariants` enum. If the `colorVariant` prop is omitted, the default background color is `black`.
 
 <Canvas>
-  <Story name="Color Variations" args={{}}>
+  <Story
+    name="Color Variations"
+    args={{
+      colorVariant: ColorVariants.BooksAndMore,
+    }}
+  >
     {(args) => (
-      <div className="nypl--books-and-more">
+      <>
         <Heading level={HeadingLevels.Three}>Books and More</Heading>
         <Breadcrumbs
           breadcrumbsData={[
@@ -102,9 +106,9 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
               text: "Grandchild",
             },
           ]}
-          colorVariant={ColorVariants.BooksAndMore}
+          colorVariant={args.colorVariant}
         />
-      </div>
+      </>
     )}
   </Story>
 </Canvas>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -4,6 +4,7 @@ import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
+import { ColorVariants } from "./BreadcrumbsTypes";
 
 describe("Breadcrumbs Accessibility", () => {
   const breadcrumbsData = [
@@ -31,8 +32,30 @@ describe("Breadcrumbs Snapshot", () => {
         <Breadcrumbs id="breadcrumbs-test" breadcrumbsData={breadcrumbsData} />
       )
       .toJSON();
+    const breadcrumbsVariantColor = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.BooksAndMore}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsAdditionalStyles = renderer
+      .create(
+        <Breadcrumbs
+          additionalStyles={{
+            bg: "var(--nypl-colors-ui-error-primary)",
+          }}
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
+    expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });
 

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -23,6 +23,8 @@ export interface BreadcrumbsDataProps {
 }
 
 export interface BreadcrumbProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Breadcrumb links as an array */
   breadcrumbsData: BreadcrumbsDataProps[];
   /** className you can add in addition to 'input' */
@@ -64,6 +66,7 @@ const getElementsFromData = (data, breadcrumbsID) => {
 
 function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const {
+    additionalStyles = {},
     breadcrumbsData,
     className,
     colorVariant,
@@ -78,10 +81,11 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   }
 
   const styles = useStyleConfig("Breadcrumb", { variant });
+  const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
 
   return (
-    <ChakraBreadcrumb className={className} __css={styles} id={id}>
+    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );