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

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

@@ -7,6 +7,8 @@ interface BaseProps {
     centered?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
@@ -21,14 +23,14 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
     dismissible?: boolean;
     /** Optional custom `Icon` that will override the default `Icon`. */
     icon?: JSX.Element;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
     /** Optional prop to control the margin around the `Notification` component. */
     noMargin?: boolean;
     /** Content to be rendered in a `NotificationContent` component. */
     notificationContent: string | JSX.Element;
     /** Content to be rendered in a `NotificationHeading` component. */
     notificationHeading?: string;
+    /** Prop to display the `Notification` icon. Defaults to `true`. */
+    showIcon?: boolean;
 }
 /**
  * NotificationHeading child-component.

package/dist/components/Placeholder/Placeholder.d.ts

@@ -1,12 +1,10 @@
 import * as React from "react";
 export interface PlaceholderProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Modifier string for the classname. */
+    variant?: string;
 }
 /** Creates a gray box with an editable string for dropping in spaces
  * within components or on templates where a component will be but
  * that hasn't been created yet
  */
-export default function Placeholder(props: React.PropsWithChildren<PlaceholderProps>): JSX.Element;
+export default function Placeholder({ children, variant, }: React.PropsWithChildren<PlaceholderProps>): JSX.Element;

package/dist/components/Radio/Radio.d.ts

