@nypl/design-system-react-components 1.0.8 → 1.1.0-rc

package/dist/hooks/useCloseDropDown.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Close dropdowns when clicking outside of them or by pressing
+ * the escape key. It expects an action callback that will set
+ * the dropdown state to false (close).
+ */
+export declare const useCloseDropDown: (actionCb: (val: boolean) => void, ref: React.RefObject<HTMLDivElement>) => void;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { default as DatePicker, DatePickerTypes, FullDateType, } from "./compone
 export { default as DSProvider } from "./theme/provider";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
+export { default as Header } from "./components/Header/Header";
 export { default as Heading, HeadingSizes, HeadingLevels, } from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero, HeroTypes } from "./components/Hero/Hero";
@@ -48,3 +49,4 @@ export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useWindowSize } from "./hooks/useWindowSize";
 export { default as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
 export { default as Table } from "./components/Table/Table";
+export { default as Tooltip } from "./components/Tooltip/Tooltip";

package/dist/theme/components/footer.d.ts

@@ -0,0 +1,223 @@
+export declare const footerGray = "#54514A";
+declare const Footer: {
+    baseStyle: {
+        backgroundColor: string;
+        minHeight: {
+            base: string;
+            lg: string;
+        };
+        padding: {
+            base: string;
+            md: string;
+            lg: string;
+        };
+        position: string;
+        listsContainer: {
+            display: string;
+            flexDirection: {
+                base: string;
+                xl: string;
+            };
+            alignItems: {
+                base: string;
+                xl: string;
+            };
+            marginTop: string;
+            margin: {
+                md: string;
+            };
+            right: {
+                md: string;
+            };
+            position: {
+                md: string;
+            };
+        };
+        footerLinksList: {
+            fontSize: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            fontWeight: {
+                lg: string;
+            };
+            lineHeight: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            marginRight: {
+                xl: string;
+            };
+            order: {
+                base: string;
+                md: string;
+                xl: string;
+            };
+            textAlign: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+            li: {
+                float: {
+                    md: string;
+                };
+                marginTop: string;
+                width: {
+                    md: string;
+                    lg: string;
+                };
+                _first: {
+                    width: {
+                        md: string;
+                    };
+                    marginRight: {
+                        lg: string;
+                        xl: string;
+                    };
+                };
+                ":nth-child(2)": {
+                    marginRight: {
+                        lg: string;
+                        xl: string;
+                    };
+                };
+            };
+        };
+        footerLinksInner: {
+            li: {
+                _first: {
+                    position: string;
+                    height: string;
+                    width: string;
+                };
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+        };
+        socialMediaList: {
+            order: string;
+            margin: string;
+            marginTop: {
+                md: string;
+                xl: string;
+            };
+            textAlign: {
+                xl: string;
+            };
+            width: {
+                xl: string;
+            };
+            li: {
+                display: string;
+                width: string;
+                a: {
+                    display: string;
+                    color: string;
+                    fontSize: {
+                        base: string;
+                        md: string;
+                    };
+                    lineHeight: string;
+                    textDecoration: string;
+                    svg: {
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+        a: {
+            color: string;
+            fontWeight: string;
+            margin: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+            _focus: {
+                backgroundColor: string;
+                outline: string;
+                outlineColor: string;
+            };
+        };
+        svg: {
+            fill: string;
+        };
+        logoContainer: {
+            position: string;
+            top: {
+                base: string;
+                lg: string;
+            };
+            left: {
+                md: string;
+            };
+            svg: {
+                height: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+        nyplInfoContainer: {
+            color: string;
+            position: {
+                md: string;
+            };
+            left: {
+                md: string;
+            };
+            top: {
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            width: {
+                md: string;
+            };
+            img: {
+                bg: string;
+                height: string;
+                width: string;
+            };
+        };
+        copyright: {
+            margin: string;
+            fontSize: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            fontWeight: string;
+            textAlign: string;
+            p: {
+                margin: string;
+            };
+        };
+    };
+};
+export default Footer;

package/dist/theme/components/globalMixins.d.ts

@@ -2,13 +2,33 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
-declare const screenreaderOnly: {
+/**
+ * If the element that should be visually hidden should only be hidden on
+ * small screens, then pass in true for the `isMobileOnly` argument. Otherwise,
+ * this will set an element to always be visually hidden regardless of the
+ * screen size.
+ */
+declare const screenreaderOnly: (isMobileOnly?: boolean) => {
     clip: string;
-    height: string;
+    height: {
+        base: string;
+        md: string;
+    };
     overflow: string;
+    position: {
+        base: string;
+        md: string;
+    };
+    width: {
+        base: string;
+        md: string;
+    };
+    wordWrap: string;
+};
+declare const displayScreenreaderOnly: {
     position: string;
+    height: string;
     width: string;
-    wordWrap: string;
 };
 declare const wrapperStyles: {
     marginY: string;
@@ -17,4 +37,4 @@ declare const wrapperStyles: {
     padding: string;
     width: string;
 };
-export { screenreaderOnly, wrapperStyles };
+export { displayScreenreaderOnly, screenreaderOnly, wrapperStyles };

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

@@ -0,0 +1,66 @@
+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 headerRedDonate = "#E32B31";
+export declare const headerYellow = "#FEE34A";
+export declare const headerFocus: {
+    borderRadius: string;
+    outlineColor: string;
+    outlineOffset: string;
+    outlineStyle: string;
+    outlineWidth: string;
+};
+declare const Header: {
+    parts: string[];
+    baseStyle: {
+        fontFamily: string;
+        container: {
+            marginX: {
+                md: string;
+                xl: string;
+            };
+            maxWidth: string;
+            minHeight: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+        };
+        horizontalRule: {
+            bg: string;
+            marginTop: string;
+        };
+        logo: {
+            padding: {
+                base: string;
+                md: string;
+            };
+            svg: {
+                height: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    md: string;
+                    lg: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default Header;

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

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

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

@@ -0,0 +1,54 @@
+declare const HeaderLoginButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: {
+            base: string;
+        };
+        bg: {
+            base: string;
+            md: string;
+        };
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        minHeight: {
+            md: string;
+        };
+        padding: {
+            md: string;
+        };
+        svg: {
+            fill: string;
+            marginLeft: {
+                base: string;
+                md: string;
+            };
+            marginTop: {
+                base: string;
+            };
+        };
+        textDecoration: string;
+        textTransform: string;
+        _hover: {
+            backgroundColor: {
+                base: string;
+                md: string;
+            };
+            color: string;
+            svg: {
+                fill: string;
+            };
+            textDecoration: string;
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+    };
+};
+export default HeaderLoginButton;