@nypl/design-system-react-components 3.1.1-modal-rc-2 → 3.1.2

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

@@ -1,10 +1,10 @@
-import { ChakraComponent } from "@chakra-ui/react";
+import { ChakraComponent, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
 import React from "react";
 export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
 export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
 export type HeadingSizes = typeof headingSizesArray[number];
 export type HeadingLevels = typeof headingLevelsArray[number];
-export interface HeadingProps {
+export interface HeadingProps extends ChakraHeadingProps {
     /** Optional className that appears in addition to `heading` */
     className?: string;
     /** Optional ID that other components can cross reference for accessibility

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" | "id" | "src" | "onError"> {
 }
 export interface HeroProps {
     /**
@@ -29,14 +29,19 @@ export interface HeroProps {
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** 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/HorizontalRule/HorizontalRule.d.ts

@@ -7,6 +7,8 @@ export interface HorizontalRuleProps {
     align?: "left" | "right";
     /** ClassName you can add in addition to `horizontal-rule` */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export declare const HorizontalRule: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<HorizontalRuleProps> & React.RefAttributes<HTMLDivElement & HTMLHRElement>>, React.PropsWithChildren<HorizontalRuleProps>>;
 export default HorizontalRule;

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/Modal/Modal.d.ts

@@ -1,52 +1,29 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface BaseProps {
+export interface BaseModalProps {
     /** The content to display in the modal body. */
     bodyContent?: string | JSX.Element;
+    /** The label for the close button. */
+    closeButtonLabel?: string;
     /** The text to display in the modal heading, can be a string or JSX Element. */
     headingText?: string | JSX.Element;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
     /** Boolean to determine if the modal is open or closed. */
     isOpen?: boolean;
-}
-export interface ConfirmationModalProps {
-    /** The label for the confirm button. */
-    confirmButtonLabel?: string;
-    onCancel: () => void;
-    onConfirm: () => void;
-    /** The `Modal` variant to render. */
-    type: "confirmation";
-    /** The label for the close button. This prop is used for the
-     * "cancel" button in the confirmation variant. */
-    closeButtonLabel?: string;
-    onClose?: never;
-}
-export interface DefaultModalProps {
-    /** The label for the close button. */
-    closeButtonLabel?: string;
     onClose?: () => void;
-    /** The `Modal` variant to render. */
-    type: "default";
-    /** The label for the confirm button. This prop is not used
-     * in the default variant. */
-    confirmButtonLabel?: never;
-    onCancel?: never;
-    onConfirm?: never;
 }
-export type ModalTypeProps = ConfirmationModalProps | DefaultModalProps;
-export type BaseModalProps = BaseProps & ModalTypeProps;
 export interface ModalProps {
     /** The text to display on the button that opens the modal. */
     buttonText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Props to update the internal `Modal` component. This contains the
-     * `bodyContent`, `headingText`, `isOpen`, and the modal type props. */
+     * `bodyContent`, `closeButtonLabel`, `headingText`, `isOpen`, and
+     * `onClose` props. */
     modalProps: BaseModalProps;
 }
-export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
-export declare const BaseModal: ChakraComponent<React.FunctionComponent<BaseModalProps>, BaseModalProps>;
+export declare const BaseModal: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<BaseModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<BaseModalProps>>;
 /**
  * The `ModalTrigger` component renders a button that you click to open the
  * internal `Modal` component. Note that props to update the internal `Modal`

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

@@ -12,6 +12,8 @@ export interface SkeletonLoaderProps {
     /** Optional numeric value to control the number of lines for heading
      * placeholder; default value is `1`. */
     headingSize?: number;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `"square"`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;

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

@@ -1,6 +1,8 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export interface TemplateProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
 }
 export interface TemplateHeaderProps {
     /** Flag to render an HTML header element. True by default. */
@@ -41,6 +43,8 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     footer?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateHeader` component section. */
     header?: React.ReactElement;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Render the `SkipNavigation` component or not. False by default. */
     renderSkipNavigation?: boolean;
 }

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

@@ -5,6 +5,8 @@ export type TextSizes = typeof textSizesArray[number];
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Optional prop used to show bolded text */
     isBold?: boolean;
     /** Optional prop used to show itlicized text */

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/button.d.ts

@@ -196,7 +196,7 @@ declare const Button: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "primary" | "secondary" | "callout" | "link" | "text" | "pill" | "iconOnly" | "noBrand";
+        variant?: "link" | "text" | "primary" | "secondary" | "callout" | "pill" | "iconOnly" | "noBrand";
         colorScheme?: string;
     };
     parts: ("base" | "screenreaderOnly")[];

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;
@@ -513,7 +513,7 @@ declare const Heading: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "one" | "two" | "three" | "four" | "five" | "six";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];

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/skeletonLoader.d.ts

@@ -65,7 +65,7 @@ declare const SkeletonLoader: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
+            keys: ("base" | "button" | "section" | "image" | "content" | "container" | "heading" | "loader")[];
         }>;
     };
     variants?: {
@@ -113,6 +113,6 @@ declare const SkeletonLoader: {
         variant?: "row";
         colorScheme?: string;
     };
-    parts: ("base" | "button" | "section" | "content" | "container" | "image" | "heading" | "loader")[];
+    parts: ("base" | "button" | "section" | "image" | "content" | "container" | "heading" | "loader")[];
 };
 export default SkeletonLoader;

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;