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

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

@@ -0,0 +1,38 @@
+declare const HeaderLowerNav: {
+    baseStyle: {
+        ul: {
+            alignItems: string;
+            fontSize: string;
+            marginBottom: string;
+            marginLeft: string;
+            whiteSpace: string;
+        };
+        li: {
+            letterSpacing: string;
+            marginLeft: string;
+        };
+        "li > a": {
+            color: string;
+            fontWeight: string;
+            textDecoration: string;
+            _hover: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+            };
+            _focus: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default HeaderLowerNav;

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

@@ -0,0 +1,23 @@
+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;
+            };
+        };
+    };
+};
+export default HeaderMobileIconNav;

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

@@ -0,0 +1,79 @@
+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;
+                };
+            };
+        };
+        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;
+                };
+                _last: {
+                    backgroundColor: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export default HeaderMobileNav;

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

@@ -0,0 +1,28 @@
+declare const HeaderMobileNavButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        svg: {
+            fill: string;
+            marginLeft: string;
+        };
+        _hover: {
+            backgroundColor: string;
+            svg: {
+                fill: string;
+            };
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+    };
+};
+export default HeaderMobileNavButton;

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

@@ -0,0 +1,56 @@
+declare const HeaderSearchButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: string;
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        minHeight: {
+            md: string;
+        };
+        minWidth: {
+            md: string;
+        };
+        textDecoration: string;
+        span: {
+            alignItems: string;
+            borderBottom: {
+                md: string;
+            };
+            display: string;
+            lineHeight: string;
+        };
+        svg: {
+            marginLeft: {
+                base: string;
+                md: string;
+            };
+            color: {
+                base: string;
+                md: string;
+            };
+        };
+        _hover: {
+            backgroundColor: string;
+            color: string;
+            textDecoration: string;
+            svg: {
+                fill: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+    };
+};
+export default HeaderSearchButton;

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

@@ -0,0 +1,168 @@
+declare const HeaderSearchForm: {
+    parts: string[];
+    baseStyle: {
+        color: string;
+        backgroundColor: string;
+        left: string;
+        minHeight: {
+            base: string;
+            md: string;
+        };
+        position: string;
+        whiteSpace: string;
+        width: string;
+        zIndex: string;
+        svg: {
+            color: string;
+            fill: string;
+            marginTop: string;
+        };
+        form: {
+            margin: {
+                md: string;
+            };
+            maxWidth: {
+                md: string;
+            };
+            whiteSpace: string;
+            "> div": {
+                marginLeft: {
+                    md: string;
+                    lg: string;
+                };
+                marginRight: {
+                    md: string;
+                };
+            };
+        };
+        fieldset: {
+            margin: {
+                base: string;
+                md: string;
+            };
+        };
+        textInput: {
+            label: {
+                fontSize: {
+                    md: string;
+                };
+            };
+            input: {
+                borderRadius: {
+                    md: string;
+                };
+                color: string;
+                minHeight: {
+                    base: string;
+                    md: string;
+                };
+                paddingLeft: {
+                    base: string;
+                    md: string;
+                };
+                _placeholder: {
+                    fontSize: {
+                        base: string;
+                    };
+                    fontStyle: string;
+                };
+                _focus: {
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _hover: {
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+            };
+        };
+        mobileSearchIcon: {
+            display: {
+                md: string;
+            };
+            fill: string;
+            left: string;
+            position: string;
+            top: string;
+        };
+        desktopSearchBtn: {
+            alignSelf: string;
+            backgroundColor: string;
+            borderRadius: string;
+            borderWidth: string;
+            height: string;
+            maxHeight: string;
+            width: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _hover: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+                backgroundColor: string;
+            };
+        };
+        radio: {
+            backgroundColor: string;
+            border: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _hover: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        ".chakra-radio": {
+            alignItems: string;
+        };
+        ".chakra-radio__label": {
+            fontSize: string;
+            fontWeight: string;
+        };
+        mobileBtns: {
+            alignItems: string;
+            backgroundColor: string;
+            borderRadius: string;
+            display: string;
+            fontSize: string;
+            flex: string;
+            padding: string;
+            svg: {
+                fill: string;
+                marginLeft: string;
+            };
+            _hover: {
+                backgroundColor: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default HeaderSearchForm;

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

@@ -0,0 +1,27 @@
+declare const SitewideAlerts: {
+    baseStyle: {
+        backgroundColor: string;
+        borderBottom: {
+            base: string;
+            md: string;
+        };
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        minHeight: {
+            base: string;
+            md: string;
+        };
+        paddingX: string;
+        ul: {
+            marginBottom: string;
+            a: {
+                textDecoration: string;
+            };
+            p: {
+                marginBottom: string;
+            };
+        };
+    };
+};
+export default SitewideAlerts;

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

@@ -0,0 +1,57 @@
+declare const HeaderUpperNav: {
+    parts: string[];
+    baseStyle: {
+        ul: {
+            alignItems: string;
+            display: string;
+            marginTop: string;
+            whiteSpace: string;
+        };
+        li: {
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            marginRight: string;
+            position: string;
+            textTransform: string;
+        };
+        a: {
+            color: string;
+            padding: string;
+            position: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        svg: {
+            marginTop: string;
+        };
+        emailUpdatesLink: {
+            display: string;
+            alignItems: string;
+        };
+        donateLink: {
+            alignItems: string;
+            bg: string;
+            borderRadius: string;
+            color: string;
+            fontWeight: string;
+            maxHeight: string;
+            paddingX: string;
+            width: string;
+            _hover: {
+                bg: string;
+            };
+        };
+    };
+};
+export default HeaderUpperNav;

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

@@ -85,10 +85,19 @@ declare const Radio: {
         };
         hiddenLabel: {
             clip: string;
-            height: string;
+            height: {
+                base: string;
+                md: string;
+            };
             overflow: string;
-            position: string;
-            width: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
             wordWrap: string;
         };
     };

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

@@ -0,0 +1,13 @@
+declare const Tooltip: {
+    baseStyle: {
+        [x: string]: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        marginBottom: string;
+        maxWidth: string;
+        px: string;
+        py: string;
+    };
+};
+export default Tooltip;

package/dist/theme/foundations/radii.d.ts

@@ -1,5 +1,6 @@
 declare const radii: {
     checkbox: string;
+    headerDonate: string;
     pill: string;
     round: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.8",
+  "version": "1.1.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -56,18 +56,22 @@
     }
   ],
   "dependencies": {
+    "@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",
     "@charlietango/use-native-lazy-loading": "1.10.0",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
     "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",
     "typescript": "*"
   },
   "peerDependencies": {
+    "@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",
@@ -136,6 +140,7 @@
     "size-limit": "5.0.1",
     "storybook-addon-designs": "6.2.1",
     "style-loader": "2.0.0",
+    "tough-cookie": "4.0.0",
     "ts-jest": "27.0.4",
     "tsdx": "0.14.1",
     "tslib": "2.3.0"