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

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;

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

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

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

@@ -0,0 +1,78 @@
+declare const HeaderLowerNav: {
+    baseStyle: {
+        ul: {
+            alignItems: string;
+            marginBottom: string;
+            marginLeft: string;
+            whiteSpace: string;
+        };
+        li: {
+            marginEnd: {
+                mh: string;
+                xl: string;
+            };
+            _last: {
+                marginRight: string;
+            };
+        };
+        "li > a": {
+            color: string;
+            fontSize: {
+                base: string;
+                lh: string;
+            };
+            fontWeight: string;
+            textDecoration: string;
+            _hover: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+                _dark: {
+                    color: string;
+                };
+            };
+            _focus: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+                _dark: {
+                    color: string;
+                };
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _dark: {
+                color: string;
+                _hover: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                };
+                _focus: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+            };
+        };
+    };
+};
+export default HeaderLowerNav;

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

@@ -0,0 +1,28 @@
+declare const HeaderMobileIconNav: {
+    baseStyle: {
+        button: {
+            minHeight: string;
+            minWidth: string;
+        };
+        "> a": {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            minHeight: string;
+            minWidth: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        _dark: {
+            svg: {
+                fill: string;
+            };
+        };
+    };
+};
+export default HeaderMobileIconNav;

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

@@ -0,0 +1,92 @@
+declare const HeaderMobileNav: {
+    parts: string[];
+    baseStyle: () => {
+        backgroundColor: string;
+        color: string;
+        left: string;
+        minHeight: string;
+        position: string;
+        whiteSpace: string;
+        width: string;
+        zIndex: string;
+        logo: {
+            marginTop: string;
+            marginLeft: string;
+        };
+        sideNav: {
+            lineHeight: string;
+            marginBottom: string;
+            padding: string;
+            textAlign: string;
+            "li:not(:first-child)": {
+                marginTop: string;
+            };
+            a: {
+                color: string;
+                fontSize: string;
+                fontWeight: string;
+                textDecoration: string;
+                _hover: {
+                    color: string;
+                    textDecoration: string;
+                };
+                _focus: {
+                    outlineColor: string;
+                    borderRadius: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _visited: {
+                    color: string;
+                };
+            };
+        };
+        bottomLinks: {
+            display: string;
+            gridTemplateColumns: string;
+            a: {
+                alignItems: string;
+                color: string;
+                display: string;
+                fontWeight: string;
+                justifyContent: string;
+                textDecoration: string;
+                paddingY: string;
+                paddingLeft: string;
+                svg: {
+                    marginRight: string;
+                };
+                _hover: {
+                    color: string;
+                    backgroundColor: string;
+                    textDecoration: string;
+                };
+                _focus: {
+                    outlineColor: string;
+                    borderRadius: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _visited: {
+                    color: string;
+                };
+                _last: {
+                    backgroundColor: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _dark: {
+                        bgColor: string;
+                        color: string;
+                        _hover: {
+                            bgColor: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};
+export default HeaderMobileNav;