@nypl/design-system-react-components 4.0.0-alpha-rc4 → 4.0.0-rc

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

@@ -3,12 +3,12 @@ import { BoxProps, ChakraComponent } from "@chakra-ui/react";
 export declare const accordionVariantsArray: readonly ["default", "warning", "error"];
 export type AccordionVariants = typeof accordionVariantsArray[number];
 export interface AccordionDataProps {
-    variant?: AccordionVariants;
     ariaLabel?: string;
     /** Ref to the DOM element of the AccordionButton. */
     buttonInteractionRef?: any;
     label: string | JSX.Element;
     panel: string | React.ReactNode;
+    variant?: AccordionVariants;
 }
 export interface AccordionProps extends Omit<BoxProps, "onChange"> {
     /** Array of data to display, and an optional variant */

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

@@ -26,10 +26,9 @@ export interface BannerProps extends Omit<BoxProps, "content"> {
     variant?: BannerVariants;
 }
 /**
- * The `Banner` component is a non-modal semantic dialog used to communicate a
+ * The `Banner` component is a non-modal, semantic dialog used to communicate a
  * general status event or to promote a feature, providing contextual feedback
- * messages for typical user actions. They are displayed contextually within a
- * page flow and they will often prompt a user to take action.
+ * messages for typical user actions within a page flow.
  */
 export declare const Banner: ChakraComponent<React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>, BannerProps>;
 export default Banner;

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

@@ -21,7 +21,7 @@ export interface ButtonProps extends Pick<BoxProps, keyof ChakraProps>, Omit<But
     variant?: ButtonVariants;
 }
 /**
- * Renders a simple `button` element with custom variant styles.
+ * Renders a simple `button` element with custom `variant` styles.
  */
 export declare const Button: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<ButtonProps> & React.RefAttributes<HTMLButtonElement>>, React.PropsWithChildren<ButtonProps>>;
 export default Button;

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

