From b6cbb65ce749e4c663190ab3bf1e47c2de915710 Mon Sep 17 00:00:00 2001
From: Emma Mansell <73774046+7emansell@users.noreply.github.com>
Date: Mon, 24 Jun 2024 14:31:59 -0400
Subject: [PATCH 1/4] Adding type and example in storybook
---
src/components/Breadcrumbs/Breadcrumbs.stories.tsx | 9 +++++++++
src/components/Breadcrumbs/Breadcrumbs.tsx | 1 +
src/theme/components/breadcrumb.ts | 9 +++++++++
3 files changed, 19 insertions(+)
diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
index 150f02a35c..0cad3ca2b2 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -132,6 +132,15 @@ export const ColorVariations: Story = {
breadcrumbsType="whatsOn"
/>
+
+
+ Digital Collections
+
+
+
),
};
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index fc09f8ab32..905c861ae2 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -21,6 +21,7 @@ export const breadcrumbTypeArray = [
"locations",
"research",
"whatsOn",
+ "digitalCollections",
] as const;
export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
export interface BreadcrumbsDataProps {
diff --git a/src/theme/components/breadcrumb.ts b/src/theme/components/breadcrumb.ts
index fe0691eeac..bc3319bec5 100644
--- a/src/theme/components/breadcrumb.ts
+++ b/src/theme/components/breadcrumb.ts
@@ -74,6 +74,14 @@ const whatsOn = defineStyle({
bg: "dark.section.whats-on.secondary",
},
});
+const digitalCollections = defineStyle({
+ bg: "ui.gray.light-cool",
+ color: "ui.black",
+ _dark: {
+ bg: "ui.gray.xx-dark",
+ color: "ui.white",
+ },
+});
const Breadcrumb = defineStyleConfig({
baseStyle: defineStyle({
@@ -151,6 +159,7 @@ const Breadcrumb = defineStyleConfig({
locations,
research,
whatsOn,
+ digitalCollections,
},
});
From dc60e5bf00b7ad2fabf33dae21b4a6b1b217fb15 Mon Sep 17 00:00:00 2001
From: Emma Mansell <73774046+7emansell@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:19:43 -0400
Subject: [PATCH 2/4] Corrected colors and changelogs
---
CHANGELOG.md | 1 +
src/components/Breadcrumbs/Breadcrumbs.mdx | 8 +++----
.../Breadcrumbs/breadcrumbsChangelogData.ts | 7 ++++++
src/theme/components/breadcrumb.ts | 23 ++++++++++++++++++-
4 files changed, 34 insertions(+), 5 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67ac752619..4a1780e55c 100644
--- 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`, and `Slider` components.
+- Adds `digitalCollections` color variant to `Breadcrumbs` component.
### Updates
diff --git a/src/components/Breadcrumbs/Breadcrumbs.mdx b/src/components/Breadcrumbs/Breadcrumbs.mdx
index 78c510c334..5bc1b1bd00 100644
--- 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/breadcrumbsChangelogData.ts b/src/components/Breadcrumbs/breadcrumbsChangelogData.ts
index 4788cdef59..8642405435 100644
--- 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
index bc3319bec5..3855ec87d2 100644
--- a/src/theme/components/breadcrumb.ts
+++ b/src/theme/components/breadcrumb.ts
@@ -79,7 +79,28 @@ const digitalCollections = defineStyle({
color: "ui.black",
_dark: {
bg: "ui.gray.xx-dark",
- color: "ui.white",
+ },
+ a: {
+ _hover: {
+ color: "ui.gray.xx-dark",
+ },
+ _dark: {
+ _hover: {
+ color: "ui.white",
+ },
+ },
+ },
+ "li:last-child": {
+ ".chakra-breadcrumb__link": {
+ _hover: {
+ color: "ui.gray.xx-dark",
+ },
+ _dark: {
+ _hover: {
+ color: "ui.white",
+ },
+ },
+ },
},
});
From 1e31465a806c7fe4988bfe51fa0787eb9aa16f8b Mon Sep 17 00:00:00 2001
From: Emma Mansell <73774046+7emansell@users.noreply.github.com>
Date: Wed, 26 Jun 2024 12:12:33 -0400
Subject: [PATCH 3/4] Alphabetized, focus color updated
---
.../Breadcrumbs/Breadcrumbs.stories.tsx | 18 +++----
src/theme/components/breadcrumb.ts | 51 ++++++++++---------
2 files changed, 35 insertions(+), 34 deletions(-)
diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
index 0cad3ca2b2..dfb6f18266 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -96,6 +96,15 @@ export const ColorVariations: Story = {
breadcrumbsType="connect"
/>
+
+
+ Digital Collections
+
+
+
Education
@@ -132,15 +141,6 @@ export const ColorVariations: Story = {
breadcrumbsType="whatsOn"
/>
-
-
- Digital Collections
-
-
-
),
};
diff --git a/src/theme/components/breadcrumb.ts b/src/theme/components/breadcrumb.ts
index 3855ec87d2..a2f292f11c 100644
--- a/src/theme/components/breadcrumb.ts
+++ b/src/theme/components/breadcrumb.ts
@@ -50,30 +50,6 @@ const connect = defineStyle({
bg: "dark.section.connect.secondary",
},
});
-const education = defineStyle({
- bg: "section.education.secondary",
- _dark: {
- bg: "dark.section.education.secondary",
- },
-});
-const locations = defineStyle({
- bg: "section.locations.primary",
- _dark: {
- bg: "dark.section.locations.primary",
- },
-});
-const research = defineStyle({
- bg: "section.research.secondary",
- _dark: {
- bg: "dark.section.research.secondary",
- },
-});
-const whatsOn = defineStyle({
- bg: "section.whats-on.secondary",
- _dark: {
- bg: "dark.section.whats-on.secondary",
- },
-});
const digitalCollections = defineStyle({
bg: "ui.gray.light-cool",
color: "ui.black",
@@ -89,6 +65,7 @@ const digitalCollections = defineStyle({
color: "ui.white",
},
},
+ _focus: customFocusColor("ui.black", "dark.ui.typography.body"),
},
"li:last-child": {
".chakra-breadcrumb__link": {
@@ -103,6 +80,30 @@ const digitalCollections = defineStyle({
},
},
});
+const education = defineStyle({
+ bg: "section.education.secondary",
+ _dark: {
+ bg: "dark.section.education.secondary",
+ },
+});
+const locations = defineStyle({
+ bg: "section.locations.primary",
+ _dark: {
+ bg: "dark.section.locations.primary",
+ },
+});
+const research = defineStyle({
+ bg: "section.research.secondary",
+ _dark: {
+ bg: "dark.section.research.secondary",
+ },
+});
+const whatsOn = defineStyle({
+ bg: "section.whats-on.secondary",
+ _dark: {
+ bg: "dark.section.whats-on.secondary",
+ },
+});
const Breadcrumb = defineStyleConfig({
baseStyle: defineStyle({
@@ -176,11 +177,11 @@ const Breadcrumb = defineStyleConfig({
booksAndMore,
brand,
connect,
+ digitalCollections,
education,
locations,
research,
whatsOn,
- digitalCollections,
},
});
From bbd6588630c59a2607790f9c8cda7c23d2ec85ab Mon Sep 17 00:00:00 2001
From: Emma Mansell <73774046+7emansell@users.noreply.github.com>
Date: Fri, 28 Jun 2024 10:40:18 -0400
Subject: [PATCH 4/4] alphabetize fully
---
src/components/Breadcrumbs/Breadcrumbs.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 905c861ae2..94725609c0 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -17,11 +17,11 @@ export const breadcrumbTypeArray = [
"booksAndMore",
"brand",
"connect",
+ "digitalCollections",
"education",
"locations",
"research",
"whatsOn",
- "digitalCollections",
] as const;
export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
export interface BreadcrumbsDataProps {