@nypl/design-system-react-components 1.0.7 → 1.1.0-rc2

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/skipNavigation.d.ts

@@ -12,10 +12,10 @@ declare const SkipNavigation: {
             top: string;
             width: string;
             _focus: {
-                border: string;
                 height: string;
                 left: string;
-                padding: string;
+                paddingX: string;
+                paddingY: string;
                 top: string;
                 width: string;
             };

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

@@ -1,74 +1,62 @@
+/**
+ * Grid layout based on https://www.joshwcomeau.com/css/full-bleed/
+ */
 declare const _default: {
     Template: {
         baseStyle: {
             boxSizing: string;
             color: string;
-            overflowX: string;
-            "*": {
-                boxSizing: string;
-            };
-            "*::after": {
-                boxSizing: string;
-            };
-            "*::before": {
-                boxSizing: string;
-            };
+            display: string;
+            gridTemplateColumns: string;
+            rowGap: string;
         };
         sizes: {};
         defaultProps: {};
     };
-    TemplateHeader: {
-        baseStyle: {
-            marginBottom: string;
-        };
-    };
     TemplateBreakout: {
         baseStyle: {
             width: string;
-            marginBottom: string;
-            marginEnd: string;
-            marginStart: string;
+            gridColumn: string;
         };
     };
     TemplateContent: {
         baseStyle: {
+            gridColumn: string;
             display: string;
-            marginBottom: string;
-            marginY: number;
-            marginX: string;
-            maxWidth: string;
-            paddingTop: number;
-            paddingBottom: number;
-            paddingEnd: string;
-            paddingStart: string;
-            width: string;
+            gridTemplateColumns: string;
+            paddingY: number;
+            paddingX: string;
+            gap: string;
         };
         variants: {
-            sidebar: {
-                display: string;
-                flexFlow: {
-                    base: string;
+            left: {
+                gridTemplateColumns: {
+                    md: string;
+                };
+            };
+            right: {
+                gridTemplateColumns: {
                     md: string;
                 };
             };
         };
     };
-    TemplateContentTop: {
+    TemplateContentTopBottom: {
         baseStyle: {
-            flex: string;
-            marginBottom: string;
+            gridColumn: {
+                base: string;
+                md: string;
+            };
+            height: string;
         };
     };
     TemplateContentPrimary: {
-        baseStyle: {
-            flex: string;
-            marginBottom: string;
-        };
         variants: {
             left: {
-                display: string;
-                flexFlow: string;
-                order: string;
+                gridColumn: {
+                    base: string;
+                    md: string;
+                };
                 marginEnd: {
                     md: number;
                 };
@@ -79,26 +67,13 @@ declare const _default: {
         };
     };
     TemplateContentSidebar: {
-        baseStyle: {
-            flex: {
-                base: string;
-                md: string;
-            };
-            order: {
-                md: string;
-            };
-            marginBottom: string;
-        };
         variants: {
             left: {
-                marginEnd: {
-                    base: number;
-                    md: string;
-                };
+                gridColumn: string;
             };
             right: {
-                marginStart: {
-                    base: number;
+                gridColumn: {
+                    base: string;
                     md: 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.7",
+  "version": "1.1.0-rc2",
   "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"