@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -0,0 +1,20 @@
+declare const Text: {
+    baseStyle: (props: any) => {
+        fontStyle: string;
+        fontWeight: string;
+        marginBottom: string;
+    };
+    variants: {
+        default: {};
+        caption: {
+            fontSize: string;
+        };
+        tag: {
+            fontSize: string;
+        };
+        mini: {
+            fontSize: string;
+        };
+    };
+};
+export default Text;

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

@@ -0,0 +1,112 @@
+declare const TextInput: {
+    parts: string[];
+    baseStyle: {
+        helper: {
+            marginTop: string;
+            marginBottom: string;
+        };
+        input: {
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+        textarea: {
+            lineheight: string;
+            minHeight: string;
+            border: string;
+            borderColor: string;
+            borderRadius: string;
+            py: string;
+            px: string;
+            _hover: {
+                borderColor: string;
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                opacity: string;
+            };
+            _active: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _focus: {
+                border: string;
+                borderColor: string;
+                zIndex: string;
+                outline: string;
+                outlineColor: string;
+            };
+            _placeholder: {
+                color: string;
+                fontStyle: string;
+                lineHeight: string;
+            };
+            _invalid: {
+                border: string;
+                borderColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    variants: {
+        searchBar: {
+            flex: string;
+            input: {
+                borderRightRadius: string;
+            };
+        };
+        searchBarSelect: {
+            flex: string;
+            input: {
+                borderRadius: string;
+                borderTopLeftRadius: {
+                    base: string;
+                    md: string;
+                };
+                borderTopRightRadius: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+};
+export default TextInput;

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

@@ -0,0 +1,40 @@
+declare const VideoPlayer: {
+    baseStyle: {
+        inside: {
+            height: string;
+            overflow: string;
+            paddingBottom: string;
+            position: string;
+        };
+        iframe: {
+            height: string;
+            left: string;
+            margin: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        helperText: {
+            marginBottom: string;
+            marginTop: string;
+        };
+    };
+    variants: {
+        fourByThree: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+        invalid: {
+            backgroundColor: string;
+            height: string;
+            padding: string;
+        };
+        square: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+    };
+};
+export default VideoPlayer;

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,9 +6,14 @@
  */
 declare const global: {
     body: {
+        boxSizing: string;
         bg: string;
         color: string;
         fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        overflowX: string;
     };
     a: {
         color: string;
@@ -16,5 +21,8 @@ declare const global: {
     svg: {
         display: string;
     };
+    p: {
+        margin: string;
+    };
 };
 export default global;

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

@@ -0,0 +1,5 @@
+declare const radii: {
+    pill: string;
+    round: string;
+};
+export default radii;

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

@@ -0,0 +1,4 @@
+declare const shadows: {
+    outline: string;
+};
+export default shadows;

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

@@ -7,14 +7,14 @@
  * That'll give you 10. Then use it in your component.
  *
  * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
- *   --space-xxs = 4px or 0.25rem
- *   --space-xs = 8px or 0.5rem
- *   --space-s = 16px or 1rem
- *   --space-m = 24px or 1.5rem
- *   --space-l = 32px or 2rem
- *   --space-xl = 48px or 3rem
- *   --space-xxl = 64px or 4rem
- *   --space-xxxl = 96px or 6rem
+ *   --nypl-space-xxs = 4px or 0.25rem
+ *   --nypl-space-xs = 8px or 0.5rem
+ *   --nypl-space-s = 16px or 1rem
+ *   --nypl-space-m = 24px or 1.5rem
+ *   --nypl-space-l = 32px or 2rem
+ *   --nypl-space-xl = 48px or 3rem
+ *   --nypl-space-xxl = 64px or 4rem
+ *   --nypl-space-xxxl = 96px or 6rem
  *
  * @note Even though all the following values are available through Chakra,
  * we recommend to only use the spacing values that map to the DS values
@@ -22,14 +22,14 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        1            |         xxs       |   --space-xxs
- *        2            |         xs        |   --space-xs
- *        4            |         s         |   --space-s
- *        6            |         m         |   --space-m
- *        8            |         l         |   --space-l
- *        12           |         xl        |   --space-xl
- *        16           |         xxl       |   --space-xxl
- *        24           |         xxxl      |   --space-xxxl
+ *        1            |         xxs       |   --nypl-space-xxs
+ *        2            |         xs        |   --nypl-space-xs
+ *        4            |         s         |   --nypl-space-s
+ *        6            |         m         |   --nypl-space-m
+ *        8            |         l         |   --nypl-space-l
+ *        12           |         xl        |   --nypl-space-xl
+ *        16           |         xxl       |   --nypl-space-xxl
+ *        24           |         xxxl      |   --nypl-space-xxxl
  */
 export declare const spacing: {
     px: string;

package/dist/utils/utils.d.ts

@@ -4,3 +4,9 @@
  * `step` between values.
  */
 export declare const range: (start: number, stop: number, step?: number) => number[];
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
+export declare const getVariant: (variant: any, collection: any, fallback?: any) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.0",
+  "version": "0.25.4",
   "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,22 +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.6",
-    "@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",
@@ -77,77 +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/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);