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

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,79 @@
+import React from "react";
+import { DatePickerTypes } from "./DatePickerTypes";
+import { TextInputRefType } from "../TextInput/TextInput";
+interface FullDateType {
+    startDate: Date;
+    endDate?: Date;
+}
+interface DateRangeRowProps {
+    /** Whether to render a single date input or two for a range of two dates. */
+    dateRange?: boolean;
+}
+interface DatePickerWrapperProps extends DateRangeRowProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Passed to the `TextInput` component to render a label associated with an input field. */
+    labelText: string;
+    /** Offers the ability to show the label onscreen or hide it. */
+    showLabel?: boolean;
+    /** Additional className for use with BEM. See how to work with blockNames and
+     * BEM here: http://getbem.com/introduction/ */
+    className?: string;
+}
+export interface DatePickerProps extends DatePickerWrapperProps {
+    /** DatePicker date types that can be rendered. */
+    dateType?: DatePickerTypes;
+    /** The date format to display. Defaults to "yyyy-MM-dd". */
+    dateFormat?: string;
+    /** Populates the `HelperErrorText` component in this component. */
+    helperText?: string;
+    /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
+    helperTextFrom?: string;
+    /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
+    helperTextTo?: string;
+    /** The initial date value. This must be in the mm/dd/yyyy format. */
+    initialDate?: string;
+    /** The initialTo date value used for date ranges.
+     * This must be in the mm/dd/yyyy format.
+     */
+    initialDateTo?: string;
+    /** The minimum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format.
+     */
+    minDate?: string;
+    /** The maximum date value that applies to both input fields.
+     * This must be in the mm/dd/yyyy format.
+     */
+    maxDate?: string;
+    /** Populates the `HelperErrorText` error state for both "From" and "To" input components. */
+    invalidText?: string;
+    /** Helper for modifiers array; adds 'isInvalid' styling. */
+    isInvalid?: boolean;
+    /** Adds the 'required' property to the input element(s). */
+    required?: boolean;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    showOptReqLabel?: boolean;
+    /** Adds the 'disabled' property to the input element(s). */
+    isDisabled?: boolean;
+    /** Modifiers array for use with BEM. See how to work with modifiers and BEM
+     * here: http://getbem.com/introduction/ */
+    modifiers?: string[];
+    /** BlockName for use with BEM. See how to work with blockNames and BEM
+     * here: http://getbem.com/introduction/ */
+    blockName?: string;
+    /** Value name for the single input field or the "From" input field in a date range. */
+    nameFrom?: string;
+    /** Value name for the "To" input field */
+    nameTo?: string;
+    /** An additional explicit React ref passed for a date range's "From" input field. */
+    refTo?: React.Ref<TextInputRefType>;
+    /** The action to perform on the `input`'s onChange function for both fields.
+     * This will return the data in an object with `startDate` and `endDate` keys.
+     */
+    onChange?: (data: FullDateType) => void;
+}
+/**
+ * Returns a single date input field or two date input fields for a date range.
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<TextInputRefType>>;
+export default DatePicker;

package/dist/components/DatePicker/DatePickerTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum DatePickerTypes {
+    Full = "full",
+    Month = "month",
+    Year = "year"
+}

package/dist/components/Form/Form.d.ts

@@ -1,20 +1,28 @@
 import * as React from "react";
+import { FormSpacing } from "./FormTypes";
+export interface FormChildProps {
+    /** className to be applied to FormRow */
+    className?: string;
+    /** Spacing size (internal use) */
+    gap?: FormSpacing;
+    /** ID that other components can cross reference (internal use) */
+    id?: string;
+}
 export interface FormProps {
     /** Optional form `action` attribute */
     action?: string;
-    /** Optional additional attributes passed to the `<form>` element */
-    attributes?: {
-        [key: string]: any;
-    };
     /** Optional className you can add in addition to `form` */
     className?: string;
     /** Optional ID that other components can cross reference */
     id?: string;
     /** Optional form `method` attribute */
     method?: "get" | "post";
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
+    spacing?: FormSpacing;
 }