@@ -41,8 +41,8 @@ export interface CheckboxGroupProps extends Omit<BoxProps, "onChange"> {
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a
  * column or in a row. The `CheckboxGroup` component renders all the necessary
- * wrapping and associated text elements, but the checkbox input elements
- * _need_ to be child `Checkbox` components from the NYPL Design System.
+ * wrapping and associated text elements. We highly recommend using DS
+ * `Checkbox` components as children.
  */
 export declare const CheckboxGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<CheckboxGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<CheckboxGroupProps>>;
 export default CheckboxGroup;

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

@@ -15,6 +15,11 @@ export interface FormProps extends FormBaseProps, Omit<FormHTMLAttributes<HTMLFo
 export declare const FormRow: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
 /** FormField child-component */
 export declare const FormField: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormChildProps> & React.RefAttributes<HTMLDivElement>>, FormChildProps>;
-/** Main Form component */
+/**
+ * The `Form` component renders a standard `<form>` element and should be used
+ * to handle layout and spacing for child input fields. `FormRow` and `FormField`
+ * components should be used to build the `<form>` structure and to arrange input
+ * fields as needed.
+ */
 export declare const Form: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<FormProps> & React.RefAttributes<HTMLDivElement & HTMLFormElement>>, React.PropsWithChildren<FormProps>>;
 export default Form;

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

@@ -25,12 +25,6 @@ export interface MultiSelectProps extends BoxProps {
     /** The number of items that will be visible in the list when the component
      * first loads. */
     defaultItemsVisible?: number;
-    /** The action to perform for the clear/reset button of individual MultiSelects. */
-    onClear?: () => void;
-    /** The action to perform on the checkbox's onChange function. */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** The action to perform for a mixed state checkbox (parent checkbox). */
-    onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Boolean value used to control how the MultiSelect component will render
      * within the page and interact with other DOM elements. The default value is false. */
     isBlockElement?: boolean;
@@ -44,6 +38,13 @@ export interface MultiSelectProps extends BoxProps {
     /** listOverflow is a property indicating how the list should handle overflow,
      * with options limited to either "scroll" or "expand." */
     listOverflow?: MultiSelectListOverflowTypes;
+    /** The action to perform for the clear/reset button of individual MultiSelects. */
+    onClear?: () => void;
+    /** The action to perform on the checkbox's onChange function. Note, if using
+     * this prop, it must be of the type listed below. */
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The action to perform for a mixed state checkbox (parent checkbox). */
+    onMixedStateChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /** The selected items state (items that were checked by user). */
     selectedItems: SelectedItems;
     /** Value used to set the width for the MultiSelect component. */

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

@@ -41,7 +41,7 @@ export declare const newsletterHighlightColorsArray: string[];
 export type HighlightColorTypes = typeof newsletterHighlightColorsArray[number];
 export type NewsletterSignupViewType = "form" | "submitting" | "confirmation" | "error";
 /**
- * The NewsletterSignup component provides a way for patrons to register for an
+ * 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>>;

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

@@ -41,8 +41,8 @@ export declare const NotificationHeading: ChakraComponent<React.ForwardRefExotic
  */
 export declare const NotificationContent: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<NotificationContentProps> & React.RefAttributes<HTMLDivElement>>, NotificationContentProps>;
 /**
- * Component used to present users with three different levels of notifications:
- * standard, announcement, and warning.
+ * `Notification` is a component used to present users with three different levels
+ * of notifications: standard, announcement, and warning.
  */
 export declare const Notification: ChakraComponent<React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>, NotificationProps>;
 export default Notification;

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

@@ -33,7 +33,7 @@ interface CircularProgressIndicatorProps extends BaseProgressIndicatorProps {
 }
 export type ProgressIndicatorProps = LinearProgressIndicatorProps | CircularProgressIndicatorProps;
 /**
- * A component that displays a progress status for any task that takes a long
+ * `ProgressIndicator` displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */

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

@@ -38,9 +38,10 @@ export interface RadioGroupProps extends Omit<BoxProps, "onChange"> {
 }
 /**
  * `RadioGroup` is a wrapper for DS `Radio` components that render together
- * along with an optional helper text. The `name` prop is essential for this
- * form group element and is not needed for individual DS `Radio`
- * components when `RadioGroup` is used.
+ * along with an optional helper text.
+ *
+ * The `name` prop is essential for this form group element and is not needed
+ * for individual DS `Radio` components when `RadioGroup` is used.
  */
 export declare const RadioGroup: ChakraComponent<React.ForwardRefExoticComponent<React.PropsWithChildren<RadioGroupProps> & React.RefAttributes<HTMLDivElement>>, React.PropsWithChildren<RadioGroupProps>>;
 export default RadioGroup;

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

@@ -44,8 +44,8 @@ export interface SearchBarProps extends Pick<BoxProps, keyof ChakraProps>, Omit<
     textInputProps?: TextInputProps | undefined;
 }
 /**
- * Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together.
+ * `SearchBar` renders a wrapper `form` element containing an `Input`, `Button`,
+ * and optional `Select`.
  */
 export declare const SearchBar: ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, SearchBarProps>;
 export default SearchBar;

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

@@ -1,11 +1,8 @@
-import { BoxProps, ChakraComponent } from "@chakra-ui/react";
+import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 import { TagSetExploreProps } from "./TagSetExplore";
 import { TagSetFilterProps } from "./TagSetFilter";
-export interface BaseTagSetProps extends BoxProps {
-}
-export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
-export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
+export type TagSetProps = TagSetFilterProps | TagSetExploreProps;
 export declare function isFilterVariant(variant: TagSetProps["variant"]): variant is "filter";
 /**
  * The `TagSet` component renders a group of individual tags which have two

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

@@ -5,7 +5,7 @@ export type TextSizes = typeof textSizesArray[number];
 export interface TextProps extends BoxProps {
     /** Optional prop used to show bolded text */
     isBold?: boolean;
-    /** Optional prop used to show itlicized text */
+    /** Optional prop used to show italicized text */
     isItalic?: boolean;
     /** Optional prop used to show capitalized text */
     isCapitalized?: boolean;

package/dist/src/index.d.ts

@@ -103,7 +103,7 @@ export type { TableProps } from "./components/Table/Table";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export type { TabsDataProps, TabsProps } from "./components/Tabs/Tabs";
 export { default as TagSet } from "./components/TagSet/TagSet";
-export type { TagSetProps, TagSetTypeProps } from "./components/TagSet/TagSet";
+export type { TagSetProps } from "./components/TagSet/TagSet";
 export type { TagSetExploreDataProps, TagSetExploreProps, } from "./components/TagSet/TagSetExplore";
 export type { TagSetFilterDataProps, TagSetFilterProps, } from "./components/TagSet/TagSetFilter";
 export { Template, TemplateBreakout, TemplateContent, TemplateFooter, TemplateFull, TemplateHeader, TemplateMain, TemplateSidebar, } from "./components/Template/Template";
@@ -117,7 +117,6 @@ export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export type { TooltipProps } from "./components/Tooltip/Tooltip";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
-export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
 export { default as useFormatNumber } from "./hooks/useFormatNumber";
 export { default as useMultiSelect } from "./hooks/useMultiSelect";
@@ -125,5 +124,4 @@ export { default as useNYPLBreakpoints } from "./hooks/useNYPLBreakpoints";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useResponsiveSpacing } from "./hooks/useResponsiveSpacing";
 export { default as useScrollFadeStyles } from "./hooks/useScrollFadeStyles";
-export { default as useWindowSize } from "./hooks/useWindowSize";
 export type { AutoCompleteValues } from "./utils/constantValues";

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

@@ -85,7 +85,7 @@ declare const Breadcrumb: {
                     md: "none";
                 };
             };
