@nypl/design-system-react-components 1.1.1 → 1.2.0-rc

package/dist/components/Accordion/Accordion.d.ts

@@ -12,6 +12,9 @@ export interface AccordionProps {
     id?: string;
     /** Whether the accordion is open by default only on its initial rendering */
     isDefaultOpen?: boolean;
+    /** Whether the contents of the Accordion should always be rendered.
+     *  Useful for form-components. `false` by default. */
+    isAlwaysRendered?: boolean;
     /** Sets max height of accordion panel. This value should be entered with the
      * formatting of a CSS height attribute (ex. 100px, 8rem). If height of content
      * within accordion panel is greater than height set by panelMaxHeight, a

package/dist/components/AlphabetFilter/AlphabetFilter.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface AlphabetFilterProps {
+    /** Array of letters to specify which `Button` components should be set in an `enabled`
+     * state. By default, all buttons are `enabled`. */
+    activeLetters?: string[];
+    /** A class name for the AlphabetFilter parent div. */
+    className?: string;
+    /** The currentLetter can be used to programatically set the selected letter without the
+     * user explicitly requesting it. */
+    currentLetter?: string;
+    /** Value used to set the text for a `Text` component that will be displayed above the letter buttons. */
+    descriptionText?: string | JSX.Element;
+    /** Value used to set the text for a `Heading` component. */
+    headingText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Adds the `disabled` prop to the AlphabetFilter when true. */
+    isDisabled?: boolean;
+    /** The callback function called when a letter button or the Show All button is clicked. */
+    onClick: (filterValue: string) => void;
+}
+export declare const AlphabetFilter: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AlphabetFilterProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default AlphabetFilter;