-export declare function FormRow(props: any): JSX.Element;
-export declare function FormField(props: any): JSX.Element;
+/** FormRow child-component */
+export declare function FormRow(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+/** FormField child-component */
+export declare function FormField(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
+/** main Form component */
 export default function Form(props: React.ComponentProps<"form"> & FormProps): JSX.Element;

package/dist/components/Form/FormTypes.d.ts

@@ -0,0 +1,2 @@
+import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+export { FormSpacing };

package/dist/components/Grid/GridTypes.d.ts

@@ -0,0 +1,9 @@
+export declare enum GridGaps {
+    ExtraExtraSmall = "xxs",
+    ExtraSmall = "xs",
+    Small = "s",
+    Medium = "m",
+    Large = "l",
+    ExtraLarge = "xl",
+    ExtraExtraLarge = "xxl"
+}

package/dist/components/Grid/SimpleGrid.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { GridGaps } from "./GridTypes";
+export interface SimpleGridProps {
+    /** Additional class name. */
+    className?: string;
+    /** Optional numeric value to override the default column count; the default column count is 3 */
+    columns?: number;
+    /** Optional gap size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for standard grid layouts, this prop should not be used``` */
+    gap?: GridGaps;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+}
+declare function SimpleGrid(props: React.PropsWithChildren<SimpleGridProps>): JSX.Element;
+export default SimpleGrid;

package/dist/components/Heading/Heading.d.ts

@@ -1,18 +1,18 @@
 import * as React from "react";
-import { HeadingDisplaySizes } from "./HeadingDisplaySizes";
+import { HeadingDisplaySizes, HeadingLevels } from "./HeadingTypes";
 export interface HeadingProps {
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
     /** Optional className that appears in addition to `heading` */
     className?: string;
     /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
     displaySize?: HeadingDisplaySizes;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Number 1-6; used to create the `<h*>` tag */
-    level: number;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
+    /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
+    level?: HeadingLevels;
+    /** Optionally pass in additional Chakra-based styles. */
+    sx?: {
+        [key: string]: any;
+    };
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */
@@ -20,7 +20,5 @@ export interface HeadingProps {
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;
 }
-export default function Heading(props: React.PropsWithChildren<HeadingProps>): React.ReactElement<{
-    className: string;
-    id: string;
-}, string | ((props: any) => React.ReactElement<any, any>) | (new (props: any) => React.Component<any, any, any>)>;
+declare function Heading(props: React.PropsWithChildren<HeadingProps>): JSX.Element;
+export default Heading;

package/dist/components/Heading/{HeadingDisplaySizes.d.ts → HeadingTypes.d.ts}

@@ -4,3 +4,11 @@ export declare enum HeadingDisplaySizes {
     Tertiary = "tertiary",
     Callout = "callout"
 }
+export declare enum HeadingLevels {
+    One = 1,
+    Two = 2,
+    Three = 3,
+    Four = 4,
+    Five = 5,
+    Six = 6
+}

package/dist/components/HelperErrorText/HelperErrorText.stories.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import HelperErrorText from "./HelperErrorText";
 declare const _default: {
-    title: string;
+    title: any;
     component: typeof HelperErrorText;
 };
 export default _default;

package/dist/components/Hero/Hero.d.ts

@@ -1,27 +1,32 @@
 import * as React from "react";
 import { HeroTypes } from "./HeroTypes";
 export interface HeroProps {
-    /** Optional hex color value used to override the default background color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+    /** Optional hex color value used to override the default background
+     * color for a given `Hero` variation.
+     * Note: not all `Hero` variations utilize this prop. */
     backgroundColor?: string;
-    /** Optional path to an image that will be used as a background image for the `Hero` component; Note: not all `Hero` variations utilize this prop */
+    /** Optional path to an image that will be used as a background image for the
+     * `Hero` component.
+     * Note: not all `Hero` variations utilize this prop. */
     backgroundImageSrc?: string;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Optional className that appears in addition to `hero` */
-    className?: string;
-    /** Optional hex color value used to override the default text color for a given `Hero` variation; Note: not all `Hero` variations utilize this prop */
+    /** Optional hex color value used to override the default text color for a
+     * given `Hero` variation.
+     * Note: not all `Hero` variations utilize this prop. */
     foregroundColor?: string;
-    /** Required heading element. */
+    /** Optional heading element. */
     heading?: JSX.Element;
     /** Used to control how the `Hero` component will be rendered. */
     heroType?: HeroTypes;
-    /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN `Hero` types; Note: `image` can only be used in conjunction with `backgroundImageSrc` for CAMPAIGN Hero type; Note: not all `Hero` variations utilize this prop */
+    /** Optional `Image` component used for SECONDARY, FIFTYFIFTY and CAMPAIGN
+     * `Hero` types; Note: `image` can only be used in conjunction with
+     * `backgroundImageSrc` for CAMPAIGN the `Hero` type.
+     * Note: not all `Hero` variations utilize this prop. */
     image?: JSX.Element;
-    /** Optional details area that contains location data; Note: not all `Hero` variations utilize this prop */
+    /** Optional details area that contains location data.
+     * Note: not all `Hero` variations utilize this prop. */
     locationDetails?: JSX.Element;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional string used for the subheader that displays underneath the heading element */
-    subHeaderText?: JSX.Element;
+    /** Optional string used for the subheader that displays
+     * underneath the heading element. */
+    subHeaderText?: string | JSX.Element;
 }
 export default function Hero(props: React.PropsWithChildren<HeroProps>): JSX.Element;

package/dist/components/Hero/HeroTypes.d.ts

@@ -1,7 +1,12 @@
 export declare enum HeroTypes {
-    Campaign = "CAMPAIGN",
-    FiftyFifty = "FIFTYFIFTY",
-    Primary = "PRIMARY",
-    Secondary = "SECONDARY",
-    Tertiary = "TERTIARY"
+    Primary = "primary",
+    Secondary = "secondary",
+    SecondaryBooksAndMore = "secondaryBooksAndMore",
+    SecondaryLocations = "secondaryLocations",
+    SecondaryResearch = "secondaryResearch",
+    SecondaryWhatsOn = "secondaryWhatsOn",
+    Tertiary = "tertiary",
+    Campaign = "campaign",
+    FiftyFifty = "fiftyfifty"
 }
+export declare const HeroSecondaryTypes: HeroTypes[];

package/dist/components/Icons/Icon.d.ts

@@ -1,28 +1,25 @@
 import * as React from "react";
-import { IconRotationTypes, IconNames, LogoNames, IconColors, IconSizes } from "./IconTypes";
+import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, LogoNames } from "./IconTypes";
 export interface IconProps {
-    /** Additional attributes to pass to the `<svg>` tag. */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** 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[];
+    /** Aligns the icon. */
+    align?: IconAlign;
     /** className that appears in addition to "icon" */
     className?: string;
-    /** Icons designated as decorative will be ignored by screenreaders */
+    /** Overrides default icon color (black). */
+    color?: IconColors;
+    /** Icons designated as decorative will be ignored by screenreaders. True
+     * by default. */
     decorative?: boolean;
-    /** This text will be added as a child `<title>` element inside the `<svg>` tag.  It is recommended to do this for increased accessibility. */
-    titleText?: string;
     /** Rotates the icon clockwise in increments of 90deg */
     iconRotation?: IconRotationTypes;
-    /** Overrides default icon color (black). */
-    color?: IconColors;
-    /** Sets the icon size. */
-    size?: IconSizes;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
     /** The name of the icon you want to use. */
     name?: IconNames | LogoNames;
+    /** Sets the icon size. */
+    size?: IconSizes;
+    /** Sets the icon variant type. */
+    type?: IconTypes;
 }
 /**
  * Renders SVG-based icons.

package/dist/components/Icons/IconSvgs.d.ts

@@ -34,5 +34,9 @@ declare const _default: {
     snfl_negative: string;
     snfl_positive: string;
     speaker_notes: string;
+    utility_account_filled: string;
+    utility_account_unfilled: string;
+    utility_hamburger: string;
+    utility_search: string;
 };
 export default _default;

package/dist/components/Icons/IconTypes.d.ts

@@ -1,67 +1,85 @@
-export declare enum IconRotationTypes {
-    rotate0 = "rotate-0",
-    rotate90 = "rotate-90",
-    rotate180 = "rotate-180",
-    rotate270 = "rotate-270"
+export declare enum IconAlign {
+    Left = "left",
+    Right = "right",
+    None = "none"
 }
-export declare enum IconNames {
-    accessibility_full = "accessibility_full",
-    accessibility_partial = "accessibility_partial",
-    arrow = "arrow",
-    check = "check",
-    clock = "clock",
-    close = "close",
-    download = "download",
-    error_filled = "error_filled",
-    error_outline = "error_outline",
-    headset = "headset",
-    minus = "minus",
-    plus = "plus",
-    search = "search",
-    speaker_notes = "speaker_notes"
+export declare enum IconTypes {
+    Default = "default",
+    Breadcrumbs = "breadcrumbs"
 }
-export declare enum LogoNames {
-    brooklyn = "brooklyn",
-    logo_brooklyn = "logo_brooklyn",
-    logo_nypl = "logo_nypl",
-    logo_nypl_negative = "logo_nypl_negative",
-    logo_queens = "logo_queens",
-    lpa_negative = "lpa_negative",
-    lpa_positive = "lpa_positive",
-    nypl_circle_negative = "nypl_circle_negative",
-    nypl_circle_positive = "nypl_circle_positive",
-    nypl_full_lock_up_negative = "nypl_full_lock_up_negative",
-    nypl_full_lock_up = "nypl_full_lock_up",
-    nypl_no_lion_negative = "nypl_no_lion_negative",
-    nypl_no_lion_positive = "nypl_no_lion_positive",
-    queens_long = "queens_long",
-    queens_stacked = "queens_stacked",
-    schomburg_circle = "schomburg_circle",
-    schomburg_positive = "schomburg_positive",
-    simplye_black = "simplye_black",
-    simplye_color = "simplye_color",
-    snfl_negative = "snfl_negative",
-    snfl_positive = "snfl_positive"
+export declare enum IconRotationTypes {
+    Rotate0 = "rotate0",
+    Rotate90 = "rotate90",
+    Rotate180 = "rotate180",
+    Rotate270 = "rotate270"
 }
 export declare enum IconColors {
-    ui_black = "ui-black",
-    ui_white = "ui-white",
-    brand_primary = "brand-primary",
-    brand_secondary = "brand-secondary",
-    section_whats_on_primary = "section-whats-on-primary",
-    section_books_and_more_primary = "section-books-and-more-primary",
-    section_research_primary = "section-research-primary",
-    section_research_secondary = "section-research-secondary",
-    section_locations_primary = "section-locations-primary",
-    section_research_library_lpa = "section-research-library-lpa",
-    section_research_library_schomburg = "section-research-library-schomburg",
-    section_research_library_schwartzman = "section-research-library-schwartzman"
+    UiBlack = "ui.black",
+    UiWhite = "ui.white",
+    BrandPrimary = "brand.primary",
+    BrandSecondary = "brand.secondary",
+    SectionWhatsOnPrimary = "section.whats-on.primary",
+    SectionWhatsOnSecondary = "section.whats-on.secondary",
+    SectionBooksAndMorePrimary = "section.books-and-more.primary",
+    SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
+    SectionResearchPrimary = "section.research.primary",
+    SectionResearchSecondary = "section.research.secondary",
+    SectionLocationsPrimary = "section.locations.primary",
+    SectionLocationsSecondary = "section.locations.secondary",
+    SectionBlogsPrimary = "section.blogs.primary",
+    SectionBlogsSecondary = "section.blogs.secondary",
+    SectionResearchLibraryLpa = "section.research-library.lpa",
+    SectionResearchLibrarySchomburg = "section.research-library.schomburg",
+    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
 }
 export declare enum IconSizes {
-    small = "small",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
+    Small = "small",
+    Medium = "medium",
+    Large = "large",
+    ExtraLarge = "xlarge",
+    ExtraExtraLarge = "xxlarge",
+    ExtraExtraExtraLarge = "xxxlarge"
+}
+export declare enum IconNames {
+    AccessibilityFull = "accessibility_full",
+    AccessibilityPartial = "accessibility_partial",
+    Arrow = "arrow",
+    Check = "check",
+    Clock = "clock",
+    Close = "close",
+    Download = "download",
+    ErrorFilled = "error_filled",
+    ErrorOutline = "error_outline",
+    Headset = "headset",
+    Minus = "minus",
+    Plus = "plus",
+    Search = "search",
+    SpeakerNotes = "speaker_notes",
+    UtilityAccountFilled = "utility_account_filled",
+    UtilityAccountUnfilled = "utility_account_unfilled",
+    UtilityHamburger = "utility_hamburger",
+    UtilitySearch = "utility_search"
+}
+export declare enum LogoNames {
+    Brooklyn = "brooklyn",
+    LogoBrooklyn = "logo_brooklyn",
+    LogoNypl = "logo_nypl",
+    LogoNyplNegative = "logo_nypl_negative",
+    LogoQueens = "logo_queens",
+    LpaNegative = "lpa_negative",
+    LpaPositive = "lpa_positive",
+    NyplCircleNegative = "nypl_circle_negative",
+    NyplCirclePositive = "nypl_circle_positive",
+    NyplFullLockUpNegative = "nypl_full_lock_up_negative",
+    NyplFullLockUp = "nypl_full_lock_up",
+    NyplNoLionNegative = "nypl_no_lion_negative",
+    NyplNoLionPositive = "nypl_no_lion_positive",
+    QueensLong = "queens_long",
+    QueensStacked = "queens_stacked",
+    SchomburgCircle = "schomburg_circle",
+    SchomburgPositive = "schomburg_positive",
+    SimplyeBlack = "simplye_black",
+    SimplyeColor = "simplye_color",
+    SnflNegative = "snfl_negative",
+    SnflPositive = "snfl_positive"
 }

package/dist/components/Image/Image.stories.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import Image from "./Image";
 declare const _default: {
-    title: string;
+    title: any;
     component: typeof Image;
 };
 export default _default;

package/dist/components/Label/Label.d.ts

@@ -1,33 +1,17 @@
 import * as React from "react";
-export interface LabelOptions {
-    labelContent?: JSX.Element;
-    id?: string;
-    htmlFor?: string;
-}
+declare type optReqFlagType = "Required" | "Optional" | "" | undefined;
 interface LabelProps {
-    /** Additional attributes to pass to the <label> tag */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** 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 "label" */
+    /** Additional CSS class name to render in the `label` element. */
     className?: string;
-    /** The id of the html element that this Label is describing */
-    htmlFor?: string;
+    /** The id of the html element that this `Label` is describing. */
+    htmlFor: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Modifiers for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Displays "Required" or "Optional" string alongside label */
-    optReqFlag?: string;
+    /** Displays "Required" or "Optional" string alongside the label */
+    optReqFlag?: optReqFlagType;
 }
-/** A Label for form inputs.
- * It should never be used alone.
+/**
+ * A label for form inputs. It should never be used alone.
  */
-export default function Label(props: React.PropsWithChildren<LabelProps>): React.DetailedReactHTMLElement<{
-    id: string;
-    htmlFor: string;
-    className: string;
-}, HTMLElement>;
-export {};
+declare function Label(props: React.PropsWithChildren<LabelProps>): JSX.Element;
+export default Label;

package/dist/components/Link/Link.d.ts

@@ -5,24 +5,20 @@ export interface LinkProps {
     attributes?: {
         [key: string]: any;
     };
-    /** 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 "link" */
+    /** Any child node passed to the component. */
+    children: React.ReactNode;
+    /** Additional class name to render in the `Link` component. */
     className?: string;
-    /** Href attribute */
+    /** The `href` attribute for the anchor element. */
     href?: string;
-    /** ID */
+    /** ID used for accessibility purposes. */
     id?: string;
-    /** Controls the link visuals—action, button, or default. */
+    /** Controls the link visuals: action, button, backwards, forwards, or default. */
     type?: LinkTypes;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Any child node passed to the component. */
-    children: React.ReactNode;
 }
 /**
- * A component that uses an `href` prop or a child anchor element, to create an
- * anchor element with added styling and conventions.
+ * A component that uses an `href` prop or a child anchor element, to create
+ * an anchor element with added styling and conventions.
  */
 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/dist/components/List/List.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const animalCrossingDefinitions: {
     term: string;
     definition: string;