@nypl/design-system-react-components 3.1.0 → 3.1.1

package/dist/src/components/Hero/Hero.d.ts

@@ -4,7 +4,7 @@ import { ComponentImageProps } from "../Image/Image";
 export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
 export type HeroTypes = typeof heroTypesArray[number];
 export declare const heroSecondaryTypes: string[];
-export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "src"> {
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "src" | "onError"> {
 }
 export interface HeroProps {
     /**
@@ -30,13 +30,16 @@ export interface HeroProps {
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
     /** Object used to create and render the `Image` component. Note that only
-     * `src` and `alt` are the available attributes to pass. If `imageProps.alt`
-     * is left blank, a warning will be logged to the console and will cause
-     * accessibility issues. For `imageProps.src`, it will only work for the
-     * "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
+     * `alt`, `component`, and `src` are the available attributes to pass. If
+     * `imageProps.alt` is left blank, a warning will be logged to the console and
+     * will cause accessibility issues. For `imageProps.src`, it will only work for
+     * the "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
      * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
      * `Hero` type. Note: not all `Hero` variations utilize this prop. */
     imageProps?: HeroImageProps;
+    /** Optional boolean used to toggle the default text color from light to dark.
+     * Set isDarkText to `true` if the backgroundColor is set to a light color. */
+    isDarkText?: boolean;
     /** Optional boolean used to toggle the treatment of the background image in
      * the "campaign" variant. If true, the background image will be converted to
      * black & white and darkened to 60% black. */

package/dist/src/components/Image/Image.d.ts

@@ -20,8 +20,12 @@ export interface ComponentImageProps extends Partial<HTMLImageElement> {
     component?: JSX.Element;
     /** Optional value to render as a credit for the internal `Image` component. */
     credit?: string;
+    /** Fallback image path or URL. */
+    fallbackSrc?: string;
     /** Flag to set the internal `Image` component to `isLazy` mode. */
     isLazy?: boolean;
+    /** Additional action to perform in the `img`'s `onerror` attribute function. */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
     /** Optional value to control the size of the internal `Image` component.
      * Defaults to `ImageSizes.Default`. */
     size?: ImageSizes;
@@ -64,10 +68,14 @@ export interface ImageProps extends ImageWrapperProps, ImgHTMLAttributes<HTMLIma
     component?: JSX.Element | null;
     /** Adding will wrap the image in a <figure> */
     credit?: string;
+    /** Fallback image path or URL. */
+    fallbackSrc?: string;
     /** Optional value for the image type */
     imageType?: ImageTypes;
     /** Flag to set the internal `Image` component to `isLazy` mode. */
     isLazy?: boolean;
+    /** Additional action to perform in the `img`'s `onerror` attribute function. */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src?: string;
 }

package/dist/src/components/StyleGuide/ColorCard.d.ts

@@ -189,6 +189,7 @@ export declare const cssVars: {
         dataBgDefaultColor?: undefined;
         dataBrandPrimaryColor?: undefined;
         dataBrandSecondaryColor?: undefined;
+        notes?: undefined;
     } | {
         colorSource: string;
         name: string;
@@ -199,6 +200,7 @@ export declare const cssVars: {
         textColor: string;
         dataBrandPrimaryColor?: undefined;
         dataBrandSecondaryColor?: undefined;
+        notes?: undefined;
     } | {
         name: string;
         dataBlackColor: any[];
@@ -209,6 +211,7 @@ export declare const cssVars: {
         colorSource?: undefined;
         dataBrandPrimaryColor?: undefined;
         dataBrandSecondaryColor?: undefined;
+        notes?: undefined;
     } | {
         colorSource: string;
         name: string;
@@ -219,6 +222,18 @@ export declare const cssVars: {
         dataBgPageColor: string[];
         dataBgDefaultColor: any[];
         textColor: string;
+        notes?: undefined;
+    } | {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBgPageColor: any[];
+        dataBgDefaultColor: any[];
+        notes: string;
+        textColor: string;
+        colorSource?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
     })[];
     grayscaleRoot: {
         name: string;
@@ -343,6 +358,8 @@ export interface ColorCardProps extends DataTableProps {
     colorName: string;
     /** The name of the color that the current color is based on. */
     colorSource: string;
+    /** Details on how a color should be used. */
+    notes?: string;
 }
 export declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("react/jsx-runtime").JSX.Element;
 export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("react/jsx-runtime").JSX.Element;

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

@@ -42,8 +42,8 @@ declare const Breadcrumb: {
         };
         "li:last-child": {
             fontWeight: {
-                base: "breadcrumbs.default";
-                md: "breadcrumbs.lastChild";
+                base: string;
+                md: string;
             };
             ".chakra-breadcrumb__link": {
                 _hover: {

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

@@ -139,22 +139,22 @@ declare const _default: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    textUnderlineOffset: string;
                     _dark: {
                         color: string;
                     };
                     _hover: {
-                        color: string;
-                        textDecoration: string;
-                        textDecorationStyle: string;
-                        textDecorationThickness: string;
                         _dark: {
                             color: string;
                         };
+                        textDecoration: string;
+                        textDecorationStyle: string;
+                        textDecorationThickness: string;
+                        color: string;
                     };
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    color: string;
+                    textUnderlineOffset: string;
                 };
             };
         };

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

@@ -166,22 +166,22 @@ declare const Heading: {
         base: {
             a: {
                 textDecoration: string;
-                color: string;
-                textDecorationStyle: string;
-                textDecorationThickness: string;
-                textUnderlineOffset: string;
                 _dark: {
                     color: string;
                 };
                 _hover: {
-                    color: string;
-                    textDecoration: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
                     _dark: {
                         color: string;
                     };
+                    textDecoration: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    color: string;
                 };
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                color: string;
+                textUnderlineOffset: string;
             };
             color: string;
             margin: string;

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

@@ -1,12 +1,14 @@
+export declare const getTextColor: (type: any, mode: any, foregroundColor: any, isDarkText: any) => any;
+export declare const getLinkColor: (state: any, foregroundColor: any, isDarkText: any) => any;
 declare const Hero: {
     baseStyle?: {};
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "content" | "heading" | "imgWrapper" | "bodyText" | "interior")[];
+            keys: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
         }>;
     };
     variants?: {
-        primary: {
+        primary: ({ foregroundColor, isDarkText }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
             base: {
                 alignItems: string;
                 backgroundSize: string;
@@ -18,10 +20,11 @@ declare const Hero: {
                 };
                 justifyContent: string;
                 minHeight: string;
+                p: string;
             };
             content: {
                 bg: string;
-                color: string;
+                color: any;
                 flex: {
                     base: string;
                     md: string;
@@ -40,13 +43,19 @@ declare const Hero: {
                 bodyText: {
                     marginBottom: string;
                 };
+                ".chakra-heading": {
+                    color: any;
+                };
                 _dark: {
                     bgColor: string;
-                    color: string;
+                    color: any;
+                    ".chakra-heading": {
+                        color: any;
+                    };
                 };
             };
             heading: {
-                color: string;
+                color: any;
             };
         };
         secondary: {
@@ -479,14 +488,14 @@ declare const Hero: {
                 };
             };
         };
-        tertiary: {
+        tertiary: ({ foregroundColor, isDarkText }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
             base: {
                 p: {
                     marginBottom: "0";
                 };
             };
             content: {
-                color: string;
+                color: any;
                 display: string;
                 flexFlow: string;
                 px: string;
@@ -494,6 +503,18 @@ declare const Hero: {
                     base: "inset.default";
                     xl: "inset.wide";
                 };
+                a: {
+                    color: any;
+                    _hover: {
+                        color: any;
+                    };
+                    _visited: {
+                        color: any;
+                        svg: {
+                            fill: any;
+                        };
+                    };
+                };
                 p: {
                     marginBottom: "0";
                     marginTop: {
@@ -501,9 +522,27 @@ declare const Hero: {
                         xl: "xs";
                     };
                 };
+                ".chakra-heading": {
+                    color: any;
+                };
                 _dark: {
+                    a: {
+                        color: any;
+                        _hover: {
+                            color: any;
+                        };
+                        _visited: {
+                            color: any;
+                            svg: {
+                                fill: any;
+                            };
+                        };
+                    };
                     p: {
-                        color: "dark.ui.typography.body";
+                        color: any;
+                    };
+                    ".chakra-heading": {
+                        color: any;
                     };
                 };
                 marginY: string;
@@ -520,7 +559,7 @@ declare const Hero: {
                 };
             };
         };
-        campaign: {
+        campaign: ({ foregroundColor, isDarkText }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
             base: {
                 alignItems: string;
                 display: string;
@@ -555,7 +594,7 @@ declare const Hero: {
             content: {
                 alignItems: string;
                 bg: string;
-                color: string;
+                color: any;
                 display: string;
                 flexFlow: {
                     base: "column nowrap";
@@ -572,8 +611,38 @@ declare const Hero: {
                     md: "relative";
                 };
                 zIndex: number;
+                a: {
+                    color: any;
+                    _hover: {
+                        color: any;
+                    };
+                    _visited: {
+                        color: any;
+                        svg: {
+                            fill: any;
+                        };
+                    };
+                };
+                ".chakra-heading": {
+                    color: any;
+                };
                 _dark: {
-                    color: string;
+                    color: any;
+                    a: {
+                        color: any;
+                        _hover: {
+                            color: any;
+                        };
+                        _visited: {
+                            color: any;
+                            svg: {
+                                fill: any;
+                            };
+                        };
+                    };
+                    ".chakra-heading": {
+                        color: any;
+                    };
                 };
             };
             heading: {
@@ -666,6 +735,6 @@ declare const Hero: {
         variant?: "primary" | "secondary" | "tertiary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "campaign" | "fiftyFifty";
         colorScheme?: string;
     };
-    parts: ("base" | "content" | "heading" | "imgWrapper" | "bodyText" | "interior")[];
+    parts: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
 };
 export default Hero;

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

@@ -3,24 +3,29 @@ interface CustomLinkStyleProps extends StyleFunctionProps {
     finalIsUnderlined: boolean;
     hasVisitedState: boolean;
 }
-export declare const baseLinkStyles: {
-    color: string;
+export declare const linkUnderlineStyles: {
     textDecoration: string;
     textDecorationStyle: string;
     textDecorationThickness: string;
-    textUnderlineOffset: string;
+};
+export declare const baseLinkStyles: {
     _dark: {
         color: string;
     };
     _hover: {
-        color: string;
-        textDecoration: string;
-        textDecorationStyle: string;
-        textDecorationThickness: string;
         _dark: {
             color: string;
         };
+        textDecoration: string;
+        textDecorationStyle: string;
+        textDecorationThickness: string;
+        color: string;
     };
+    textDecoration: string;
+    textDecorationStyle: string;
+    textDecorationThickness: string;
+    color: string;
+    textUnderlineOffset: string;
 };
 declare const Link: {
     baseStyle?: ({ finalIsUnderlined, hasVisitedState }: CustomLinkStyleProps) => {
@@ -42,22 +47,22 @@ declare const Link: {
                     color: string;
                 };
             };
-            color: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            textUnderlineOffset: string;
             _dark: {
                 color: string;
             };
             _hover: {
-                color: string;
-                textDecoration: string;
-                textDecorationStyle: string;
-                textDecorationThickness: string;
                 _dark: {
                     color: string;
                 };
+                textDecoration: string;
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                color: string;
             };
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            color: string;
+            textUnderlineOffset: string;
         };
         /** The element will handle descriptive text added to aid
          * screen readers. */

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

@@ -153,7 +153,7 @@ declare const List: {
         }>;
     };
     variants?: {
-        ul: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        ul: (props: StyleFunctionProps) => {
             base: {
                 listStyle: string;
                 li: {

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

@@ -201,23 +201,23 @@ declare const StructuredContent: {
             marginInlineStart: string;
         };
         a: {
-            color: string;
-            textDecoration: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            textUnderlineOffset: string;
             _dark: {
                 color: string;
             };
             _hover: {
-                color: string;
-                textDecoration: string;
-                textDecorationStyle: string;
-                textDecorationThickness: string;
                 _dark: {
                     color: string;
                 };
+                textDecoration: string;
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                color: string;
             };
+            textDecoration: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            color: string;
+            textUnderlineOffset: string;
         };
         ul: {
             listStyle: string;

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

@@ -5,6 +5,7 @@ interface TagSetFilterProps extends StyleFunctionProps {
 declare const _default: {
     TagSet: {
         baseStyle?: {
+            alignItems: string;
             display: string;
             flexWrap: string;
             gap: string;
@@ -23,26 +24,6 @@ declare const _default: {
     };
     TagSetExplore: {
         baseStyle?: {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            bg: string;
-            border: string;
-            borderColor: string;
-            borderRadius: string;
-            color: string;
-            cursor: string;
-            fontSize: string;
-            height: {
-                base: "32px";
-                md: "22px";
-            };
-            minHeight: string;
-            maxWidth: string;
-            py: string;
-            px: string;
-            textDecoration: string;
-            transition: string;
             _focusWithin: {
                 boxShadow: string;
                 outline: string;
@@ -103,6 +84,30 @@ declare const _default: {
                     };
                 };
             };
+            transitionDuration: string;
+            transitionTimingFunction: string;
+            textDecoration: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            color: string;
+            cursor: string;
+            fontSize: string;
+            height: {
+                base: "32px";
+                md: "22px";
+            };
+            minHeight: string;
+            maxWidth: string;
+            py: string;
+            px: string;
+            textUnderlineOffset: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -119,28 +124,6 @@ declare const _default: {
     TagSetFilter: {
         baseStyle?: ({ isDismissible }: TagSetFilterProps) => {
             base: {
-                display: string;
-                alignItems: string;
-                justifyContent: string;
-                bg: string;
-                border: string;
-                borderColor: string;
-                borderRadius: string;
-                color: string;
-                cursor: string;
-                height: {
-                    base: "32px";
-                    md: "22px";
-                };
-                minHeight: string;
-                maxWidth: string;
-                py: string;
-                paddingLeft: string;
-                paddingRight: string | {
-                    base: "8px";
-                    md: "6px";
-                };
-                fontSize: string;
                 "> span": {
                     display: string;
                     overflow: string;
@@ -158,19 +141,32 @@ declare const _default: {
                     _hover: {
                         bg: string;
                         borderColor: string;
+                        color: string;
                     };
                 };
-            };
-            clearAll: {
+                transitionDuration: string;
+                transitionTimingFunction: string;
+                alignItems: string;
+                bg: string;
+                border: string;
+                borderColor: string;
+                borderRadius: string;
                 color: string;
+                cursor: string;
+                display: string;
+                fontSize: string;
                 height: {
                     base: "32px";
                     md: "22px";
                 };
-                fontSize: string;
+                justifyContent: string;
                 minHeight: string;
-                _dark: {
-                    color: string;
+                maxWidth: string;
+                py: string;
+                paddingLeft: string;
+                paddingRight: string | {
+                    base: "8px";
+                    md: "6px";
                 };
             };
         };

package/dist/src/utils/utils.d.ts

@@ -40,4 +40,7 @@ export declare const contrastRatio: (hex1: string, hex2: string) => string;
 export declare const truncateText: (text: string, truncateTextLength?: number) => string;
 /** Prepare a string for use in an ID or class attribute */
 export declare const sanitizeStringForAttribute: (str: string) => string;
+/** Provides a random image to use as a placeholder. */
+export type GetPlaceholderImageProps = "smaller" | "default";
+export declare const getPlaceholderImage: (size?: GetPlaceholderImageProps, index?: number) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -53,7 +53,7 @@
     "types-ramda": "0.29.4"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.8.1",
+    "@chakra-ui/react": "2.8.2",
     "@chakra-ui/system": "2.6.2",
     "@charlietango/use-native-lazy-loading": "1.10.0",
     "@emotion/react": "11.11.1",
@@ -68,7 +68,7 @@
     "vite-plugin-svgr": "2.4.0"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.8.1",
+    "@chakra-ui/react": ">=2.8.2",
     "@chakra-ui/system": ">=2.6.2",
     "@emotion/react": ">=11.11.1",
     "@emotion/styled": ">=11.11.0",
@@ -88,9 +88,10 @@
     "@storybook/addon-jest": "7.5.1",
     "@storybook/addon-links": "7.5.1",
     "@storybook/blocks": "7.5.1",
+    "@storybook/jest": "0.2.3",
     "@storybook/react": "7.5.1",
     "@storybook/react-vite": "7.5.1",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/test": "7.6.12",
     "@svgr/webpack": "5.5.0",
     "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.14.1",