@nypl/design-system-react-components 0.25.13 → 0.27.0

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

@@ -1,4 +1,5 @@
 declare const radii: {
+    checkbox: string;
     pill: string;
     round: string;
 };

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

@@ -1,67 +1,70 @@
-/**
- * This is based on:
- *   root size of 16px or 1rem
- *   1 spacing unit is 4px or 0.25rem
- *
- * Chakra's mental model: If you need a spacing of 40px, divide it by 4.
- * 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":
- *   --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
- * declared above.
- *
- * Chakra Number Value | Chakra Name value | DS Variable
- * ------------------- | ----------------- | -----------------
- *        0.5            |         xxxs       |   --nypl-space-xxxs
- *        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: {
+    xxxs: string;
+    xxs: string;
+    xs: string;
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    input: {
+        group: {
+            button: {
+                hstack: string;
+                vstack: string;
+            };
+            default: {
+                hstack: string;
+                vstack: string;
+            };
+        };
+    };
+    inset: {
+        default: string;
+        extranarrow: string;
+        extrawide: string;
+        narrow: string;
+        wide: string;
+    };
+    grid: {
+        default: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    page: {
+        hstack: string;
+        vstack: string;
+    };
+    table: {
+        column: string;
+        row: string;
+    };
     px: string;
     0: string;
-    xxxs: string;
     0.5: string;
-    xxs: string;
     1: string;
     1.5: string;
-    xs: string;
     2: string;
     2.5: string;
     3: string;
     3.5: string;
-    s: string;
     4: string;
     5: string;
-    m: string;
     6: string;
     7: string;
-    l: string;
     8: string;
     9: string;
     10: string;
-    xl: string;
     12: string;
     14: string;
-    xxl: string;
     16: string;
     20: string;
-    xxxl: string;
     24: string;
     28: string;
     32: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.13",
-  "description": "Design System React Components",
+  "version": "0.27.0",
+  "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
     "url": "https://github.com/NYPL/nypl-design-system/"
@@ -32,8 +32,8 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
+    "storybook": "start-storybook -p 6006 -s ./.storybook/public",
+    "build-storybook:v0": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v0",
     "prebuild:storybook": "npm run test:generate-output"
   },
   "lint-staged": {
@@ -57,28 +57,28 @@
     }
   ],
   "dependencies": {
-    "@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",
+    "@chakra-ui/react": ">=1.8.5",
+    "@chakra-ui/system": ">=1.11.0",
+    "@emotion/react": ">=11.4.1",
+    "@emotion/styled": ">=11.3.0",
+    "framer-motion": "^4.1.17",
     "he": "1.2.0",
     "react-datepicker": "4.1.1",
     "system-font-css": "2.0.2",
-    "typescript": "4.3.5",
-    "uuid": "8.3.2"
+    "typescript": "4.3.5"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=1.7.1",
-    "@chakra-ui/system": ">=1.8.1",
+    "@chakra-ui/react": ">=1.8.0",
+    "@chakra-ui/system": ">=1.10.0",
     "@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"
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
+    "@chakra-ui/storybook-addon": "1.0.3",
     "@mdx-js/react": "1.6.22",
     "@size-limit/preset-small-lib": "5.0.1",
     "@storybook/addon-a11y": "6.4.19",
@@ -87,7 +87,6 @@
     "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-jest": "6.4.19",
     "@storybook/addon-links": "6.4.19",
-    "@storybook/addon-queryparams": "6.2.9",
     "@storybook/addons": "6.4.19",
     "@storybook/react": "6.4.19",
     "@svgr/rollup": "5.5.0",
@@ -125,12 +124,11 @@
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
     "prettier": "2.4.1",
-    "react": "16.14.0",
+    "react": "17.0.2",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.1.0",
-    "react-dom": "16.14.0",
-    "react-router-dom": "5.2.0",
-    "react-test-renderer": "16.14.0",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
     "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-svg": "2.0.0",
     "sass": "1.35.1",

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

@@ -39,7 +39,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
 
 ## Table of Contents
 
@@ -111,13 +111,13 @@ const accordionData = [
           label: "Tom Nook",
           panel: (
             <Card
-              layout={LayoutTypes.Row}
               imageProps={{
                 alt: "Alt text",
                 aspectRatio: ImageRatios.TwoByOne,
                 src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
               }}
               isCentered
+              layout={LayoutTypes.Row}
             >
               <CardHeading level={HeadingLevels.Four} id="heading1">
                 Tom Nook
@@ -148,13 +148,13 @@ const accordionData = [
     label: "Tom Nook",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Tom Nook
@@ -196,13 +196,13 @@ export const faqContent = [
     label: "Tom Nook",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
@@ -219,13 +219,13 @@ export const faqContent = [
     label: "Isabelle",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
@@ -244,13 +244,13 @@ export const faqContent = [
     label: "K.K. Slider",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
@@ -284,13 +284,13 @@ export const faqContent = [
     label: "Tom Nook",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
@@ -307,13 +307,13 @@ export const faqContent = [
     label: "Isabelle",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
@@ -332,13 +332,13 @@ export const faqContent = [
     label: "K.K. Slider",
     panel: (
       <Card
-        layout={LayoutTypes.Row}
         imageProps={{
           alt: "Alt text",
           aspectRatio: ImageRatios.TwoByOne,
           src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
         }}
         isCentered
+        layout={LayoutTypes.Row}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider

package/src/components/Accordion/Accordion.test.tsx

@@ -215,9 +215,30 @@ describe("Accordion", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Accordion
+          accordionData={accordionData}
+          id="accordian"
+          p="s"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Accordion
+          accordionData={accordionData}
+          id="accordian"
+          data-testid="testid"
+        />
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(defaultOpen).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
     expect(withError).toMatchSnapshot();
     expect(withWarning).toMatchSnapshot();
   });

package/src/components/Accordion/Accordion.tsx

@@ -1,17 +1,16 @@
-import * as React from "react";
 import {
-  Box,
   Accordion as ChakraAccordion,
   AccordionItem,
   AccordionButton,
   AccordionPanel,
+  Box,
+  chakra,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import { AccordionTypes } from "./AccordionTypes";
 import Icon from "../Icons/Icon";
 import { IconNames, IconSizes } from "../Icons/IconTypes";
-import generateUUID from "../../helpers/generateUUID";
-
 export interface AccordionDataProps {
   accordionType?: AccordionTypes;
   label: string;
@@ -91,7 +90,7 @@ const getElementsFromData = (data = [], id) => {
                   bg:
                     !content.accordionType ||
                     content.accordionType === "default"
-                      ? "ui.gray.light-warm"
+                      ? "ui.gray.light-cool"
                       : bgColorByAccordionType,
                 }}
                 _hover={{
@@ -121,16 +120,21 @@ const getElementsFromData = (data = [], id) => {
  * Accordion component that shows content on toggle. Can be used to display
  * multiple accordion items together.
  */
-function Accordion(props: React.PropsWithChildren<AccordionProps>) {
-  const { accordionData, id = generateUUID(), isDefaultOpen = false } = props;
+export const Accordion = chakra((props: AccordionProps) => {
+  const { accordionData, id, isDefaultOpen = false, ...rest } = props;
 
   // Pass `0` to open the first accordion in the 0-index based array.
   const openFirstAccordion = isDefaultOpen ? 0 : undefined;
   return (
-    <ChakraAccordion id={id} defaultIndex={[openFirstAccordion]} allowMultiple>
+    <ChakraAccordion
+      id={id}
+      defaultIndex={[openFirstAccordion]}
+      allowMultiple
+      {...rest}
+    >
       {getElementsFromData(accordionData, id)}
     </ChakraAccordion>
   );
-}
+});
 
 export default Accordion;