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

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

@@ -135,6 +135,12 @@ declare const _default: {
     socialInstagram: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;
+    socialPinterest: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+    socialSoundCloud: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
     socialTumblr: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
         title?: string;
     }>;

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

@@ -11,6 +11,8 @@ export interface LinkProps {
     /** ID used for accessibility purposes. */
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
+    /** Prop that sets the HTML attribute to target where the link should go. */
+    target?: "_blank" | "_parent" | "_self" | "_top";
     /** Controls the link visuals: action, button, backwards, forwards, or default. */
     type?: LinkTypes;
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
-export type ListTypes = "ol" | "ul" | "dl";
-interface DescriptionProps {
+export declare const listTypesArray: readonly ["ol", "ul", "dl"];
+export type ListTypes = typeof listTypesArray[number];
+export interface DescriptionProps {
     term: string;
     description: string | JSX.Element;
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
-export type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "digitalCollectionsBlack" | "digitalCollectionsWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeBlack" | "nycdoeColor" | "nycdoeWhite" | "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 type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
+import { logoNamesArray, logoSizesArray } from "./logoVariables";
+export type LogoNames = typeof logoNamesArray[number];
+export type LogoSizes = typeof logoSizesArray[number];
 export interface LogoProps {
     /** Optional className that will be added to the parent element */
     className?: string;

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

@@ -0,0 +1,2 @@
+export declare const logoNamesArray: readonly ["appleAppStoreBlack", "appleAppStoreWhite", "bplBlack", "bplWhite", "cleverBadgeColor", "cleverColor", "cleverWhite", "digitalCollectionsBlack", "digitalCollectionsWhite", "firstbookColor", "firstbookColorNegative", "googlePlayBlack", "lpaBlack", "lpaColor", "lpaWhite", "mlnBlack", "mlnColor", "mlnWhite", "nycdoeBlack", "nycdoeColor", "nycdoeWhite", "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 const logoSizesArray: readonly ["default", "xxsmall", "xsmall", "small", "medium", "large"];

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { PropsWithChildren } from "react";
 export declare const colorContrastData: {
     brand: {
         primary: {
@@ -337,6 +337,6 @@ export interface ColorCardProps extends DataTableProps {
     /** 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 declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ColorCard;

package/dist/src/index.d.ts

@@ -20,9 +20,7 @@ export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBo
 export type { FeedbackBoxViewType } from "./components/FeedbackBox/FeedbackBox";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as FilterBar } from "./components/FilterBar/FilterBar";
-export { default as Footer } from "./components/Footer/Footer";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { default as Header } from "./components/Header/Header";
 export { default as Heading } from "./components/Heading/Heading";
 export type { HeadingSizes, HeadingLevels } from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
@@ -38,7 +36,7 @@ export type { LayoutTypes } from "./helpers/types";
 export { default as Link } from "./components/Link/Link";
 export type { LinkTypes } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
-export type { ListTypes } from "./components/List/List";
+export type { DescriptionProps, ListTypes } from "./components/List/List";
 export { default as Logo } from "./components/Logo/Logo";
 export type { LogoNames, LogoSizes } from "./components/Logo/Logo";
 export { ModalTrigger, useModal } from "./components/Modal/Modal";

package/dist/src/theme/components/breadcrumb.d.ts

@@ -36,9 +36,15 @@ declare const Breadcrumb: {
             };
             ".chakra-breadcrumb__link": {
                 _hover: {
+                    color: string;
                     cursor: string;
                     textDecoration: string;
                 };
+                _dark: {
+                    _hover: {
+                        color: string;
+                    };
+                };
             };
             ".icon": {
                 display: string;
@@ -93,6 +99,13 @@ declare const Breadcrumb: {
                     };
                 };
             };
+            "li:last-child": {
+                ".chakra-breadcrumb__link": {
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
             svg: {
                 fill: string;
             };

package/dist/src/theme/components/select.d.ts

@@ -95,6 +95,7 @@ declare const Select: {
             _dark: {
                 backgroundColor: string;
                 borderColor: string;
+                color: string;
                 _hover: {
                     borderColor: string;
                 };

package/dist/src/theme/components/textInput.d.ts

@@ -299,6 +299,12 @@ declare const TextInput: {
             };
         };
         clearButton: {
+            borderRadius: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
+            height: string;
             position: string;
             top: string;
             px: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.6.0-vite-rc-2",
+  "version": "1.6.0-vite-rc-4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -57,13 +57,11 @@
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@charlietango/use-native-lazy-loading": "1.10.0",
-    "@emotion/react": ">=11.4.1",
-    "@emotion/styled": ">=11.3.0",
+    "@emotion/react": "11.4.1",
+    "@emotion/styled": "11.3.0",
     "downshift": "6.1.7",
     "framer-motion": "4.1.17",
-    "js-cookie": "3.0.1",
     "react-datepicker": "4.1.1",
-    "react-ga": "3.3.1",
     "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
     "tough-cookie": "4.0.0",
@@ -74,8 +72,8 @@
     "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
-    "@emotion/react": ">=11.4.1",
-    "@emotion/styled": ">=11.3.0",
+    "@emotion/react": "11.4.1",
+    "@emotion/styled": "11.3.0",
     "framer-motion": "4.1.17",
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0",
@@ -86,15 +84,15 @@
     "@jest/core": "27.3.1",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-typescript": "11.0.0",
-    "@storybook/addon-a11y": "7.0.4",
-    "@storybook/addon-essentials": "7.0.4",
-    "@storybook/addon-interactions": "7.0.4",
-    "@storybook/addon-jest": "7.0.4",
-    "@storybook/addon-links": "7.0.4",
-    "@storybook/blocks": "7.0.4",
-    "@storybook/react": "7.0.4",
-    "@storybook/react-vite": "7.0.4",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-a11y": "7.0.18",
+    "@storybook/addon-essentials": "7.0.18",
+    "@storybook/addon-interactions": "7.0.18",
+    "@storybook/addon-jest": "7.0.18",
+    "@storybook/addon-links": "7.0.18",
+    "@storybook/blocks": "7.0.18",
+    "@storybook/react": "7.0.18",
+    "@storybook/react-vite": "7.0.18",
+    "@storybook/testing-library": "0.1.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.14.1",
@@ -132,7 +130,7 @@
     "remark-gfm": "3.0.1",
     "sass": "1.60.0",
     "sass-loader": "10.0.0",
-    "storybook": "7.0.4",
+    "storybook": "7.0.18",
     "storybook-addon-designs": "7.0.0-beta.2",
     "style-loader": "2.0.0",
     "ts-jest": "29.0.5",

package/dist/src/components/Footer/Footer.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-interface FooterProps {
-    /** Additional class name to add. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-}
-/**
- * This `Footer` component renders the NYPL-branded footer elements such
- * as navigational NYPL.org links, social media links, copyright, and
- * NYPL building facade image.
- */
-export declare const Footer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Footer;

package/dist/src/components/Footer/footerLinks.d.ts

@@ -1,12 +0,0 @@
-declare const link: {
-    nyplLinks: {
-        text: string;
-        href: string;
-    }[][];
-    socialMedia: {
-        href: string;
-        iconName: string;
-        title: string;
-    }[];
-};
-export default link;

package/dist/src/components/Header/Header.d.ts

@@ -1,21 +0,0 @@
-export interface GAOptionProps {
-    debug?: boolean;
-    standardImplementation?: boolean;
-    testMode?: boolean;
-    titleCase?: boolean;
-}
-export interface HeaderProps {
-    /** Whether to render sitewide alerts or not. True by default. */
-    fetchSitewideAlerts?: boolean;
-    /** Google Analytics options to override the default settings. */
-    gaOptions?: GAOptionProps;
-    /** Whether or not the `Header` is in production mode. True by default. */
-    isProduction?: boolean;
-}
-/**
- * The NYPL `Header` component is the top-level component of the site. It
- * contains features for logging in, logging out, searching, and navigating
- * the NYPL.org site.
- */
-export declare const Header: import("@chakra-ui/react").ChakraComponent<({ fetchSitewideAlerts, gaOptions, isProduction, }: HeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default Header;

package/dist/src/components/Header/components/HeaderLogin.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export interface HeaderLoginProps {
-    catalogRef?: React.RefObject<HTMLDivElement & HTMLAnchorElement>;
-    isMobile?: boolean;
-}
-/**
- * The content of the login dropdown menu. Initially, this renders links to log
- * in and log out. When the patron is logged in, it will also display the patron's
- * name, links to the catalogs, and a log out link.
- */
-declare const HeaderLogin: import("@chakra-ui/react").ChakraComponent<({ catalogRef, isMobile }: HeaderLoginProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderLogin;

package/dist/src/components/Header/components/HeaderLoginButton.d.ts

@@ -1,10 +0,0 @@
-export interface HeaderLoginButtonProps {
-    isMobile?: boolean;
-}
-/**
- * This is the button that will render the login menu when it is clicked
- * and keep focus trapped within the menu. Its display text will be "Log In"
- * when the user is not logged in and "My Account" when the user is logged in.
- */
-declare const HeaderLoginButton: import("@chakra-ui/react").ChakraComponent<({ isMobile }: HeaderLoginButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderLoginButton;

package/dist/src/components/Header/components/HeaderLowerNav.d.ts

@@ -1,6 +0,0 @@
-/**
- * This component renders the navigational list of links used to
- * navigate to different landing pages on NYPL.org.
- */
-declare const HeaderLowerNav: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderLowerNav;

package/dist/src/components/Header/components/HeaderMobileIconNav.d.ts

@@ -1,6 +0,0 @@
-/**
- * This component renders the mobile list of icon buttons for
- * logging in, searching, and navigating on NYPL.org.
- */
-declare const HeaderMobileIconNav: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderMobileIconNav;

package/dist/src/components/Header/components/HeaderMobileNav.d.ts

@@ -1,6 +0,0 @@
-/**
- * This component renders the navigational list of links used to navigate
- * NYPL.org for mobile devices.
- */
-declare const HeaderMobileNav: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderMobileNav;

package/dist/src/components/Header/components/HeaderMobileNavButton.d.ts

@@ -1,6 +0,0 @@
-/**
- * This is the button that will render the navigational list of links
- * when it is clicked and keep focus trapped within the menu.
- */
-declare const HeaderMobileNavButton: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderMobileNavButton;

package/dist/src/components/Header/components/HeaderSearchButton.d.ts

@@ -1,9 +0,0 @@
-export interface HeaderSearchButtonProps {
-    isMobile?: boolean;
-}
-/**
- * This is the button that will render the search form when it is clicked and
- * keep focus trapped within the menu.
- */
-declare const HeaderSearchButton: import("@chakra-ui/react").ChakraComponent<({ isMobile }: HeaderSearchButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderSearchButton;

package/dist/src/components/Header/components/HeaderSearchForm.d.ts

@@ -1,10 +0,0 @@
-export interface HeaderSearchFormProps {
-    isMobile?: boolean;
-}
-export type SearchOptionType = "circulatingCatalog" | "researchCatalog" | "website";
-/**
- * Displays the search form for the Header's search interface. On mobile, two
- * buttons are displayed and on desktop, two radio inputs are displayed.
- */
-declare const HeaderSearchForm: import("@chakra-ui/react").ChakraComponent<({ isMobile }: HeaderSearchFormProps) => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderSearchForm;

package/dist/src/components/Header/components/HeaderSitewideAlerts.d.ts

@@ -1,7 +0,0 @@
-/**
- * The HeaderSitewideAlerts component makes an API request to an NYPL API
- * endpoint to fetch NYPL sitewide alerts. While this component can be used in
- * isolation, it is already rendered in the DS Header component.
- */
-export declare const HeaderSitewideAlerts: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderSitewideAlerts;

package/dist/src/components/Header/components/HeaderUpperNav.d.ts

@@ -1,7 +0,0 @@
-/**
- * This renders the navigational list of links for logging in, subscribing
- * to the email service, going to the Locations page, getting a Library card,
- * donating, and shopping at NYPL.
- */
-declare const HeaderUpperNav: import("@chakra-ui/react").ChakraComponent<() => import("@emotion/react/jsx-runtime").JSX.Element, {}>;
-export default HeaderUpperNav;

package/dist/src/components/Header/context/headerContext.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-/**
- * Context used for patron and production status data.
- */
-export declare const HeaderContext: React.Context<any>;
-/**
- * Context Provider used only in the Header component.
- */
-export declare const HeaderProvider: ({ children, isProduction, patronName, }: {
-    children: any;
-    isProduction?: boolean;
-    patronName?: string;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/components/Header/utils/googleAnalyticsUtils.d.ts

@@ -1,16 +0,0 @@
-export declare const envConfig: {
-    production: string;
-    development: string;
-};
-export declare const gaConfig: {
-    eventCategory: string;
-    eventAction: string;
-    customDimensions: {
-        dimension1: string;
-        dimension2: string;
-        dimension4: string;
-        dimension5: string;
-    };
-};
-declare const gaUtils: any;
-export default gaUtils;

package/dist/src/components/Header/utils/headerUtils.d.ts

@@ -1,94 +0,0 @@
-export interface Alert {
-    id: string;
-    link: string;
-    description: string;
-    startDate: string;
-    endDate: string;
-}
-export declare const alertsApiUrl = "https://refinery.nypl.org/api/nypl/ndo/v0.1/content/alerts?filter%5Bscope%5D=all";
-export declare const patronApiUrl = "https://platform.nypl.org/api/v0.1/auth/patron/tokens/";
-export declare const tokenRefreshLink: (isProduction?: boolean) => string;
-export declare const getLoginLinks: (patronName?: string, isProduction?: boolean) => {
-    catalogLink: string;
-    researchLink: string;
-    logOutLink: string;
-};
-export declare const upperNavLinks: {
-    locations: {
-        href: string;
-        text: string;
-    };
-    libraryCard: {
-        href: string;
-        text: string;
-    };
-    emailUpdates: {
-        href: string;
-        text: string;
-    };
-    donate: {
-        href: string;
-        text: string;
-    };
-    shop: {
-        href: string;
-        text: string;
-    };
-};
-export declare const siteNavLinks: {
-    href: string;
-    text: string;
-}[];
-/**
- * Replaces the search string's special characters that need to be encoded
- * using base64. These characters are "=","/", "\", "?".
- */
-export declare const encoreEncodeSearchString: (searchString: any) => any;
-/**
- * Returns the final URL for the NYPL Encore search.
- */
-export declare const getEncoreCatalogURL: (searchValue: any) => any;
-/**
- * Returns the final URL for the NYPL Research Catalog search.
- */
-export declare const getResearchCatalogURL: (searchValue: any) => string;
-/**
- * Returns the final URL for the NYPL catalog search.
- */
-export declare const getNYPLSearchURL: (searchString: any) => string;
-/**
- * The `alertsApiUrl` fetches NYPL alerts from the Refinery API. This API
- * returns JSONAPI-formatted data. We could use a better JSONAPI parser, but
- * this is the only endpoint we will use that is JSONAPI. Eventually, this
- * endpoint will be replaced. This function parses the JSONAPI data in a very
- * naive and quick way to get the necessary alerts data. The data is then
- * filtered to include active alerts.
- */
-export declare const parseAlertsData: (data: any) => Alert[];
-/**
- * `refreshAccessToken` attempts to refresh the "nyplIdentityPatron" cookie's
- * `accessToken` by making a request to the `tokenRefreshLink`. If successful,
- * it tries to fetch the patron's data again.
- */
-export declare const refreshAccessToken: (api: any, cb: any, fallBackCb: any) => void;
-/**
- * getCookieValue uses the js.cookie package to get the value
- * of the "nyplIdentityPatron" cookie (if it exists) and extract
- * the cookie's `access_token`.
- */
-export declare const getCookieValue: () => {
-    cookieValue: any;
-    accessToken: any;
-};
-export declare const deleteCookieValue: () => void;
-/**
- * getLoginData uses the `patronApiUrl` combined with the
- * `accessToken` from the "nyplIdentityPatron" cookie to fetch
- * the patron's information from the server.
- */
-export declare const getLoginData: (accessToken: any, cb: any) => void;
-/**
- * `extractPatronName` locates and returns the `patronName`
- * from the nested object that is returned from `getLoginData`.
- */
-export declare const extractPatronName: (data: any) => any;