package/dist/components/AudioPlayer/AudioPlayer.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+declare const thirdPartyServices: readonly ["libsyn", "soundcloud", "spotify"];
+export declare type ThirdPartyAudioType = typeof thirdPartyServices[number];
+export declare type AudioType = ThirdPartyAudioType | "file";
+export interface AudioPlayerProps {
+    /** Required string used to specify the type of audio playback. */
+    audioType: AudioType;
+    /** Optional className you can add in addition to `audio-player`. */
+    className?: string;
+    /** Optional string to set the text for the audio player description. */
+    descriptionText?: string;
+    /** Optional string to set a code snippet provided by Libsyn, SoundCloud or Spotify; the
+     * `AudioPlayer` component will accept the `embedCode` prop or the `filePath` prop.
+     */
+    embedCode?: string;
+    /** Optional string to set the audio file, the path can be relative or absolute
+     * referring to a locally hosted file, or a fully qualified URL pointing to a locally hosted file
+     * or to another domain altogether.
+     * TODO: This prop won't be used until a future version.
+     */
+    /** Optional string to set the text for a `Heading` component. */
+    headingText?: string;
+    /** Optional string to set the text for a `HelperErrorText` component. */
+    helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional title to added to the `<iframe>` element for improved accessibility. If omitted, a
+     * generic title will be added.
+     */
+    iframeTitle?: string;
+}
+/**
+ * Renders an audio player from 3rd party services such as Libsyn, SoundCloud, and Spotify.
+ */
+export declare const AudioPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<AudioPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+/**
+ * Parse the embedCode string to a DOM object for proper formatted HTML element.
+ * We are only interested in the iframe element.
+ */
+export declare function parseIframeEmbedCode(embedCode: string | undefined): HTMLIFrameElement | undefined;
+export default AudioPlayer;

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 export declare type ButtonElementType = "submit" | "button" | "reset";
+export declare type ButtonSizes = "small" | "medium" | "large";
 export declare type ButtonTypes = "primary" | "secondary" | "text" | "callout" | "pill" | "noBrand" | "link";
 interface ButtonProps {
     /** The button variation to render based on the `ButtonTypes` type.*/
@@ -15,6 +16,8 @@ interface ButtonProps {
     mouseDown?: boolean;
     /** The action to perform on the `<button>`'s onClick function. */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** The size of the `Button`. */
+    size?: ButtonSizes;
     /** The HTML button type attribute. */
     type?: ButtonElementType;
 }

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -38,6 +38,8 @@ export interface CheckboxGroupProps {
     /** Whether or not to display the "(Required)" text in the label text.
      * True by default. */
     showRequiredLabel?: boolean;
+    /** The values to programmatically update the selected `Checkbox`es. */
+    value?: string[];
 }
 /**
  * Wrapper component to wrap `Checkbox` components. Can be displayed in a

package/dist/components/ComponentWrapper/ComponentWrapper.d.ts

@@ -6,7 +6,7 @@ export interface ComponentWrapperProps {
     /** A class name for the `div` parent element. */
     className?: string;
     /** Optional string to set the text for the component's description */
-    descriptionText?: string;
+    descriptionText?: string | JSX.Element;
     /** Optional string to set the text for a `Heading` component */
     headingText?: string;
     /** Optional string to set the text for a `HelperErrorText` component */

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

@@ -3,7 +3,7 @@ export declare type IconAlign = "left" | "right" | "none";
 export declare type IconColors = "ui.black" | "ui.white" | "brand.primary" | "brand.secondary" | "section.blogs.primary" | "section.blogs.secondary" | "section.books-and-more.primary" | "section.books-and-more.secondary" | "section.education.primary" | "section.education.secondary" | "section.locations.primary" | "section.locations.secondary" | "section.research.primary" | "section.research.secondary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.research-library.schwartzman" | "section.whats-on.primary" | "section.whats-on.secondary";
 export declare type IconNames = "accessibilityFull" | "accessibilityPartial" | "actionCheckCircle" | "actionCheckCircleFilled" | "actionExit" | "actionHelpDefault" | "actionHelpOutline" | "actionLaunch" | "actionPower" | "actionRegistration" | "actionSettings" | "alertNotificationImportant" | "alertWarningFilled" | "alertWarningOutline" | "arrow" | "building" | "check" | "clock" | "close" | "decorativeEnvelope" | "decorativeLibraryCard" | "decorativeShoppingBag" | "download" | "errorFilled" | "errorOutline" | "fileTypeAudio" | "fileTypeDoc" | "fileTypeGenericDoc" | "fileTypeImage" | "fileTypePdf" | "fileTypeSpreadsheet" | "fileTypeVideo" | "headset" | "legacyAccountFilled" | "legacyAccountUnfilled" | "legacySocialFacebook" | "legacySocialInstagram" | "legacySocialTwitter" | "legacySocialYoutube" | "locator" | "minus" | "plus" | "search" | "socialFacebook" | "socialInstagram" | "socialTumblr" | "socialTwitter" | "socialYoutube" | "speakerNotes" | "utilityAccountFilled" | "utilityAccountUnfilled" | "utilityHamburger" | "utilitySearch";
 export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
-export declare type IconSizes = "default" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+export declare type IconSizes = "default" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
 export declare type IconTypes = "default" | "breadcrumbs";
 export interface IconProps {
     /** Aligns the icon. */

package/dist/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeColor" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
 export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export interface LogoProps {
     /** Optional className that will be added to the parent element */

package/dist/components/Logo/LogoSvgs.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     mlnBlack: string;
     mlnColor: string;
     mlnWhite: string;
+    nycdoeColor: string;
     nyplFullBlack: string;
     nyplFullWhite: string;
     nyplLionBlack: string;

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

@@ -49,6 +49,8 @@ export interface SliderProps {
     showValues?: boolean;
     /** The amount to increase or decrease when using the slider thumb(s). */
     step?: number;
+    /** The value(s) to programmatically update the Slider or RangeSlider. */
+    value?: number | number[];
 }
 /**
  * The `Slider` component renders a singular value slider or a range slider

package/dist/components/TagSet/TagSet.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TagSetExploreProps } from "./TagSetExplore";
+import { TagSetFilterProps } from "./TagSetFilter";
+export interface BaseTagSetProps {
+    /** Additional class for the component. */
+    className?: string;
+}
+export declare type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
+export declare type TagSetProps = BaseTagSetProps & TagSetTypeProps;
+export declare function isFilterType(type: TagSetProps["type"]): type is "filter";
+/**
+ * This helper component wrapper renders a DS `Tooltip` component if the text is
+ * long or a React fragment. This assumes that the `label` prop is a rather
+ * simple single root JSX element, such as `<Link ...>....</Link>`.
+ */
+export declare const TooltipWrapper: ({ label, children, }: React.PropsWithChildren<{
+    label: any;
+}>) => JSX.Element;
+/**
+ * The `TagSet` component renders a group of individual tags which have two
+ * variants: "explore" and "filter". The "explore" tags are meant to be used for
+ * exploratory linkable elements, whereas the "filter" tags are used to display
+ * the filter values that were selected through another UI. Only "filter" tags
+ * can be dismissible.
+ *
+ * The width of a single tag will never be greater than 200px. If necessary, a
+ * tag’s label text will be truncated to keep a tag’s width at or below 200px.
+ * The full label text will be automatically revealed when the tag is hovered
+ * with a DS `Tooltip` component.
+ */
+export declare const TagSet: import("@chakra-ui/react").ChakraComponent<React.ElementType<TagSetProps>, TagSetProps>;
+export default TagSet;

package/dist/components/TagSet/TagSetExplore.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { IconNames } from "../Icons/Icon";
+export interface TagSetExploreDataProps {
+    /** The name of the SVG `Icon` to render before the tag label. */
+    iconName?: IconNames;
+    /** The content to display; should be a link-type component. */
+    label: JSX.Element;
+}
+export interface TagSetExploreProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the tags should be removable. */
+    isDismissible?: never;
+    /** The function to perform when a tag is clicked when `isDismissible` is true. */
+    onClick?: never;
+    /** The array of data to display as tags. */
+    tagSetData: TagSetExploreDataProps[];
+    /** The `TagSet` variant to render; "filter" by default. */
+    type: "explore";
+}
+/**
+ * The "explore" `TagSet` variant will always display the tags passed as data.
+ * The `label` property in the `tagSetData` prop should be set to a link-type
+ * JSX component for linking to specific content.
+ */
+export declare const TagSetExplore: import("@chakra-ui/react").ChakraComponent<(props: TagSetExploreProps) => JSX.Element, {}>;
+export default TagSetExplore;

package/dist/components/TagSet/TagSetFilter.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { IconNames } from "../Icons/Icon";
+export interface TagSetFilterDataProps {
+    /** The name of the SVG `Icon` to render before the tag label. */
+    iconName?: IconNames;
+    /** The string label to display. */
+    label: string;
+}
+export interface TagSetFilterProps {
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the tags should be removable. */
+    isDismissible?: boolean;
+    /** The function to perform when a tag is clicked when `isDismissible` is true. */
+    onClick?: (tagLabel: string) => void;
+    /** The array of data to display as tags. */
+    tagSetData: TagSetFilterDataProps[];
+    /** The `TagSet` variant to render; "filter" by default. */
+    type: "filter";
+}
+/**
+ * The "filter" `TagSet` variant will display tags that can be removed when
+ * `isDismissible` is true and they are clicked.
+ */
+export declare const TagSetFilter: import("@chakra-ui/react").ChakraComponent<(props: TagSetFilterProps) => JSX.Element, {}>;
+export default TagSetFilter;