@nypl/design-system-react-components 0.25.2 → 0.25.6

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

@@ -1,5 +1,6 @@
 declare const List: {
-    baseStyle: ({ noStyling }: {
+    baseStyle: ({ inline, noStyling }: {
+        inline: any;
         noStyling: any;
     }) => {
         margin: string;
@@ -7,7 +8,10 @@ declare const List: {
         marginInlineStart: string;
         paddingLeft: string;
         padding: string;
+        display: string;
         li: {
+            marginRight: string;
+            listStyleType: string;
             _notFirst: {
                 marginTop: string;
             };

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

@@ -20,19 +20,14 @@ declare const _default: {
                 maxWidth: string;
             };
             dismissibleButton: {
+                border: string;
                 alignItems: string;
                 bgColor: string;
                 color: string;
                 display: string;
-                height: {
-                    base: string;
-                    lg: string;
-                };
-                width: {
-                    base: string;
-                    lg: string;
-                };
-                padding: string;
+                height: string;
+                width: string;
+                minWidth: string;
                 position: string;
                 right: string;
                 top: string;
@@ -40,11 +35,6 @@ declare const _default: {
                     bg: string;
                 };
             };
-            dismissibleIcon: {
-                height: string;
-                marginRight: string;
-                width: string;
-            };
             icon: {
                 flexShrink: string;
                 marginRight: string;

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

@@ -0,0 +1,19 @@
+declare const Pagination: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        alignItems: string;
+        display: string;
+        width: string;
+        link: {
+            lineHeight: string;
+            textDecoration: string;
+        };
+        li: {
+            _first: {
+                marginTop: string;
+            };
+        };
+    };
+};
+export default Pagination;

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

@@ -0,0 +1,50 @@
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: {
+        darkMode: any;
+        size: any;
+    }) => {
+        color: string;
+        circular: {
+            svg: {
+                height: string;
+                width: string;
+                display: string;
+                circle: {
+                    _first: {
+                        stroke: string;
+                    };
+                    _last: {
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        circularContainer: {
+            alignItems: string;
+            display: string;
+            flexDirection: string;
+            width: string;
+        };
+        linear: {
+            "> div": {
+                bg: string;
+            };
+            flex: number;
+            bg: string;
+            height: {
+                base: string;
+                md: string;
+            };
+        };
+        linearContainer: {
+            display: string;
+            alignItems: string;
+        };
+        linearPercentage: {
+            padding: string;
+            flex: number;
+        };
+    };
+};
+export default ProgressIndicator;

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

@@ -0,0 +1,12 @@
+declare const RadioGroup: {
+    parts: string[];
+    baseStyle: {
+        helper: {
+            marginTop: string;
+        };
+        stack: {
+            width: string;
+        };
+    };
+};
+export default RadioGroup;

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

@@ -46,8 +46,17 @@ declare const Select: {
         searchbar: {
             select: {
                 flex: string;
-                borderRight: string;
-                borderRightRadius: string;
+                borderRightColor: {
+                    md: string;
+                };
+                borderRightRadius: {
+                    md: string;
+                };
+                _hover: {
+                    borderRightColor: {
+                        md: string;
+                    };
+                };
             };
         };
     };

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

@@ -0,0 +1,98 @@
+declare const SkeletonLoader: {
+    parts: string[];
+    baseStyle: ({ border, imageAspectRatio }: {
+        border: any;
+        imageAspectRatio: any;
+    }) => {
+        section: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+        image: {
+            boxSizing: string;
+            flexShrink: string;
+            height: string;
+            overflow: string;
+            paddingBottom: any;
+            position: string;
+            width: string;
+            borderRadius: string;
+            marginBottom: string;
+        };
+        container: {
+            marginTop: string;
+            width: string;
+        };
+        heading: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        content: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        button: {
+            height: string;
+            margin: string;
+            maxWidth: string;
+            width: string;
+        };
+        margin: string;
+        width: string;
+    };
+    variants: {
+        row: ({ imageAspectRatio, showImage }: {
+            imageAspectRatio: any;
+            showImage: any;
+        }) => {
+            alignItems: string;
+            display: {
+                md: string;
+            };
+            image: {
+                overflow: {
+                    md: string;
+                };
+                paddingBottom: {
+                    md: string;
+                };
+                position: {
+                    md: string;
+                };
+                width: {
+                    md: string;
+                };
+                height: {
+                    md: any;
+                };
+            };
+            container: {
+                marginLeft: {
+                    md: string;
+                };
+                marginTop: {
+                    md: string;
+                };
+            };
+            button: {
+                margin: {
+                    md: string;
+                };
+            };
+        };
+    };
+};
+declare const Skeleton: {
+    baseStyle: {
+        borderRadius: string;
+        background: string;
+        animation: string;
+    };
+};
+export { Skeleton, SkeletonLoader };

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

@@ -0,0 +1,51 @@
+declare const CustomSlider: {
+    parts: string[];
+    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+        isDisabled: any;
+        isInvalid: any;
+        isRangeSlider: any;
+        showBoxes: any;
+    }) => {
+        container: {
+            display: string;
+            alignItems: string;
+        };
+        helper: {
+            marginTop: string;
+        };
+        leftValue: {
+            marginLeft: string;
+            marginTop: string;
+            marginBottom: string;
+            marginRight: string;
+        };
+        rightValue: {
+            marginRight: string;
+            marginTop: string;
+            marginBottom: string;
+            marginLeft: string;
+        };
+        textInput: {
+            minWidth: string;
+            color: string;
+        };
+        filledTrack: {
+            bgColor: string;
+        };
+        track: {
+            bgColor: string;
+            _disabled: {
+                bgColor: string;
+            };
+        };
+        thumb: {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            _active: {
+                transform: string;
+            };
+        };
+    };
+};
+export default CustomSlider;

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

@@ -97,6 +97,14 @@ declare const TextInput: {
             flex: string;
             input: {
                 borderRadius: string;
+                borderTopLeftRadius: {
+                    base: string;
+                    md: string;
+                };
+                borderTopRightRadius: {
+                    base: string;
+                    md: string;
+                };
             };
         };
     };

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

@@ -6,16 +6,16 @@ declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
     "2xl": string;
 }>;
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

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

@@ -6,12 +6,14 @@
  */
 declare const global: {
     body: {
+        boxSizing: string;
         bg: string;
         color: string;
         fontFamily: string;
-        fontSize: number;
+        fontSize: string;
         fontWeight: string;
         lineHeight: string;
+        overflowX: string;
     };
     a: {
         color: string;
@@ -19,5 +21,8 @@ declare const global: {
     svg: {
         display: string;
     };
+    p: {
+        margin: string;
+    };
 };
 export default global;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.2",
+  "version": "0.25.6",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
     "src"
   ],
   "engines": {
-    "node": ">10"
+    "node": ">10 <=12.22"
   },
   "author": "NYPL",
   "license": "Apache-2.0",
@@ -34,23 +34,19 @@
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
-    "prebuild:storybook": "npm run test:generate-output",
-    "stylelint": "stylelint \"**/*.scss\""
+    "prebuild:storybook": "npm run test:generate-output"
   },
   "dependencies": {
-    "@chakra-ui/react": "1.6.8",
-    "@chakra-ui/system": "1.7.3",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@mdx-js/react": "^1.6.22",
-    "cpy-cli": "^3.1.1",
-    "framer-motion": "^4.1.17",
-    "he": "^1.2.0",
+    "@chakra-ui/react": "1.7.1",
+    "@chakra-ui/system": "1.8.1",
+    "@emotion/react": "11.4.1",
+    "@emotion/styled": "11.3.0",
+    "framer-motion": "4.1.17",
+    "he": "1.2.0",
     "react-datepicker": "4.1.1",
-    "react-uid": "^2.3.0",
-    "system-font-css": "^2.0.2",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
+    "system-font-css": "2.0.2",
+    "typescript": "4.3.5",
+    "uuid": "8.3.2"
   },
   "peerDependencies": {
     "react": ">=16.13.0",
@@ -78,78 +74,70 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@size-limit/preset-small-lib": "^5.0.1",
-    "@storybook/addon-a11y": "^6.2.9",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-jest": "^6.3.6",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
+    "@babel/core": "7.14.6",
+    "@mdx-js/react": "1.6.22",
+    "@size-limit/preset-small-lib": "5.0.1",
+    "@storybook/addon-a11y": "6.4.8",
+    "@storybook/addon-actions": "6.4.8",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-jest": "6.4.8",
+    "@storybook/addon-links": "6.4.8",
     "@storybook/addon-queryparams": "6.2.9",
-    "@storybook/addons": "^6.3.2",
-    "@storybook/react": "^6.3.2",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^13.2.1",
+    "@storybook/addons": "6.4.8",
+    "@storybook/react": "6.4.8",
+    "@svgr/rollup": "5.5.0",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.2.1",
     "@types/jest": "26.0.20",
-    "@types/jest-axe": "3.5.1",
-    "@types/jsdom": "^12.2.4",
-    "@types/node": "^12.7.12",
-    "@types/react": "^16.9.5",
-    "@types/testing-library__jest-dom": "^5.14.1",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.2",
-    "breakpoint-sass": "^2.7.1",
-    "css-loader": "^5.2.7",
-    "cssnano": "^5.0.7",
-    "eslint": "^7.31.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.8.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "gulp": "^4.0.2",
-    "gulp-scss-combine": "^1.0.0",
-    "husky": "^4.2.5",
-    "import-glob-loader": "^1.1.0",
-    "jest": "^27.0.6",
-    "jest-axe": "4.1.0",
-    "jsdom": "^15.2.1",
-    "node-sass": "^4.14.1",
-    "node-sass-glob-importer": "^5.3.2",
-    "normalize.css": "^8.0.1",
+    "@types/jest-axe": "3.5.3",
+    "@types/jsdom": "12.2.4",
+    "@types/node": "12.7.12",
+    "@types/react": "16.14.21",
+    "@types/testing-library__jest-dom": "5.14.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "autoprefixer": "9.8.6",
+    "babel-loader": "8.2.2",
+    "breakpoint-sass": "2.7.1",
+    "css-loader": "5.2.7",
+    "cssnano": "5.0.7",
+    "eslint": "7.31.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.8.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "gulp": "4.0.2",
+    "gulp-scss-combine": "1.0.0",
+    "husky": "4.2.5",
+    "import-glob-loader": "1.1.0",
+    "jest": "27.3.1",
+    "jest-axe": "5.0.1",
+    "jsdom": "15.2.1",
+    "node-sass": "4.14.1",
+    "node-sass-glob-importer": "5.3.2",
+    "normalize.css": "8.0.1",
     "postcss": "8.3.6",
-    "prettier": "2.1.1",
-    "pretty-quick": "^3.1.1",
+    "prettier": "2.4.1",
+    "pretty-quick": "3.1.1",
     "react": "16.14.0",
-    "react-autosuggest": "^10.0.2",
-    "react-docgen-typescript-loader": "^3.1.0",
+    "react-autosuggest": "10.0.2",
+    "react-docgen-typescript-loader": "3.1.0",
     "react-dom": "16.14.0",
-    "react-is": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.14.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "sass": "^1.35.1",
-    "sass-loader": "^8.0.2",
-    "semantic-release-slack-bot": "^2.1.0",
-    "size-limit": "^5.0.1",
-    "storybook-addon-designs": "^5.4.2",
-    "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-prettier": "^1.1.2",
-    "stylelint-scss": "^3.18.0",
-    "ts-jest": "^27.0.4",
-    "ts-loader": "^6.2.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.0"
+    "react-router-dom": "5.2.0",
+    "react-test-renderer": "16.14.0",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-svg": "2.0.0",
+    "sass": "1.35.1",
+    "sass-loader": "10.0.0",
+    "semantic-release-slack-bot": "2.1.0",
+    "size-limit": "5.0.1",
+    "storybook-addon-designs": "6.2.0",
+    "style-loader": "2.0.0",
+    "ts-jest": "27.0.4",
+    "tsdx": "0.14.1",
+    "tslib": "2.3.0"
   }
 }

package/src/__tests__/setup.ts

@@ -12,8 +12,8 @@ const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
 const { window } = jsdom;
 const exposedProperties = ["window", "navigator", "document"];
 
-global.window = window;
-global.document = window.document;
+(global as any).window = window;
+(global as any).document = window.document;
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === "undefined") {
     exposedProperties.push(property);