@nypl/design-system-react-components 1.5.4 → 1.6.0-vite-rc-2

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

@@ -0,0 +1,342 @@
+import * as React from "react";
+export declare const colorContrastData: {
+    brand: {
+        primary: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+        secondary: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+    };
+    ui: {
+        black: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+        gray: {
+            xxxxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xxxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xxDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            xDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            dark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            semiDark: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            medium: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            semiMedium: {
+                dataBlackColor: any[];
+                dataWhiteColor: any[];
+                textColor: string;
+            };
+            lightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xLightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xxLightCool: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            lightWarm: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+            xLightWarm: {
+                dataBlackColor: string[];
+                dataWhiteColor: string[];
+                textColor: string;
+            };
+        };
+        white: {
+            dataBlackColor: string[];
+            dataWhiteColor: string[];
+            textColor: string;
+        };
+    };
+    dark: {
+        ui: {
+            gray: {
+                xxDark: {
+                    dataHeadingColor: string[];
+                    dataBodyColor: string[];
+                };
+                xDark: {
+                    dataHeadingColor: string[];
+                    dataBodyColor: string[];
+                };
+            };
+        };
+    };
+};
+export declare const cssVars: {
+    brand: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    blogs: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+    }[];
+    booksAndMore: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    education: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    locations: {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    research: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    researchLibraries: ({
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    })[];
+    whatsOn: ({
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    })[];
+    ui: ({
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+        dataBgPageColor?: undefined;
+        dataBgDefaultColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBgPageColor: string[];
+        dataBgDefaultColor: string[];
+        textColor: string;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBgPageColor: any[];
+        dataBgDefaultColor: any[];
+        textColor: string;
+        colorSource?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        dataBrandPrimaryColor: any[];
+        dataBrandSecondaryColor: any[];
+        dataBgPageColor: string[];
+        dataBgDefaultColor: any[];
+        textColor: string;
+    })[];
+    grayscaleRoot: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    grayscaleCool: {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        textColor: string;
+    }[];
+    grayscaleWarm: {
+        name: string;
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        textColor: string;
+    }[];
+    dark: ({
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataHeadingColor: string[];
+        dataBodyColor: string[];
+        textColor: string;
+        dataDarkBgPageColor?: undefined;
+        dataDarkBgDefaultColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        colorSource?: undefined;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        name: string;
+        dataDarkBgPageColor: string[];
+        dataDarkBgDefaultColor: string[];
+        dataBlackColor: string[];
+        dataWhiteColor: string[];
+        dataHeadingColor: string[];
+        dataBodyColor: string[];
+        textColor: string;
+        colorSource?: undefined;
+        dataBrandPrimaryColor?: undefined;
+        dataBrandSecondaryColor?: undefined;
+    } | {
+        colorSource: string;
+        name: string;
+        dataBlackColor: any[];
+        dataWhiteColor: any[];
+        dataBrandPrimaryColor: any[];
+        dataBrandSecondaryColor: any[];
+        dataDarkBgPageColor: any[];
+        dataDarkBgDefaultColor: any[];
+        textColor: string;
+        dataHeadingColor?: undefined;
+        dataBodyColor?: undefined;
+    })[];
+};
+export declare const makeColorCard: (data: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const getColorCards: (category: any) => any[];
+export interface DataTableProps {
+    /** 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 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 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. */
+    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[];
+    /** The color to use for text in the color card. */
+    textColor: string;
+}
+export interface ColorCardProps extends DataTableProps {
+    /** The backgroundColor of the color card. */
+    backgroundColor: string;
+    /** The name of a color's javascript theme object. */
+    colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
+}
+export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default ColorCard;

package/dist/{components → src/components}/StyledList/StyledList.d.ts

@@ -1,25 +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;
+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 → src/components}/Table/Table.d.ts

