@nypl/design-system-react-components 0.25.9 → 0.25.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.9",
+  "version": "0.25.12",
   "description": "Design System React Components",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "test:watch": "tsdx test - --watch",
     "test:generate-output": "tsdx test --json --outputFile=.jest-test-results.json  || true",
     "lint": "tsdx lint",
-    "prepare": "npm run build",
+    "prepare": "npm run build && husky install",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "generate-sass-resources": "gulp",
@@ -36,26 +36,9 @@
     "build-storybook": "npm run prebuild:storybook && build-storybook -c .storybook -o ./storybook-static",
     "prebuild:storybook": "npm run test:generate-output"
   },
-  "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",
-    "he": "1.2.0",
-    "react-datepicker": "4.1.1",
-    "system-font-css": "2.0.2",
-    "typescript": "4.3.5",
-    "uuid": "8.3.2"
-  },
-  "peerDependencies": {
-    "react": ">=16.13.0",
-    "react-dom": ">=16.13.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
+  "lint-staged": {
+    "*.{jsx,ts,tsx}": "eslint src --ext=jsx,ts,tsx --cache --fix",
+    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
   },
   "prettier": {
     "printWidth": 80,
@@ -73,19 +56,40 @@
       "limit": "300 KB"
     }
   ],
+  "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",
+    "he": "1.2.0",
+    "react-datepicker": "4.1.1",
+    "system-font-css": "2.0.2",
+    "typescript": "4.3.5",
+    "uuid": "8.3.2"
+  },
+  "peerDependencies": {
+    "@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",
+    "react": ">=16.13.0",
+    "react-dom": ">=16.13.0"
+  },
   "devDependencies": {
     "@babel/core": "7.14.6",
     "@mdx-js/react": "1.6.22",
     "@size-limit/preset-small-lib": "5.0.1",
-    "@storybook/addon-a11y": "6.4.8",
-    "@storybook/addon-actions": "6.4.8",
-    "@storybook/addon-docs": "6.4.8",
-    "@storybook/addon-essentials": "6.4.8",
-    "@storybook/addon-jest": "6.4.8",
-    "@storybook/addon-links": "6.4.8",
+    "@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/addon-queryparams": "6.2.9",
-    "@storybook/addons": "6.4.8",
-    "@storybook/react": "6.4.8",
+    "@storybook/addons": "6.4.19",
+    "@storybook/react": "6.4.19",
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "5.14.1",
@@ -100,7 +104,7 @@
     "@types/testing-library__jest-dom": "5.14.1",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "autoprefixer": "9.8.6",
+    "autoprefixer": "9.8.8",
     "babel-loader": "8.2.2",
     "breakpoint-sass": "2.7.1",
     "css-loader": "5.2.7",
@@ -109,18 +113,18 @@
     "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",
     "gulp": "4.0.2",
-    "gulp-scss-combine": "1.0.0",
-    "husky": "4.2.5",
+    "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",
+    "lint-staged": "10.5.4",
     "node-sass-glob-importer": "5.3.2",
     "normalize.css": "8.0.1",
-    "postcss": "8.3.6",
     "prettier": "2.4.1",
-    "pretty-quick": "3.1.1",
     "react": "16.14.0",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.1.0",
@@ -133,7 +137,7 @@
     "sass-loader": "10.0.0",
     "semantic-release-slack-bot": "2.1.0",
     "size-limit": "5.0.1",
-    "storybook-addon-designs": "6.2.0",
+    "storybook-addon-designs": "6.2.1",
     "style-loader": "2.0.0",
     "ts-jest": "27.0.4",
     "tsdx": "0.14.1",

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

@@ -38,7 +38,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Accordion} />
 

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

