@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -1,50 +1,49 @@
 import React from "react";
+import { SelectTypes } from "./SelectTypes";
 export interface SelectProps {
-    /** DEPRECATED - When passed, will populate the aria-label on the select */
-    ariaLabel?: string;
-    /** Additional attributes passed to the <select> tag */
-    attributes?: {
-        [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 'select' */
+    /** A class name for the `div` parent element. */
     className?: string;
-    children?: React.ReactNode;
-    /** When true, disables the select */
-    disabled?: boolean;
-    /** Helper for modifiers array; adds 'errored' styling */
-    errored?: boolean;
-    /** Populates the HelperErrorText for error state */
-    invalidText?: string;
-    /** DEPRECATED - ID of associated HelperText */
-    helperTextId?: string;
-    /** Populates the HelperErrorText for standard state */
+    /** Optional string to populate the `HelperErrorText` for the standard state. */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** DEPRECATED - Attribute indicating that an option with a non-empty string value must be selected */
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** Adds the `disabled` and `aria-disabled` attributes to the select when true */
+    isDisabled?: boolean;
+    /** Adds the `aria-invalid` attribute to the select when true. This also makes
+     * the color theme "NYPL error" red for the select and text. */
+    isInvalid?: boolean;
+    /** Adds the `required` and `aria-required` attributes to the input when true. */
     isRequired?: boolean;
-    /** DEPRECATED - ID of associated label */
-    labelId?: string;
-    /** Provides text for a `Label` component if `showLabel` is set to `true`; populates a `aria-label` attribute on the select input if `showLabel` is set to `false`. */
+    /** Provides text for a `Label` component if `showLabel` is set to `true`;
+     * populates an `aria-label` attribute on the select input if `showLabel` is
+     * set to `false`. */
     labelText: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** The name of the select element to use in form submission */
+    /** Used to reference the select element in forms. */
     name: string;
-    /** Passes select's current value to the React state handler */
-    onBlur?: (event: React.FormEvent) => void;
-    /** Passes selects' current value to the React state handler */
+    /** The callback function to get the selected value.
+     * Should be passed along with `value` for controlled components. */
     onChange?: (event: React.FormEvent) => void;
-    /** Will add `aria-required: true` and native HTML `required` attribute to the select input */
-    required?: boolean;
-    /** The value of the selected option */
-    selectedOption?: string;
-    /** Offers the ability to show the label onscreen or hide it. Refer to the `labelText` property for more information. */
+    /** 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;
     /** Whether or not to display the "Required"/"Optional" text in the label text. */
     showOptReqLabel?: boolean;
+    /** The variant to display. */
+    type?: SelectTypes;
+    /** The value of the selected option.
+     * Should be passed along with `onChange` for controlled components. */
+    value?: string;
 }
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

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

@@ -0,0 +1,4 @@
+export declare enum SelectTypes {
+    Default = "default",
+    SearchBar = "searchbar"
+}

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 `vertical` */
+    /** 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/SkeletonLoader/SkeletonLoaderTypes.d.ts

@@ -1,6 +1,6 @@
 export declare enum SkeletonLoaderLayouts {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
+    Row = "row",
+    Column = "column"
 }
 export declare enum SkeletonLoaderImageRatios {
     Landscape = "landscape",

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

@@ -1,10 +1,12 @@
 import * as React from "react";
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
 export interface StatusBadgeProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** ClassName that appears in addition to "status-badge" */
+    /** Additional class for the component */
     className?: string;
-    /** Level of badge **/
-    level?: "low" | "medium" | "high";
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Level of the status badge through StatusBadgeTypes. */
+    level?: StatusBadgeTypes;
 }
-export default function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>): JSX.Element;
+declare function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>): JSX.Element;
+export default StatusBadge;

package/dist/components/StatusBadge/StatusBadgeTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum StatusBadgeTypes {
+    Low = "low",
+    Medium = "medium",
+    High = "high"
+}

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

