@nypl/design-system-react-components 1.2.2 → 1.3.0-rc

package/dist/components/FeedbackBox/FeedbackBox.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+declare type ViewType = "form" | "confirmation" | "error";
+interface FeedbackBoxProps {
+    /** Additional class name to add. */
+    className?: string;
+    /** Used to add additional information to the default confirmation message in
+     * the confirmation view. */
+    confirmationText?: string | JSX.Element;
+    /** Used to add description text above the form input fields in
+     * the initial/form view. */
+    descriptionText?: string | JSX.Element;
+    /** A data object containing key/value pairs that will be added to the form
+     * field submitted data. */
+    hiddenFields?: any;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Toggles the invalid state for the email field. */
+    isInvalidComment?: boolean;
+    /** Toggles the invalid state for the comment field. */
+    isInvalidEmail?: boolean;
+    /** Only used for internal purposes. */
+    isOpen?: boolean;
+    /** Used to add a notification above the description in the
+     * initial/form view.*/
+    notificationText?: string | JSX.Element;
+    /** Only used for internal purposes. */
+    onClose?: any;
+    /** Only used for internal purposes. */
+    onOpen?: any;
+    /** Callback function that will be invoked when the form is submitted.
+     * The returned data object contains key/value pairs including the
+     * values from the `hiddenFields` prop.
+     */
+    onSubmit: (values: {
+        [key: string]: string;
+    }) => any;
+    /** Toggles the category radio group field. */
+    showCategoryField?: boolean;
+    /** Toggles the email input field. When set to `true`, an additional
+     * confirmation message will be rendered. */
+    showEmailField?: boolean;
+    /** Used to populate the label on the open button and the `Drawer`'s
+     * header title. */
+    title: string;
+    /** Used to specify what screen should be displayed. */
+    view?: ViewType;
+}
+/**
+ * The `FeedbackBox` component renders a fixed-positioned button on the bottom
+ * right corner of a page that opens a Chakra `Drawer` popup component. Inside
+ * of the popup, a form is rendered with fields that allows users to provide
+ * feedback. The `FeedbackBox` component does *not* call any API with the
+ * submitted data; that feature is the responsibility of the consuming
+ * application.
+ */
+export declare const FeedbackBox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FeedbackBoxProps & React.RefAttributes<any>>, {}>;
+export declare function useFeedbackBox(): {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    FeedbackBox: import("@chakra-ui/react").ChakraComponent<(props: any) => JSX.Element, {}>;
+};
+export default FeedbackBox;

package/dist/components/FeedbackBox/useFeedbackBoxReducer.d.ts

@@ -0,0 +1,19 @@
+interface FeedbackBoxState {
+    category?: string;
+    comment: string;
+    email?: string;
+}
+/**
+ * DS internal helper reducer hook to manage internal state for the FeedbackBox
+ * component. Note: this custom hook is not tested directly as it's an
+ * implementation detail of the FeedbackBox component, following the guidance
+ * of RTL: https://testing-library.com/docs/example-react-hooks-useReducer
+ */
+declare function useFeedbackBoxReducer(): {
+    state: FeedbackBoxState;
+    setCategory: (category: string) => void;
+    setComment: (comment: string) => void;
+    setEmail: (email: string) => void;
+    clearValues: () => void;
+};
+export default useFeedbackBoxReducer;

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

@@ -1,7 +1,9 @@
 import React from "react";
+import iconColors from "./IconColors";
+import iconNames from "./IconNames";
 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 IconColors = typeof iconColors[number];
+export declare type IconNames = typeof iconNames[number];
 export declare type IconRotationTypes = "rotate0" | "rotate90" | "rotate180" | "rotate270";
 export declare type IconSizes = "default" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
 export declare type IconTypes = "default" | "breadcrumbs";

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

