@nypl/design-system-react-components 4.0.0-alpha-rc5 → 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/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/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/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

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

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "4.0.0-alpha-rc5",
+  "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;