@@ -0,0 +1,91 @@
+import * as React from "react";
+export interface TemplateProps {
+}
+export interface TemplateSidebarProps {
+    /** Renders the `TemplateContentSidebar` component either on the left or
+     * right side of the `TemplateContentPrimary` component. */
+    sidebar?: "none" | "left" | "right";
+}
+export interface TemplateContentProps extends TemplateSidebarProps {
+}
+export interface TemplateAppContainerProps extends TemplateSidebarProps {
+    /** DOM that will be rendered in the `TemplateBreakout` component section. */
+    breakout?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
+    contentPrimary?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
+    contentSidebar?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateContentTop` component section. */
+    contentTop?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateFooter` component section. */
+    footer?: React.ReactElement;
+    /** DOM that will be rendered in the `TemplateHeader` component section. */
+    header?: React.ReactElement;
+}
+/**
+ * The main top-level parent component that wraps all template-related
+ * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ */
+declare const Template: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component should be the first child of the `Template`
+ * component. This is rendered as an HTML `<header>` element.
+ */
+declare const TemplateHeader: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component should be used inside the `TemplateHeader` component.
+ * This is meant to render its children from edge to edge and is most useful
+ * for the `Breadcrumbs` and `Hero` components, and other banner-like components.
+ */
+declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This component is most useful to render content on the page. This renders an
+ * HTML `<main>` element and takes a `sidebar` prop with optional "left" or
+ * "right" values. This will set the correct styling needed for the
+ * `TemplateContentPrimary` and `TemplateContentSidebar` components. Note that
+ * `TemplateContentPrimary` and `TemplateContentSidebar` must be ordered
+ * correctly as children elements for the appropriate styles to take effect.
+ */
+declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component.
+ * This renders content in the main width of the container and will always render
+ * above the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This component is used to render content in a column when there must be a
+ * sidebar component on either its left or right side. It must go inside the
+ * `TemplateContent` component. An optional `sidebar` prop value of "left" or
+ * "right" can be passed to render the correct CSS styles. If the `sidebar`
+ * prop is used in the `TemplateContent` component, there is no need to pass
+ * the `sidebar` prop to this component -- `TemplateContent` will handle it.
+ */
+declare const TemplateContentPrimary: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This component is used to render content in a sidebar column. It must go
+ * inside the `TemplateContent` component and must be paired with the
+ * `TemplateContentPrimary` component. If this is a left sidebar, it needs to be
+ * rendered before the `TemplateContentPrimary` component. If this is a right
+ * sidebar, it needs to be rendered after the `TemplateContentPrimary` component.
+ * An optional `sidebar` prop value of "left" or "right" can be passed to render
+ * the correct CSS styles. If the `sidebar` prop is used in the `TemplateContent`
+ * component, there is no need to pass the `sidebar` prop to this component --
+ * `TemplateContent` will handle it.
+ */
+declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateContentProps>) => JSX.Element;
+/**
+ * This optional component should be the last child of the `Template`
+ * component. This is rendered as an HTML `<footer>` element and spans the full
+ * width of the page.
+ */
+declare const TemplateFooter: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This single component can be used instead of all the individual template
+ * components. Instead of importing and rendering the needed "template"
+ * components, each section is passed as a prop to the section where it should
+ * be rendered. For example, if you want to render content in the
+ * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
+ */
+declare const TemplateAppContainer: (props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element;
+export { TemplateAppContainer, Template, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { TextDisplaySizes } from "./TextTypes";
+export interface TextProps {
+    /** Additional class name to render in the `Text` component. */
+    className?: string;
+    /** Optional prop used to show bolded text */
+    isBold?: boolean;
+    /** Optional prop used to show itlicized text */
+    isItalic?: boolean;
+    /** Optional prop used to remove default spacing */
+    noSpace?: boolean;
+    /** Optional prop to control the text styling */
+    displaySize?: TextDisplaySizes;
+}
+declare function Text(props: React.PropsWithChildren<TextProps>): JSX.Element;
+export default Text;

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

@@ -0,0 +1,6 @@
+export declare enum TextDisplaySizes {
+    Default = "default",
+    Caption = "caption",
+    Tag = "tag",
+    Mini = "mini"
+}

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

@@ -1,52 +1,65 @@
 import * as React from "react";
-import { TextInputTypes } from "./TextInputTypes";
+import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 export interface InputProps {
-    /** Additional attributes to pass to the `<input>` tag */
+    /** 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;
     };
-    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-    type?: TextInputTypes;
-    /** Will add 'aria-required: true' to input */
-    required?: boolean;
+    /** 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 */
+    id?: string;
+    /** Populates the HelperErrorText for the error state */
+    invalidText?: string;
+    /** Adds the `disabled` and `aria-disabled` prop to the input when true */
+    isDisabled?: boolean;
+    /** Adds errored styling to the input/textarea and helper text elements */
+    isInvalid?: boolean;
+    /** Will add `required` and `aria-required` props to the input/textarea elements */
+    isRequired?: boolean;
     /** Provides text for a `Label` component if `showLabel` is set to true;
-     * populates a `aria-label` sttribute if `showLabel` is set to false. */
+     * 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;
-    /** Populates the HelperErrorText for standard state */
-    helperText?: string;
-    /** Populates the HelperErrorText for error state */
-    invalidText?: string;
-    /** Populates the placeholder of the input */
-    placeholder?: string;
-    /** Populates the value of the input */
+    /** 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 */
     value?: string;
-    /** className you can add in addition to 'textinput' */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Helper for modifiers array; adds 'errored' styling */
-    errored?: boolean;
-    /** Adds the 'disabled' prop to the input when true */
-    disabled?: boolean;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-     * here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** The variant to display. */
+    variantType?: TextInputVariants;
 }
-/** The type used for `ref`s. We want to extend both `input` and `textarea`
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
  * since both are available to create through `TextInput`.
  */
 export declare type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
-/** Renders either an `input` element with a specified type or a `textarea`
- * element. All types will render an accessible Label component and an optional
- * HelperErrorText component.
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
  */
 declare const TextInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>;
 export default TextInput;

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

@@ -18,3 +18,8 @@ export declare enum TextInputFormats {
     textarea = "",
     url = "https://domain.com"
 }
+export declare enum TextInputVariants {
+    Default = "default",
+    SearchBar = "searchBar",
+    SearchBarSelect = "searchBarSelect"
+}

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"
 }