@nypl/design-system-react-components 2.0.1 → 2.1.0-rc

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { ImageProps } from "../Image/Image";
+export declare const featuredContentWidthArray: string[];
+export type featuredContentWidthType = typeof featuredContentWidthArray[number];
+export declare const featuredContentPositionArray: readonly ["start", "end"];
+export type featuredContentPositionType = typeof featuredContentPositionArray[number];
+interface FeaturedContentImageProps extends ImageProps {
+    /** String value that specifies the width of the image rendered within the component. */
+    width?: featuredContentWidthType;
+    /** String value that specifies the position of the image rendered within the component. */
+    position?: featuredContentPositionType;
+}
+export interface FeaturedContentProps {
+    /** Optional CSS class name to add. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** The text content rendered in the component.  DS components and native HTML can be passed in this prop. */
+    textContent: string | JSX.Element;
+    /** Whether component will fill the full width of the browser window, instead of just its parent element.
+     * False by default. */
+    isFullWidth: boolean;
+    /** Data object that contains the props related to the image element: alt, position, src, width.  */
+    imageProps: FeaturedContentImageProps;
+}
+export declare const FeaturedContent: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeaturedContentProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default FeaturedContent;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { SectionTypes } from "../../helpers/types";
+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;
+    /** 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. The default is set to "blogs" as it uses the
+     * "ui.border.deafult" color.
+     */
+    newsletterSignupType?: SectionTypes;
+    /** 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;
+    /** Link to the relevant privacy policy page. */
+    privacyPolicyLink?: string;
+    /** Used to populate the title of the Component*/
+    title?: JSX.Element;
+    /** 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 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: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<NewsletterSignupProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default NewsletterSignup;

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

@@ -13,6 +13,9 @@ export declare const TextInputFormats: {
 };
 export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
 export interface InputProps {
+    /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
+     * If more than one, separate each with a space */
+    additionalHelperTextIds?: string;
     /** A class name for the TextInput parent div. */
     className?: string;
     /** The starting value of the input field. */

package/dist/src/helpers/getSectionColors.d.ts

@@ -0,0 +1,8 @@
+import { SectionTypes } from "./types";
+type ColorSection = {
+    primary: string;
+    secondary: string | null;
+};
+type ColorVal = string;
+export declare function getSectionColors(type: SectionTypes, colorVal?: "primary" | "secondary"): ColorSection | ColorVal;
+export {};

package/dist/src/helpers/types.d.ts

@@ -1,2 +1,50 @@
 export declare const layoutTypesArray: readonly ["column", "row"];
 export type LayoutTypes = typeof layoutTypesArray[number];
+export declare const sectionDataMap: {
+    blogs: {
+        primary: string;
+        secondary: string;
+    };
+    booksAndMore: {
+        primary: string;
+        secondary: string;
+    };
+    brand: {
+        primary: string;
+        secondary: string;
+    };
+    connect: {
+        primary: string;
+        secondary: string;
+    };
+    education: {
+        primary: string;
+        secondary: string;
+    };
+    locations: {
+        primary: string;
+        secondary: string;
+    };
+    research: {
+        primary: string;
+        secondary: string;
+    };
+    researchLibraryLpa: {
+        primary: string;
+        secondary: any;
+    };
+    researchLibrarySchomburg: {
+        primary: string;
+        secondary: any;
+    };
+    researchLibrarySchwarzman: {
+        primary: string;
+        secondary: any;
+    };
+    whatsOn: {
+        primary: string;
+        secondary: string;
+    };
+};
+export declare const sectionTypeArray: string[];
+export type SectionTypes = typeof sectionTypeArray[number];

package/dist/src/hooks/useStateWithDependencies.d.ts

@@ -1,5 +1,8 @@
 /**
  * DS internal helper hook to use state with prop dependencies.
+ *
+ * This hook should NOT be used by consuming apps. DS components should use this hook rather than useState() whenever
+ * a change in state is expected for a given prop from a consuming app. The hook updates the DS component with useEffect().
  */
 declare function useStateWithDependencies(initialValue: any): typeof initialValue;
 export default useStateWithDependencies;

package/dist/src/index.d.ts

