From 91457f2cc1798ea51961dd24048929f9b3be486e Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 24 Apr 2024 14:31:13 -0400 Subject: [PATCH 01/10] featured content container query testing --- .../FeaturedContent/FeaturedContent.tsx | 5 +- src/theme/components/featuredContent.ts | 46 +++++++++++++------ 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/components/FeaturedContent/FeaturedContent.tsx b/src/components/FeaturedContent/FeaturedContent.tsx index 93dd3f0714..f823a45899 100644 --- a/src/components/FeaturedContent/FeaturedContent.tsx +++ b/src/components/FeaturedContent/FeaturedContent.tsx @@ -107,13 +107,16 @@ export const FeaturedContent: ChakraComponent< ...styles.imgWrapper, backgroundImage: `/**/url(${imageProps.src})`, }} + data-image > - {textContent} + + {textContent} + ); diff --git a/src/theme/components/featuredContent.ts b/src/theme/components/featuredContent.ts index f9c95ccc7c..fdf1d96c99 100644 --- a/src/theme/components/featuredContent.ts +++ b/src/theme/components/featuredContent.ts @@ -46,18 +46,46 @@ const FeaturedContent = defineMultiStyleConfig({ bgColor: "dark.ui.bg.default", }, img: screenreaderOnly(), + containerType: "inline-size", + "@container (min-width: 0px)": { + " > div": { + flexDirection: imageAtEnd ? "column-reverse" : "column", + }, + "[data-image]": { + height: "320px", + width: "100%", + }, + }, + "@container (min-width: 568px)": { + " > div": { + flexDirection: imageAtEnd ? "row-reverse" : "row", + }, + "[data-image]": { + height: "auto", + width: wrapperWidth, + }, + }, + "@container (min-width: 600px)": { + " > div": { + paddingLeft: full ? "s" : null, + paddingRight: full ? "s" : null, + }, + "[data-text]": { + /** The `paddingLeft` attribute is used to adjust the spacing around the + * text when the image is positioned at the end. For aesthetic reasons, + * we opted to not adjust the spacing around the text when the image is + * positioned at the start. + * */ + paddingStart: full && imageAtEnd ? 0 : null, + }, + }, }, wrapper: { ...wrapperStyles, alignItems: "stretch", display: "flex", - flexDirection: imageAtEnd - ? { base: "column-reverse", md: "row-reverse" } - : { base: "column", md: "row" }, maxWidth: full ? "1280px" : "100%", minHeight: "320px", - paddingLeft: full ? { base: null, md: "s" } : null, - paddingRight: full ? { base: null, md: "s" } : null, }, text: { display: "flex", @@ -65,18 +93,10 @@ const FeaturedContent = defineMultiStyleConfig({ flexDirection: "column", justifyContent: "center", padding: "l", - /** The `paddingLeft` attribute is used to adjust the spacing around the - * text when the image is positioned at the end. For aesthetic reasons, - * we opted to not adjust the spacing around the text when the image is - * positioned at the start. - * */ - paddingStart: full && imageAtEnd ? { base: null, md: 0 } : null, }, imgWrapper: { backgroundPosition: "center", backgroundSize: "cover", - height: { base: "320px", md: "auto" }, - width: { base: "100%", md: wrapperWidth }, }, }; } From fd542307ff59f235c7f3161de22e368bcc50215b Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 2 May 2024 16:12:05 -0400 Subject: [PATCH 02/10] Swaps out media queries for container queries --- src/components/SearchBar/SearchBar.tsx | 1 + src/theme/components/searchBar.ts | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 6ecce34ff5..6fdb256811 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -217,6 +217,7 @@ export const SearchBar: React.FC = chakra( invalidText={invalidText} isInvalid={isInvalid} ref={ref} + sx={{ containerType: "inline-size" }} {...rest} > select": { marginBottom: "-1px" }, }, - flexFlow: { - base: "column nowrap", - md: "row nowrap", + "@container (min-width: 568px)": { + "&": { marginBottom: "auto", flexFlow: "row nowrap" }, + " > select": { + marginBottom: "0", + maxWidth: "255px", + marginRight: "-1px", + }, }, ".textInput": { flexGrow: "1", }, select: { flexShrink: "0", - marginBottom: { base: "-1px", md: "0" }, - maxWidth: { base: undefined, md: "255px" }, textOverflow: "ellipsis", - marginRight: { base: undefined, md: "-1px" }, _hover: { zIndex: "10", "+ .chakra-select__icon-wrapper": { From 8fd860ca525e5f707a1339817baed537dbdd36e3 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Tue, 7 May 2024 11:53:04 -0400 Subject: [PATCH 03/10] updates based on feedback --- .../FeaturedContent/FeaturedContent.tsx | 2 +- src/theme/components/featuredContent.ts | 15 ++++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/FeaturedContent/FeaturedContent.tsx b/src/components/FeaturedContent/FeaturedContent.tsx index f823a45899..d366ede433 100644 --- a/src/components/FeaturedContent/FeaturedContent.tsx +++ b/src/components/FeaturedContent/FeaturedContent.tsx @@ -100,7 +100,7 @@ export const FeaturedContent: ChakraComponent< ref={ref} {...rest} > - + div": { + "[data-wrapper]": { flexDirection: imageAtEnd ? "column-reverse" : "column", }, "[data-image]": { @@ -56,20 +57,16 @@ const FeaturedContent = defineMultiStyleConfig({ width: "100%", }, }, - "@container (min-width: 568px)": { - " > div": { + [`@container (min-width: ${breakpoints.md})`]: { + "[data-wrapper]": { flexDirection: imageAtEnd ? "row-reverse" : "row", + paddingLeft: full ? "s" : null, + paddingRight: full ? "s" : null, }, "[data-image]": { height: "auto", width: wrapperWidth, }, - }, - "@container (min-width: 600px)": { - " > div": { - paddingLeft: full ? "s" : null, - paddingRight: full ? "s" : null, - }, "[data-text]": { /** The `paddingLeft` attribute is used to adjust the spacing around the * text when the image is positioned at the end. For aesthetic reasons, From f6e13980419733bcd4417e25e069926feb499e8e Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Thu, 30 May 2024 13:56:47 -0400 Subject: [PATCH 04/10] update card to use container queries --- src/components/Card/Card.tsx | 78 +++++++++++++++++++----------------- src/theme/components/card.ts | 51 +++++++++++++++++------ 2 files changed, 80 insertions(+), 49 deletions(-) diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index a02141c03c..845c1ab91d 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -315,44 +315,48 @@ export const Card: ChakraComponent< ); return ( - - {hasImage && ( - - )} - - {cardContents} - - {cardRightContents.length ? ( - - {cardRightContents} + + + {hasImage && ( + + )} + + {cardContents} - ) : null} - + {cardRightContents.length ? ( + + {cardRightContents} + + ) : null} + + ); } ) diff --git a/src/theme/components/card.ts b/src/theme/components/card.ts index fcc35af94c..77a38c76b3 100644 --- a/src/theme/components/card.ts +++ b/src/theme/components/card.ts @@ -1,6 +1,7 @@ import { defineStyleConfig } from "@chakra-ui/react"; import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"; import { defineStyle, StyleFunctionProps } from "@chakra-ui/system"; +import breakpoints from "../foundations/breakpoints"; import { baseLinkStyles } from "./link"; const { defineMultiStyleConfig, definePartsStyle } = @@ -88,10 +89,6 @@ const ReservoirCard = defineMultiStyleConfig({ const layoutStyles = isRow ? { display: "flex", - flexFlow: { - base: "column nowrap", - md: "row", - }, maxWidth: "100%", textAlign: "left", alignItems: isCentered ? "center" : null, @@ -121,6 +118,44 @@ const ReservoirCard = defineMultiStyleConfig({ } return { base: { + containerType: "inline-size", + "@container (min-width: 0px)": { + "[data-wrapper]": { + flexFlow: isRow ? "column nowrap" : null, + }, + "[data-actions]": { + flexShrink: isAlignedRightActions ? "0" : null, + marginStart: "0", + marginTop: "xs", + maxWidth: "100%", + }, + "[data-body]": { + width: "100%", + }, + }, + [`@container (min-width: ${breakpoints.sm})`]: { + "[data-body]": { + flexBasis: isRow ? "100%" : null, + }, + }, + [`@container (min-width: ${breakpoints.md})`]: { + "[data-wrapper]": { + flexFlow: isRow ? "row" : null, + }, + "[data-actions]": { + flexShrink: "0", + marginStart: "m", + marginTop: "0", + maxWidth: "180px", + }, + "[data-body]": { + display: "block", + flexFlow: "row nowrap", + width: "auto", + }, + }, + }, + wrapper: { alignItems: "flex-start", display: "flex", flexFlow: "column wrap", @@ -129,19 +164,11 @@ const ReservoirCard = defineMultiStyleConfig({ ...layoutStyles, }, actions: { - flexShrink: { base: isAlignedRightActions ? "0" : null, md: "0" }, - marginStart: { base: "0", md: "m" }, - marginTop: { base: "xs", md: "0" }, - maxWidth: { base: "100%", md: "180px" }, width: "100%", }, body: { - display: { md: "block" }, - flexBasis: { sm: isRow ? "100%" : null }, - flexFlow: { md: "row nowrap" }, margin: bodyMargin, padding: bodyPadding, - width: { base: "100%", md: "auto" }, }, heading: { marginBottom: "xs", From e3aac77e403db711ab87facd716008d4b170e9ee Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Thu, 20 Jun 2024 15:29:42 -0400 Subject: [PATCH 05/10] add styles for card image --- src/components/Card/Card.tsx | 3 ++- src/theme/components/card.ts | 44 +++++++++++++++++++++++++----------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 845c1ab91d..ce4b28122f 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -104,7 +104,7 @@ function CardImage( }); return ( - + {alt} { hasImage: boolean; @@ -42,6 +43,17 @@ const imageSizes = { medium: { flex: { md: "0 0 225px" } }, large: { flex: { md: "0 0 360px" } }, }; + +const imageSizesMinWidth0 = { + xxsmall: { flex: "0 0 100%", width: "100%" }, +}; +const imageSizesMinWidth600 = { + xxsmall: { flex: "0 0 64px", width: "100%" }, + xsmall: { flex: "0 0 96px" }, + small: { flex: "0 0 165px" }, + medium: { flex: "0 0 225px" }, + large: { flex: "0 0 360px" }, +}; // This is complicated and can be refactored later... const getBodyPaddingStyles = ({ hasImage, @@ -84,6 +96,7 @@ const ReservoirCard = defineMultiStyleConfig({ isCentered, layout, mainActionLink, + imageSize, }: CardBaseStyleProps) => { const isRow = layout === "row"; const layoutStyles = isRow @@ -116,6 +129,8 @@ const ReservoirCard = defineMultiStyleConfig({ bodyMargin = "0"; } } + // These sizes are only for the "row" layout. + // const imageSize = size ? imageSizes[size] : {}; return { base: { containerType: "inline-size", @@ -132,6 +147,12 @@ const ReservoirCard = defineMultiStyleConfig({ "[data-body]": { width: "100%", }, + "[data-image]": { + maxWidth: "100%", + margin: imageIsAtEnd ? "var(--nypl-space-m) 0 0" : null, + width: "100%", + ...imageSizesMinWidth0[imageSize], + }, }, [`@container (min-width: ${breakpoints.sm})`]: { "[data-body]": { @@ -153,6 +174,15 @@ const ReservoirCard = defineMultiStyleConfig({ flexFlow: "row nowrap", width: "auto", }, + "[data-image]": { + maxWidth: "50%", + flex: "0 0 225px", + margin: imageIsAtEnd + ? "0 0 0 var(--nypl-space-m)" + : "0 var(--nypl-space-m) 0 0", + width: null, + ...imageSizesMinWidth600[imageSize], + }, }, }, wrapper: { @@ -242,25 +272,13 @@ const CardContent = defineStyleConfig({ const CardImage = defineStyleConfig({ baseStyle: defineStyle( - ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => { - // These sizes are only for the "row" layout. - const imageSize = size ? imageSizes[size] : {}; + ({ imageIsAtEnd, isCentered, layout }: CardImageBaseStyleProps) => { const layoutStyles = layout === "row" ? { - flex: { md: "0 0 225px" }, - maxWidth: { base: "100%", md: "50%" }, textAlign: "left", alignItems: isCentered ? "center" : null, - margin: { - base: imageIsAtEnd ? "var(--nypl-space-m) 0 0" : null, - md: imageIsAtEnd - ? "0 0 0 var(--nypl-space-m)" - : "0 var(--nypl-space-m) 0 0", - }, - width: { base: "100%", md: null }, marginBottom: ["xs", "xs"], - ...imageSize, } : { marginBottom: "xs", From 08d24c4c677cd2a8be00d10ca1e7e1fa15403841 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Wed, 26 Jun 2024 14:41:30 -0400 Subject: [PATCH 06/10] Updates for searchbar button --- src/components/SearchBar/SearchBar.tsx | 10 ++-------- src/theme/components/searchBar.ts | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 26a3b00658..56578aebab 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -141,13 +141,6 @@ export const SearchBar: ChakraComponent< isRequired ? "(Required)" : "" }`; const buttonType = noBrandButtonType ? "noBrand" : "primary"; - const searchBarButtonStyles = { - borderLeftRadius: "none", - borderRightRadius: { base: "none", md: "sm" }, - lineHeight: "1.70", - marginBottom: "auto", - maxWidth: { base: "unset", md: "80px" }, - }; if (!id) { console.warn( @@ -204,7 +197,8 @@ export const SearchBar: ChakraComponent< isDisabled={isDisabled} onClick={buttonOnClick} type="submit" - sx={searchBarButtonStyles} + sx={styles.button} + data-button > select": { marginBottom: "-1px" }, + "[data-button]": { + borderRightRadius: "none", + maxWidth: "unset", + }, }, - "@container (min-width: 568px)": { + [`@container (min-width: ${breakpoints.md})`]: { "&": { marginBottom: "auto", flexFlow: "row nowrap" }, " > select": { marginBottom: "0", maxWidth: "255px", marginRight: "-1px", }, + "[data-button]": { + borderRightRadius: "sm", + maxWidth: "80px", + }, }, ".textInput": { flexGrow: "1", }, + button: { + borderLeftRadius: "none", + lineHeight: "1.70", + marginBottom: "auto", + }, select: { flexShrink: "0", textOverflow: "ellipsis", From eb8acda5bb7de672d528b43f85fcb6a34b39e6ed Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Wed, 26 Jun 2024 14:55:48 -0400 Subject: [PATCH 07/10] Updates version --- package-lock.json | 232 +++++++++++++++++++--------------------------- package.json | 2 +- 2 files changed, 98 insertions(+), 136 deletions(-) diff --git a/package-lock.json b/package-lock.json index ee37c7f055..20ef6ee2c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nypl/design-system-react-components", - "version": "3.1.6", + "version": "3.1.6-container-queries-rc", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nypl/design-system-react-components", - "version": "3.1.6", + "version": "3.1.6-container-queries-rc", "license": "Apache-2.0", "dependencies": { "@chakra-ui/react": "2.8.2", @@ -5553,18 +5553,6 @@ "node": ">=6.0.0" } }, - "node_modules/@jridgewell/source-map": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", - "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.25" - } - }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", @@ -7522,9 +7510,9 @@ } }, "node_modules/@storybook/core-common/node_modules/minimatch": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", - "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -7747,9 +7735,9 @@ } }, "node_modules/@storybook/csf": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.8.tgz", - "integrity": "sha512-Ntab9o7LjBCbFIao5l42itFiaSh/Qu+l16l/r/9qmV9LnYZkO+JQ7tzhdlwpgJfhs+B5xeejpdAtftDRyXNajw==", + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.9.tgz", + "integrity": "sha512-JlZ6v/iFn+iKohKGpYXnMeNeTiiAMeFoDhYnPLIC8GnyyIWqEI9wJYrOK9i9rxlJ8NZAH/ojGC/u/xVC41qSgQ==", "dev": true, "dependencies": { "type-fest": "^2.19.0" @@ -11676,12 +11664,15 @@ } }, "node_modules/axobject-query": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", - "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.2.tgz", + "integrity": "sha512-QtQGAQJfHXiTrtRH8Q1gkarFLs56fDmfiMCptvRbo/AEQIImrW6u7EcUAOfkHHNE9dqZKH3227iRKRSp0KtfTw==", "dev": true, "dependencies": { - "dequal": "^2.0.3" + "deep-equal-json": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" } }, "node_modules/babel-core": { @@ -12613,9 +12604,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001636", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", - "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", + "version": "1.0.30001637", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001637.tgz", + "integrity": "sha512-1x0qRI1mD1o9e+7mBI7XtzFAP4XszbHaVWsMiGbSPLYekKTJF7K+FNk6AsXH4sUpc+qrsI3pVgf1Jdl/uGkuSQ==", "dev": true, "funding": [ { @@ -14634,6 +14625,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/deep-equal-json": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/deep-equal-json/-/deep-equal-json-1.0.0.tgz", + "integrity": "sha512-x11iOxzQuLWG1faqBf8PYn3xSxkK41Wg38lUbch9f+nVmBeuI53PPXeRIDdHsW2/dP2GGKL9p8cLCahHToE7CA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "isarray": "^2.0.5", + "object-is": "^1.1.5", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -15111,9 +15117,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.807", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.807.tgz", - "integrity": "sha512-kSmJl2ZwhNf/bcIuCH/imtNOKlpkLDn2jqT5FJ+/0CXjhnFaOa9cOe9gHKKy71eM49izwuQjZhKk+lWQ1JxB7A==", + "version": "1.4.812", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.812.tgz", + "integrity": "sha512-7L8fC2Ey/b6SePDFKR2zHAy4mbdp1/38Yk5TsARO66W3hC5KEaeKMMHoxwtuH+jcu2AYLSn9QX04i95t6Fl1Hg==", "dev": true }, "node_modules/elliptic": { @@ -16866,9 +16872,9 @@ "dev": true }, "node_modules/flow-parser": { - "version": "0.238.0", - "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.238.0.tgz", - "integrity": "sha512-VE7XSv1epljsIN2YeBnxCmGJihpNIAnLLu/pPOdA+Gkso7qDltJwUi6vfHjgxdBbjSdAuPGnhuOHJUQG+yYwIg==", + "version": "0.238.2", + "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.238.2.tgz", + "integrity": "sha512-fs7FSnzzKF6oSzjk14JlBHt82DPchYHVsXtPi4Fkn+qrunVjWaBZY7nSO/mC9X4l9+wRah/R69DRd5NGDOrWqw==", "dev": true, "engines": { "node": ">=0.4.0" @@ -18342,11 +18348,14 @@ } }, "node_modules/is-core-module": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", - "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz", + "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==", "dependencies": { - "hasown": "^2.0.0" + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -20405,9 +20414,9 @@ } }, "node_modules/jest-cli/node_modules/v8-to-istanbul": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz", - "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==", + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz", + "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==", "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", @@ -24169,9 +24178,9 @@ } }, "node_modules/jest/node_modules/v8-to-istanbul": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz", - "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==", + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz", + "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==", "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", @@ -26882,10 +26891,13 @@ } }, "node_modules/object-inspect": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", - "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz", + "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==", "dev": true, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -29069,20 +29081,37 @@ } }, "node_modules/rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", "dev": true, - "optional": true, - "peer": true, + "dependencies": { + "@types/estree": "1.0.5" + }, "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.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", "fsevents": "~2.3.2" } }, @@ -30774,23 +30803,21 @@ } }, "node_modules/terser": { - "version": "5.31.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.1.tgz", - "integrity": "sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==", + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz", + "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==", "dev": true, - "optional": true, "peer": true, "dependencies": { - "@jridgewell/source-map": "^0.3.3", - "acorn": "^8.8.2", "commander": "^2.20.0", - "source-map-support": "~0.5.20" + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" }, "bin": { "terser": "bin/terser" }, "engines": { - "node": ">=10" + "node": ">=6.0.0" } }, "node_modules/terser-webpack-plugin": { @@ -30817,13 +30844,6 @@ "webpack": "^4.0.0" } }, - "node_modules/terser-webpack-plugin/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true, - "peer": true - }, "node_modules/terser-webpack-plugin/node_modules/find-cache-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz", @@ -30977,24 +30997,6 @@ "node": ">=0.10.0" } }, - "node_modules/terser-webpack-plugin/node_modules/terser": { - "version": "4.8.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz", - "integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==", - "dev": true, - "peer": true, - "dependencies": { - "commander": "^2.20.0", - "source-map": "~0.6.1", - "source-map-support": "~0.5.12" - }, - "bin": { - "terser": "bin/terser" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/terser-webpack-plugin/node_modules/webpack-sources": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz", @@ -31006,28 +31008,23 @@ "source-map": "~0.6.1" } }, - "node_modules/terser/node_modules/acorn": { - "version": "8.12.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz", - "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/terser/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true, - "optional": true, "peer": true }, + "node_modules/terser/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/test-exclude": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", @@ -32642,41 +32639,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/vite/node_modules/rollup": { - "version": "4.18.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", - "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", - "dev": true, - "dependencies": { - "@types/estree": "1.0.5" - }, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=18.0.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.18.0", - "@rollup/rollup-android-arm64": "4.18.0", - "@rollup/rollup-darwin-arm64": "4.18.0", - "@rollup/rollup-darwin-x64": "4.18.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", - "@rollup/rollup-linux-arm-musleabihf": "4.18.0", - "@rollup/rollup-linux-arm64-gnu": "4.18.0", - "@rollup/rollup-linux-arm64-musl": "4.18.0", - "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", - "@rollup/rollup-linux-riscv64-gnu": "4.18.0", - "@rollup/rollup-linux-s390x-gnu": "4.18.0", - "@rollup/rollup-linux-x64-gnu": "4.18.0", - "@rollup/rollup-linux-x64-musl": "4.18.0", - "@rollup/rollup-win32-arm64-msvc": "4.18.0", - "@rollup/rollup-win32-ia32-msvc": "4.18.0", - "@rollup/rollup-win32-x64-msvc": "4.18.0", - "fsevents": "~2.3.2" - } - }, "node_modules/vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", diff --git a/package.json b/package.json index a6f9cb21ae..cb8e372717 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nypl/design-system-react-components", - "version": "3.1.6", + "version": "3.1.6-container-queries-rc", "description": "NYPL Reservoir Design System React Components", "repository": { "type": "git", From 2c82d5bbe77a8cb3c72fd7e0a2add37cc8af4508 Mon Sep 17 00:00:00 2001 From: Jackie Quach Date: Wed, 25 Sep 2024 16:23:14 -0400 Subject: [PATCH 08/10] update snapshots --- src/components/Card/Card.tsx | 3 +- .../Card/__snapshots__/Card.test.tsx.snap | 960 ++++++++++-------- .../__snapshots__/DatePicker.test.tsx.snap | 34 +- .../FeaturedContent.test.tsx.snap | 18 + .../__snapshots__/SearchBar.test.tsx.snap | 65 +- 5 files changed, 586 insertions(+), 494 deletions(-) diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index ce4b28122f..10fa8c9113 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -316,12 +316,11 @@ export const Card: ChakraComponent< ); return ( - +
- Alt text -
-
-
-

- The Card Heading -

-
- middle column content + > + Alt text +
- +

+ The Card Heading +

+
+ middle column content +
+
+ +
@@ -53,100 +60,107 @@ exports[`Card Renders the UI snapshot correctly 1`] = ` exports[`Card Renders the UI snapshot correctly 2`] = `
- Alt text -
-
-
-

- The Card Heading -

-
-
- Published in New York by Random House -
-
- Written in English -
-
- License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International + > + Alt text
@@ -154,46 +168,53 @@ exports[`Card Renders the UI snapshot correctly 2`] = ` exports[`Card Renders the UI snapshot correctly 3`] = `
- Alt text + > + Alt text +
-
-
-

- The Card Heading -

-

- Published in New York by Random House -

-

- Written in English -

-

- Under Creative Commons License -

+

+ The Card Heading +

+
+

+ Published in New York by Random House +

+

+ Written in English +

+

+ Under Creative Commons License +

+
@@ -201,95 +222,102 @@ exports[`Card Renders the UI snapshot correctly 3`] = ` exports[`Card Renders the UI snapshot correctly 4`] = `
- Alt text -
-
- +
@@ -297,85 +325,91 @@ exports[`Card Renders the UI snapshot correctly 4`] = ` exports[`Card Renders the UI snapshot correctly 5`] = ` @@ -383,55 +417,62 @@ exports[`Card Renders the UI snapshot correctly 5`] = ` exports[`Card Renders the UI snapshot correctly 6`] = `
- Alt text -
-
-
-

- - The Card Heading - -

-
- middle column content + Alt text +
- +

+ + The Card Heading + +

+
+ middle column content +
+
+ +
@@ -439,62 +480,69 @@ exports[`Card Renders the UI snapshot correctly 6`] = ` exports[`Card Renders the UI snapshot correctly 7`] = `
- Alt text -
-
-
-

- The Card Heading -

-
- middle column content -
-
- + > + Alt text +
- +

+ The Card Heading +

+
+ middle column content +
+
+ +
+
+ +
@@ -502,50 +550,57 @@ exports[`Card Renders the UI snapshot correctly 7`] = ` exports[`Card Renders the UI snapshot correctly 8`] = `
- Alt text -
-
-
-

- The Card Heading -

-
- middle column content + > + Alt text +
- +

+ The Card Heading +

+
+ middle column content +
+
+ +
@@ -553,53 +608,60 @@ exports[`Card Renders the UI snapshot correctly 8`] = ` exports[`Card Renders the UI snapshot correctly 9`] = `
- Alt text -
-
-
-

- The Card Heading -

-
- middle column content + > + Alt text +
- +

+ The Card Heading +

+
+ middle column content +
+
+ +
diff --git a/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap index 0e59d86ca9..9d7bba0e35 100644 --- a/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +++ b/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap @@ -32,7 +32,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = ` role="alert" />