@nypl/design-system-react-components 0.25.2 → 0.25.6

package/dist/components/Icons/IconSvgs.d.ts

@@ -1,6 +1,10 @@
 declare const _default: {
     accessibility_full: string;
     accessibility_partial: string;
+    action_check_circle: string;
+    action_help_default: string;
+    action_help_outline: string;
+    action_launch: string;
     arrow: string;
     brooklyn: string;
     check: string;
@@ -9,6 +13,13 @@ declare const _default: {
     download: string;
     error_filled: string;
     error_outline: string;
+    file_type_audio: string;
+    file_type_doc: string;
+    file_type_generic_doc: string;
+    file_type_image: string;
+    file_type_pdf: string;
+    file_type_spreadsheet: string;
+    file_type_video: string;
     headset: string;
     logo_brooklyn: string;
     logo_nypl: string;

package/dist/components/Icons/IconTypes.d.ts

@@ -43,6 +43,10 @@ export declare enum IconSizes {
 export declare enum IconNames {
     AccessibilityFull = "accessibility_full",
     AccessibilityPartial = "accessibility_partial",
+    ActionCheckCircle = "action_check_circle",
+    ActionHelpDefault = "action_help_default",
+    ActionHelpOutline = "action_help_outline",
+    ActionLaunch = "action_launch",
     Arrow = "arrow",
     Check = "check",
     Clock = "clock",
@@ -50,6 +54,13 @@ export declare enum IconNames {
     Download = "download",
     ErrorFilled = "error_filled",
     ErrorOutline = "error_outline",
+    FileTypeAudio = "file_type_audio",
+    FileTypeDoc = "file_type_doc",
+    FileTypeGenericDoc = "file_type_generic_doc",
+    FileTypeImage = "file_type_image",
+    FileTypePdf = "file_type_pdf",
+    FileTypeSpreadsheet = "file_type_spreadsheet",
+    FileTypeVideo = "file_type_video",
     Headset = "headset",
     Minus = "minus",
     Plus = "plus",

package/dist/components/Image/Image.d.ts

@@ -1,22 +1,32 @@
 import * as React from "react";
-export interface ImageProps {
-    /** Text description of the image */
-    alt: string;
-    /** Additional attributes passed to the image */
-    attributes?: {
+import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
+interface ImageWrapperProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
         [key: string]: any;
     };
-    /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** ClassName you can add in addition to 'image' */
     className?: string;
+    /** Optional value to control the aspect ratio of the cartd image; default value is `square` */
+    imageAspectRatio?: ImageRatios;
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+}
+export interface ImageProps extends ImageWrapperProps {
+    /** Alternate text description of the image */
+    alt: string;
+    /** Custom image component */
+    component?: JSX.Element | null;
     /** Adding will wrap the image in a <figure> */
     imageCaption?: string;
     /** Adding will wrap the image in a <figure> */
     imageCredit?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Optional value to control the size of the image */
+    imageSize?: ImageSizes;
+    /** Optional value for the image type */
+    imageType?: ImageTypes;
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src: string;
 }
 export default function Image(props: React.ComponentProps<"img"> & ImageProps): JSX.Element;
+export {};

package/dist/components/Image/ImageTypes.d.ts

@@ -0,0 +1,20 @@
+export declare enum ImageRatios {
+    FourByThree = "fourByThree",
+    OneByTwo = "oneByTwo",
+    Original = "original",
+    SixteenByNine = "sixteenByNine",
+    Square = "square",
+    ThreeByFour = "threeByFour",
+    ThreeByTwo = "threeByTwo",
+    TwoByOne = "twoByOne"
+}
+export declare enum ImageSizes {
+    Default = "default",
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
+export declare enum ImageTypes {
+    Default = "default",
+    Circle = "circle"
+}

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { LinkTypes } from "./LinkTypes";
 export interface LinkProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
     attributes?: {
         [key: string]: any;

package/dist/components/List/List.d.ts

@@ -5,17 +5,23 @@ interface DefinitionProps {
     definition: string;
 }
 export interface ListProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** ClassName you can add in addition to 'list' */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
+    /** Display the list in a row. */
+    inline?: boolean;
     /** Data to render if children are not passed. For `ListTypes.Ordered` and
      * `ListTypes.Unordered` `List` types, the data structure is an array of
      * strings to renders as `li` items. For `ListTypes.Definition` `List` types,
      * the data structure is an array of objects with `term` and `definition`
      * properties to render `dt` and `dd` elements, respectively.
      */
-    listItems?: (string | DefinitionProps)[];
+    listItems?: (string | JSX.Element | DefinitionProps)[];
     /** Remove list styling. */
     noStyling?: boolean;
     /** An optional title that will appear over the list. This prop only applies

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { NotificationTypes } from "./NotificationTypes";
 interface BaseProps {
-    /** Optional prop to control text alignment of the `Notification` content */
+    /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     centered?: boolean;
@@ -11,7 +11,9 @@ interface BaseProps {
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
 }
-export interface NotificationProps extends BaseProps {
+declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
     /** Additional `className` to add.  */
     className?: string;
     /** Optional prop to control whether a `Notification` can be dismissed
@@ -31,11 +33,11 @@ export interface NotificationProps extends BaseProps {
 /**
  * NotificationHeading child-component.
  */
-export declare function NotificationHeading(props: React.PropsWithChildren<BaseProps>): JSX.Element;
+export declare function NotificationHeading(props: React.PropsWithChildren<BasePropsWithoutAlignText>): JSX.Element;
 /**
  * NotificationContent child-component.
  */
-export declare function NotificationContent(props: React.PropsWithChildren<BaseProps>): JSX.Element;
+export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): JSX.Element;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.

package/dist/components/Pagination/Pagination.d.ts

@@ -1,20 +1,23 @@
-import * as React from "react";
+import React from "react";
 export interface PaginationProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    /** Additional className. */
     className?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** The total number of pages. */
-    pageCount: number;
+    /** The callback function that takes a page number and returns a string
+     * to use for a link's `href` attribute. This is used when the current
+     * page should refresh when navigating. */
+    getPageHref?: undefined | ((pageNumber: number) => string);
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** The current page selected. */
-    currentPage: number;
-    /** A method that returns a Link component given the target page */
-    getPageHref?: (pageNumber: number) => string;
-    /** The method to callback when an item is selected. Passes the selected page to the consuming app as an argument. */
+    initialPage: number;
+    /** The callback function called when an item is selected and the current
+     * page should not refresh. */
     onPageChange?: (selected: number) => void;
+    /** The total number of pages. */
+    pageCount: number;
 }
-/** A component that provides a navigational list of page items. */
+/**
+ * A component that provides a navigational list of page items.
+ */
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -2,6 +2,8 @@ import { Story } from "@storybook/react/types-6-0";
 import { PaginationProps } from "./Pagination";
 /**
  * PaginationGetPageHref will refresh the browser as a new page is selected.
+ * In this example, `getPageHref` creates the `href` attribute for each
+ * page URL.
  */
 export declare const PaginationGetPageHref: Story<PaginationProps>;
 /**

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
+export interface ProgressIndicatorProps {
+    /** Flag to render the component in a dark background. */
+    darkMode?: boolean;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that 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.
+ */
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

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

@@ -0,0 +1,8 @@
+export declare enum ProgressIndicatorSizes {
+    Default = "default",
+    Small = "small"
+}
+export declare enum ProgressIndicatorTypes {
+    Circular = "circular",
+    Linear = "linear"
+}

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

@@ -7,12 +7,12 @@ export interface RadioGroupProps {
     className?: string;
     /** Populates the initial value of the input */
     defaultValue?: string;
-    /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
     /** 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 error state */
+    invalidText?: string;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
     /** Adds the 'aria-invalid' attribute to the input and

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/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/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,6 +28,8 @@ 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 */
@@ -34,6 +42,8 @@ export interface InputProps {
     /** 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 */