@@ -1,32 +1,32 @@
-import React from "react";
-export interface TableProps {
-    /** Additional class name for the `Table` component. */
-    className?: string;
-    /** Array of string values used to populate the `Table` column headers.
-     * For improved accessibility, column headers are required. */
-    columnHeaders: string[];
-    /** Hex value to set the background color of the column headers. */
-    columnHeadersBackgroundColor?: string;
-    /** Hex value to set the text color of the column headers. */
-    columnHeadersTextColor?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** If true, a border will be displayed between each row in the `Table`
-     * component. The default value is false. */
-    showRowDividers?: boolean;
-    /** Two-dimensional array used to populate the table rows. */
-    tableData: (string | JSX.Element)[][];
-    /** Displays `Table` title element. */
-    titleText?: string;
-    /** If true, the first cell of each row in the `Table` component will be
-     * visually styled as a header. The default value is false */
-    useRowHeaders?: boolean;
-}
-/**
- * Basic `Table` component used to organize and display tabular data in
- * rows and columns.
- */
-export declare const Table: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TableProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLTableElement>>, {}>;
-export default Table;
+import React from "react";
+export interface TableProps {
+    /** Additional class name for the `Table` component. */
+    className?: string;
+    /** Array of string values used to populate the `Table` column headers.
+     * For improved accessibility, column headers are required. */
+    columnHeaders: string[];
+    /** Hex value to set the background color of the column headers. */
+    columnHeadersBackgroundColor?: string;
+    /** Hex value to set the text color of the column headers. */
+    columnHeadersTextColor?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** If true, a border will be displayed between each row in the `Table`
+     * component. The default value is false. */
+    showRowDividers?: boolean;
+    /** Two-dimensional array used to populate the table rows. */
+    tableData: (string | JSX.Element)[][];
+    /** Displays `Table` title element. */
+    titleText?: string;
+    /** If true, the first cell of each row in the `Table` component will be
+     * visually styled as a header. The default value is false */
+    useRowHeaders?: boolean;
+}
+/**
+ * Basic `Table` component used to organize and display tabular data in
+ * rows and columns.
+ */
+export declare const Table: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TableProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableElement>>, {}>;
+export default Table;

package/dist/{components → src/components}/Tabs/Tabs.d.ts

@@ -1,28 +1,28 @@
-import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
-import React from "react";
-export interface TabsDataProps {
-    label: string;
-    content: string | React.ReactNode;
-}
-export interface TabsProps {
-    /** The index of the tab to display for controlled situations. */
-    defaultIndex?: number;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** The callback function invoked on every tab change event. */
-    onChange?: (index: number) => any;
-    /** Array of data to display */
-    tabsData?: TabsDataProps[];
-    /** Render a hash in the url for each tab. Only available when data is
-     * passed through the `data` props. */
-    useHash?: boolean;
-}
-/**
- * Renders Chakra's `Tab` component with specific variants, props,
- * and controlled styling.
- */
-export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export { TabList, Tab, TabPanels, TabPanel };
-export default Tabs;
+import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import React from "react";
+export interface TabsDataProps {
+    label: string;
+    content: string | React.ReactNode;
+}
+export interface TabsProps {
+    /** The index of the tab to display for controlled situations. */
+    defaultIndex?: number;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The callback function invoked on every tab change event. */
+    onChange?: (index: number) => any;
+    /** Array of data to display */
+    tabsData?: TabsDataProps[];
+    /** Render a hash in the url for each tab. Only available when data is
+     * passed through the `data` props. */
+    useHash?: boolean;
+}
+/**
+ * Renders Chakra's `Tab` component with specific variants, props,
+ * and controlled styling.
+ */
+export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;

package/dist/{components → src/components}/TagSet/TagSet.d.ts

@@ -1,32 +1,24 @@
-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;
+import React from "react";
+import { TagSetExploreProps } from "./TagSetExplore";
+import { TagSetFilterProps } from "./TagSetFilter";
+export interface BaseTagSetProps {
+    /** Additional class for the component. */
+    className?: string;
+}
+export type TagSetTypeProps = TagSetFilterProps | TagSetExploreProps;
+export type TagSetProps = BaseTagSetProps & TagSetTypeProps;
+export declare function isFilterType(type: TagSetProps["type"]): type is "filter";
+/**
+ * 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.ForwardRefExoticComponent<TagSetProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default TagSet;

package/dist/{components → src/components}/TagSet/TagSetExplore.d.ts

@@ -1,27 +1,28 @@
-/// <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;
+/// <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. This prop is not used in the "explore" variant. */
+    isDismissible?: never;
+    /** The function to perform when a tag is clicked when `isDismissible` is
+     * true.  This prop is not used in the "explore" variant.*/
+    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) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
+export default TagSetExplore;