@@ -1,15 +1,16 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface RadioProps {
     /** Additional class name. */
     className?: string;
-    /** Optional string to populate the HelperErrorText for the error state
-     * when `isInvalid` is true.
-     */
-    invalidText?: string;
     /** Optional string to populate the HelperErrorText for the standard state. */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** 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?: HelperErrorTextType;
     /** When using the Radio as a "controlled" form element, you can specify the
      * `Radio`'s checked state using this prop. You must also pass an onChange prop.
      * Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
 export interface RadioGroupProps {
     /** Any child node passed to the component. */
@@ -8,11 +9,11 @@ export interface RadioGroupProps {
     /** Populates the initial value of the input */
     defaultValue?: string;
     /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
+    invalidText?: HelperErrorTextType;
     /** 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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface SelectProps {
     labelText: string;
     name: string;
@@ -18,13 +19,17 @@ export interface SearchBarProps {
     buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /** A class name for the `form` element. */
     className?: string;
+    /** Optional string for the SearchBar's description above the component. */
+    descriptionText?: string;
+    /** Optional string for the SearchBar's heading text above the component. */
+    headingText?: string;
     /** The text to display below the form in a `HelperErrorText` component. */
-    helperErrorText?: string;
+    helperText?: HelperErrorTextType;
     /** 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;
+    invalidText?: HelperErrorTextType;
     /** Sets children form components in the disabled state. */
     isDisabled?: boolean;
     /** Sets children form components in the error state. */
@@ -35,6 +40,9 @@ export interface SearchBarProps {
     labelText: string;
     /** Adds 'method' property to the `form` element. */
     method?: string;
+    /** Sets the `Button` variant type to `ButtonTypes.NoBrand` when true;
+     * false by default which sets the type to `ButtonTypes.Primary`. */
+    noBrandButtonType?: boolean;
     /** Handler function when the form is submitted. */
     onSubmit: (event: React.FormEvent) => void;
     /** Required props to render a `Select` element. */

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

@@ -1,15 +1,16 @@
 import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { SelectTypes } from "./SelectTypes";
 export interface SelectProps {
     /** A class name for the `div` parent element. */
     className?: string;
     /** Optional string to populate the `HelperErrorText` for the standard state. */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** 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;
+    invalidText?: HelperErrorTextType;
     /** 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
@@ -26,6 +27,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;
+    /** Placeholder text in the select element. */
+    placeholder?: string;
     /** 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

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

@@ -5,13 +5,17 @@ export interface SkeletonLoaderProps {
     border?: boolean;
     /** 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 `SkeletonLoaderImageRatios.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 `SkeletonLoaderLayouts.Column`. */
     layout?: SkeletonLoaderLayouts;
     /** Optional boolean value to control visibility of button placeholder. */
     showButton?: boolean;

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface SliderProps {
     /** Additional class name for the Slider component. */
     className?: string;
@@ -7,12 +8,12 @@ export interface SliderProps {
      */
     defaultValue?: number | number[];
     /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** 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;
+    invalidText?: HelperErrorTextType;
     /** 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. */

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

@@ -5,7 +5,8 @@ export interface StatusBadgeProps {
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Level of the status badge through StatusBadgeTypes. */
+    /** Level of the status badge through StatusBadgeTypes. Defaults to
+     * `StatusBadgeTypes.Low`. */
     level?: StatusBadgeTypes;
 }
 declare function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>): JSX.Element;

package/dist/components/StructuredContent/StructuredContent.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import { StructuredContentImagePosition } from "./StructuredContentTypes";
+export interface StructuredContentProps {
+    /** Optional value to set the text for the callout heading text. */
+    calloutText?: string;
+    /** Additional class name for the `StructuredContent` component. */
+    className?: string;
+    /** Optional value to set the text for the main heading text. */
+    headingText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** String value used to populate the `alt` attribute of the internal `Image`
+     * component's `img` element. @NOTE if an image is used, this value must be passed. */
+    imageAlt?: string;
+    /** Optional value to control the aspect ratio of the internal `Image` component.
+     * Defaults to `ImageRatios.Square`. */
+    imageAspectRatio?: ImageRatios;
+    /** Optional value to render as a caption for the internal `Image` component. */
+    imageCaption?: string;
+    /** Optional DOM element to use instead of the DS `Image` component. */
+    imageComponent?: JSX.Element;
+    /** Optional value to render as a credit for the internal `Image` component. */
+    imageCredit?: string;
+    /** Optional value to control the positioning of the internal `Image` component.
+     * Defaults to `StructuredContentImagePosition.Left`. */
+    imagePosition?: StructuredContentImagePosition;
+    /** Optional value to control the size of the internal `Image` component.
+     * Defaults to `ImageSizes.Medium`. */
+    imageSize?: ImageSizes;
+    /** Optional value that contains the path to an image. If omitted, the internal
+     * DS `Image` component will not render. */
+    imageSrc?: string;
+    /** Required value to set the text for the body content. */
+    bodyContent: string | JSX.Element;
+}
+/**
+ * The `StructuredContent` component that displays a heading, callout content,
+ * an image, and body content. All are optional except for body content.
+ */
+export default function StructuredContent(props: React.PropsWithChildren<StructuredContentProps>): JSX.Element;

package/dist/components/StructuredContent/StructuredContentTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum StructuredContentImagePosition {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface TableProps {
+    /** Additional class name for the `Table` component. */
+    className?: string;
+    /** Array of string values used to populate the `Table` column headers. */
+    columnHeaders?: string[];
+    /** Hex value to set the background color of the column headers. */
+    columnHeadersBackgroundColor?: string;
+    /** Hex value to set the text color of the column headers. */
+    columnHeadersTextColor?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** If true, the first cell of each row in the `Table` component will be visually styled as a header.  The default value is false */
+    useRowHeaders?: boolean;
+    /** If true, a border will be displayed between each row in the `Table` component.  The default value is false. */
+    showRowDividers?: boolean;
+    /** Two-dimensional array used to populate the table rows. */
+    tableData: string[][];
+    /** Displays `Table` title element. */
+    titleText?: string;
+}
+declare function Table(props: React.PropsWithChildren<TableProps>): JSX.Element;
+export default Table;

package/dist/components/Template/Template.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 export interface TemplateProps {
 }
+export interface TemplateFooterProps {
+    /** Flag to render an HTML footer element. True by default. */
+    renderFooterElement?: boolean;
+}
 export interface TemplateSidebarProps {
     /** Renders the `TemplateContentSidebar` component either on the left or
      * right side of the `TemplateContentPrimary` component. */
@@ -8,7 +12,7 @@ export interface TemplateSidebarProps {
 }
 export interface TemplateContentProps extends TemplateSidebarProps {
 }
-export interface TemplateAppContainerProps extends TemplateSidebarProps {
+export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateSidebarProps {
     /** DOM that will be rendered in the `TemplateBreakout` component section. */
     breakout?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
@@ -77,9 +81,10 @@ declare const TemplateContentSidebar: (props: React.PropsWithChildren<TemplateCo
 /**
  * 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.
+ * width of the page. If an HTML `<footer>` element is already passed in a
+ * custom component, set `renderFooterElement` to `false`.
  */
-declare const TemplateFooter: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWithChildren<TemplateFooterProps>) => JSX.Element;
 /**
  * This single component can be used instead of all the individual template
  * components. Instead of importing and rendering the needed "template"

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

@@ -3,14 +3,14 @@ import { TextDisplaySizes } from "./TextTypes";
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;
+    /** Optional prop to control the text styling */
+    displaySize?: TextDisplaySizes;
     /** 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/TextInput/TextInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface InputProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -14,11 +15,11 @@ export interface InputProps {
     /** The starting value of the input field. */
     defaultValue?: string;
     /** Populates the HelperErrorText for the standard state */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Populates the HelperErrorText for the error state */
-    invalidText?: string;
+    invalidText?: HelperErrorTextType;
     /** 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 */
@@ -48,7 +49,7 @@ export interface InputProps {
     type?: TextInputTypes;
     /** Populates the value of the input/textarea elements */
     value?: string;
-    /** The variant to display. */
+    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
     variantType?: TextInputVariants;
 }
 /**

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { ToggleSizes } from "./ToggleSizes";
+export interface ToggleProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
+    /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
+     *   If true, the toggle will be initially set to the "on" position. */
+    defaultChecked?: boolean;
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: HelperErrorTextType;
+    /** 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?: HelperErrorTextType;
+    /** When using the Toggle as a "controlled" form element, you can specify
+     * the Toggle's checked state using this prop.
+     * Learn more about controlled and uncontrolled form fields:
+     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+     * the color theme "NYPL error" red for the button and text. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox's label. This will serve as the text content for a `<label>`
+     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** The name prop indicates into which group of checkboxes this checkbox
+     * belongs. If none is specified, 'default' will be used */
+    name?: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    size?: ToggleSizes;
+}
+export declare const onChangeDefault: () => void;
+/**
+ * Component that renders Chakra's `Switch` component along with NYPL defaults.
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/components/Toggle/ToggleSizes.d.ts

@@ -0,0 +1,4 @@
+export declare enum ToggleSizes {
+    Large = "large",
+    Small = "small"
+}

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

@@ -1,25 +1,36 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 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` */
+    /** 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 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 a code snippet provided by YouTube or Vimeo; the
+     * `videoPlayer` component will accept the `embedCode` prop or the `videoId`
+     * and `videoType` props */
+    embedCode?: 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;
+    helperText?: HelperErrorTextType;
     /** 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 */
+    /** 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; if a `title`
+     * attribute is already present in the `embedCode` prop, this prop will be
+     * ignored */
     iframeTitle?: 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 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. */
-    videoType: VideoPlayerTypes;
+    videoType?: VideoPlayerTypes;
 }
 export default function VideoPlayer(props: React.PropsWithChildren<VideoPlayerProps>): JSX.Element;