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

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/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.7",
+  "version": "3.2.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -79,18 +79,16 @@
     "@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",
@@ -128,7 +126,7 @@
     "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.1.5",
     "tslib": "2.3.0",