@nypl/design-system-react-components 1.2.1 → 1.3.0-rc

package/dist/hooks/useStateWithDependencies.d.ts

@@ -0,0 +1,5 @@
+/**
+ * DS internal helper hook to use state with prop dependencies.
+ */
+declare function useStateWithDependencies(initialValue: any): typeof initialValue;
+export default useStateWithDependencies;

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavig
 export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
 export { default as StructuredContent, StructuredContentImagePosition, } from "./components/StructuredContent/StructuredContent";
+export { default as StyledList } from "./components/StyledList/StyledList";
 export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export { default as TagSet } from "./components/TagSet/TagSet";
 export { TagSetExploreDataProps } from "./components/TagSet/TagSetExplore";

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

@@ -0,0 +1,57 @@
+declare const FeedbackBox: {
+    parts: string[];
+    baseStyle: {
+        closeButton: {
+            p: string;
+            span: {
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+        };
+        drawerBody: {
+            paddingTop: string;
+            paddingBottom: string;
+        };
+        drawerContent: {
+            marginStart: string;
+            width: {
+                base: string;
+                md: string;
+            };
+        };
+        drawerHeader: {
+            alignItems: string;
+            background: string;
+            borderBottomWidth: string;
+            display: string;
+            fontSize: string;
+            px: string;
+            paddingTop: string;
+            paddingBottom: string;
+            p: {
+                marginBottom: string;
+            };
+        };
+        openButton: {
+            position: string;
+            borderRadius: string;
+            bottom: string;
+            right: string;
+            zIndex: string;
+        };
+    };
+};
+export default FeedbackBox;

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

@@ -421,14 +421,22 @@ declare const Hero: {
                 color: string;
                 display: string;
                 flexFlow: string;
-                padding: string;
+                px: string;
+                py: {
+                    base: string;
+                    xl: string;
+                };
                 p: {
                     marginBottom: string;
-                    marginTop: string;
+                    marginTop: {
+                        base: string;
+                        xl: string;
+                    };
                 };
                 marginY: string;
                 marginX: string;
                 maxWidth: string;
+                padding: string;
                 width: string;
             };
             heading: {

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

@@ -0,0 +1,41 @@
+declare const StyledList: {
+    baseStyle: ({ textSize }: {
+        textSize?: string;
+    }) => {
+        listStyle: string;
+        li: {
+            _before: {
+                color: string;
+                content: string;
+                display: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                marginStart: string;
+                width: string;
+            };
+        };
+        margin: string;
+        marginBottom: string;
+        marginInlineStart: string;
+        paddingStart: string;
+        padding: string;
+        display: string;
+        fontSize: string;
+    };
+    variants: {
+        capped: {
+            li: {
+                borderStart: string;
+                borderEnd: {
+                    base: string;
+                    md: string;
+                };
+                borderColor: string;
+                my: string;
+                px: string;
+            };
+        };
+    };
+};
+export default StyledList;

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

@@ -1,6 +1,9 @@
 declare const TextInput: {
     parts: string[];
-    baseStyle: {
+    baseStyle: ({ showLabel }: {
+        showLabel: any;
+    }) => {
+        position: string;
         input: {
             bgColor: string;
             border: string;
@@ -101,6 +104,30 @@ declare const TextInput: {
                 boxShadow: string;
             };
         };
+        clearButton: {
+            position: string;
+            top: string;
+            px: string;
+            right: string;
+            span: {
+                clip: string;
+                height: {
+                    base: string;
+                    md: string;
+                };
+                overflow: string;
+                position: {
+                    base: string;
+                    md: string;
+                };
+                width: {
+                    base: string;
+                    md: string;
+                };
+                wordWrap: string;
+            };
+            zIndex: string;
+        };
     };
     variants: {
         searchBar: {

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

@@ -12,7 +12,7 @@ declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
  * Chakra Value |     DS Variable           | EM/PX value
  * ------------------------------------------------------
  *      sm      | --nypl-breakpoint-small   | 20em/320px
- *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      md      | --nypl-breakpoint-medium  | 37.5em/600px
  *      lg      | --nypl-breakpoint-large   | 60em/960px
  *      xl      | --nypl-breakpoint-xl      | 80em/1280px
  *     2xl      |        N/A                | 96em/1536px

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.2.1",
+  "version": "1.3.0-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006 -s ./.storybook/public",
-    "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
+    "build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {
@@ -62,11 +62,11 @@
     "@charlietango/use-native-lazy-loading": "1.10.0",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
-    "downshift": "^6.1.7",
-    "framer-motion": "^4.1.17",
+    "downshift": "6.1.7",
+    "framer-motion": "4.1.17",
     "js-cookie": "3.0.1",
     "react-datepicker": "4.1.1",
-    "react-ga": "^3.3.1",
+    "react-ga": "3.3.1",
     "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
     "tough-cookie": "4.0.0",
@@ -78,7 +78,7 @@
     "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "4.1.17",
     "react": ">=16.13.0",
     "react-dom": ">=16.13.0",
     "typescript": "*"
@@ -120,8 +120,8 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-storybook": "0.5.12",
     "gulp": "4.0.2",
-    "gulp-concat": "^2.6.1",
-    "husky": "^7.0.4",
+    "gulp-concat": "2.6.1",
+    "husky": "7.0.4",
     "import-glob-loader": "1.1.0",
     "jest": "27.3.1",
     "jest-axe": "5.0.1",