From 82a0031e8a0750995f05ee6e7d41c95fdb3c1cb8 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 12 Nov 2024 10:09:40 -0500 Subject: [PATCH 01/14] Updates styles to accomodate focus indicator --- src/theme/components/template.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index b8eb34b42..d41bfbab0 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -41,8 +41,7 @@ const TemplateContent = defineStyleConfig({ flexDirection: { base: "column", md: null }, gridTemplateColumns: "1fr", paddingY: 0, - paddingX: "s", - gap: "grid.l", + rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and // the column for the sidebar is max 255px width. @@ -60,6 +59,7 @@ const TemplateContentTopBottom = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, height: "100%", + paddingX: "s", }), }); @@ -68,17 +68,22 @@ const TemplateContentTopBottom = defineStyleConfig({ const TemplateContentPrimary = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, + overflow: { base: "unset", md: "hidden" }, + paddingX: "s", }), variants: { left: { gridColumn: { base: "1", md: "2" }, marginEnd: { md: 0 }, minWidth: { md: 0 }, - overflow: { base: "unset", md: "hidden" }, + paddingRight: "s", + paddingLeft: "l", }, right: { gridColumn: { base: "1", md: "1" }, - overflow: { base: "unset", md: "hidden" }, + // paddingX: undefined, + paddingRight: "l", + paddingLeft: "s", }, }, }); From 41ad98e130cbcc8bea8516dcf2d41fd492175cb8 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 12 Nov 2024 11:58:28 -0500 Subject: [PATCH 02/14] Updates styles and docs for Template --- CHANGELOG.md | 4 ++++ src/components/Template/Template.mdx | 8 ++++---- src/components/Template/templateChangelogData.ts | 9 +++++++++ src/theme/components/template.ts | 3 ++- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14da433b7..f2d36526d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ## Prerelease +### Fixes + +- Fixes issue where focus indicator was being cut off in places in the `Template` component. + ## 3.4.2 (November 7, 2024) ### Adds diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx index 9f4a33c8d..27c5921c6 100644 --- a/src/components/Template/Template.mdx +++ b/src/components/Template/Template.mdx @@ -22,10 +22,10 @@ import Link from "../Link/Link"; # Template -| Component Version | DS Version | -| ----------------- | ---------- | -| Added | `0.3.6` | -| Latest | `3.4.0` | +| Component Version | DS Version | +| ----------------- | ------------ | +| Added | `0.3.6` | +| Latest | `Prerelease` | ## Table of Contents diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts index 3baaeff26..2ca021b29 100644 --- a/src/components/Template/templateChangelogData.ts +++ b/src/components/Template/templateChangelogData.ts @@ -9,6 +9,15 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ + { + date: "Prerelease", + version: "Prerelease", + type: "Bug Fix", + affects: ["Styles"], + notes: [ + "Fixes an issue where focus indicator was being cut off in places.", + ], + }, { date: "2024-10-02", version: "3.4.0", diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index d41bfbab0..449bca271 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -81,7 +81,6 @@ const TemplateContentPrimary = defineStyleConfig({ }, right: { gridColumn: { base: "1", md: "1" }, - // paddingX: undefined, paddingRight: "l", paddingLeft: "s", }, @@ -91,9 +90,11 @@ const TemplateContentSidebar = defineStyleConfig({ variants: { left: { gridColumn: "1", + paddingLeft: "s", }, right: { gridColumn: { base: "1", md: "2" }, + paddingRight: "s", }, }, }); From dfaa59c183fc3ba831bc1dfbd42ffce4e7c70669 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 14 Nov 2024 16:33:30 -0500 Subject: [PATCH 03/14] Updates per PR feedback --- src/theme/components/template.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 449bca271..c6bdf0db8 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -47,10 +47,10 @@ const TemplateContent = defineStyleConfig({ // the column for the sidebar is max 255px width. variants: { left: { - gridTemplateColumns: { md: "255px 1fr" }, + gridTemplateColumns: { md: "271px 1fr" }, }, right: { - gridTemplateColumns: { md: "1fr 255px" }, + gridTemplateColumns: { md: "1fr 271px" }, }, }, }); @@ -77,11 +77,11 @@ const TemplateContentPrimary = defineStyleConfig({ marginEnd: { md: 0 }, minWidth: { md: 0 }, paddingRight: "s", - paddingLeft: "l", + paddingLeft: { base: "s", md: "l" }, }, right: { - gridColumn: { base: "1", md: "1" }, - paddingRight: "l", + gridColumn: "1", + paddingRight: { base: "s", md: "l" }, paddingLeft: "s", }, }, @@ -91,9 +91,11 @@ const TemplateContentSidebar = defineStyleConfig({ left: { gridColumn: "1", paddingLeft: "s", + paddingRight: { base: "s", md: undefined }, }, right: { gridColumn: { base: "1", md: "2" }, + paddingLeft: { base: "s", md: undefined }, paddingRight: "s", }, }, From 9f74a344c4df860d7d0197304db4e3eb591d232e Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 14 Nov 2024 16:35:57 -0500 Subject: [PATCH 04/14] Updates comment --- src/theme/components/template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index c6bdf0db8..5f5fc23c2 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -44,7 +44,8 @@ const TemplateContent = defineStyleConfig({ rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and - // the column for the sidebar is max 255px width. + // the column for the sidebar is max 271px width (255px for the sidebar, + // + 16px for padding). variants: { left: { gridTemplateColumns: { md: "271px 1fr" }, From 199159b0e4ce4ee2cbec4f7d0a9a7427e6ef5f06 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 18 Nov 2024 12:20:10 -0500 Subject: [PATCH 05/14] Updates per PR feedback --- src/components/Template/templateChangelogData.ts | 2 +- src/theme/components/template.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts index 2ca021b29..41143f371 100644 --- a/src/components/Template/templateChangelogData.ts +++ b/src/components/Template/templateChangelogData.ts @@ -15,7 +15,7 @@ export const changelogData: ChangelogData[] = [ type: "Bug Fix", affects: ["Styles"], notes: [ - "Fixes an issue where focus indicator was being cut off in places.", + "Adjusts padding to fix an issue where focus indicators were being cut off in the primary content section.", ], }, { diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 5f5fc23c2..7cba6dd5a 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -92,11 +92,11 @@ const TemplateContentSidebar = defineStyleConfig({ left: { gridColumn: "1", paddingLeft: "s", - paddingRight: { base: "s", md: undefined }, + paddingRight: { base: "s", md: 0 }, }, right: { gridColumn: { base: "1", md: "2" }, - paddingLeft: { base: "s", md: undefined }, + paddingLeft: { base: "s", md: 0 }, paddingRight: "s", }, }, From 41104086e233d4f2ab4fab6f67a4f7ea6f4a85f0 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 18 Nov 2024 12:23:30 -0500 Subject: [PATCH 06/14] Cleans up note --- src/theme/components/template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 7cba6dd5a..75f9c6f99 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -44,7 +44,7 @@ const TemplateContent = defineStyleConfig({ rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and - // the column for the sidebar is max 271px width (255px for the sidebar, + // the column for the sidebar is max 271px width (255px for the sidebar // + 16px for padding). variants: { left: { From fd09aa59c038610404f8502bfb43ba8aa7f4cc1b Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 25 Nov 2024 15:14:31 -0500 Subject: [PATCH 07/14] Updates bug that prevented FeaturedContent from being fullbleed --- src/theme/components/template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 75f9c6f99..433ca8417 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -69,7 +69,6 @@ const TemplateContentTopBottom = defineStyleConfig({ const TemplateContentPrimary = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, - overflow: { base: "unset", md: "hidden" }, paddingX: "s", }), variants: { @@ -79,11 +78,13 @@ const TemplateContentPrimary = defineStyleConfig({ minWidth: { md: 0 }, paddingRight: "s", paddingLeft: { base: "s", md: "l" }, + overflow: { base: "unset", md: "hidden" }, }, right: { gridColumn: "1", paddingRight: { base: "s", md: "l" }, paddingLeft: "s", + overflow: { base: "unset", md: "hidden" }, }, }, }); From cecfed5f9f1a31cb9b0be33023e2f7f5f4a186a7 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Mon, 25 Nov 2024 18:00:46 -0500 Subject: [PATCH 08/14] enabled onClick support for SubNavButton --- src/components/SubNav/SubNav.tsx | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/SubNav/SubNav.tsx b/src/components/SubNav/SubNav.tsx index 4391159f2..9e79b1411 100644 --- a/src/components/SubNav/SubNav.tsx +++ b/src/components/SubNav/SubNav.tsx @@ -114,7 +114,14 @@ interface SubNavButtonProps extends SubNavItemProps { export const SubNavButton: React.FC< React.PropsWithChildren -> = ({ id, children, isOutlined, isSelected, screenreaderOnlyText = "" }) => { +> = ({ + id, + children, + isOutlined, + isSelected, + onClick, + screenreaderOnlyText = "", +}) => { const childrenStyles = useMultiStyleConfig("SubNavChildren", { isOutlined: isOutlined, }); @@ -122,12 +129,13 @@ export const SubNavButton: React.FC< return (
  • @@ -150,14 +158,14 @@ export const SubNavLink: React.FC> = ({ return (
  • {children} From 572d9a8f2d87e57c991bd340ac13eaf64128ded7 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Mon, 25 Nov 2024 18:07:30 -0500 Subject: [PATCH 09/14] 3.5.0-rc3 --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9552a6991..e2eab9a71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc2", + "version": "3.5.0-rc3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc2", + "version": "3.5.0-rc3", "license": "Apache-2.0", "dependencies": { "@chakra-ui/react": "2.8.2", @@ -4655,9 +4655,9 @@ "dev": true }, "node_modules/@storybook/react/node_modules/@types/node": { - "version": "22.9.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.3.tgz", - "integrity": "sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==", + "version": "22.9.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.4.tgz", + "integrity": "sha512-d9RWfoR7JC/87vj7n+PVTzGg9hDyuFjir3RxUHbjFSKNd9mpxbxwMEyaCim/ddCmy4IuW7HjTzF3g9p3EtWEOg==", "dev": true, "dependencies": { "undici-types": "~6.19.8" @@ -7948,9 +7948,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.64", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz", - "integrity": "sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==", + "version": "1.5.65", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.65.tgz", + "integrity": "sha512-PWVzBjghx7/wop6n22vS2MLU8tKGd4Q91aCEGhG/TYmW6PP5OcSXcdnxTe1NNt0T66N8D6jxh4kC8UsdzOGaIw==", "dev": true }, "node_modules/emittery": { diff --git a/package.json b/package.json index 329cf26c6..986b86cca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc2", + "version": "3.5.0-rc3", "description": "NYPL Reservoir Design System React Components", "repository": { "type": "git", From 8eb691e963ae567d004fb48a5e5dc633fcc9e692 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Tue, 26 Nov 2024 15:35:05 -0500 Subject: [PATCH 10/14] 3.5.0-rc4 --- package-lock.json | 136 ++++++++++++++++++++-------------------------- package.json | 2 +- 2 files changed, 60 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index 168002bb3..0c4474f70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc3", + "version": "3.5.0-rc4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc3", + "version": "3.5.0-rc4", "license": "Apache-2.0", "dependencies": { "@chakra-ui/react": "2.8.2", @@ -4398,9 +4398,9 @@ } }, "node_modules/@storybook/builder-vite/node_modules/magic-string": { - "version": "0.30.13", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz", - "integrity": "sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==", + "version": "0.30.14", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz", + "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" @@ -4640,9 +4640,9 @@ } }, "node_modules/@storybook/react-vite/node_modules/magic-string": { - "version": "0.30.13", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz", - "integrity": "sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==", + "version": "0.30.14", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz", + "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" @@ -4655,12 +4655,12 @@ "dev": true }, "node_modules/@storybook/react/node_modules/@types/node": { - "version": "22.9.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz", - "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==", + "version": "22.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.0.tgz", + "integrity": "sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==", "dev": true, "dependencies": { - "undici-types": "~6.19.8" + "undici-types": "~6.20.0" } }, "node_modules/@storybook/react/node_modules/semver": { @@ -6207,9 +6207,9 @@ } }, "node_modules/@vitest/pretty-format": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.5.tgz", - "integrity": "sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.6.tgz", + "integrity": "sha512-exZyLcEnHgDMKc54TtHca4McV4sKT+NKAe9ix/yhd/qkYb/TP8HTyXRFDijV19qKqTZM0hPL4753zU/U8L/gAA==", "dev": true, "dependencies": { "tinyrainbow": "^1.2.0" @@ -6231,12 +6231,12 @@ } }, "node_modules/@vitest/utils": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.5.tgz", - "integrity": "sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.6.tgz", + "integrity": "sha512-ixNkFy3k4vokOUTU2blIUvOgKq/N2PW8vKIjZZYsGJCMX69MRa9J2sKqX5hY/k5O5Gty3YJChepkqZ3KM9LyIQ==", "dev": true, "dependencies": { - "@vitest/pretty-format": "2.1.5", + "@vitest/pretty-format": "2.1.6", "loupe": "^3.1.2", "tinyrainbow": "^1.2.0" }, @@ -7948,9 +7948,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.5.63", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz", - "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==", + "version": "1.5.65", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.65.tgz", + "integrity": "sha512-PWVzBjghx7/wop6n22vS2MLU8tKGd4Q91aCEGhG/TYmW6PP5OcSXcdnxTe1NNt0T66N8D6jxh4kC8UsdzOGaIw==", "dev": true }, "node_modules/emittery": { @@ -8165,14 +8165,14 @@ } }, "node_modules/es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz", + "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==", "dev": true, "dependencies": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" + "is-callable": "^1.2.7", + "is-date-object": "^1.0.5", + "is-symbol": "^1.0.4" }, "engines": { "node": ">= 0.4" @@ -12649,9 +12649,9 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "dev": true, "funding": [ { @@ -14198,20 +14198,39 @@ } }, "node_modules/rollup": { - "version": "3.29.5", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", - "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", + "version": "4.27.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz", + "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==", "dev": true, - "optional": true, - "peer": true, + "dependencies": { + "@types/estree": "1.0.6" + }, "bin": { "rollup": "dist/bin/rollup" }, "engines": { - "node": ">=14.18.0", + "node": ">=18.0.0", "npm": ">=8.0.0" }, "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.27.4", + "@rollup/rollup-android-arm64": "4.27.4", + "@rollup/rollup-darwin-arm64": "4.27.4", + "@rollup/rollup-darwin-x64": "4.27.4", + "@rollup/rollup-freebsd-arm64": "4.27.4", + "@rollup/rollup-freebsd-x64": "4.27.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.27.4", + "@rollup/rollup-linux-arm-musleabihf": "4.27.4", + "@rollup/rollup-linux-arm64-gnu": "4.27.4", + "@rollup/rollup-linux-arm64-musl": "4.27.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4", + "@rollup/rollup-linux-riscv64-gnu": "4.27.4", + "@rollup/rollup-linux-s390x-gnu": "4.27.4", + "@rollup/rollup-linux-x64-gnu": "4.27.4", + "@rollup/rollup-linux-x64-musl": "4.27.4", + "@rollup/rollup-win32-arm64-msvc": "4.27.4", + "@rollup/rollup-win32-ia32-msvc": "4.27.4", + "@rollup/rollup-win32-x64-msvc": "4.27.4", "fsevents": "~2.3.2" } }, @@ -15387,9 +15406,9 @@ } }, "node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", "dev": true }, "node_modules/unified": { @@ -16247,43 +16266,6 @@ "@esbuild/win32-x64": "0.20.2" } }, - "node_modules/vite/node_modules/rollup": { - "version": "4.27.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz", - "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==", - "dev": true, - "dependencies": { - "@types/estree": "1.0.6" - }, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=18.0.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.27.4", - "@rollup/rollup-android-arm64": "4.27.4", - "@rollup/rollup-darwin-arm64": "4.27.4", - "@rollup/rollup-darwin-x64": "4.27.4", - "@rollup/rollup-freebsd-arm64": "4.27.4", - "@rollup/rollup-freebsd-x64": "4.27.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.27.4", - "@rollup/rollup-linux-arm-musleabihf": "4.27.4", - "@rollup/rollup-linux-arm64-gnu": "4.27.4", - "@rollup/rollup-linux-arm64-musl": "4.27.4", - "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4", - "@rollup/rollup-linux-riscv64-gnu": "4.27.4", - "@rollup/rollup-linux-s390x-gnu": "4.27.4", - "@rollup/rollup-linux-x64-gnu": "4.27.4", - "@rollup/rollup-linux-x64-musl": "4.27.4", - "@rollup/rollup-win32-arm64-msvc": "4.27.4", - "@rollup/rollup-win32-ia32-msvc": "4.27.4", - "@rollup/rollup-win32-x64-msvc": "4.27.4", - "fsevents": "~2.3.2" - } - }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index 986b86cca..ec0beaa5f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc3", + "version": "3.5.0-rc4", "description": "NYPL Reservoir Design System React Components", "repository": { "type": "git", From cf00ca5fed915ff95e2662379d3b35a5ee15f04d Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Tue, 26 Nov 2024 15:39:41 -0500 Subject: [PATCH 11/14] package-lock --- package-lock.json | 68 ++++++++++++++++++++++++++++++----------------- 1 file changed, 43 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c4474f70..9f86eff6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14198,39 +14198,20 @@ } }, "node_modules/rollup": { - "version": "4.27.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz", - "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, - "dependencies": { - "@types/estree": "1.0.6" - }, + "optional": true, + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, "engines": { - "node": ">=18.0.0", + "node": ">=14.18.0", "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.27.4", - "@rollup/rollup-android-arm64": "4.27.4", - "@rollup/rollup-darwin-arm64": "4.27.4", - "@rollup/rollup-darwin-x64": "4.27.4", - "@rollup/rollup-freebsd-arm64": "4.27.4", - "@rollup/rollup-freebsd-x64": "4.27.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.27.4", - "@rollup/rollup-linux-arm-musleabihf": "4.27.4", - "@rollup/rollup-linux-arm64-gnu": "4.27.4", - "@rollup/rollup-linux-arm64-musl": "4.27.4", - "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4", - "@rollup/rollup-linux-riscv64-gnu": "4.27.4", - "@rollup/rollup-linux-s390x-gnu": "4.27.4", - "@rollup/rollup-linux-x64-gnu": "4.27.4", - "@rollup/rollup-linux-x64-musl": "4.27.4", - "@rollup/rollup-win32-arm64-msvc": "4.27.4", - "@rollup/rollup-win32-ia32-msvc": "4.27.4", - "@rollup/rollup-win32-x64-msvc": "4.27.4", "fsevents": "~2.3.2" } }, @@ -16266,6 +16247,43 @@ "@esbuild/win32-x64": "0.20.2" } }, + "node_modules/vite/node_modules/rollup": { + "version": "4.27.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.4.tgz", + "integrity": "sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.6" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.27.4", + "@rollup/rollup-android-arm64": "4.27.4", + "@rollup/rollup-darwin-arm64": "4.27.4", + "@rollup/rollup-darwin-x64": "4.27.4", + "@rollup/rollup-freebsd-arm64": "4.27.4", + "@rollup/rollup-freebsd-x64": "4.27.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.27.4", + "@rollup/rollup-linux-arm-musleabihf": "4.27.4", + "@rollup/rollup-linux-arm64-gnu": "4.27.4", + "@rollup/rollup-linux-arm64-musl": "4.27.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.27.4", + "@rollup/rollup-linux-riscv64-gnu": "4.27.4", + "@rollup/rollup-linux-s390x-gnu": "4.27.4", + "@rollup/rollup-linux-x64-gnu": "4.27.4", + "@rollup/rollup-linux-x64-musl": "4.27.4", + "@rollup/rollup-win32-arm64-msvc": "4.27.4", + "@rollup/rollup-win32-ia32-msvc": "4.27.4", + "@rollup/rollup-win32-x64-msvc": "4.27.4", + "fsevents": "~2.3.2" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", From d1f57d6ee7fb99d6f9261629f8736450b25e41c9 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Thu, 5 Dec 2024 10:23:34 -0500 Subject: [PATCH 12/14] 3.5.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f86eff6f..644812866 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc4", + "version": "3.5.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc4", + "version": "3.5.0", "license": "Apache-2.0", "dependencies": { "@chakra-ui/react": "2.8.2", diff --git a/package.json b/package.json index ec0beaa5f..011ce4830 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nypl/design-system-react-components", - "version": "3.5.0-rc4", + "version": "3.5.0", "description": "NYPL Reservoir Design System React Components", "repository": { "type": "git", From 24479be7b7025e1997e55a0bb9ed1dfb12cca841 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Thu, 5 Dec 2024 10:30:08 -0500 Subject: [PATCH 13/14] Prep for Release v3.5.0 --- CHANGELOG.md | 8 +-- src/components/MultiSelect/MultiSelect.mdx | 2 +- .../MultiSelect/multiSelectChangelogData.ts | 4 +- src/components/SubNav/SubNav.mdx | 8 +-- src/components/SubNav/subNavChangelogData.ts | 4 +- src/components/Template/Template.mdx | 8 +-- .../Template/templateChangelogData.ts | 4 +- src/hooks/useScrollFadeStyles.mdx | 50 +++++++------------ 8 files changed, 39 insertions(+), 49 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36191f903..f55520f90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,9 +8,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ## Prerelease -### Fixes - -- Fixes issue where focus indicator was being cut off in places in the `Template` component. +## 3.5.0 (December 5, 2024) ### Adds @@ -20,6 +18,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad - Updates the `MultiSelect` component to add `itemCount` as a data property to the `items` prop to render the item count for an option. +### Fixes + +- Fixes issue where focus indicator was being cut off in places in the `Template` component. + ## 3.4.4 (November 20, 2024) ### Adds diff --git a/src/components/MultiSelect/MultiSelect.mdx b/src/components/MultiSelect/MultiSelect.mdx index 00dfbcfa7..891bae120 100644 --- a/src/components/MultiSelect/MultiSelect.mdx +++ b/src/components/MultiSelect/MultiSelect.mdx @@ -12,7 +12,7 @@ import { changelogData } from "./multiSelectChangelogData"; | Component Version | DS Version | | ----------------- | ---------- | | Added | `1.4.0` | -| Latest | `3.4.0` | +| Latest | `3.5.0` | ## Table of Contents diff --git a/src/components/MultiSelect/multiSelectChangelogData.ts b/src/components/MultiSelect/multiSelectChangelogData.ts index 32c1c9702..b1c6e63dd 100644 --- a/src/components/MultiSelect/multiSelectChangelogData.ts +++ b/src/components/MultiSelect/multiSelectChangelogData.ts @@ -10,8 +10,8 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ { - date: "Prerelease", - version: "Prerelease", + date: "2024-12-05", + version: "3.5.0", type: "Update", affects: ["Documentation", "Functionality"], notes: [ diff --git a/src/components/SubNav/SubNav.mdx b/src/components/SubNav/SubNav.mdx index 9fc557a93..61deb0abd 100644 --- a/src/components/SubNav/SubNav.mdx +++ b/src/components/SubNav/SubNav.mdx @@ -12,10 +12,10 @@ import { changelogData } from "./subNavChangelogData"; # SubNav -| Component Version | DS Version | -| ----------------- | ------------ | -| Added | `Prerelease` | -| Latest | `Prerelease` | +| Component Version | DS Version | +| ----------------- | ---------- | +| Added | `3.5.0` | +| Latest | `3.5.0` | ## Table of Contents diff --git a/src/components/SubNav/subNavChangelogData.ts b/src/components/SubNav/subNavChangelogData.ts index 2c3d10a74..2a177fa15 100644 --- a/src/components/SubNav/subNavChangelogData.ts +++ b/src/components/SubNav/subNavChangelogData.ts @@ -10,8 +10,8 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ { - date: "Prerelease", - version: "Prerelease", + date: "2024-12-05", + version: "3.5.0", type: "New Feature", affects: ["Documentation", "Functionality"], notes: ["Added the `SubNav` component"], diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx index 27c5921c6..891b43b28 100644 --- a/src/components/Template/Template.mdx +++ b/src/components/Template/Template.mdx @@ -22,10 +22,10 @@ import Link from "../Link/Link"; # Template -| Component Version | DS Version | -| ----------------- | ------------ | -| Added | `0.3.6` | -| Latest | `Prerelease` | +| Component Version | DS Version | +| ----------------- | ---------- | +| Added | `0.3.6` | +| Latest | `3.5.0` | ## Table of Contents diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts index 41143f371..91763b2a9 100644 --- a/src/components/Template/templateChangelogData.ts +++ b/src/components/Template/templateChangelogData.ts @@ -10,8 +10,8 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ { - date: "Prerelease", - version: "Prerelease", + date: "2024-12-05", + version: "3.5.0", type: "Bug Fix", affects: ["Styles"], notes: [ diff --git a/src/hooks/useScrollFadeStyles.mdx b/src/hooks/useScrollFadeStyles.mdx index c0102c4b0..903c64b55 100644 --- a/src/hooks/useScrollFadeStyles.mdx +++ b/src/hooks/useScrollFadeStyles.mdx @@ -6,12 +6,11 @@ import { Meta, Source } from "@storybook/blocks"; | Hook Version | DS Version | | ------------ | ---------- | -| Added | `Prerelease` | -| Latest | `Prerelease` | +| Added | `3.5.0` | +| Latest | `3.5.0` | - - The `useScrollFadeStyles` hook provides a way to manage the visibility of a fade effect on the right edge of a horizontally scrollable element. - It monitors the scroll position and determines whether the fade effect should be shown or hidden based on the scroll state. +The `useScrollFadeStyles` hook provides a way to manage the visibility of a fade effect on the right edge of a horizontally scrollable element. +It monitors the scroll position and determines whether the fade effect should be shown or hidden based on the scroll state. ## Usage @@ -41,29 +40,18 @@ const { zIndex: 1, }); - -
    - -
  • - - Action - -
    • -
  • - - Link - -
    • - - {showRightFade && } - - - `} - language="jsx" -/> +{" "} + +
    + +
  • + Action +
    • +
  • + Link +
    • +     + {showRightFade && } +
    +     +`} language="jsx" /> From 797a35fe3e8a70c1de1af7377f78a8bb4136adff Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Thu, 5 Dec 2024 12:41:04 -0500 Subject: [PATCH 14/14] typos --- CHANGELOG.md | 3 ++- src/components/MultiSelect/MultiSelect.mdx | 16 ++++++++-------- .../MultiSelect/MultiSelect.stories.tsx | 8 ++++---- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f55520f90..443a34d3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,8 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ### Adds -- Adds the `"SubNav"`component. +- Adds the `SubNav` component. +- Adds the `useScrollFadeStyles` hook. ### Updates diff --git a/src/components/MultiSelect/MultiSelect.mdx b/src/components/MultiSelect/MultiSelect.mdx index 891bae120..8d1e6c0c6 100644 --- a/src/components/MultiSelect/MultiSelect.mdx +++ b/src/components/MultiSelect/MultiSelect.mdx @@ -139,7 +139,7 @@ count. The format is as follows: { id: "architecture", name: "Architecture", - isDisabled: true,, + isDisabled: true, itemCount: 7 }, { @@ -157,7 +157,7 @@ count. The format is as follows: name: 'User Experience' }, { - id: 'tecture', + id: 'architecture', isDisabled: false, name: 'Architecture' }, @@ -329,7 +329,7 @@ child checkbox will not be clickable and its state will not change. name: 'User Experience' }, { - id: 'tecture', + id: 'architecture_design', isDisabled: false, name: 'Architecture' }, @@ -382,7 +382,7 @@ child checkbox will not be clickable and its state will not change. name: 'User Experience' }, { - id: 'tecture', + id: 'architecture_design', isDisabled: true, name: 'Architecture' }, @@ -446,9 +446,9 @@ the component to allow users to search the available checkbox items. ## Show Item Count -The recommended UX patterns for filtering is to include an item count associated -with each option in a `MultiSelect` component. The item counts can be rendered by -passing the `itemCount` data property to the `items` prop. +The recommended UX pattern for filtering is to include an item count associated +with each option in a `MultiSelect` component. The item counts can be rendered +by passing the `itemCount` data property to the `items` prop.