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

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

@@ -0,0 +1,31 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+import { MultiSelectWidths, SelectedItems as MultiSelectItems } from "../MultiSelect/MultiSelect";
+export type FilterBarItemsType = (boolean | number | number[] | string | string[] | MultiSelectItems)[];
+interface FilterBarInlineProps {
+    /** The className of the FilterBarInline. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional string value used to set the text for a `Heading` component, or
+     * a DS Heading component that can be passed in.
+     */
+    heading?: string | JSX.Element;
+    /** Renders the layout of the FilterBarInline child components in a row or column. */
+    layout?: LayoutTypes;
+    /** Function for the global `Clear Filters` button. If passed the `Clear Filters` button will render. */
+    onClear?: () => void;
+    /** Function for the global `Apply Filters` button. If passed the `Apply Filters` button will render. */
+    onSubmit?: () => void;
+    /** Render prop function used to render child components with updated props. */
+    renderChildren: ({ isBlockElement, layout, width, }: {
+        isBlockElement?: boolean;
+        layout?: LayoutTypes;
+        width?: MultiSelectWidths;
+    }) => React.ReactNode;
+    /** The selected items state (items that were checked by user). */
+    selectedItems?: FilterBarItemsType;
+}
+export declare const FilterBarInline: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FilterBarInlineProps> & React.RefAttributes<HTMLDivElement>>, FilterBarInlineProps>;
+export default FilterBarInline;

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

@@ -0,0 +1,48 @@
+import { ChakraComponent } from "@chakra-ui/react";
+import { LayoutTypes } from "../../helpers/types";
+import React from "react";
+export declare const borderTypeArray: readonly ["none", "circular", "straight"];
+export type BorderType = typeof borderTypeArray[number];
+export declare const colorTypeArray: readonly ["link", "textDefault", "textInverse"];
+export type ColorType = typeof colorTypeArray[number];
+export declare const sizeTypeArray: readonly ["small", "medium", "large"];
+export type SizeType = typeof sizeTypeArray[number];
+type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialYoutube";
+export interface SocialMediaLinkDataProps {
+    /** Required. Label rendered on page is showLabel is true  */
+    labelText: string;
+    /** Required. Should match the social media platform that it's linking to */
+    icon: IconNames;
+    /** Required. Url to link to the platform */
+    url: string;
+}
+interface BaseSocialMediaLinksProps {
+    /** Optional className you can add in addition to "social-media-links." */
+    className?: string;
+    /** Any of three optional values that will change the color of the svg and label text (if any). */
+    color?: ColorType;
+    /** ID that other components can cross-reference for accessibility purposes. */
+    id?: string;
+    /** Optional desktop layout. Smaller viewports are always in a column if there are labels and
+     * in a row if there are no labels. */
+    layout?: LayoutTypes;
+    /** Required. Array of social media platform types, urls, and label texts. */
+    linksData: SocialMediaLinkDataProps[];
+    /** Optional size: small, medium, or large. */
+    size?: SizeType;
+}
+type ConditionalSocialMediaLinksProps = {
+    showLabels?: true;
+    borders?: Exclude<BorderType, "circular">;
+} | {
+    showLabels?: false;
+    borders?: BorderType;
+};
+export type SocialMediaLinksProps = BaseSocialMediaLinksProps & ConditionalSocialMediaLinksProps;
+/**
+ * The SocialMediaLinks component renders a list of links for accessing social media sites.
+ * The data passed to the `linksData` prop controls which social media icons are displayed,
+ * the order they appear, the url they link to, and the text used for the label of each.
+ */
+export declare const SocialMediaLinks: ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, SocialMediaLinksProps>;
+export default SocialMediaLinks;

package/dist/src/index.d.ts

@@ -23,6 +23,7 @@ export { default as FeaturedContent } from "./components/FeaturedContent/Feature
 export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
 export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
+export { default as FilterBarInline } from "./components/FilterBarInline/FilterBarInline";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { default as Heading } from "./components/Heading/Heading";
 export type { HeadingSizes, HeadingLevels } from "./components/Heading/Heading";
@@ -51,10 +52,8 @@ export { default as MultiSelect } from "./components/MultiSelect/MultiSelect";
 export type { MultiSelectItem, SelectedItems, } from "./components/MultiSelect/MultiSelect";
 export { default as MultiSelectGroup } from "./components/MultiSelectGroup/MultiSelectGroup";
 export type { MultiSelectGroupProps } from "./components/MultiSelectGroup/MultiSelectGroup";
-/** The code associated with the NewsletterSignup component and the
- * NewsletterSignupViewType type will not be exported until the refactor of the
- * component has been completed.
- * */
+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";
@@ -71,9 +70,7 @@ export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonL
 export type { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoader";
 export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
 export { default as Slider } from "./components/Slider/Slider";
-/** The code associated with the SocialMediaLinks component will not be exported
- * until the refactor of the component has been completed.
- * */
+export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export type { StatusBadgeTypes } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";

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-rc2",
   "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",