@nypl/design-system-react-components 3.1.6-container-queries-rc → 3.1.7-rc-breadcrumbs

package/dist/src/theme/components/card.d.ts

@@ -7,7 +7,6 @@ interface CardBaseStyleProps extends StyleFunctionProps {
     isCentered: boolean;
     layout: string;
     mainActionLink: boolean;
-    imageSize: keyof typeof imageSizes;
 }
 interface CardImageBaseStyleProps extends StyleFunctionProps {
     imageIsAtEnd: boolean;
@@ -52,97 +51,13 @@ declare const imageSizes: {
 };
 declare const _default: {
     ReservoirCard: {
-        baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, imageSize, }: CardBaseStyleProps) => {
+        baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
             base: {
-                [x: string]: string | {
-                    "[data-wrapper]": {
-                        flexFlow: string;
-                    };
-                    "[data-actions]": {
-                        flexShrink: string;
-                        marginStart: string;
-                        marginTop: string;
-                        maxWidth: string;
-                    };
-                    "[data-body]": {
-                        width: string;
-                        flexBasis?: undefined;
-                        display?: undefined;
-                        flexFlow?: undefined;
-                    };
-                    "[data-image]": any;
-                } | {
-                    "[data-body]": {
-                        flexBasis: string;
-                        width?: undefined;
-                        display?: undefined;
-                        flexFlow?: undefined;
-                    };
-                    "[data-wrapper]"?: undefined;
-                    "[data-actions]"?: undefined;
-                    "[data-image]"?: undefined;
-                } | {
-                    "[data-wrapper]": {
-                        flexFlow: string;
-                    };
-                    "[data-actions]": {
-                        flexShrink: string;
-                        marginStart: string;
-                        marginTop: string;
-                        maxWidth: string;
-                    };
-                    "[data-body]": {
-                        display: string;
-                        flexFlow: string;
-                        width: string;
-                        flexBasis?: undefined;
-                    };
-                    "[data-image]": {
-                        flex: string;
-                        width: string;
-                        maxWidth: string;
-                        margin: string;
-                    } | {
-                        flex: string;
-                        maxWidth: string;
-                        margin: string;
-                        width: any;
-                    } | {
-                        flex: string;
-                        maxWidth: string;
-                        margin: string;
-                        width: any;
-                    } | {
-                        flex: string;
-                        maxWidth: string;
-                        margin: string;
-                        width: any;
-                    } | {
-                        flex: string;
-                        maxWidth: string;
-                        margin: string;
-                        width: any;
-                    };
-                };
-                containerType: string;
-                "@container (min-width: 0px)": {
-                    "[data-wrapper]": {
-                        flexFlow: string;
-                    };
-                    "[data-actions]": {
-                        flexShrink: string;
-                        marginStart: string;
-                        marginTop: string;
-                        maxWidth: string;
-                    };
-                    "[data-body]": {
-                        width: string;
-                    };
-                    "[data-image]": any;
-                };
-            };
-            wrapper: {
                 display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
                 maxWidth: string;
                 textAlign: string;
                 alignItems: string;
@@ -151,9 +66,9 @@ declare const _default: {
                 _dark: {
                     borderColor: string;
                 };
-                flexFlow: string;
             } | {
                 display: string;
+                flexFlow: string;
                 maxWidth?: undefined;
                 textAlign: string;
                 alignItems: string;
@@ -162,32 +77,63 @@ declare const _default: {
                 _dark: {
                     borderColor: string;
                 };
-                flexFlow: string;
             } | {
                 display: string;
+                flexFlow: {
+                    base: string;
+                    md: string;
+                };
                 maxWidth: string;
                 textAlign: string;
                 alignItems: string;
                 border?: undefined;
                 borderColor?: undefined;
                 _dark?: undefined;
-                flexFlow: string;
             } | {
                 display: string;
+                flexFlow: string;
                 maxWidth?: undefined;
                 textAlign: string;
                 alignItems: string;
                 border?: undefined;
                 borderColor?: undefined;
                 _dark?: undefined;
-                flexFlow: string;
             };
             actions: {
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
                 width: string;
             };
             body: {
+                display: {
+                    md: "block";
+                };
+                flexBasis: {
+                    sm: string;
+                };
+                flexFlow: {
+                    md: "row nowrap";
+                };
                 margin: any;
                 padding: any;
+                width: {
+                    base: "100%";
+                    md: "auto";
+                };
             };
             heading: {
                 marginBottom: string;
@@ -327,32 +273,56 @@ declare const _default: {
         };
     };
     CardImage: {
-        baseStyle?: ({ imageIsAtEnd, isCentered, layout }: CardImageBaseStyleProps) => {
+        baseStyle?: ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
             textAlign: string;
             alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
             marginBottom: string[];
-            width?: undefined;
             marginTop: string;
             order: string;
         } | {
             marginBottom: string;
             width: string;
-            textAlign?: undefined;
-            alignItems?: undefined;
             marginTop: string;
             order: string;
         } | {
+            flex: {
+                md: string;
+            };
+            maxWidth: {
+                base: string;
+                md: string;
+            };
             textAlign: string;
             alignItems: string;
+            margin: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: any;
+            };
             marginBottom: string[];
-            width?: undefined;
             marginTop?: undefined;
             order?: undefined;
         } | {
             marginBottom: string;
             width: string;
-            textAlign?: undefined;
-            alignItems?: undefined;
             marginTop?: undefined;
             order?: undefined;
         };

package/dist/src/theme/components/featuredContent.d.ts

@@ -7,59 +7,6 @@ interface FeaturedContentBaseStyleProps extends StyleFunctionProps {
 declare const FeaturedContent: {
     baseStyle?: ({ imagePosition, imageWidth, isFullWidth, }: FeaturedContentBaseStyleProps) => {
         base: {
-            [x: string]: string | {
-                clip: string;
-                height: {
-                    base: string;
-                    md: string;
-                };
-                overflow: string;
-                position: {
-                    base: string;
-                    md: string;
-                };
-                width: {
-                    base: string;
-                    md: string;
-                };
-                wordWrap: string;
-            } | {
-                bgColor: string;
-                "[data-wrapper]"?: undefined;
-                "[data-image]"?: undefined;
-                "[data-text]"?: undefined;
-            } | {
-                "[data-wrapper]": {
-                    flexDirection: string;
-                    paddingLeft?: undefined;
-                    paddingRight?: undefined;
-                };
-                "[data-image]": {
-                    height: string;
-                    width: string;
-                };
-                bgColor?: undefined;
-                "[data-text]"?: undefined;
-            } | {
-                "[data-wrapper]": {
-                    flexDirection: string;
-                    paddingLeft: string;
-                    paddingRight: string;
-                };
-                "[data-image]": {
-                    height: string;
-                    width: string;
-                };
-                "[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: number;
-                };
-                bgColor?: undefined;
-            };
             bgColor: string;
             left: string;
             marginLeft: string;
@@ -87,22 +34,27 @@ declare const FeaturedContent: {
                 };
                 wordWrap: string;
             };
-            containerType: string;
-            "@container (min-width: 0px)": {
-                "[data-wrapper]": {
-                    flexDirection: string;
-                };
-                "[data-image]": {
-                    height: string;
-                    width: string;
-                };
-            };
         };
         wrapper: {
             alignItems: string;
             display: string;
+            flexDirection: {
+                base: "column-reverse";
+                md: "row-reverse";
+            } | {
+                base: "column";
+                md: "row";
+            };
             maxWidth: string;
             minHeight: string;
+            paddingLeft: {
+                base: any;
+                md: "s";
+            };
+            paddingRight: {
+                base: any;
+                md: "s";
+            };
             marginY: string;
             marginX: string;
             padding: string;
@@ -114,10 +66,27 @@ declare const FeaturedContent: {
             flexDirection: string;
             justifyContent: string;
             padding: string;
+            /** 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: {
+                base: any;
+                md: number;
+            };
         };
         imgWrapper: {
             backgroundPosition: string;
             backgroundSize: string;
+            height: {
+                base: "320px";
+                md: "auto";
+            };
+            width: {
+                base: "100%";
+                md: string;
+            };
         };
     };
     sizes?: {

package/dist/src/theme/components/newsletterSignup.d.ts

@@ -1,23 +1,22 @@
-import { SectionTypes } from "../../helpers/types";
 import { StyleFunctionProps } from "@chakra-ui/system";
+import { HighlightColorTypes } from "../../components/NewsletterSignup/NewsletterSignup";
 interface NewsLetterStyleProps extends StyleFunctionProps {
-    newsletterSignupType?: SectionTypes;
+    highlightColor: HighlightColorTypes;
 }
 declare const NewsletterSignup: {
-    baseStyle?: ({ newsletterSignupType }: NewsLetterStyleProps) => {
+    baseStyle?: ({ highlightColor }: NewsLetterStyleProps) => {
         borderWidth: {
             base: string;
             md: string;
         };
         width: string;
         pitch: {
-            alignItems: string;
             bg: string;
             borderLeftColor: {
-                md: any;
+                md: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
             };
             borderTopColor: {
-                base: any;
+                base: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
                 md: "ui.border.default";
             };
             borderWidth: {
@@ -36,7 +35,7 @@ declare const NewsletterSignup: {
                     md: "dark.ui.border.default";
                 };
                 borderLeftColor: {
-                    md: any;
+                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.section.books-and-more.primary" | "dark.brand.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
                 };
             };
             padding: {

package/dist/src/theme/components/searchBar.d.ts

@@ -1,111 +1,32 @@
 declare const SearchBar: {
     baseStyle?: {
-        [x: string]: string | {
-            "&": {
-                marginBottom: string;
-                flexFlow: string;
-            };
-            " > select": {
-                marginBottom: string;
-                maxWidth?: undefined;
-                marginRight?: undefined;
-            };
-            "[data-button]": {
-                borderRightRadius: string;
-                maxWidth: string;
-            };
-            flexGrow?: undefined;
-            borderLeftRadius?: undefined;
-            lineHeight?: undefined;
-            marginBottom?: undefined;
-            flexShrink?: undefined;
-            textOverflow?: undefined;
-            _hover?: undefined;
-        } | {
-            "&": {
-                marginBottom: string;
-                flexFlow: string;
-            };
-            " > select": {
-                marginBottom: string;
-                maxWidth: string;
-                marginRight: string;
-            };
-            "[data-button]": {
-                borderRightRadius: string;
-                maxWidth: string;
-            };
-            flexGrow?: undefined;
-            borderLeftRadius?: undefined;
-            lineHeight?: undefined;
-            marginBottom?: undefined;
-            flexShrink?: undefined;
-            textOverflow?: undefined;
-            _hover?: undefined;
-        } | {
-            flexGrow: string;
-            "&"?: undefined;
-            " > select"?: undefined;
-            "[data-button]"?: undefined;
-            borderLeftRadius?: undefined;
-            lineHeight?: undefined;
-            marginBottom?: undefined;
-            flexShrink?: undefined;
-            textOverflow?: undefined;
-            _hover?: undefined;
-        } | {
-            borderLeftRadius: string;
-            lineHeight: string;
-            marginBottom: string;
-            "&"?: undefined;
-            " > select"?: undefined;
-            "[data-button]"?: undefined;
-            flexGrow?: undefined;
-            flexShrink?: undefined;
-            textOverflow?: undefined;
-            _hover?: undefined;
-        } | {
-            flexShrink: string;
-            textOverflow: string;
-            _hover: {
-                zIndex: string;
-                "+ .chakra-select__icon-wrapper": {
-                    zIndex: string;
-                };
-            };
-            "&"?: undefined;
-            " > select"?: undefined;
-            "[data-button]"?: undefined;
-            flexGrow?: undefined;
-            borderLeftRadius?: undefined;
-            lineHeight?: undefined;
-            marginBottom?: undefined;
-        };
         display: string;
-        "@container (min-width: 0px)": {
-            "&": {
-                marginBottom: string;
-                flexFlow: string;
-            };
-            " > select": {
-                marginBottom: string;
-            };
-            "[data-button]": {
-                borderRightRadius: string;
-                maxWidth: string;
-            };
+        marginBottom: {
+            base: string;
+            md: string;
+        };
+        flexFlow: {
+            base: string;
+            md: string;
         };
         ".textInput": {
             flexGrow: string;
         };
-        button: {
-            borderLeftRadius: string;
-            lineHeight: string;
-            marginBottom: string;
-        };
         select: {
             flexShrink: string;
+            marginBottom: {
+                base: "-1px";
+                md: "0";
+            };
+            maxWidth: {
+                base: any;
+                md: "255px";
+            };
             textOverflow: string;
+            marginRight: {
+                base: any;
+                md: "-1px";
+            };
             _hover: {
                 zIndex: string;
                 "+ .chakra-select__icon-wrapper": {
@@ -116,12 +37,12 @@ declare const SearchBar: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("select" | "button")[];
+            keys: "select"[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("select" | "button")[];
+            keys: "select"[];
         }>;
     };
     defaultProps?: {
@@ -129,6 +50,6 @@ declare const SearchBar: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("select" | "button")[];
+    parts: "select"[];
 };
 export default SearchBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.6-container-queries-rc",
+  "version": "3.1.7-rc-breadcrumbs",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -76,21 +76,19 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
-    "@jest/core": "27.3.1",
+    "@jest/core": "29.7.0",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-typescript": "11.0.0",
-    "@storybook/addon-a11y": "8.0.8",
-    "@storybook/addon-designs": "8.0.0",
-    "@storybook/addon-essentials": "8.0.8",
-    "@storybook/addon-interactions": "8.0.8",
-    "@storybook/addon-jest": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "@storybook/blocks": "8.0.8",
-    "@storybook/react": "8.0.8",
-    "@storybook/react-vite": "8.0.8",
-    "@storybook/test": "8.0.8",
-    "@storybook/jest": "0.2.3",
-    "@svgr/webpack": "5.5.0",
+    "@storybook/addon-a11y": "8.1.11",
+    "@storybook/addon-designs": "8.0.2",
+    "@storybook/addon-essentials": "8.1.11",
+    "@storybook/addon-interactions": "8.1.11",
+    "@storybook/addon-jest": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/blocks": "8.1.11",
+    "@storybook/react": "8.1.11",
+    "@storybook/react-vite": "8.1.11",
+    "@storybook/test": "8.1.11",
     "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
@@ -112,9 +110,9 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "7.0.4",
-    "jest": "29.4.3",
-    "jest-axe": "5.0.1",
-    "jest-environment-jsdom": "29.5.0",
+    "jest": "29.7.0",
+    "jest-axe": "9.0.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-transformer-svg": "2.0.2",
     "lint-staged": "10.5.4",
     "normalize.css": "8.0.1",
@@ -128,9 +126,9 @@
     "remark-gfm": "4.0.0",
     "sass": "1.60.0",
     "sass-loader": "10.0.0",
-    "storybook": "8.0.8",
+    "storybook": "8.1.11",
     "style-loader": "2.0.0",
-    "ts-jest": "29.0.5",
+    "ts-jest": "29.1.5",
     "tslib": "2.3.0",
     "typescript": "4.9.5",
     "vite": "5.2.8",