@@ -0,0 +1,3 @@
+declare const iconColors: readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.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", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
+export declare const getIconColors: () => readonly ["ui.black", "ui.white", "brand.primary", "brand.secondary", "ui.error.primary", "ui.error.secondary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.warning.primary", "ui.warning.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", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.warning.primary", "dark.ui.warning.secondary"];
+export default iconColors;

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

@@ -0,0 +1,3 @@
+declare const iconNames: readonly ["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 const getIconNames: () => readonly ["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 default iconNames;

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

@@ -11,9 +11,9 @@ export interface ListProps {
     id?: string;
     /** Display the list in a row. */
     inline?: boolean;
-    /** Data to render if children are not passed. For `listTypes` orderd `"ol"`
+    /** Data to render if children are not passed. For `listTypes` ordered `"ol"`
      * and unordered `"ul"` `List` types, the data structure is an array of strings
-     * to renders as `li` items. For descroption `"dl"` `List` types, the data
+     * to renders as `li` items. For description `"dl"` `List` types, the data
      * structure is an array of objects with `term` and `description` properties
      * to render `dt` and `dd` elements, respectively.
      */
@@ -34,4 +34,9 @@ export interface ListProps {
 export declare const List: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ListProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
+/**
+ * Checks for `li` elements and consoles a warning if the
+ * children are different HTML elements.
+ */
+export declare const checkListChildrenError: (children: React.ReactNode, listType?: string, componentName?: string) => void;
 export default List;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -1,20 +1,32 @@
 import * as React from "react";
 export interface DataTableProps {
-    /** Contrast and WCAG compliance data related to the color gray.xxxx-dark when
+    /** Contrast and WCAG compliance data related to the color ui.bg.page when
      * used with the current color. */
     dataBgPageColor: string[];
-    /** Contrast and WCAG compliance data related to the color gray.xxx-dark when
+    /** Contrast and WCAG compliance data related to the color ui.bg.default when
      * used with the current color. */
     dataBgDefaultColor: string[];
+    /** Contrast and WCAG compliance data related to the color dark.ui.bg.page when
+     * used with the current color. */
+    dataDarkBgPageColor: string[];
+    /** Contrast and WCAG compliance data related to the color dark.ui.bg.default when
+     * used with the current color. */
+    dataDarkBgDefaultColor: string[];
     /** Contrast and WCAG compliance data related to the color black when used
      * with the current color. */
     dataBlackColor: string[];
-    /** Contrast and WCAG compliance data related to the default color for
-     * heading elements when used with the current color. */
-    dataHeadingColor?: string[];
+    /** Contrast and WCAG compliance data related to the NYPL Brand primary color
+     * when used with the current color. */
+    dataBrandPrimaryColor: string[];
     /** Contrast and WCAG compliance data related to the default color for basic
      * text elements when used with the current color. */
-    dataBodyColor?: string[];
+    dataDarkBodyColor?: string[];
+    /** Contrast and WCAG compliance data related to the NYPL Brand secondary color
+     * when used with the current color. */
+    dataBrandSecondaryColor: string[];
+    /** Contrast and WCAG compliance data related to the default color for
+     * heading elements when used with the current color. */
+    dataDarkHeadingColor?: string[];
     /** Contrast and WCAG compliance data related to the color white when used
      * with the current color. */
     dataWhiteColor: string[];

package/dist/components/StyledList/StyledList.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { TextSizes } from "../Text/Text";
+export interface StyledListProps {
+    /** Any child node passed to the component. */
+    children?: React.ReactNode;
+    /** A class name for the StyledList parent div. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Data to render if `li` children elements are not passed. It must be an
+     * array of strings or JSX elements. */
+    listItems?: (string | JSX.Element)[];
+    /** The style used to render the StyledList component. For its initial release,
+     * there is only one variant style which is the default, "capped". */
+    style?: "capped";
+    /** The font size of the `li` elements. */
+    textSize?: TextSizes;
+}
+/**
+ * The `StyledList` component renders an HTML list with styles that do not
+ * adhere to traditional numbered and bulleted list styles. Unlike
+ * the `List` component, `StyledList` only renders an unordered list.
+ */
+export declare const StyledList: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StyledListProps & React.RefAttributes<HTMLDivElement & HTMLUListElement>>, {}>;
+export default StyledList;

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

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