@nypl/design-system-react-components 0.25.11 → 0.26.0

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { SelectTypes } from "./SelectTypes";
+import { SelectTypes, LabelPositions } from "./SelectTypes";
 export interface SelectProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -11,7 +11,7 @@ export interface SelectProps {
     /** Optional string to populate the `HelperErrorText` for the standard state. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -22,6 +22,9 @@ export interface SelectProps {
     isInvalid?: boolean;
     /** Adds the `required` and `aria-required` attributes to the input when true. */
     isRequired?: boolean;
+    /** Optional value to render the label inline, rather than the default (on top)
+     * of the select element. */
+    labelPosition?: LabelPositions;
     /** 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`. */
@@ -33,15 +36,16 @@ export interface SelectProps {
     onChange?: (event: React.FormEvent) => void;
     /** Placeholder text in the select element. */
     placeholder?: string;
+    /** The variant to display. */
+    selectType?: SelectTypes;
     /** 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;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
     /** The value of the selected option.
      * Should be passed along with `onChange` for controlled components. */
     value?: string;
@@ -50,7 +54,7 @@ export interface SelectProps {
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & {
+export declare const Select: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SelectProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLSelectElement>>;
+} & React.RefAttributes<HTMLSelectElement>>, {}>;
 export default Select;

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

@@ -2,3 +2,7 @@ export declare enum SelectTypes {
     Default = "default",
     SearchBar = "searchbar"
 }
+export declare enum LabelPositions {
+    Default = "default",
+    Inline = "inline"
+}

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

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { SkeletonLoaderImageRatios, SkeletonLoaderLayouts } from "./SkeletonLoaderTypes";
+import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
+import { LayoutTypes } from "../../helpers/enums";
 export interface SkeletonLoaderProps {
-    /** Optional boolean value to control visibility of border around skeleton loader. */
-    border?: boolean;
     /** Additional class name for the Skeleton component. */
     className?: string;
     /** Optional numeric value to control the number of lines for content
@@ -14,9 +13,11 @@ export interface SkeletonLoaderProps {
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `SkeletonLoaderImageRatios.Square`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;
+    /** Optional boolean value to control visibility of border around skeleton loader. */
+    isBordered?: boolean;
     /** Optional value to control the position of the image placeholder;
-     * default value is `SkeletonLoaderLayouts.Column`. */
-    layout?: SkeletonLoaderLayouts;
+     * default value is `LayoutTypes.Column`. */
+    layout?: LayoutTypes;
     /** Optional boolean value to control visibility of button placeholder. */
     showButton?: boolean;
     /** Optional boolean value to control visibility of content placeholder. */
@@ -34,4 +35,5 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export default function SkeletonLoader(props: React.PropsWithChildren<SkeletonLoaderProps>): JSX.Element;
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkeletonLoaderProps>) => JSX.Element, {}>;
+export default SkeletonLoader;

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

@@ -1,7 +1,3 @@
-export declare enum SkeletonLoaderLayouts {
-    Row = "row",
-    Column = "column"
-}
 export declare enum SkeletonLoaderImageRatios {
     Landscape = "landscape",
     Portrait = "portrait",

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

@@ -10,7 +10,7 @@ export interface SliderProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -36,8 +36,6 @@ export interface SliderProps {
     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. */
@@ -45,6 +43,9 @@ export interface SliderProps {
     /** Offers the ability to show the label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: 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). */
@@ -55,4 +56,5 @@ export interface SliderProps {
  * 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;
+export declare const Slider: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SliderProps>) => JSX.Element, {}>;
+export default Slider;

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

@@ -9,5 +9,9 @@ export interface StatusBadgeProps {
      * `StatusBadgeTypes.Low`. */
     level?: StatusBadgeTypes;
 }
-declare function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>): JSX.Element;
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StatusBadgeProps>) => JSX.Element, {}>;
 export default StatusBadge;

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

@@ -1,6 +1,11 @@
 import * as React from "react";
-import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
+import { ComponentImageProps } from "../Image/Image";
 import { StructuredContentImagePosition } from "./StructuredContentTypes";
+interface StructuredContentImageProps extends ComponentImageProps {
+    /** Optional value to control the positioning of the internal `Image` component.
+     * Defaults to `StructuredContentImagePosition.Left`. */
+    position?: StructuredContentImagePosition;
+}
 export interface StructuredContentProps {
     /** Optional value to set the text for the callout heading text. */
     calloutText?: string;
@@ -10,27 +15,8 @@ export interface StructuredContentProps {
     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;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: StructuredContentImageProps;
     /** Required value to set the text for the body content. */
     bodyContent: string | JSX.Element;
 }
@@ -38,4 +24,5 @@ export interface StructuredContentProps {
  * 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;
+export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StructuredContentProps>) => JSX.Element, {}>;
+export default StructuredContent;

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

@@ -25,5 +25,5 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-declare function Table(props: React.PropsWithChildren<TableProps>): JSX.Element;
+export declare const Table: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TableProps>) => JSX.Element, {}>;
 export default Table;

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

@@ -1,18 +1,18 @@
-import * as React from "react";
 import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
-export interface TabsContentDataProps {
+import * as React from "react";
+export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
 }
 export interface TabsProps {
-    /** Array of data to display */
-    contentData?: TabsContentDataProps[];
     /** The index of the tab to display for controlled situations. */
     defaultIndex?: number;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** The callback function invoked on every tab change event. */
     onChange?: (index: number) => any;
+    /** Array of data to display */
+    tabsData?: TabsDataProps[];
     /** Render a hash in the url for each tab. Only available when data is
      * passed through the `data` props. */
     useHash?: boolean;
@@ -21,5 +21,6 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-declare function Tabs(props: React.PropsWithChildren<TabsProps>): JSX.Element;
-export { Tabs, TabList, Tab, TabPanels, TabPanel };
+export declare const Tabs: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TabsProps>) => JSX.Element, {}>;
+export { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;

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

@@ -15,6 +15,9 @@ export interface TemplateSidebarProps {
     sidebar?: "none" | "left" | "right";
 }
 export interface TemplateContentProps extends TemplateSidebarProps {
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    id?: string;
 }
 export interface TemplateAppContainerProps extends TemplateFooterProps, TemplateHeaderProps, TemplateSidebarProps {
     /** DOM that will be rendered before the rest of the components in
@@ -22,6 +25,9 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     aboveHeader?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateBreakout` component section. */
     breakout?: React.ReactElement;
+    /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
+     * anchor for the application skip navigation. */
+    contentId?: string;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
     contentPrimary?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -35,9 +41,9 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
 }
 /**
  * The main top-level parent component that wraps all template-related
- * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ * components.
  */
-declare const Template: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const Template: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateProps>) => JSX.Element, {}>;
 /**
  * This optional component renders its children from edge-to-edge and should
  * be used for alerts or notifications that are typically site-wide. This must
@@ -63,11 +69,13 @@ declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWi
 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.
+ * HTML `<main>` element with an id of "mainContent". The "mainContent" id should
+ * be used as the consuming application's skip navigation link. The `TemplateContent`
+ * component also 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;
 /**
@@ -111,5 +119,6 @@ declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWi
  * 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, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element, {}>;
+export { Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+export default TemplateAppContainer;

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

@@ -1,16 +1,16 @@
 import * as React from "react";
-import { TextDisplaySizes } from "./TextTypes";
+import { TextSizes } 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 */
+    size?: TextSizes;
 }
-declare function Text(props: React.PropsWithChildren<TextProps>): JSX.Element;
+export declare const Text: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TextProps>) => JSX.Element, {}>;
 export default Text;

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

@@ -1,4 +1,4 @@
-export declare enum TextDisplaySizes {
+export declare enum TextSizes {
     Default = "default",
     Caption = "caption",
     Tag = "tag",

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

@@ -17,7 +17,7 @@ export interface InputProps {
     /** Populates the HelperErrorText for the standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Populates the HelperErrorText for the error state */
     invalidText?: HelperErrorTextType;
     /** Adds the `disabled` and `aria-disabled` prop to the input when true */
@@ -40,17 +40,17 @@ export interface InputProps {
     /** 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;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
     /** The amount to increase or decrease when using the number type. */
     step?: number;
+    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
+    textInputType?: TextInputVariants;
     /** 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;
-    /** FOR INTERNAL DS USE ONLY: the input variant to display. */
-    variantType?: TextInputVariants;
 }
 /**
  * The type used for `ref`s. We want to extend both `input` and `textarea`
@@ -62,5 +62,5 @@ export declare type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-declare const TextInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>;
+export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
 export default TextInput;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { ToggleSizes } from "./ToggleSizes";
+import { ToggleSizes } from "./ToggleTypes";
 export interface ToggleProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -12,7 +12,7 @@ export interface ToggleProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -24,25 +24,23 @@ export interface ToggleProps {
     /** 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. */
+    /** Adds the 'aria-invalid' attribute to the input when true. */
     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. */
+    /** The toggle's label. This will serve as the text content for the `<label>` element */
     labelText: string;
-    /** The name prop indicates into which group of checkboxes this checkbox
-     * belongs. If none is specified, 'default' will be used */
+    /** The name prop indicates the `Toggle`'s form element name. 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. */
+    /** The size of the Toggle. Defaults to "large". */
     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 declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Toggle;

package/dist/components/Toggle/{ToggleSizes.d.ts → ToggleTypes.d.ts}

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

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

@@ -33,4 +33,5 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export default function VideoPlayer(props: React.PropsWithChildren<VideoPlayerProps>): JSX.Element;
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<VideoPlayerProps>) => JSX.Element, {}>;
+export default VideoPlayer;