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

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

@@ -1,34 +1,52 @@
 import * as React from "react";
+interface SelectProps {
+    labelText: string;
+    name: string;
+    optionsData: string[];
+}
+interface TextInputProps {
+    labelText: string;
+    placeholder: string;
+}
 export interface SearchBarProps {
-    /** Populates aria-label on the form;
-     * defines a hidden string that labels
-     * the SearchBar
-     */
-    ariaLabel?: string;
-    /** Populates aria-labelledby on the form;
-     * defines a visible string that labels
-     * the SearchBar
-     */
-    ariaLabelledBy?: string;
-    /** Additional attributes passed to the form */
-    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 that appears in addition to "search-bar" */
-    className?: string;
-    /** Adds 'method' property to the form */
-    method?: string;
-    /** Adds 'action' property to the form */
+    /** Adds 'action' property to the `form` element. */
     action?: string;
+    /** The onClick callback function for the `Button` component. */
+    buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** A class name for the `form` element. */
+    className?: string;
+    /** The text to display below the form in a `HelperErrorText` component. */
+    helperErrorText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Handler on form submit */
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** Sets children form components in the disabled state. */
+    isDisabled?: boolean;
+    /** Sets children form components in the error state. */
+    isInvalid?: boolean;
+    /** Sets children form components in the required state. */
+    isRequired?: boolean;
+    /** Populates the `aria-label` attribute on the form element. */
+    labelText: string;
+    /** Adds 'method' property to the `form` element. */
+    method?: string;
+    /** Handler function when the form is submitted. */
     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. */
+    textInputProps?: TextInputProps | undefined;
 }
-/** Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together. */
-export default function SearchBar(props: React.PropsWithChildren<SearchBarProps>): JSX.Element;
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+export default function SearchBar(props: SearchBarProps): JSX.Element;
+export {};

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

@@ -1,50 +1,47 @@
 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 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

@@ -11,7 +11,7 @@ export interface SkeletonLoaderProps {
     headingSize?: number;
     /** 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[];

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/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/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,53 @@
 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 */
+    /** 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;
+    /** 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;
+    /** 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 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 */
+    /** 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"
+}