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 {