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

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
+export declare type ProgressIndicatorSizes = "default" | "small";
+export declare type ProgressIndicatorTypes = "circular" | "linear";
 export interface ProgressIndicatorProps {
     /** Flag to render the component in a dark background. */
     darkMode?: boolean;

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
 export interface RadioGroupProps {
     /** Additional class name. */
     className?: string;

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

@@ -8,6 +8,7 @@ interface BaseProps {
 }
 export interface SelectProps extends BaseProps {
     optionsData: string[];
+    onChange?: (event: React.FormEvent) => void;
 }
 export interface TextInputProps extends BaseProps {
     placeholder?: string;
@@ -40,8 +41,8 @@ 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`. */
+    /** Sets the `Button` variant type to `noBrand` when true;
+     * false by default which sets the type to `primary`. */
     noBrandButtonType?: boolean;
     /** Handler function when the form is submitted. */
     onSubmit: (event: React.FormEvent) => void;

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

@@ -1,11 +1,8 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { SelectTypes, LabelPositions } from "./SelectTypes";
+export declare type SelectTypes = "default" | "searchbar";
+export declare type LabelPositions = "default" | "inline";
 export interface SelectProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
     /** A class name for the `div` parent element. */
     className?: string;
     /** Optional string to populate the `HelperErrorText` for the standard state. */

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
-import { LayoutTypes } from "../../helpers/enums";
+import { LayoutTypes } from "../../helpers/types";
+export declare type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
 export interface SkeletonLoaderProps {
     /** Additional class name for the Skeleton component. */
     className?: string;
@@ -11,12 +11,12 @@ export interface SkeletonLoaderProps {
      * placeholder; default value is `1`. */
     headingSize?: number;
     /** Optional value to control the aspect ratio of the image placeholder;
-     * default value is `SkeletonLoaderImageRatios.Square`. */
+     * default value is `"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 `LayoutTypes.Column`. */
+     * default value is `"column"`. */
     layout?: LayoutTypes;
     /** Optional boolean value to control visibility of button placeholder. */
     showButton?: boolean;

package/dist/components/SkipNavigation/SkipNavigation.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface SkipNavigationProps {
+    /** Additional CSS class name to render in the `nav` element. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The anchor target for the main skip link. The default is "#mainContent". */
+    target?: string;
+}
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkipNavigationProps>) => JSX.Element, {}>;
+export default SkipNavigation;

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

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { StatusBadgeTypes } from "./StatusBadgeTypes";
+export declare type StatusBadgeTypes = "low" | "medium" | "high";
 export interface StatusBadgeProps {
     /** Additional class for the component */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Level of the status badge through StatusBadgeTypes. Defaults to
-     * `StatusBadgeTypes.Low`. */
+    /** Level of the status badge. Defaults to `"low"`. */
     level?: StatusBadgeTypes;
 }
 /**

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { ComponentImageProps } from "../Image/Image";
-import { StructuredContentImagePosition } from "./StructuredContentTypes";
+export declare type StructuredContentImagePosition = "left" | "right" | "center";
 interface StructuredContentImageProps extends ComponentImageProps {
     /** Optional value to control the positioning of the internal `Image` component.
-     * Defaults to `StructuredContentImagePosition.Left`. */
+     * Defaults to `"left"`. */
     position?: StructuredContentImagePosition;
 }
 export interface StructuredContentProps {

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

@@ -14,7 +14,7 @@ export interface TableProps {
      * component. The default value is false. */
     showRowDividers?: boolean;
     /** Two-dimensional array used to populate the table rows. */
-    tableData: string[][];
+    tableData: (string | JSX.Element)[][];
     /** Displays `Table` title element. */
     titleText?: string;
     /** If true, the first cell of each row in the `Table` component will be

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

@@ -38,6 +38,8 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     footer?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateHeader` component section. */
     header?: React.ReactElement;
+    /** Render the `SkipNavigation` component or not. False by default. */
+    renderSkipNavigation?: boolean;
 }
 /**
  * The main top-level parent component that wraps all template-related

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TextSizes } from "./TextTypes";
+export declare type TextSizes = "default" | "caption" | "tag" | "mini";
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
     className?: string;

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

@@ -1,15 +1,17 @@
 import * as React from "react";
-import { TextInputTypes, TextInputVariants } from "./TextInputTypes";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
+export declare const TextInputFormats: {
+    email: string;
+    hidden: string;
+    password: string;
+    text: string;
+    tel: string;
+    textarea: string;
+    url: string;
+};
+export declare type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
 export interface InputProps {
-    /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
-        [key: string]: any;
-    };
-    /** Additional attributes to pass to the `<input>` or `<textarea>` element */
-    attributes?: {
-        [key: string]: any;
-    };
     /** A class name for the TextInput parent div. */
     className?: string;
     /** The starting value of the input field. */
@@ -29,10 +31,20 @@ export interface InputProps {
     /** Provides text for a `Label` component if `showLabel` is set to true;
      * populates an `aria-label` attribute if `showLabel` is set to false. */
     labelText: string;
+    /** The max number for a `number` TextInput type. */
+    max?: number;
+    /** The max length of the input field. */
+    maxLength?: number;
+    /** The min number for a `number` TextInput type. */
+    min?: number;
     /** 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;
+    /** The action to perform on the `input`/`textarea`'s onClick function  */
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    /** The action to perform on the `input`/`textarea`'s onFocus function  */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Populates the placeholder for the input/textarea elements */
     placeholder?: string;
     /** Offers the ability to hide the helper/invalid text. */

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

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { ToggleSizes } from "./ToggleTypes";
+export declare type ToggleSizes = "default" | "small";
 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;

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { VideoPlayerAspectRatios, VideoPlayerTypes } from "./VideoPlayerTypes";
+export declare type VideoPlayerTypes = "vimeo" | "youtube";
+export declare type VideoPlayerAspectRatios = "fourByThree" | "sixteenByNine" | "square";
 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` */