@nypl/design-system-react-components 3.4.2 → 3.4.3-rc2

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

@@ -0,0 +1,13 @@
+export interface HeaderProps {
+    /** Whether to render sitewide alerts or not. True by default. */
+    fetchSitewideAlerts?: boolean;
+    /** 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/system/dist/system.types").ChakraComponent<({ fetchSitewideAlerts, isProduction }: HeaderProps) => import("react/jsx-runtime").JSX.Element, {}>;
+export default Header;

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

@@ -0,0 +1,12 @@
+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/system/dist/system.types").ChakraComponent<({ catalogRef, isMobile }: HeaderLoginProps) => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderLogin;

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

@@ -0,0 +1,10 @@
+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/system/dist/system.types").ChakraComponent<({ isMobile }: HeaderLoginButtonProps) => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderLoginButton;

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * 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/system/dist/system.types").ChakraComponent<() => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderMobileNavButton;

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

@@ -0,0 +1,9 @@
+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/system/dist/system.types").ChakraComponent<({ isMobile }: HeaderSearchButtonProps) => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderSearchButton;

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

@@ -0,0 +1,10 @@
+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/system/dist/system.types").ChakraComponent<({ isMobile }: HeaderSearchFormProps) => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderSearchForm;

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

@@ -0,0 +1,7 @@
+/**
+ * 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/system/dist/system.types").ChakraComponent<() => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderSitewideAlerts;

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

@@ -0,0 +1,7 @@
+/**
+ * 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/system/dist/system.types").ChakraComponent<() => import("react/jsx-runtime").JSX.Element, {}>;
+export default HeaderUpperNav;

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

@@ -0,0 +1,13 @@
+import * as 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("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const catalogLogOutURL = "https:/login.nypl.org/auth/logout?redirect_uri=";
+export declare const patLoggedInCookieExpiredTime = 1800000;
+declare function EncoreCatalogLogOutTimer(currentTime?: number, isTestMode?: boolean): void;
+export default EncoreCatalogLogOutTimer;

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

@@ -0,0 +1,70 @@
+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 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;
+}[];
+/**
+ * Returns the final URL for the NYPL Catalog search.
+ */
+export declare const getCatalogURL: (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[];
+/**
+ * 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;

package/dist/src/index.d.ts

@@ -35,6 +35,7 @@ export { default as FilterBarPopup, useFilterBarPopup, } from "./components/Filt
 export type { FilterBarPopupProps } from "./components/FilterBarPopup/FilterBarPopup";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export type { FormProps } from "./components/Form/Form";
+export { default as Header } from "./components/Header/Header";
 export { default as Heading } from "./components/Heading/Heading";
 export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";

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

@@ -0,0 +1,100 @@
+export declare const headerBlack = "#2b2b2b";
+export declare const headerBlue = "#1B7FA7";
+export declare const headerDarkBlue = "#135772";
+export declare const headerFocusColor = "#0F465C";
+export declare const headerLightBlue = "#78CCED";
+export declare const headerLightBlueIcon = "#1DA1D4";
+export declare const headerRed = "#ED1C24";
+export declare const headerRedDarkMode = "dark.ui.error.primary";
+export declare const headerRedDonate = "#E32B31";
+export declare const headerYellow = "#FEE34A";
+export declare const headerYellowDark = "#403B2D";
+export declare const headerFocus: {
+    borderRadius: string;
+    outlineColor: string;
+    outlineOffset: string;
+    outlineStyle: string;
+    outlineWidth: string;
+};
+declare const Header: {
+    parts: string[];
+    baseStyle: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        "& > nav li": {
+            marginBottom: string;
+        };
+        "& > nav a": {
+            lineHeight: string;
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+                _dark: {
+                    outlineColor: string;
+                };
+            };
+        };
+        a: {
+            _visited: {
+                color: string;
+            };
+        };
+        button: {
+            cursor: string;
+        };
+        container: {
+            paddingX: {
+                base: string;
+                mh: string;
+            };
+            paddingY: {
+                mh: string;
+            };
+            maxWidth: string;
+            minHeight: {
+                mh: string;
+            };
+            margin: string;
+        };
+        navContainer: {
+            height: {
+                mh: string;
+                lh: string;
+            };
+            gap: {
+                mh: string;
+                lh: string;
+            };
+        };
+        horizontalRule: {
+            bg: string;
+            marginTop: string;
+            marginBottom: string;
+            _dark: {
+                backgroundColor: string;
+            };
+        };
+        logo: {
+            lineHeight: string;
+            svg: {
+                height: {
+                    base: string;
+                    mh: string;
+                    lh: string;
+                };
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default Header;

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

@@ -0,0 +1,333 @@
+declare const HeaderLogin: {
+    parts: string[];
+    baseStyle: ({ patronName }: {
+        patronName: any;
+    }) => {
+        bg: {
+            base: string;
+            mh: string;
+        };
+        boxShadow: {
+            base: string;
+            mh: string;
+        };
+        display: {
+            base: string;
+            mh: string;
+        };
+        flexDirection: string;
+        left: {
+            base: string;
+            mh: any;
+        };
+        marginTop: {
+            mh: string;
+        };
+        minHeight: {
+            base: string;
+            mh: string;
+        };
+        minWidth: {
+            base: string;
+            mh: string;
+        };
+        position: string;
+        padding: {
+            base: string;
+            mh: string;
+        };
+        zIndex: string;
+        ul: {
+            display: {
+                base: string;
+                mh: string;
+            };
+            marginBottom: string;
+            marginTop: {
+                base: string;
+                mh: string;
+            };
+            width: string;
+            li: {
+                _first: {
+                    gridColumn: {
+                        base: string;
+                        mh: any;
+                    };
+                };
+                _last: {
+                    gridColumn: {
+                        base: string;
+                        mh: any;
+                    };
+                };
+            };
+        };
+        li: {
+            _first: {
+                marginEnd: {
+                    base: string;
+                    mh: string;
+                };
+                marginTop: {
+                    base: string;
+                    mh: string;
+                };
+                marginBottom: {
+                    mh: string;
+                };
+            };
+        };
+        "li a": {
+            alignItems: string;
+            border: {
+                base: string;
+                mh: string;
+            };
+            borderColor: string;
+            borderRadius: {
+                base: string;
+                mh: string;
+            };
+            bg: {
+                base: string;
+                mh: string;
+            };
+            color: string;
+            display: string;
+            fontSize: string;
+            fontWeight: string;
+            justifyContent: {
+                mh: string;
+            };
+            lineHeight: {
+                base: string;
+                mh: string;
+            };
+            marginTop: {
+                base: string;
+            };
+            minHeight: {
+                base: string;
+                mh: string;
+            };
+            padding: {
+                base: string;
+                mh: string;
+            };
+            textTransform: string;
+            whiteSpace: string;
+            width: string;
+            svg: {
+                marginRight: {
+                    base: string;
+                    mh: any;
+                };
+            };
+            span: {
+                width: {
+                    base: string;
+                    mh: string;
+                };
+            };
+            _hover: {
+                bg: {
+                    base: string;
+                    mh: string;
+                };
+                color: string;
+            };
+            _focus: {
+                borderRadius: {
+                    base: string;
+                    mh: string;
+                };
+                boxShadow: {
+                    base: any;
+                    mh: string;
+                };
+                outline: {
+                    base: string;
+                    mh: string;
+                };
+                outlineStyle: {
+                    base: string;
+                    mh: any;
+                };
+                outlineWidth: {
+                    base: string;
+                    mh: any;
+                };
+            };
+            _dark: {
+                bgColor: {
+                    base: string;
+                    mh: string;
+                };
+                color: {
+                    base: string;
+                    mh: string;
+                };
+                svg: {
+                    fill: {
+                        base: string;
+                        mh: string;
+                    };
+                };
+                _hover: {
+                    bgColor: {
+                        base: string;
+                        mh: string;
+                    };
+                    color: {
+                        base: string;
+                        mh: string;
+                    };
+                };
+            };
+            _visited: {
+                color: string;
+            };
+        };
+        patronGreeting: {
+            alignSelf: string;
+            color: string;
+            fontSize: {
+                base: string;
+                mh: string;
+            };
+            fontWeight: string;
+            lineHeight: string;
+            margin: {
+                base: string;
+                mh: string;
+            };
+            minHeight: {
+                base: string;
+                mh: string;
+            };
+            textAlign: string;
+            textTransform: string;
+            width: {
+                mh: string;
+            };
+            _focus: {
+                boxShadow: {
+                    base: any;
+                    mh: string;
+                };
+                outline: {
+                    base: string;
+                    mh: string;
+                };
+                outlineStyle: {
+                    base: string;
+                    mh: any;
+                };
+                outlineWidth: {
+                    base: string;
+                    mh: any;
+                };
+            };
+            ".greeting": {
+                fontStyle: string;
+                margin: {
+                    base: string;
+                    mh: string;
+                };
+            };
+            ".name": {
+                margin: number;
+            };
+        };
+        logoutButton: {
+            alignSelf: string;
+            bg: {
+                base: string;
+                mh: string;
+            };
+            borderRadius: {
+                base: string;
+                mh: string;
+            };
+            color: {
+                base: string;
+                mh: string;
+            };
+            fontSize: {
+                base: string;
+                mh: string;
+            };
+            marginTop: {
+                base: string;
+                mh: string;
+            };
+            marginBottom: {
+                base: string;
+                mh: string;
+            };
+            padding: {
+                base: string;
+                mh: any;
+            };
+            textDecoration: {
+                base: string;
+                mh: any;
+            };
+            textTransform: string;
+            width: {
+                base: string;
+                mh: string;
+            };
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                bg: {
+                    base: string;
+                    mh: string;
+                };
+                color: {
+                    base: string;
+                    mh: string;
+                };
+                textDecoration: {
+                    base: string;
+                    mh: any;
+                };
+            };
+            _focus: {
+                borderRadius: {
+                    base: string;
+                    mh: string;
+                };
+                boxShadow: {
+                    base: any;
+                    mh: string;
+                };
+                outline: {
+                    base: string;
+                    mh: string;
+                };
+                outlineStyle: {
+                    base: string;
+                    mh: any;
+                };
+                outlineWidth: {
+                    base: string;
+                    mh: any;
+                };
+            };
+            _dark: {
+                color: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export default HeaderLogin;