@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -87,6 +87,7 @@ declare const Button: {
             color: string;
             _hover: {
                 bg: string;
+                borderColor: string;
             };
             paddingInlineStart: string;
             paddingInlineEnd: string;

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

@@ -1,6 +1,7 @@
 interface CardBaseStyleProps {
     hasImage: boolean;
     imageIsAtEnd: boolean;
+    isAlignedRightActions: boolean;
     isBordered: boolean;
     isCentered: boolean;
     layout: string;
@@ -50,7 +51,7 @@ declare const imageSizes: {
 declare const _default: {
     Card: {
         parts: string[];
-        baseStyle: ({ hasImage, imageIsAtEnd, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
+        baseStyle: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
             display: string;
             flexFlow: {
                 base: string;
@@ -62,19 +63,40 @@ declare const _default: {
             border: string;
             borderColor: string;
             actions: {
-                width: string[];
-                marginLeft: string[];
-                marginTop: string[];
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
             };
             body: {
                 display: {
                     md: string;
                 };
+                flexBasis: {
+                    sm: string;
+                };
                 flexFlow: {
                     md: string;
                 };
                 margin: any;
                 padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
             };
             heading: {
                 marginBottom: string;
@@ -91,19 +113,40 @@ declare const _default: {
             border: string;
             borderColor: string;
             actions: {
-                width: string[];
-                marginLeft: string[];
-                marginTop: string[];
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
             };
             body: {
                 display: {
                     md: string;
                 };
+                flexBasis: {
+                    sm: string;
+                };
                 flexFlow: {
                     md: string;
                 };
                 margin: any;
                 padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
             };
             heading: {
                 marginBottom: string;
@@ -123,19 +166,40 @@ declare const _default: {
             border?: undefined;
             borderColor?: undefined;
             actions: {
-                width: string[];
-                marginLeft: string[];
-                marginTop: string[];
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
             };
             body: {
                 display: {
                     md: string;
                 };
+                flexBasis: {
+                    sm: string;
+                };
                 flexFlow: {
                     md: string;
                 };
                 margin: any;
                 padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
             };
             heading: {
                 marginBottom: string;
@@ -152,19 +216,40 @@ declare const _default: {
             border?: undefined;
             borderColor?: undefined;
             actions: {
-                width: string[];
-                marginLeft: string[];
-                marginTop: string[];
+                flexShrink: {
+                    base: string;
+                    md: string;
+                };
+                marginLeft: {
+                    base: string;
+                    md: string;
+                };
+                marginTop: {
+                    base: string;
+                    md: string;
+                };
+                maxWidth: {
+                    base: string;
+                    md: string;
+                };
+                width: string;
             };
             body: {
                 display: {
                     md: string;
                 };
+                flexBasis: {
+                    sm: string;
+                };
                 flexFlow: {
                     md: string;
                 };
                 margin: any;
                 padding: any;
+                width: {
+                    base: string;
+                    md: string;
+                };
             };
             heading: {
                 marginBottom: string;

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

@@ -6,7 +6,7 @@ declare const CheckboxGroup: {
         helperErrorText: {
             marginTop: string;
         };
-        stack: {
+        label: {
             width: string;
         };
     };

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

@@ -1,5 +1,5 @@
 /** Export "mixin" styles. */
-export { wrapperStyles } from "./globalMixins";
+export { screenreaderOnly, wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 declare const activeFocus: (darkMode?: boolean) => {
     boxShadow: string;
@@ -38,7 +38,7 @@ declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
     helperErrorText: {
         marginTop: string;
     };
-    stack: {
+    label: {
         width: string;
     };
 };

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

@@ -4,7 +4,6 @@ export declare const headings: {
         marginTop: string;
         marginLeft: string;
         marginRight: string;
-        marginBottom: string;
         fontSize: string;
         fontWeight: string;
         letterSpacing: string;
@@ -15,7 +14,6 @@ export declare const headings: {
         marginTop: string;
         marginLeft: string;
         marginRight: string;
-        marginBottom: string;
         fontSize: string;
         fontWeight: string;
         lineHeight: string;
@@ -25,7 +23,6 @@ export declare const headings: {
         marginTop: string;
         marginLeft: string;
         marginRight: string;
-        marginBottom: string;
         fontSize: string;
         fontWeight: string;
         lineHeight: string;
@@ -35,7 +32,6 @@ export declare const headings: {
         marginTop: string;
         marginLeft: string;
         marginRight: string;
-        marginBottom: string;
         fontSize: string;
         fontWeight: string;
         lineHeight: string;
@@ -45,14 +41,15 @@ export declare const headings: {
         marginTop: string;
         marginLeft: string;
         marginRight: string;
-        marginBottom: string;
         fontSize: string;
         fontWeight: string;
         lineHeight: string;
     };
 };
 declare const Heading: {
-    baseStyle: {
+    baseStyle: ({ noSpace }: {
+        noSpace: any;
+    }) => {
         a: {
             color: string;
             textDecoration: string;
@@ -60,6 +57,7 @@ declare const Heading: {
                 color: string;
             };
         };
+        marginBottom: string;
     };
     variants: {
         h1: {
@@ -67,7 +65,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;
@@ -78,7 +75,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -88,7 +84,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -98,7 +93,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -108,7 +102,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -118,7 +111,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -128,7 +120,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;
@@ -139,7 +130,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -149,7 +139,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -159,7 +148,6 @@ declare const Heading: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;

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

@@ -108,6 +108,7 @@ declare const CustomImage: {
             };
             maxWidth: string;
             margin: string;
+            width: string;
         } | {
             img: {
                 marginBottom: string;
@@ -116,6 +117,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             margin: string;
+            width: string;
         } | {
             img: {
                 marginBottom: string;
@@ -124,6 +126,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             margin: string;
+            width: string;
         } | {
             img: {
                 marginBottom: string;
@@ -132,6 +135,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             margin: string;
+            width: string;
         } | {
             img: {
                 marginBottom: string;
@@ -140,6 +144,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             margin: string;
+            width: string;
         } | {
             img: {
                 marginBottom: string;
@@ -148,6 +153,7 @@ declare const CustomImage: {
             marginLeft: string;
             marginRight: string;
             margin: string;
+            width: string;
         };
         figcaption: {
             fontStyle: string;

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

@@ -80,6 +80,14 @@ declare const Radio: {
                 fontStyle: string;
             };
         };
+        hiddenLabel: {
+            clip: string;
+            height: string;
+            overflow: string;
+            position: string;
+            width: string;
+            wordWrap: string;
+        };
     };
     sizes: {
         md: {

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

@@ -6,7 +6,7 @@ declare const RadioGroup: {
         helperErrorText: {
             marginTop: string;
         };
-        stack: {
+        label: {
             width: string;
         };
     };

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

@@ -1,5 +1,8 @@
 declare const SkipNavigation: {
     baseStyle: {
+        ul: {
+            margin: string;
+        };
         a: {
             backgroundColor: string;
             height: string;

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

@@ -11,7 +11,6 @@ declare const StructuredContent: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             letterSpacing: string;
@@ -22,7 +21,6 @@ declare const StructuredContent: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -32,7 +30,6 @@ declare const StructuredContent: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -42,7 +39,6 @@ declare const StructuredContent: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -52,7 +48,6 @@ declare const StructuredContent: {
             marginTop: string;
             marginLeft: string;
             marginRight: string;
-            marginBottom: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;

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

@@ -80,7 +80,10 @@ declare const _default: {
     };
     TemplateContentSidebar: {
         baseStyle: {
-            flex: string;
+            flex: {
+                base: string;
+                md: string;
+            };
             order: {
                 md: string;
             };

package/dist/utils/utils.d.ts

@@ -1,3 +1,5 @@
+import { HelperErrorTextType } from "../components/HelperErrorText/HelperErrorText";
+import { AriaAttributes } from "./interfaces";
 /**
  * range
  * Get an array of values from `start` to `stop` - 1 with an optional
@@ -14,3 +16,16 @@ export declare const getStorybookHrefProps: (pageCount: number) => {
     computedCurrentPage: number;
     getPageHref: (selectedPage: number) => string;
 };
+interface GetAriaAttrsProps {
+    footnote: HelperErrorTextType;
+    id: string;
+    labelText: HelperErrorTextType;
+    name: string;
+    showLabel: boolean;
+}
+/**
+ * Get aria-* attributes for input components. This sets the `aria-label` and
+ * `aria-describedby` attributes, based on the label and footnote values.
+ */
+export declare const getAriaAttrs: ({ footnote, id, labelText, name, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "1.0.0",
+  "version": "1.0.3-beta",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -10,8 +10,7 @@
   "types": "dist/index.d.ts",
   "module": "dist/design-system-react-components.esm.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">10"
@@ -57,8 +56,8 @@
     }
   ],
   "dependencies": {
-    "@chakra-ui/react": ">=1.8.5",
-    "@chakra-ui/system": ">=1.11.0",
+    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
     "framer-motion": "^4.1.17",
@@ -68,8 +67,8 @@
     "typescript": "4.3.5"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=1.8.0",
-    "@chakra-ui/system": ">=1.10.0",
+    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
+    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
     "@emotion/react": ">=11.4.1",
     "@emotion/styled": ">=11.3.0",
     "framer-motion": "^4.1.17",