@nypl/design-system-react-components 3.1.6 → 3.2.0-rc

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

@@ -27,6 +27,10 @@ export interface AccordionProps {
      * within accordion panel is greater than height set by panelMaxHeight, a
      * scrollbar will appear for accordion panel. */
     panelMaxHeight?: string;
+    /** For internal use only. This value toggles the accordion closed if the
+     * MultiSelect's `closeOnBlur` prop is true and the user clicks outside the
+     * component. */
+    userClickedOutside?: boolean;
 }
 /**
  * Accordion component that shows content on toggle. Can be used to display

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

@@ -1,6 +1,6 @@
 import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
-export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "education", "locations", "research", "whatsOn"];
+export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "digitalCollections", "education", "locations", "research", "whatsOn"];
 export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
 export interface BreadcrumbsDataProps {
     url: string;

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

@@ -18,6 +18,9 @@ export interface SelectedItems {
 export interface MultiSelectProps {
     /** The button text rendered within the MultiSelect. */
     buttonText: string;
+    /** Determines whether the component will toggle to the closed state
+     * when it loses focus. The default value is false. */
+    closeOnBlur?: boolean;
     /** The number of items that will be visible in the list when the component
      * first loads. */
     defaultItemsVisible?: number;

package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts

@@ -19,7 +19,7 @@ export interface MultiSelectItemsCountButtonProps {
     /** The action to perform for key down event. */
     onKeyDown?: () => void;
     /** Ref to the Accordion Button element. */
-    accordianButtonRef: any;
+    accordionButtonRef: any;
 }
 /**
  * The toggle button component used to open and close the `MultiSelect` menu.

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

@@ -0,0 +1,53 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import React from "react";
+interface NewsletterSignupProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Text displayed next to the confirmation icon after a successful email submission */
+    confirmationHeading: string;
+    /** Detail text for the confirmation view */
+    confirmationText?: string | JSX.Element;
+    /** Appears below the title to provide details about the newsletter. Accepts a string or an element. */
+    descriptionText?: string | JSX.Element;
+    /** Text displayed next to the error icon in case of an error in the email submission process*/
+    errorHeading: string;
+    /** Appears below the title to provide details about next steps in case of an error. Accepts a string or an element. */
+    errorText?: string | JSX.Element;
+    /** Appears below the input field's example text to provide any additional instructions. Accepts a string or
+     *  an element. */
+    formHelperText?: string | JSX.Element;
+    /** ID that other components can cross-reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the email field. */
+    isInvalidEmail?: boolean;
+    /** Value to determine the section color highlight.
+     */
+    highlightColor?: HighlightColorTypes;
+    /** A handler function that will be called when the form is submitted. */
+    onSubmit: (event: React.FormEvent<any>) => void;
+    /** A handler function that will be called when the text input changes. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Gives option to remove the default Privacy Link if a custom one is provided
+     * NOTE: A Privacy Policy link should always be included.
+     */
+    showPrivacyLink?: boolean;
+    /** Link to the relevant privacy policy page. */
+    privacyPolicyLink?: string;
+    /** Sets the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    title: JSX.Element | string;
+    /** The value of the email text input field. */
+    valueEmail?: string;
+    /** Used to specify what is displayed in the component form/feedback area. */
+    view?: NewsletterSignupViewType;
+}
+export declare const highlightColorTypesArray: readonly ["ui.gray.medium", "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.research-library.schwartzman", "section.whats-on.primary"];
+export type HighlightColorTypes = typeof highlightColorTypesArray[number];
+export type NewsletterSignupViewType = "form" | "submitting" | "confirmation" | "error";
+/**
+ * The NewsletterSignup component provides a way for patrons to register for an
+ * email-based newsletter distribution list.
+ */
+export declare const NewsletterSignup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NewsletterSignupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<NewsletterSignupProps>>;
+export default NewsletterSignup;

package/dist/src/components/NewsletterSignup/NewsletterSignupResponse.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconColors, IconNames } from "../Icons/Icon";
+interface NewsletterSignupResponseProps {
+    focusRef: React.MutableRefObject<HTMLDivElement>;
+    heading: string;
+    headingColor?: string;
+    iconName: IconNames;
+    iconColor: IconColors;
+    text?: string | JSX.Element;
+}
+export declare const NewsletterSignupResponse: ({ focusRef, heading, headingColor, iconName, iconColor, text, }: NewsletterSignupResponseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -152,6 +152,45 @@ declare const Breadcrumb: {
                 bg: string;
             };
         };
+        digitalCollections: {
+            bg: string;
+            color: string;
+            _dark: {
+                bg: string;
+            };
+            a: {
+                _hover: {
+                    color: string;
+                };
+                _dark: {
+                    _hover: {
+                        color: string;
+                    };
+                };
+                _focus: {
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: any;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: any;
+                    };
+                };
+            };
+            "li:last-child": {
+                ".chakra-breadcrumb__link": {
+                    _hover: {
+                        color: string;
+                    };
+                    _dark: {
+                        _hover: {
+                            color: string;
+                        };
+                    };
+                };
+            };
+        };
         education: {
             bg: string;
             _dark: {
@@ -179,7 +218,7 @@ declare const Breadcrumb: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "education" | "locations" | "research" | "whatsOn";
+        variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "digitalCollections" | "education" | "locations" | "research" | "whatsOn";
         colorScheme?: string;
     };
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.1.6",
+  "version": "3.2.0-rc",
   "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",