@@ -1,9 +1,14 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import { render, screen } from "@testing-library/react";
+import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import Accordion from "./Accordion";
+import Card, { CardContent, CardHeading } from "../Card/Card";
+import { CardLayouts } from "../Card/CardTypes";
+import { HeadingLevels } from "../Heading/HeadingTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 
 describe("Accordion Accessibility", () => {
   it("passes axe accessibility test for one item", async () => {
@@ -150,4 +155,43 @@ describe("Accordion", () => {
     expect(accordion2).toHaveAttribute("aria-expanded", "true");
     expect(accordion3).toHaveAttribute("aria-expanded", "true");
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const contentData = [
+      {
+        label: "Gerry Kellman",
+        panel: (
+          <Card
+            center
+            id="card"
+            imageAlt="Alt text"
+            imageAspectRatio={ImageRatios.TwoByOne}
+            imageSrc={`https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit`}
+            layout={CardLayouts.Row}
+          >
+            <CardHeading id="heading1" level={HeadingLevels.Four}>
+              Gerry Kellman
+            </CardHeading>
+            <CardContent>
+              Gerri is <b>one of Logan's most trusted confidantes</b>, one who
+              serves many roles within the company. She's one of the most
+              powerful people at Waystar Royco outside of the family itself.
+            </CardContent>
+          </Card>
+        ),
+      },
+    ];
+
+    const primary = renderer
+      .create(<Accordion contentData={contentData} id="accordian" />)
+      .toJSON();
+    const defaultOpen = renderer
+      .create(
+        <Accordion contentData={contentData} id="accordian" isDefaultOpen />
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(defaultOpen).toMatchSnapshot();
+  });
 });

package/src/components/Accordion/Accordion.tsx

@@ -29,9 +29,15 @@ export interface AccordionProps {
  * Get the minus or plus icon depending on whether the accordion
  * is open or closed.
  */
-const getIcon = (isExpanded = false) => {
+const getIcon = (isExpanded = false, index, id) => {
   const iconName = isExpanded ? IconNames.Minus : IconNames.Plus;
-  return <Icon name={iconName} size={IconSizes.Small} />;
+  return (
+    <Icon
+      id={`accordion-${id}-icon-${index}`}
+      name={iconName}
+      size={IconSizes.Small}
+    />
+  );
 };
 
 /**
@@ -39,7 +45,7 @@ const getIcon = (isExpanded = false) => {
  * array. This automatically creates the `AccordionButton` and `AccordionPanel`
  * combination that is required for the Chakra `Accordion` component.
  */
-const getElementsFromContentData = (data = []) => {
+const getElementsFromContentData = (data = [], id) => {
   // For FAQ-style multiple accordions, the button should be bigger.
   // Otherwise, use the default.
   const multiplePadding = data?.length > 1 ? 4 : null;
@@ -49,23 +55,29 @@ const getElementsFromContentData = (data = []) => {
     const panel =
       typeof content.panel === "string" ? (
         <AccordionPanel
+          id={`${id}-panel-${index}`}
           key={index}
           dangerouslySetInnerHTML={{ __html: content.panel }}
         />
       ) : (
-        <AccordionPanel key={index}>{content.panel}</AccordionPanel>
+        <AccordionPanel id={`${id}-panel-${index}`} key={index}>
+          {content.panel}
+        </AccordionPanel>
       );
 
     return (
-      <AccordionItem key={index}>
+      <AccordionItem id={`${id}-item-${index}`} key={index}>
         {/* Get the current state to render the correct icon. */}
         {({ isExpanded }) => (
           <>
-            <AccordionButton padding={multiplePadding}>
+            <AccordionButton
+              id={`${id}-button-${index}`}
+              padding={multiplePadding}
+            >
               <Box flex="1" textAlign="left">
                 {content.label}
               </Box>
-              {getIcon(isExpanded)}
+              {getIcon(isExpanded, index, id)}
             </AccordionButton>
             {panel}
           </>
@@ -86,7 +98,7 @@ function Accordion(props: React.PropsWithChildren<AccordionProps>) {
   const openFirstAccordion = isDefaultOpen ? 0 : undefined;
   return (
     <ChakraAccordion id={id} defaultIndex={[openFirstAccordion]} allowMultiple>
-      {getElementsFromContentData(contentData)}
+      {getElementsFromContentData(contentData, id)}
     </ChakraAccordion>
   );
 }

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

@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion Renders the UI snapshot correctly 1`] = `
+<div
+  className="chakra-accordion css-0"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ubg1nw"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-0"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap  css-0"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-0"
+              id="heading1"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-0"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-accordion css-0"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ubg1nw"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-0"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap  css-0"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-0"
+              id="heading1"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-0"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -49,11 +49,13 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Breadcrumbs} />
 
-The `Breadcrumbs` component is a navigation element that provides a breadcrumb path that reflects the site structure and allows a user to navigate to any page available in the breadcrumb hierarchy.
+The `Breadcrumbs` component is a navigation element that provides a breadcrumb
+path that reflects the site structure and allows a user to navigate to any page
+available in the breadcrumb hierarchy.
 
 <Canvas withToolbar>
   <Story
@@ -81,6 +83,15 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
 
 <ArgsTable story="Breadcrumbs with Controls" />
 
+### Accessibility
+
+Only one `Breadcrumbs` component should be rendered on a page. This is because
+only one HTML `<nav>` element with `aria-label` attribute of "Breadcrumbs"
+should be rendered. The DS `Breadcrumbs` component renders this HTML landmark
+so only one component must be rendered on a page.
+
+- [W3 Breadcrumbs Practice](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html)
+
 ### Long Titles
 
 <Canvas>
@@ -149,6 +160,23 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Education</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      colorVariant={ColorVariants.Education}
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -11,12 +11,27 @@ describe("Breadcrumbs Accessibility", () => {
     { url: "#string1", text: "string1" },
     { url: "#string2", text: "string2" },
   ];
+
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <Breadcrumbs breadcrumbsData={breadcrumbsData} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  // This fails because there MUST only be one "breadcrumb" landmark item
+  // on a page. This specifically means there should be one `<nav>` element
+  // with `aria-label="Breadcrumb"`.
+  // https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
+  it("does not pass axe accessibility test", async () => {
+    const { container } = render(
+      <>
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+      </>
+    );
+    expect(await axe(container)).not.toHaveNoViolations();
+  });
 });
 
 describe("Breadcrumbs Snapshot", () => {
@@ -59,6 +74,15 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsEducationVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Education}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -75,6 +99,7 @@ describe("Breadcrumbs Snapshot", () => {
     expect(breadcrumbsVariantColor).toMatchSnapshot();
     expect(breadcrumbsBlogsVariant).toMatchSnapshot();
     expect(breadcrumbsLocationsVariant).toMatchSnapshot();
+    expect(breadcrumbsEducationVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -6,8 +6,6 @@ import {
   useStyleConfig,
 } from "@chakra-ui/react";
 
-import generateUUID from "../../helpers/generateUUID";
-import { ColorVariants } from "./BreadcrumbsTypes";
 import Icon from "../Icons/Icon";
 import {
   IconNames,
@@ -15,6 +13,8 @@ import {
   IconSizes,
   IconTypes,
 } from "../Icons/IconTypes";
+import generateUUID from "../../helpers/generateUUID";
+import { ColorVariants } from "./BreadcrumbsTypes";
 import { getVariant } from "../../utils/utils";
 
 export interface BreadcrumbsDataProps {
@@ -83,9 +83,15 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const styles = useStyleConfig("Breadcrumb", { variant });
   const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+  const ariaAttrs = { "aria-label": "Breadcrumb" };
 
   return (
-    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
+    <ChakraBreadcrumb
+      className={className}
+      id={id}
+      {...ariaAttrs}
+      __css={finalStyles}
+    >
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,6 +1,7 @@
 export enum ColorVariants {
   Blogs = "blogs",
   BooksAndMore = "booksAndMore",
+  Education = "education",
   Locations = "locations",
   Research = "research",
   WhatsOn = "whatsOn",