@nypl/design-system-react-components 1.0.1 → 1.0.3

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

@@ -0,0 +1,126 @@
+import * as React from "react";
+export interface TemplateProps {
+}
+export interface TemplateHeaderProps {
+    /** Flag to render an HTML header element. True by default. */
+    renderHeaderElement?: boolean;
+}
+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. */
+    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
+     * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+    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. */
+    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;
+    /** Render the `SkipNavigation` component or not. False by default. */
+    renderSkipNavigation?: boolean;
+}
+/**
+ * The main top-level parent component that wraps all template-related
+ * components.
+ */
+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
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+declare const TemplateAboveHeader: (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. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
+ */
+declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => 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 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;
+/**
+ * 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. If an HTML `<footer>` element is already passed in a
+ * custom component, set `renderFooterElement` to `false`.
+ */
+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"
+ * 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`.
+ */
+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

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

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

@@ -0,0 +1,79 @@
+import * as React from "react";
+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 {
+    /** 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?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes */
+    id: string;
+    /** Populates the HelperErrorText for the error state */
+    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 */
+    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 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. This prop is for all input types
+     * except for the `number` type. */
+    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. */
+    showHelperInvalidText?: boolean;
+    /** 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;
+    /** 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;
+}
+/**
+ * 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.
+ */
+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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export declare type ToggleSizes = "default" | "small";
+export interface ToggleProps {
+    /** 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. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The toggle's label. This will serve as the text content for the `<label>` element */
+    labelText: string;
+    /** 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;
+    /** 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.
+ */
+export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Toggle;

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+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` */
+    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?: 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; 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. Used to specify which video service is being used. */
+    videoType?: VideoPlayerTypes;
+}
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<VideoPlayerProps>) => JSX.Element, {}>;
+export default VideoPlayer;