-            "span:not(.breadcrumb-label)": {
+            "span:not(.ds-breadcrumbs-link-label)": {
                 clip: string;
                 height: {
                     base: string;

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

@@ -101,7 +101,7 @@ declare const FeedbackBox: {
             };
         };
         radioGroup: {
-            ".radioGroupStack": {
+            ".ds-radioGroup-stack": {
                 flexDirection: {
                     base: "column";
                     md: "row";

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

@@ -169,9 +169,11 @@ declare const Heading: {
                 color: string;
                 textUnderlineOffset: string;
             };
-            color: string;
             margin: string;
             textTransform: string;
+        };
+        defaultColorStyle: {
+            color: string;
             _dark: {
                 color: string;
             };
@@ -179,7 +181,7 @@ declare const Heading: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "headingWrapper")[];
+            keys: ("base" | "defaultColorStyle")[];
         }>;
     };
     variants?: {
@@ -438,6 +440,6 @@ declare const Heading: {
         variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8";
         colorScheme?: string;
     };
-    parts: ("base" | "headingWrapper")[];
+    parts: ("base" | "defaultColorStyle")[];
 };
 export default Heading;

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

@@ -4,7 +4,7 @@ declare const Hero: {
     baseStyle?: {};
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
+            keys: ("base" | "content" | "grid" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
         }>;
     };
     variants?: {
@@ -13,6 +13,11 @@ declare const Hero: {
                 alignItems: string;
                 backgroundSize: string;
                 backgroundPosition: string;
+                display: string;
+                minHeight: string;
+                py: string;
+            };
+            grid: {
                 display: string;
                 gridTemplateColumns: string;
                 gap: {
@@ -20,9 +25,12 @@ declare const Hero: {
                     md: string;
                     xl: string;
                 };
-                minHeight: string;
-                p: string;
-                paddingInline: string;
+                margin: string;
+                maxWidth: string;
+                px: {
+                    base: "l";
+                    md: "s";
+                };
             };
             content: {
                 bg: string;
@@ -32,16 +40,7 @@ declare const Hero: {
                     md: "2 / 12";
                     lg: "3 / 11";
                 };
-                padding: {
-                    base: "inset.default";
-                    lg: "inset.wide";
-                };
-                paddingEnd: {
-                    lg: "inset.wide";
-                };
-                paddingStart: {
-                    lg: "inset.wide";
-                };
+                p: string;
                 a: {
                     color: string;
                     display: string;
@@ -738,6 +737,6 @@ declare const Hero: {
         variant?: "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
         colorScheme?: string;
     };
-    parts: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
+    parts: ("base" | "content" | "grid" | "imgWrapper" | "bodyText" | "heading" | "interior")[];
 };
 export default Hero;

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

@@ -62,7 +62,7 @@ declare const NewsletterSignup: {
         form: {
             width: string;
         };
-        "#newsletter-form-parent": {
+        ".ds-newslettersignup-form > div": {
             gridTemplateColumns: {
                 base: any;
                 lg: string;

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

@@ -1,13 +1,13 @@
 declare const SearchBar: {
     baseStyle?: ({ hasSelectElem }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-        ".textInput": {
+        ".ds-searchBar-textInput": {
             flexGrow: number;
             "div > input": {
                 borderRight: number;
                 borderRightRadius: number;
             };
         };
-        ".searchButton": {
+        ".ds-searchBar-button": {
             minWidth: string;
             borderLeftRadius: string;
             lineHeight: string;

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

@@ -1,9 +1,10 @@
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface SelectBaseStyle extends StyleFunctionProps {
     labelPosition: string;
+    showLabel: boolean;
 }
 declare const Select: {
-    baseStyle?: ({ labelPosition }: SelectBaseStyle) => {
+    baseStyle?: ({ labelPosition, labelWidth, showLabel }: SelectBaseStyle) => {
         inline: {
             display: {
                 md: "flex";
@@ -108,10 +109,13 @@ declare const Select: {
                 };
             };
         };
+        "div[data-testid='ds-helperErrorText']": {
+            marginLeft: string;
+        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("select" | "inline" | "helperText")[];
+            keys: ("select" | "inline")[];
         }>;
     };
     variants?: {
@@ -126,6 +130,6 @@ declare const Select: {
         variant?: "searchbar";
         colorScheme?: string;
     };
-    parts: ("select" | "inline" | "helperText")[];
+    parts: ("select" | "inline")[];
 };
 export default Select;

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

@@ -86,7 +86,7 @@ declare const SocialMediaLinks: {
             gap: string;
             a: {
                 color: string;
-                ".platLink": {
+                ".ds-socialMediaLinks-icon": {
                     minHeight: {
                         base: string;
                         md: "0";
@@ -136,7 +136,7 @@ declare const SocialMediaLinks: {
             gap: string;
             a: {
                 color: string;
-                ".platLink": {
+                ".ds-socialMediaLinks-icon": {
                     minHeight: {
                         base: string;
                         md: "0";

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

@@ -180,7 +180,7 @@ declare const StructuredContent: {
          * not rendered from the Reservoir DS. Typically, these HTML elements
          * are added from an API response.
          */
-        ".structuredcontent-body > div": {
+        ".ds-structuredContent-body > div": {
             marginTop: string;
             marginInlineEnd: string;
             marginBottom: string;

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

@@ -9,7 +9,7 @@ interface SubNavChildrenStyleProps extends StyleFunctionProps {
 declare const SubNav: {
     baseStyle?: ({ backgroundColor, highlightColor }: SubNavStyleProps) => {
         base: {
-            ".selectedItem": {
+            ".ds-subNav-selectedItem": {
                 color: string;
                 fontWeight: string;
                 backgroundColor: string;

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

@@ -32,7 +32,7 @@ declare const _default: {
              * for the "content" and "sidebar" ragions in order to simplify how
              * variants are handled.
              * */
-            "& .reservoir-template-content": {
+            "& .ds-template-content": {
                 gridColumn: {
                     base: "1 / -1";
                 };
@@ -43,14 +43,14 @@ declare const _default: {
         };
         variants?: {
             sidebarLeft: {
-                "& .reservoir-template-content": {
+                "& .ds-template-content": {
                     gridColumn: {
                         sm: "7 / -1";
                         md: "5 / -1";
                         lg: "4 / -1";
                     };
                 };
-                "& .reservoir-template-sidebar": {
+                "& .ds-template-sidebar": {
                     gridColumn: {
                         base: "1 / -1";
                         sm: "1 / 7";
@@ -60,14 +60,14 @@ declare const _default: {
                 };
             };
             sidebarRight: {
-                "& .reservoir-template-content": {
+                "& .ds-template-content": {
                     gridColumn: {
                         sm: "1 / 7";
                         md: "1 / 9";
                         lg: "1 / 10";
                     };
                 };
-                "& .reservoir-template-sidebar": {
+                "& .ds-template-sidebar": {
                     gridColumn: {
                         base: "1 / -1";
                         sm: "7 / -1";
@@ -77,7 +77,7 @@ declare const _default: {
                 };
             };
             narrow: {
-                "& .reservoir-template-content": {
+                "& .ds-template-content": {
                     gridColumn: {
                         base: "1 / -1";
                         md: "2 / 12";
@@ -96,11 +96,6 @@ declare const _default: {
         baseStyle?: () => {
             gridColumn: string;
             ml: string;
-            px: {
-                base: string;
-                md: string;
-                xl: string;
-            };
             width: string;
         };
         sizes?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "4.0.0-alpha-rc4",
+  "version": "4.0.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

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

@@ -1,17 +0,0 @@
-/**
- * Custom hook that controls the sliding function for the carousel wrapper.
- * This returns functions to use for the "previous" and "next" buttons as well
- * as a CSS style object that should be use to transition between slides. There
- * is also a function to programmatically slide to the first slide.
- * Inspired by: https://codesandbox.io/s/fxjeo
- */
-export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
-    prevSlide: () => void;
-    nextSlide: () => void;
-    carouselStyle: {
-        transition: string;
-        marginStart: string;
-    };
-    goToStart: () => void;
-};
-export default useCarouselStyles;

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

@@ -1,10 +0,0 @@
-interface WindowSize {
-    width: number;
-    height: number;
-}
-/**
- * React hook used to get the window size on device resizing.
- * Based on https://usehooks-typescript.com/react-hook/use-window-size
- */
-declare function useWindowSize(): WindowSize;
-export default useWindowSize;