Merge pull request #1629 from NYPL/DSD-1795/breadcrumbs-dc-variant

DSD-1795: Breadcrumbs Digital Collections variant
NYPL · Jun 28, 2024 · 0340dda · 0340dda
2 parents 40e9625 + 4892697
commit 0340dda
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ### Adds
 
 - Adds Storybook interaction tests for `CheckboxGroup`, `DatePicker`, `Slider`, and `FeedbackBox` components.
+- Adds `digitalCollections` color variant to `Breadcrumbs` component.
 - Adds `closeOnBlur` prop to `MultiSelect` component which, when set to true, closes the component if it loses focus.
 
 ### Updates

diff --git a/src/components/Breadcrumbs/Breadcrumbs.mdx b/src/components/Breadcrumbs/Breadcrumbs.mdx
@@ -9,10 +9,10 @@ import Link from "../Link/Link";
 
 # Breadcrumbs
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.3`    |
-| Latest            | `3.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.3`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -96,6 +96,15 @@ export const ColorVariations: Story = {
           breadcrumbsType="connect"
         />
       </Box>
+      <Box>
+        <Heading level="h3" size="heading6">
+          Digital Collections
+        </Heading>
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType="digitalCollections"
+        />
+      </Box>
       <Box>
         <Heading level="h3" size="heading6">
           Education

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -17,6 +17,7 @@ export const breadcrumbTypeArray = [
   "booksAndMore",
   "brand",
   "connect",
+  "digitalCollections",
   "education",
   "locations",
   "research",

diff --git a/src/components/Breadcrumbs/breadcrumbsChangelogData.ts b/src/components/Breadcrumbs/breadcrumbsChangelogData.ts
@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Adds `digitalCollections` color variant."],
+  },
   {
     date: "2024-03-14",
     version: "3.0.0",

diff --git a/src/theme/components/breadcrumb.ts b/src/theme/components/breadcrumb.ts
@@ -50,6 +50,36 @@ const connect = defineStyle({
     bg: "dark.section.connect.secondary",
   },
 });
+const digitalCollections = defineStyle({
+  bg: "ui.gray.light-cool",
+  color: "ui.black",
+  _dark: {
+    bg: "ui.gray.xx-dark",
+  },
+  a: {
+    _hover: {
+      color: "ui.gray.xx-dark",
+    },
+    _dark: {
+      _hover: {
+        color: "ui.white",
+      },
+    },
+    _focus: customFocusColor("ui.black", "dark.ui.typography.body"),
+  },
+  "li:last-child": {
+    ".chakra-breadcrumb__link": {
+      _hover: {
+        color: "ui.gray.xx-dark",
+      },
+      _dark: {
+        _hover: {
+          color: "ui.white",
+        },
+      },
+    },
+  },
+});
 const education = defineStyle({
   bg: "section.education.secondary",
   _dark: {
@@ -147,6 +177,7 @@ const Breadcrumb = defineStyleConfig({
     booksAndMore,
     brand,
     connect,
+    digitalCollections,
     education,
     locations,
     research,