@nypl/design-system-react-components 1.0.3 → 1.0.6

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

@@ -9,8 +9,8 @@ declare const StructuredContent: {
         h1: {
             width: string;
             marginTop: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;
@@ -19,8 +19,8 @@ declare const StructuredContent: {
         h2: {
             width: string;
             marginTop: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -28,8 +28,8 @@ declare const StructuredContent: {
         h3: {
             width: string;
             marginTop: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -37,8 +37,8 @@ declare const StructuredContent: {
         h4: {
             width: string;
             marginTop: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -46,8 +46,8 @@ declare const StructuredContent: {
         fallback: {
             width: string;
             marginTop: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -56,23 +56,23 @@ declare const StructuredContent: {
             marginBottom: string;
             maxWidth?: string;
             float: string[];
-            marginLeft: string[];
-            marginRight: string[];
+            marginStart: string[];
+            marginEnd: string[];
             width: string;
         };
         imageWrapper: {
             marginBottom: string;
             maxWidth?: string;
             float: string[];
-            marginLeft: string[];
-            marginRight: string[];
+            marginStart: string[];
+            marginEnd: string[];
             width: string;
         };
         image: {
             maxWidth?: string;
             float: string[];
-            marginLeft: string[];
-            marginRight: string[];
+            marginStart: string[];
+            marginEnd: string[];
             marginBottom: string;
         };
         /** The following styles are meant to target HTML elements that are
@@ -102,14 +102,14 @@ declare const StructuredContent: {
                     fontWeight: string;
                     fontSize: string;
                     lineHeight: string;
-                    marginLeft: string;
+                    marginStart: string;
                     width: string;
                 };
             };
             margin: string;
             marginBottom: string;
             marginInlineStart: string;
-            paddingLeft: string;
+            paddingStart: string;
             padding: string;
             display: string;
         };
@@ -118,11 +118,11 @@ declare const StructuredContent: {
             marginBottom: string;
             listStyle: string;
             marginInlineStart: string;
-            paddingLeft: string;
+            paddingStart: string;
             padding: string;
             display: string;
             li: {
-                marginRight: string;
+                marginEnd: string;
                 listStyleType: string;
                 _notFirst: {
                     marginTop: string;
@@ -132,7 +132,7 @@ declare const StructuredContent: {
         section: {
             borderBottom: string;
             borderColor: string;
-            paddingLeft: string;
+            paddingStart: string;
             h2: {
                 borderTop: string;
                 borderColor: string;
@@ -158,7 +158,7 @@ declare const StructuredContent: {
                 md: string;
             };
             paddingTop: string;
-            paddingRight: {
+            paddingEnd: {
                 md: string;
             };
         };
@@ -183,7 +183,7 @@ declare const StructuredContent: {
                 fontWeight: string;
                 textTransform: string;
                 _first: {
-                    paddingLeft: {
+                    paddingStart: {
                         base: string;
                         md: string;
                     };
@@ -209,8 +209,8 @@ declare const StructuredContent: {
                     base: string;
                     md: string;
                 };
-                paddingLeft: number;
-                paddingRight: {
+                paddingStart: number;
+                paddingEnd: {
                     base: string;
                     md: string;
                 };
@@ -219,7 +219,7 @@ declare const StructuredContent: {
                     md: string;
                 };
                 _last: {
-                    paddingRight: {
+                    paddingEnd: {
                         base: string;
                         md: string;
                     };
@@ -235,7 +235,7 @@ declare const StructuredContent: {
                         base: string;
                         md: string;
                     };
-                    paddingRight: string;
+                    paddingEnd: string;
                     paddingTop: {
                         base: string;
                         md: string;
@@ -244,7 +244,7 @@ declare const StructuredContent: {
                         bg: string;
                         color: string;
                         fontWeight: string;
-                        paddingLeft: string;
+                        paddingStart: string;
                     };
                 };
                 textAlign: string;
@@ -253,7 +253,7 @@ declare const StructuredContent: {
             };
             td: {
                 _first: {
-                    paddingLeft: {
+                    paddingStart: {
                         base: string;
                         md: string;
                     };
@@ -289,8 +289,8 @@ declare const StructuredContent: {
                     base: string;
                     md: string;
                 };
-                paddingLeft: number;
-                paddingRight: {
+                paddingStart: number;
+                paddingEnd: {
                     base: string;
                     md: string;
                 };
@@ -304,7 +304,7 @@ declare const StructuredContent: {
                         base: string;
                         md: string;
                     };
-                    paddingRight: string;
+                    paddingEnd: string;
                     paddingTop: {
                         base: string;
                         md: string;
@@ -313,7 +313,7 @@ declare const StructuredContent: {
                         bg: string;
                         color: string;
                         fontWeight: string;
-                        paddingLeft: string;
+                        paddingStart: string;
                     };
                 };
                 textAlign: string;

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

@@ -7,7 +7,7 @@ declare const CustomTabs: {
         tab: {
             color: string;
             paddingInlineStart: string;
-            paddingLeft: string;
+            paddingStart: string;
             background: string;
             border: string;
             borderBottom: string;
@@ -15,11 +15,11 @@ declare const CustomTabs: {
             height: {
                 base: string;
             };
-            marginRight: {
+            marginEnd: {
                 base: string;
                 md: string;
             };
-            paddingRight: {
+            paddingEnd: {
                 base: string;
                 md: string;
                 lg: string;
@@ -53,8 +53,8 @@ declare const CustomTabs: {
             height: string;
             width: string;
             top: string;
-            marginLeft: string;
-            marginRight: string;
+            marginStart: string;
+            marginEnd: string;
             pos: string;
             transition: string;
             zIndex: string;
@@ -79,11 +79,11 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            paddingLeft: {
+            paddingStart: {
                 base: string;
                 md: string;
             };
-            paddingRight: {
+            paddingEnd: {
                 base: string;
                 md: string;
             };
@@ -109,11 +109,11 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            paddingLeft: {
+            paddingStart: {
                 base: string;
                 md: string;
             };
-            paddingRight: string;
+            paddingEnd: string;
             paddingTop: {
                 base: string;
                 md: string;

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

@@ -26,8 +26,8 @@ declare const _default: {
         baseStyle: {
             width: string;
             marginBottom: string;
-            marginLeft: string;
-            marginRight: string;
+            marginEnd: string;
+            marginStart: string;
         };
     };
     TemplateContent: {
@@ -39,8 +39,8 @@ declare const _default: {
             maxWidth: string;
             paddingTop: number;
             paddingBottom: number;
-            paddingRight: string;
-            paddingLeft: string;
+            paddingEnd: string;
+            paddingStart: string;
             width: string;
         };
         variants: {
@@ -69,7 +69,7 @@ declare const _default: {
                 display: string;
                 flexFlow: string;
                 order: string;
-                marginRight: {
+                marginEnd: {
                     md: number;
                 };
                 minWidth: {
@@ -91,13 +91,13 @@ declare const _default: {
         };
         variants: {
             left: {
-                marginRight: {
+                marginEnd: {
                     base: number;
                     md: string;
                 };
             };
             right: {
-                marginLeft: {
+                marginStart: {
                     base: number;
                     md: string;
                 };

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

@@ -1,13 +1,17 @@
 interface TextBaseStyle {
     isBold: boolean;
     isItalic: boolean;
+    isCapitalized: boolean;
+    isUppercase: boolean;
+    isLowercase: boolean;
     noSpace: boolean;
     variant: string;
 }
 declare const Text: {
-    baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
+    baseStyle: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
         fontStyle: string;
         fontWeight: string;
+        textTransform: string;
         marginBottom: string;
     };
     variants: {

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

@@ -7,6 +7,10 @@ declare const TextInput: {
             borderColor: string;
             borderRadius: string;
             fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
             py: string;
             px: string;
             _hover: {

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

@@ -13,7 +13,7 @@ declare const _default: {
                 width: string;
             };
             helperErrorText: {
-                marginLeft: string;
+                marginStart: string;
                 fontStyle: string;
             };
         };
@@ -60,7 +60,7 @@ declare const _default: {
             };
             label: {
                 fontSize: string;
-                marginLeft: string;
+                marginStart: string;
                 marginTop: string;
                 _disabled: {
                     color: string;

package/dist/theme/provider.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
-declare const DSProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+import { ChakraProviderProps } from "@chakra-ui/react";
+declare const DSProvider: ({ children, colorModeManager, }: React.PropsWithChildren<ChakraProviderProps>) => JSX.Element;
 export default DSProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -58,12 +58,14 @@
   "dependencies": {
     "@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",
     "react-datepicker": "4.1.1",
+    "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
-    "typescript": "4.3.5"
+    "typescript": "*"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -78,17 +80,17 @@
   "devDependencies": {
     "@babel/core": "7.14.6",
     "@chakra-ui/storybook-addon": "1.0.3",
-    "@mdx-js/react": "1.6.22",
+    "@jest/core": "27.3.1",
     "@size-limit/preset-small-lib": "5.0.1",
-    "@storybook/addon-a11y": "6.4.19",
-    "@storybook/addon-actions": "6.4.19",
-    "@storybook/addon-docs": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-jest": "6.4.19",
-    "@storybook/addon-links": "6.4.19",
-    "@storybook/addons": "6.4.19",
-    "@storybook/react": "6.4.19",
-    "@svgr/rollup": "5.5.0",
+    "@storybook/addon-a11y": "6.5.9",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-docs": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-jest": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/react": "6.5.9",
+    "@svgr/rollup": "6.2.1",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
@@ -96,14 +98,13 @@
     "@testing-library/user-event": "13.2.1",
     "@types/jest": "26.0.20",
     "@types/jest-axe": "3.5.3",
-    "@types/jsdom": "12.2.4",
+    "@types/jsdom": "16.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.8",
-    "babel-loader": "8.2.2",
     "breakpoint-sass": "2.7.1",
     "css-loader": "5.2.7",
     "cssnano": "5.0.7",
@@ -111,14 +112,14 @@
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.8.2",
     "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-storybook": "^0.5.6",
+    "eslint-plugin-storybook": "0.5.12",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",
     "husky": "^7.0.4",
     "import-glob-loader": "1.1.0",
     "jest": "27.3.1",
     "jest-axe": "5.0.1",
-    "jsdom": "15.2.1",
+    "jsdom": "16.5.0",
     "lint-staged": "10.5.4",
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
@@ -132,7 +133,6 @@
     "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.1",
     "style-loader": "2.0.0",