@@ -16,6 +16,8 @@ export { default as ColorCard } from "./components/StyleGuide/ColorCard";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export type { DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
 export { default as DSProvider } from "./theme/provider";
+export type { FeaturedContentProps } from "./components/FeaturedContent/FeaturedContent";
+export { default as FeaturedContent } from "./components/FeaturedContent/FeaturedContent";
 export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
 export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
@@ -39,6 +41,8 @@ export type { DescriptionProps, ListTypes } from "./components/List/List";
 export { default as Logo } from "./components/Logo/Logo";
 export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
 export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export { default as NewsletterSignup } from "./components/NewsletterSignup/NewsletterSignup";
+export type { NewsletterSignupViewType } from "./components/NewsletterSignup/NewsletterSignup";
 export { default as Notification } from "./components/Notification/Notification";
 export type { NotificationTypes } from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";

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

@@ -0,0 +1,70 @@
+interface FeaturedContentBaseStyleProps {
+    imagePosition: string;
+    imageWidth: string;
+    isFullWidth: boolean;
+}
+declare const FeaturedContent: {
+    baseStyle: ({ imagePosition, imageWidth, isFullWidth, }: FeaturedContentBaseStyleProps) => {
+        bgColor: string;
+        _dark: {
+            bgColor: string;
+        };
+        width: string;
+        left: string;
+        right: string;
+        position: string;
+        marginLeft: string;
+        marginRight: string;
+        wrapper: {
+            minHeight: string;
+            maxWidth: string;
+            display: string;
+            alignItems: string;
+            flexDirection: {
+                sm: string;
+                md: string;
+            };
+            marginY: string;
+            marginX: string;
+            padding: string;
+            width: string;
+        };
+        text: {
+            display: string;
+            padding: string;
+            flex: number;
+            flexDirection: string;
+            justifyContent: string;
+        };
+        imgWrapper: {
+            backgroundPosition: string;
+            backgroundSize: string;
+            height: {
+                sm: string;
+                md: string;
+            };
+            width: {
+                sm: string;
+                md: string;
+            };
+        };
+        img: {
+            clip: string;
+            height: {
+                base: string;
+                md: string;
+            };
+            overflow: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            wordWrap: string;
+        };
+    };
+};
+export default FeaturedContent;

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

@@ -0,0 +1,93 @@
+import { SectionTypes } from "../../helpers/types";
+interface NewsLetterStyleProps {
+    newsletterSignupType: SectionTypes;
+}
+declare const NewsletterSignup: {
+    parts: string[];
+    baseStyle: ({ newsletterSignupType }: NewsLetterStyleProps) => {
+        alignItems: string;
+        borderWidth: {
+            base: string;
+            md: string;
+        };
+        maxWidth: string;
+        width: string;
+        pitch: {
+            width: {
+                base: string;
+                md: string;
+            };
+            bg: string;
+            borderWidth: {
+                base: string;
+                md: string;
+            };
+            borderLeftColor: {
+                md: string | {
+                    primary: string;
+                    secondary: string;
+                };
+            };
+            borderTopColor: {
+                base: string | {
+                    primary: string;
+                    secondary: string;
+                };
+                md: string;
+            };
+            _dark: {
+                bg: string;
+                borderTopColor: {
+                    md: string;
+                };
+                borderLeftColor: {
+                    md: string | {
+                        primary: string;
+                        secondary: string;
+                    };
+                };
+            };
+            padding: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            alignItems: string;
+            gap: string;
+        };
+        privacy: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        action: {
+            padding: {
+                base: string;
+                lg: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+        };
+        form: {
+            width: string;
+        };
+        "#newsletter-form-parent": {
+            gridTemplateColumns: {
+                base: any;
+                lg: string;
+            };
+            gap: {
+                base: string;
+                lg: string;
+            };
+        };
+        button: {
+            marginTop: {
+                base: any;
+                lg: string;
+            };
+        };
+    };
+};
+export default NewsletterSignup;

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

@@ -21,13 +21,14 @@ interface GetAriaAttrsProps {
     id: string;
     labelText: HelperErrorTextType;
     name: string;
+    additionalHelperTextIds?: string;
     showLabel: boolean;
 }
 /**
  * Get aria-* attributes for input components. This sets the `aria-label` and
  * `aria-describedby` attributes, based on the label and footnote values.
  */
-export declare const getAriaAttrs: ({ footnote, id, labelText, name, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
+export declare const getAriaAttrs: ({ footnote, id, labelText, name, additionalHelperTextIds, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
 /** Convert a hex color value to an rgb or rgba value */
 export declare const hexToRGB: (hex: string, alpha: number) => string;
 /** Calculate color luminance */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.0.1",
+  "version": "2.1.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -52,6 +52,9 @@
     "singleQuote": false,
     "trailingComma": "es5"
   },
+  "overrides": {
+    "types-ramda": "0.29.4"
+  },
   "dependencies": {
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -103,7 +106,7 @@
     "@types/jest-axe": "3.5.3",
     "@types/node": "18.13.0",
     "@types/react": "16.9.41",
-    "@types/testing-library__jest-dom": "^5.14.1",
+    "@types/testing-library__jest-dom": "5.14.1",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react": "3.1.0",