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

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

@@ -9,10 +9,11 @@ import ReactDOMServer from "react-dom/server";
 import { withDesign } from "storybook-addon-designs";
 
 import Accordion from "./Accordion";
+import { AccordionTypes } from "./AccordionTypes";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { CardLayouts } from "../Card/CardTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import { ImageRatios } from "../Image/ImageTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -27,7 +28,7 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Accordion.test.tsx"],
   }}
   argTypes={{
-    contentData: { control: false },
+    accordionData: { control: false },
     id: { control: false },
     isDefaultOpen: { table: { defaultValue: { summary: false } } },
   }}
@@ -38,37 +39,85 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.25.10`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [FAQ Example](#faq-example)
+
+## Overview
 
 <Description of={Accordion} />
 
 The `Accordion` component displays a list of high-level options that can
-expand/collapse to reveal associated sections of content. This component pushes
-existing content on the page down. Each accordion item is self contained but
-when multiple are rendered together, they render in a "FAQ" style. When multiple
-accordions are rendered together, they can each open and close independent of
-each other.
+expand and collapse to reveal associated sections of content. This component
+pushes existing content on the page down. Each accordion item is self contained,
+but when the data for multiple accordions is passed in through the `accordionData`
+prop, the `Accordion` components are grouped together and rendered under a single
+element. When grouped like this, each `Accordion` component still opens and
+closes independent from the others in the group.
 
 The only way to render an `Accordion` component is to pass in an array of objects
-with `label` and `panel` properties for each accordion item. Note that you can
-pass in a string or DOM elements into the `panel` property in each object. This
-approach is needed because, internally, we deal with the logic to render the
-necessary icon, Chakra components, and styles.
+with `label`, `panel`, and optional `accordionType` properties for each accordion item.
+Note that you can pass in a string or DOM elements into the `panel` property in each
+object. This approach is needed because, internally, we deal with the logic to render
+the necessary icon, Chakra components, and styles. Additionally, the `accordionType`
+prop can be used to change the accordion button's background color. It takes a value
+from the AccordionTypes enum: AccordionTypes.Default is `ui.white`, AccordionTypes.Warning
+is `ui.status.primary`, and AccordionTypes.Error is `ui.status.secondary`.
+
+```jsx
+const accordionData = [
+  {
+    label: "Tom Nook",
+    panel: (
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        imageAlt="Alt text"
+        imageAspectRatio={ImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.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>
+    ),
+  },
+];
+
+...
+
+<Accordion accordionData={accordionData} />
+```
+
+## Component Props
 
 <Canvas withToolbar>
   <Story
     name="Accordion with Controls"
     args={{
-      contentData: [
+      accordionData: [
         {
+          accordionType: AccordionTypes.Default,
           label: "Tom Nook",
           panel: (
             <Card
-              layout={CardLayouts.Row}
-              center
-              imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-              imageAlt="Alt text"
-              imageAspectRatio={ImageRatios.TwoByOne}
+              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
@@ -90,50 +139,70 @@ necessary icon, Chakra components, and styles.
   </Story>
 </Canvas>
 
+<ArgsTable story="Accordion with Controls" />
+
 ```jsx
-const contentData = [
+const accordionData = [
   {
+    accordionType: AccordionTypes.Default,
     label: "Tom Nook",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
         </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.
+          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>
     ),
   },
 ];
+```
 
-...
+## Accessibility
 
-<Accordion contentData={contentData} />
-```
+- Follows [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/components/accordion/)
+  guidelines:
+  - Use the `button` HTML element for screenreaders and keyboards.
+  - Use the `aria-expanded` attribute to indicate whether the `Accordion` is
+    expanded (`true`) or collapsed (`false`).
+  - Use the `aria-controls` attribute to associate the control with the panel.
+- Deviates from USWDS in that the user can open multiple panels. Opening one,
+  does not collapse already expanded panel.
+- The open and close icons are decorative (`aria-hidden` is `true`).
+- Visible focus goes around full button and full button is clickable
 
-<ArgsTable story="Accordion with Controls" />
+Resources:
 
-## FAQ example
+- [W3C WAI-Aria Practices - Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
+- [USWDS Accordion](https://designsystem.digital.gov/components/accordion/)
+- [Chakra Accordion](https://chakra-ui.com/docs/components/disclosure/accordion)
+
+## FAQ Example
 
 export const faqContent = [
   {
+    accordionType: AccordionTypes.Default,
     label: "Tom Nook",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -146,14 +215,17 @@ export const faqContent = [
     ),
   },
   {
+    accordionType: AccordionTypes.Warning,
     label: "Isabelle",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -168,14 +240,17 @@ export const faqContent = [
     ),
   },
   {
+    accordionType: AccordionTypes.Error,
     label: "K.K. Slider",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -194,25 +269,28 @@ export const faqContent = [
 ];
 
 Building out FAQ-like accordions happens automatically when there are more than
-one object in the array passed into the `contentData` prop.
+one object in the array passed into the `accordionData` prop.
 
 <Canvas withToolbar>
-  <Story name="FAQ">
-    <Accordion contentData={faqContent} />
+  <Story name="FAQ Example">
+    <Accordion accordionData={faqContent} />
   </Story>
 </Canvas>
 
 ```jsx
 export const faqContent = [
   {
+    accordionType: AccordionTypes.Default,
     label: "Tom Nook",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -225,14 +303,17 @@ export const faqContent = [
     ),
   },
   {
+    accordionType: AccordionTypes.Warning,
     label: "Isabelle",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -247,14 +328,17 @@ export const faqContent = [
     ),
   },
   {
+    accordionType: AccordionTypes.Error,
     label: "K.K. Slider",
     panel: (
       <Card
-        layout={CardLayouts.Row}
-        center
-        imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-        imageAlt="Alt text"
-        imageAspectRatio={ImageRatios.TwoByOne}
+        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
@@ -274,5 +358,5 @@ export const faqContent = [
 
 ...
 
-<Accordion contentData={faqContent} />
+<Accordion accordionData={faqContent} />
 ```

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

@@ -5,16 +5,17 @@ import renderer from "react-test-renderer";
 import userEvent from "@testing-library/user-event";
 
 import Accordion from "./Accordion";
+import { AccordionTypes } from "./AccordionTypes";
 import Card, { CardContent, CardHeading } from "../Card/Card";
-import { CardLayouts } from "../Card/CardTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import { ImageRatios } from "../Image/ImageTypes";
+import { LayoutTypes } from "../../helpers/enums";
 
 describe("Accordion Accessibility", () => {
   it("passes axe accessibility test for one item", async () => {
     const { container } = render(
       <Accordion
-        contentData={[
+        accordionData={[
           {
             label: "Tom Nook",
             panel: (
@@ -34,7 +35,7 @@ describe("Accordion Accessibility", () => {
   it("passes axe accessibility test for multiple items", async () => {
     const { container } = render(
       <Accordion
-        contentData={[
+        accordionData={[
           {
             label: "Tom Nook",
             panel: (
@@ -60,7 +61,7 @@ describe("Accordion Accessibility", () => {
   });
 });
 
-export const contentData = [
+export const accordionData = [
   {
     label: "Tom Nook",
     panel: (
@@ -90,7 +91,7 @@ export const contentData = [
 
 describe("Accordion", () => {
   it("renders a visible button with a label to click on", () => {
-    render(<Accordion contentData={[contentData[0]]} />);
+    render(<Accordion accordionData={[accordionData[0]]} />);
     const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
 
     expect(accordionLabel).toBeInTheDocument();
@@ -100,7 +101,7 @@ describe("Accordion", () => {
   });
 
   it("opens the panel by default with isDefaultOpen passed", () => {
-    render(<Accordion isDefaultOpen contentData={[contentData[0]]} />);
+    render(<Accordion isDefaultOpen accordionData={[accordionData[0]]} />);
     const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
 
     expect(accordionLabel).toBeInTheDocument();
@@ -108,7 +109,7 @@ describe("Accordion", () => {
   });
 
   it("opens the accordion when the label is clicked", () => {
-    render(<Accordion contentData={[contentData[0]]} />);
+    render(<Accordion accordionData={[accordionData[0]]} />);
 
     const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
     expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
@@ -117,7 +118,7 @@ describe("Accordion", () => {
   });
 
   it("renders multiple accordion items grouped together", () => {
-    render(<Accordion contentData={contentData} />);
+    render(<Accordion accordionData={accordionData} />);
 
     const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
     const accordion2 = screen.getByRole("button", { name: "Isabelle" });
@@ -129,7 +130,7 @@ describe("Accordion", () => {
   });
 
   it("opens each accordion item independently of each other", () => {
-    render(<Accordion contentData={contentData} />);
+    render(<Accordion accordionData={accordionData} />);
 
     const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
     const accordion2 = screen.getByRole("button", { name: "Isabelle" });
@@ -157,17 +158,19 @@ describe("Accordion", () => {
   });
 
   it("Renders the UI snapshot correctly", () => {
-    const contentData = [
+    const accordionData = [
       {
         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}
+            imageProps={{
+              alt: "Alt text",
+              aspectRatio: ImageRatios.TwoByOne,
+              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",
+            }}
+            isCentered
+            layout={LayoutTypes.Row}
           >
             <CardHeading id="heading1" level={HeadingLevels.Four}>
               Gerry Kellman
@@ -183,15 +186,60 @@ describe("Accordion", () => {
     ];
 
     const primary = renderer
-      .create(<Accordion contentData={contentData} id="accordian" />)
+      .create(<Accordion accordionData={accordionData} id="accordian" />)
       .toJSON();
     const defaultOpen = renderer
       .create(
-        <Accordion contentData={contentData} id="accordian" isDefaultOpen />
+        <Accordion accordionData={accordionData} id="accordian" isDefaultOpen />
+      )
+      .toJSON();
+    const withError = renderer
+      .create(
+        <Accordion
+          accordionData={[
+            { ...accordionData[0], accordionType: AccordionTypes.Error },
+          ]}
+          id="accordian"
+          isDefaultOpen
+        />
+      )
+      .toJSON();
+    const withWarning = renderer
+      .create(
+        <Accordion
+          accordionData={[
+            { ...accordionData[0], accordionType: AccordionTypes.Warning },
+          ]}
+          id="accordian"
+          isDefaultOpen
+        />
+      )
+      .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,24 +1,25 @@
-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 AccordionContentDataProps {
+export interface AccordionDataProps {
+  accordionType?: AccordionTypes;
   label: string;
   panel: string | React.ReactNode;
 }
 
 export interface AccordionProps {
-  /** Array of data to display */
-  contentData: AccordionContentDataProps[];
+  /** Array of data to display, and an optional accordionType */
+  accordionData: AccordionDataProps[];
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Whether the accordion is open by default only on its initial rendering */
@@ -45,7 +46,12 @@ const getIcon = (isExpanded = false, index, id) => {
  * array. This automatically creates the `AccordionButton` and `AccordionPanel`
  * combination that is required for the Chakra `Accordion` component.
  */
-const getElementsFromContentData = (data = [], id) => {
+const getElementsFromData = (data = [], id) => {
+  const colorMap = {
+    [AccordionTypes.Default]: "ui.white",
+    [AccordionTypes.Warning]: "ui.status.primary",
+    [AccordionTypes.Error]: "ui.status.secondary",
+  };
   // For FAQ-style multiple accordions, the button should be bigger.
   // Otherwise, use the default.
   const multiplePadding = data?.length > 1 ? 4 : null;
@@ -68,20 +74,43 @@ const getElementsFromContentData = (data = [], id) => {
     return (
       <AccordionItem id={`${id}-item-${index}`} key={index}>
         {/* Get the current state to render the correct icon. */}
-        {({ isExpanded }) => (
-          <>
-            <AccordionButton
-              id={`${id}-button-${index}`}
-              padding={multiplePadding}
-            >
-              <Box flex="1" textAlign="left">
-                {content.label}
-              </Box>
-              {getIcon(isExpanded, index, id)}
-            </AccordionButton>
-            {panel}
-          </>
-        )}
+        {({ isExpanded }) => {
+          const bgColorByAccordionType = colorMap[content.accordionType];
+          return (
+            <>
+              <AccordionButton
+                id={`${id}-button-${index}`}
+                padding={multiplePadding}
+                bg={
+                  !content.accordionType
+                    ? colorMap.default
+                    : bgColorByAccordionType
+                }
+                _expanded={{
+                  bg:
+                    !content.accordionType ||
+                    content.accordionType === "default"
+                      ? "ui.gray.light-cool"
+                      : bgColorByAccordionType,
+                }}
+                _hover={{
+                  bg:
+                    !content.accordionType ||
+                    content.accordionType === "default"
+                      ? "transparent"
+                      : bgColorByAccordionType,
+                  borderColor: "ui.gray.dark",
+                }}
+              >
+                <Box flex="1" textAlign="left">
+                  {content.label}
+                </Box>
+                {getIcon(isExpanded, index, id)}
+              </AccordionButton>
+              {panel}
+            </>
+          );
+        }}
       </AccordionItem>
     );
   });
@@ -91,16 +120,21 @@ const getElementsFromContentData = (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 { contentData, 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>
-      {getElementsFromContentData(contentData, id)}
+    <ChakraAccordion
+      id={id}
+      defaultIndex={[openFirstAccordion]}
+      allowMultiple
+      {...rest}
+    >
+      {getElementsFromData(accordionData, id)}
     </ChakraAccordion>
   );
-}
+});
 
 export default Accordion;

package/src/components/Accordion/AccordionTypes.tsx

@@ -0,0 +1,5 @@
+export enum AccordionTypes {
+  Default = "default",
+  Warning = "warning",
+  Error = "error",
+}