@nypl/design-system-react-components 0.28.0 → 1.0.2

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

@@ -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/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/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": "0.28.0",
+  "version": "1.0.2",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
     "storybook": "start-storybook -p 6006 -s ./.storybook/public",
-    "build-storybook:v0": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0",
+    "build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {
@@ -57,8 +57,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 +68,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",

package/src/components/Accordion/Accordion.stories.mdx

@@ -35,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.28.0`   |
+| Latest            | `1.0.2`    |
 
 ## Table of Contents
 
@@ -72,13 +72,13 @@ const accordionData = [
     label: "Tom Nook",
     panel: (
       <Card
-        layout="row"
-        center
         imageProps={{
           alt: "Alt text",
           aspectRatio: "twoByOne",
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
+        isCentered
+        layout="row"
       >
         <CardHeading level="four" id="heading1">
           Tom Nook
@@ -100,48 +100,7 @@ const accordionData = [
 
 ## Component Props
 
-<Canvas withToolbar>
-  <Story
-    name="Accordion with Controls"
-    args={{
-      accordionData: [
-        {
-          accordionType: "default",
-          label: "Tom Nook",
-          panel: (
-            <Card
-              imageProps={{
-                alt: "Alt text",
-                aspectRatio: "twoByOne",
-                src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
-              }}
-              isCentered
-              layout="row"
-            >
-              <CardHeading level="four" id="heading1">
-                Tom Nook
-              </CardHeading>
-              <CardContent>
-                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
-                character in the Animal Crossing series who operates the village
-                store.
-              </CardContent>
-            </Card>
-          ),
-        },
-      ],
-      id: "accordion-id",
-      isDefaultOpen: false,
-    }}
-  >
-    {(args) => <Accordion {...args} />}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Accordion with Controls" />
-
-```jsx
-const accordionData = [
+export const accordionData = [
   {
     accordionType: "default",
     label: "Tom Nook",
@@ -166,7 +125,20 @@ const accordionData = [
     ),
   },
 ];
-```
+
+<Canvas withToolbar>
+  <Story
+    name="Accordion with Controls"
+    args={{
+      id: "accordion-id",
+      isDefaultOpen: false,
+    }}
+  >
+    {(args) => <Accordion accordionData={accordionData} {...args} />}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Accordion with Controls" />
 
 ## Accessibility
 

package/src/components/Accordion/Accordion.tsx

@@ -49,7 +49,8 @@ const getElementsFromData = (data: AccordionDataProps[] = [], id: string) => {
   };
   // For FAQ-style multiple accordions, the button should be bigger.
   // Otherwise, use the default.
-  const multiplePadding = data?.length > 1 ? "4" : "initial";
+  const multipleFontSize = data?.length > 1 ? "text.default" : "text.caption";
+  const multiplePadding = data?.length > 1 ? "s" : "xs s";
 
   return data.map((content, index) => {
     // This is done to support both string and DOM element input.
@@ -97,7 +98,7 @@ const getElementsFromData = (data: AccordionDataProps[] = [], id: string) => {
                   borderColor: "ui.gray.dark",
                 }}
               >
-                <Box flex="1" textAlign="left">
+                <Box flex="1" fontSize={multipleFontSize} textAlign="left">
                   {content.label}
                 </Box>
                 {getIcon(isExpanded, index, id)}