@nypl/design-system-react-components 3.1.0-rc2 → 3.1.1-modal-rc

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

@@ -1,29 +1,52 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export interface BaseModalProps {
+export interface BaseProps {
     /** 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`, `closeButtonLabel`, `headingText`, `isOpen`, and
-     * `onClose` props. */
+     * `bodyContent`, `headingText`, `isOpen`, and the modal type props. */
     modalProps: BaseModalProps;
 }
-export declare const BaseModal: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<BaseModalProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<BaseModalProps>>;
+export declare function isDefaultType(type: BaseModalProps["type"]): type is "default";
+export declare const BaseModal: ChakraComponent<React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLButtonElement>>, 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.0-rc2",
+  "version": "3.1.1-modal-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -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",