@nypl/design-system-react-components 0.25.1 → 0.25.5

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

@@ -6,7 +6,10 @@ interface SelectProps {
 }
 interface TextInputProps {
     labelText: string;
+    name: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     placeholder: string;
+    value?: string;
 }
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
@@ -36,9 +39,6 @@ export interface SearchBarProps {
     onSubmit: (event: React.FormEvent) => void;
     /** Required props to render a `Select` element. */
     selectProps?: SelectProps | undefined;
-    /** Will be used to visually display the label text for this
-     * `SearchBar` component. False by default. */
-    showLabel?: boolean;
     /** Custom input element to render instead of a `TextInput` element. */
     textInputElement?: JSX.Element;
     /** Required props to render a `TextInput` element. */

package/dist/components/Select/Select.d.ts

@@ -26,6 +26,8 @@ export interface SelectProps {
     /** The callback function to get the selected value.
      * Should be passed along with `value` for controlled components. */
     onChange?: (event: React.FormEvent) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Offers the ability to show the select's label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;

package/dist/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -1,29 +1,33 @@
 import * as React from "react";
 import { SkeletonLoaderImageRatios, SkeletonLoaderLayouts } from "./SkeletonLoaderTypes";
 export interface SkeletonLoaderProps {
-    /** Optional boolean value to control visibility of border around skeleton loader */
+    /** Optional boolean value to control visibility of border around skeleton loader. */
     border?: boolean;
-    /** ClassName you can add in addition to `skeleton-loader` */
+    /** Additional class name for the Skeleton component. */
     className?: string;
-    /** Optional numeric value to control the number of lines for content placeholder; default value is `3` */
+    /** Optional numeric value to control the number of lines for content placeholder; default value is `3`. */
     contentSize?: number;
-    /** Optional numeric value to control the number of lines for heading placeholder; default value is `1` */
+    /** Optional numeric value to control the number of lines for heading placeholder; default value is `1`. */
     headingSize?: number;
-    /** Optional value to control the aspect ratio of the image placeholder; default value is `square` */
+    /** Optional value to control the aspect ratio of the image placeholder; default value is `square`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;
-    /** Optional value to control the position of the image placeholder; default value is `column` */
+    /** Optional value to control the position of the image placeholder; default value is `column`. */
     layout?: SkeletonLoaderLayouts;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional boolean value to control visibility of button placeholder */
+    /** Optional boolean value to control visibility of button placeholder. */
     showButton?: boolean;
-    /** Optional boolean value to control visibility of content placeholder */
+    /** Optional boolean value to control visibility of content placeholder. */
     showContent?: boolean;
-    /** Optional boolean value to control visibility of image placeholder */
-    showImage?: boolean;
-    /** Optional boolean value to control visibility of heading placeholder */
+    /** Optional boolean value to control visibility of heading placeholder. */
     showHeading?: boolean;
-    /** Optional width value.  This value should be entered with the same formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).  If omitted, the skeleton loader will have a default width of 100%. */
+    /** Optional boolean value to control visibility of image placeholder. */
+    showImage?: boolean;
+    /** Optional width value. This value should be entered with the same
+     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).
+     * If omitted, the skeleton loader will have a default width of 100%. */
     width?: string;
 }
+/**
+ * The `SkeletonLoader` component renders a placeholder to be used while
+ * dynamic content is loading.
+ */
 export default function SkeletonLoader(props: React.PropsWithChildren<SkeletonLoaderProps>): JSX.Element;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+export interface SliderProps {
+    /** Additional class name for the Slider component. */
+    className?: string;
+    /** The initial value for the single `Slider` or an array of two number
+     * values for the `isRangeSlider` case.
+     */
+    defaultValue?: number | number[];
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** Adds the 'disabled' state to the slider and text input(s) when true. */
+    isDisabled?: boolean;
+    /** Adds the 'invalid' state to the slider and text input(s) when true. */
+    isInvalid?: boolean;
+    /** Offers the ability to render a slider with one value or
+     * a range slider with two values. */
+    isRangeSlider?: boolean;
+    /** Adds the 'required' attribute to the input(s) when true. */
+    isRequired?: boolean;
+    /** The `Slider`'s label. In the default single slider, this will be linked to
+     * the only `TextInput` component. In the range slider, this will be linked to
+     * the first `TextInput` component. If `showLabel` is false, then this value
+     * will be set in the `Slider`'s `aria-label` attribute. */
+    labelText: string;
+    /** Maximum value allowed. */
+    max?: number;
+    /** Minimum value allowed. */
+    min?: number;
+    /** The name prop indicates into which form this component belongs to. */
+    name?: string;
+    /** Callback function that gets the value(s) selected. */
+    onChange?: (val: number | number[]) => void;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    optReqFlag?: boolean;
+    /** Offers the ability to hide the `TextInput` boxes. */
+    showBoxes?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the label onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Offers the ability to hide the static min/max values. */
+    showValues?: boolean;
+    /** The amount to increase or decrease when using the slider thumb(s). */
+    step?: number;
+}
+/**
+ * The `Slider` component renders a singular value slider or a range slider
+ * with a min and max value. The value(s) can be updated through the slider
+ * thumb(s) or through the text input(s) elements.
+ */
+export default function Slider(props: React.PropsWithChildren<SliderProps>): JSX.Element;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface ColorCardProps {
+    /** backgroundColor of the color card */
+    backgroundColor: string;
+    /** name of the CSS var */
+    colorName: string;
+}
+/**
+ * ColorCard
+ * Component only used for Storybook.
+ */
+export default function ColorCard(props: React.PropsWithChildren<ColorCardProps>): JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 export interface TabsContentDataProps {
     label: string;
     content: string | React.ReactNode;

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

@@ -1,12 +1,18 @@
 import * as React from "react";
 import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 export interface InputProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Additional attributes to pass to the `<input>` or `<textarea>` element */
     attributes?: {
         [key: string]: any;
     };
     /** A class name for the TextInput parent div. */
     className?: string;
+    /** The starting value of the input field. */
+    defaultValue?: string;
     /** Populates the HelperErrorText for the standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
@@ -22,16 +28,22 @@ export interface InputProps {
     /** Provides text for a `Label` component if `showLabel` is set to true;
      * populates an `aria-label` attribute if `showLabel` is set to false. */
     labelText: string;
+    /** Used to reference the input element in forms. */
+    name?: string;
     /** The action to perform on the `input`/`textarea`'s onChange function  */
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     /** Populates the placeholder for the input/textarea elements */
     placeholder?: string;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Offers the ability to show the label onscreen or hide it. Refer to the
      * `labelText` property for more information. */
     showLabel?: boolean;
     /** Offers the ability to show the "Required"/"Optional" label onscreen or
      * hide it. True by default. */
     showOptReqLabel?: boolean;
+    /** The amount to increase or decrease when using the number type. */
+    step?: number;
     /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
     type?: TextInputTypes;
     /** Populates the value of the input/textarea elements */

package/dist/components/VideoPlayer/VideoPlayer.d.ts

@@ -3,22 +3,20 @@ import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
 export interface VideoPlayerProps {
     /** Optional aspect ratio prop to control the sizing of the video player; if omitted, the video player defaults to `sixteen-by-nine` */
     aspectRatio?: VideoPlayerAspectRatios;
-    /** Optional additional attributes passed to the video player iframe */
-    attributes?: {
-        [key: string]: any;
-    };
     /** Optional className you can add in addition to `video-player` */
     className?: string;
     /** Optional string to set the text for a video description */
     descriptionText?: string;
+    /** Optional string to set the text for a `Heading` component */
+    headingText?: string;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
     /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added */
     iframeTitle?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional string to set the text for a `Heading` component */
-    headingText?: string;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
     /** Required YouTube or Vimeo video ID. This value can be pulled from a video's YouTube or Vimeo URL. */
     videoId: string;
     /** Required. Used to specify which video service is being used. */

package/dist/components/VideoPlayer/VideoPlayerTypes.d.ts

@@ -3,7 +3,7 @@ export declare enum VideoPlayerTypes {
     YouTube = "youtube"
 }
 export declare enum VideoPlayerAspectRatios {
-    FourByThree = "four-by-three",
-    SixteenByNine = "sixteen-by-nine",
+    FourByThree = "fourByThree",
+    SixteenByNine = "sixteenByNine",
     Square = "square"
 }