@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -2,16 +2,17 @@ import {
   Meta,
   Story,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import Accordion from "./Accordion";
 import { withDesign } from "storybook-addon-designs";
-import * as stories from "./Accordion.stories.tsx";
 import { listRenderer as ListStory } from "../List/List.stories.tsx";
 import { ListTypes } from "../List/ListTypes";
+import Card, { CardHeading, CardContent } from "../Card/Card";
+import { CardImageRatios, CardLayouts } from "../Card/CardTypes";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import { Source } from "@storybook/addon-docs/blocks";
-import dedent from "ts-dedent";
 import ReactDOMServer from "react-dom/server";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -28,7 +29,8 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Accordion.test.tsx"],
   }}
   argTypes={{
-    children: { table: { disable: true } },
+    contentData: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -37,52 +39,244 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.1.0`    |
-| Latest            | `0.21.1`   |
+| Latest            | `0.25.1`   |
 
 <Description of={Accordion} />
 
-The Accordion component pushes existing content on the page down. The
-implementation is built using basic input/label DOM elements and CSS.
-Therefore, make sure to pass the `inputId` prop to associate the label with
-the input element. If multiple Accordion components are used on a page, make
-sure that each `inputId` is unique.
+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.
 
-<Preview withToolbar>
+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.
+
+<Canvas withToolbar>
   <Story
     name="Basic"
     args={{
-      accordionLabel: "Click to expand",
-      children: <ListStory type={ListTypes.Unordered} />,
-      inputId: "accordionBtn",
+      isDefaultOpen: false,
     }}
   >
-    {(args) => <Accordion {...args} />}
+    {(args) => (
+      <Accordion
+        {...args}
+        contentData={[
+          {
+            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={CardImageRatios.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>
+            ),
+          },
+        ]}
+      />
+    )}
   </Story>
-</Preview>
+</Canvas>
+
+```jsx
+const contentData = [
+  {
+    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={CardImageRatios.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 contentData={contentData} />
+```
 
 <ArgsTable story="Basic" />
 
 ## FAQ example
 
-The Accordion component has an optional `modifiers` prop that has pre-styled
-designs. For example, when building out FAQ-like pages, pass
-`modifiers=["faq"]` into the Accordion component.
-
-<Preview withToolbar>
-  <Story story={stories.AccordionAsFAQSet} />
-</Preview>
+export const faqContent = [
+  {
+    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={CardImageRatios.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>
+    ),
+  },
+  {
+    label: "Isabelle",
+    panel: (
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        imageAlt="Alt text"
+        imageAspectRatio={CardImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading1">
+          Isabelle
+        </CardHeading>
+        <CardContent>
+          Isabelle, known as Shizue in Japan, is a fictional character from the
+          Animal Crossing series of video games. She is a kindly Shih Tzu that
+          debuted in the 2012 release Animal Crossing: New Leaf, where she
+          serves as the secretary to the player character.
+        </CardContent>
+      </Card>
+    ),
+  },
+  {
+    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={CardImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading1">
+          K.K. Slider
+        </CardHeading>
+        <CardContent>
+          <p>
+            Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
+            fictional character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </p>
+        </CardContent>
+      </Card>
+    ),
+  },
+];
 
-## Scrollable example
+Building out FAQ-like accordions happens automatically when there are more than
+one object in the array passed into the `contentData` prop.
 
-Use modifiers=["fixed-height"] when you'd like the accordion height to match that of its
-parent container. In this example, we wrap the accordion in a container whose height is
-set to 300px. If the contents within the accordion are taller than the height of the parent
-container, a scrollbar will appear.
+<Canvas withToolbar>
+  <Story name="FAQ">
+    <Accordion contentData={faqContent} />
+  </Story>
+</Canvas>
 
-As in the other examples, any page content underneath the accordion will continue to be pushed down.
+```jsx
+export const faqContent = [
+  {
+    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={CardImageRatios.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>
+    ),
+  },
+  {
+    label: "Isabelle",
+    panel: (
+      <Card
+        layout={CardLayouts.Row}
+        center
+        imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        imageAlt="Alt text"
+        imageAspectRatio={CardImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading1">
+          Isabelle
+        </CardHeading>
+        <CardContent>
+          Isabelle, known as Shizue in Japan, is a fictional character from the
+          Animal Crossing series of video games. She is a kindly Shih Tzu that
+          debuted in the 2012 release Animal Crossing: New Leaf, where she
+          serves as the secretary to the player character.
+        </CardContent>
+      </Card>
+    ),
+  },
+  {
+    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={CardImageRatios.TwoByOne}
+      >
+        <CardHeading level={HeadingLevels.Four} id="heading1">
+          K.K. Slider
+        </CardHeading>
+        <CardContent>
+          <p>
+            Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
+            fictional character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </p>
+        </CardContent>
+      </Card>
+    ),
+  },
+];
 
-<Preview withToolbar>
-  <Story story={stories.AccordionScroll} />
-</Preview>
+...
 
-<Source code={ReactDOMServer.renderToString(stories.AccordionScroll)} />
+<Accordion contentData={faqContent} />
+```

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

@@ -1,37 +1,153 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
 
 import Accordion from "./Accordion";
 
 describe("Accordion Accessibility", () => {
-  it("passes axe accessibility test", async () => {
+  it("passes axe accessibility test for one item", async () => {
     const { container } = render(
       <Accordion
-        id="accordion"
-        inputId="accordionBtn"
-        accordionLabel="Click to expand"
-      >
-        <p className="accordion-content">this is the accordion content</p>
-      </Accordion>
+        contentData={[
+          {
+            label: "Tom Nook",
+            panel: (
+              <p>
+                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+                character in the Animal Crossing series who operates the village
+                store.
+              </p>
+            ),
+          },
+        ]}
+      />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
-});
 
-describe("Accordion", () => {
-  it("Renders an input checkbox and label", () => {
-    render(
+  it("passes axe accessibility test for multiple items", async () => {
+    const { container } = render(
       <Accordion
-        id="accordion"
-        inputId="accordionBtn"
-        accordionLabel="Click to expand"
-      >
-        <p className="accordion-content">this is the accordion content</p>
-      </Accordion>
+        contentData={[
+          {
+            label: "Tom Nook",
+            panel: (
+              <p>
+                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+                character in the Animal Crossing series who operates the village
+                store.
+              </p>
+            ),
+          },
+          {
+            label: "Isabelle",
+            panel:
+              "Isabelle, known as Shizue in Japan, is a fictional character " +
+              "from the Animal Crossing series of video games. She is a kindly Shih " +
+              "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
+              "she serves as the secretary to the player character.",
+          },
+        ]}
+      />
     );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+export const contentData = [
+  {
+    label: "Tom Nook",
+    panel: (
+      <p>
+        Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
+        in the Animal Crossing series who operates the village store.
+      </p>
+    ),
+  },
+  {
+    label: "Isabelle",
+    panel:
+      "Isabelle, known as Shizue in Japan, is a fictional character " +
+      "from the Animal Crossing series of video games. She is a kindly Shih " +
+      "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
+      "she serves as the secretary to the player character.",
+  },
+  {
+    label: "K.K. Slider",
+    panel:
+      "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a " +
+      "fictional character within the Animal Crossing franchise. One of the " +
+      "franchise's most popular characters, he debuted in the title Animal " +
+      "Crossing, and has appeared in every installment since.</p>",
+  },
+];
+
+describe("Accordion", () => {
+  it("renders a visible button with a label to click on", () => {
+    render(<Accordion contentData={[contentData[0]]} />);
+    const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
+
+    expect(accordionLabel).toBeInTheDocument();
+    // Closed by default.
+    expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
+    expect(screen.getByText(/known in Japan as Tanukichi/i)).not.toBeVisible();
+  });
+
+  it("opens the panel by default with isDefaultOpen passed", () => {
+    render(<Accordion isDefaultOpen contentData={[contentData[0]]} />);
+    const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
+
+    expect(accordionLabel).toBeInTheDocument();
+    expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("opens the accordion when the label is clicked", () => {
+    render(<Accordion contentData={[contentData[0]]} />);
+
+    const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
+    expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
+    userEvent.click(accordionLabel);
+    expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("renders multiple accordion items grouped together", () => {
+    render(<Accordion contentData={contentData} />);
+
+    const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
+    const accordion2 = screen.getByRole("button", { name: "Isabelle" });
+    const accordion3 = screen.getByRole("button", { name: "K.K. Slider" });
+
+    expect(accordion1).toHaveAttribute("aria-expanded", "false");
+    expect(accordion2).toHaveAttribute("aria-expanded", "false");
+    expect(accordion3).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("opens each accordion item independently of each other", () => {
+    render(<Accordion contentData={contentData} />);
+
+    const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
+    const accordion2 = screen.getByRole("button", { name: "Isabelle" });
+    const accordion3 = screen.getByRole("button", { name: "K.K. Slider" });
+
+    expect(accordion1).toHaveAttribute("aria-expanded", "false");
+    expect(accordion2).toHaveAttribute("aria-expanded", "false");
+    expect(accordion3).toHaveAttribute("aria-expanded", "false");
+
+    userEvent.click(accordion1);
+    expect(accordion1).toHaveAttribute("aria-expanded", "true");
+    expect(accordion2).toHaveAttribute("aria-expanded", "false");
+    expect(accordion3).toHaveAttribute("aria-expanded", "false");
+
+    userEvent.click(accordion2);
+    expect(accordion1).toHaveAttribute("aria-expanded", "true");
+    expect(accordion2).toHaveAttribute("aria-expanded", "true");
+    expect(accordion3).toHaveAttribute("aria-expanded", "false");
 
-    expect(screen.getByRole("checkbox")).toBeInTheDocument();
-    expect(screen.getByLabelText("Click to expand")).toBeInTheDocument();
+    userEvent.click(accordion3);
+    userEvent.click(accordion1);
+    expect(accordion1).toHaveAttribute("aria-expanded", "false");
+    expect(accordion2).toHaveAttribute("aria-expanded", "true");
+    expect(accordion3).toHaveAttribute("aria-expanded", "true");
   });
 });

package/src/components/Accordion/Accordion.tsx

@@ -1,69 +1,94 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import {
+  Box,
+  Accordion as ChakraAccordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from "@chakra-ui/react";
+
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconNames, IconSizes } from "../Icons/IconTypes";
+import generateUUID from "../../helpers/generateUUID";
+
+export interface AccordionContentDataProps {
+  label: string;
+  panel: string | React.ReactNode;
+}
 
 export interface AccordionProps {
-  /** Inner label on the button that opens the accordion */
-  accordionLabel?: React.ReactNode;
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** className you can add in addition to 'input' */
-  className?: string;
-  /** Whether the accordion is open by default */
-  defaultOpen?: boolean;
+  /** Array of data to display */
+  contentData: AccordionContentDataProps[];
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** accordionLabel's input ID */
-  inputId?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Whether the accordion is open by default only on its initial rendering */
+  isDefaultOpen?: boolean;
 }
 
-/** Accordion component that shows content on toggle */
-export default function Accordion(
-  props: React.PropsWithChildren<AccordionProps>
-) {
-  const {
-    modifiers = [],
-    blockName,
-    id,
-    className,
-    inputId,
-    defaultOpen = false,
-    accordionLabel,
-    children,
-  } = props;
+/**
+ * Get the minus or plus icon depending on whether the accordion
+ * is open or closed.
+ */
+const getIcon = (isExpanded = false) => {
+  const iconName = isExpanded ? IconNames.Minus : IconNames.Plus;
+  return <Icon name={iconName} size={IconSizes.Small} />;
+};
 
-  return (
-    <div
-      id={id}
-      className={bem("accordion", modifiers, blockName, [className])}
-    >
-      <input
-        id={`accordion-${inputId}`}
-        className={bem("input", modifiers, "accordion")}
-        type="checkbox"
-        defaultChecked={defaultOpen}
-      />
-      <label
-        htmlFor={`accordion-${inputId}`}
-        className={bem("label", modifiers, "accordion")}
-      >
-        {accordionLabel}
-        <Icon
-          decorative={true}
-          name={IconNames.minus}
-          modifiers={["small", `${IconNames.minus}`]}
-        />
-        <Icon
-          decorative={true}
-          name={IconNames.plus}
-          modifiers={["small", `${IconNames.plus}`]}
+/**
+ * Returns `AccordionItems` for every accordion object in the data
+ * array. This automatically creates the `AccordionButton` and `AccordionPanel`
+ * combination that is required for the Chakra `Accordion` component.
+ */
+const getElementsFromContentData = (data = []) => {
+  // For FAQ-style multiple accordions, the button should be bigger.
+  // Otherwise, use the default.
+  const multiplePadding = data?.length > 1 ? 4 : null;
+
+  return data.map((content, index) => {
+    // This is done to support both string and DOM element input.
+    const panel =
+      typeof content.panel === "string" ? (
+        <AccordionPanel
+          key={index}
+          dangerouslySetInnerHTML={{ __html: content.panel }}
         />
-      </label>
+      ) : (
+        <AccordionPanel key={index}>{content.panel}</AccordionPanel>
+      );
+
+    return (
+      <AccordionItem key={index}>
+        {/* Get the current state to render the correct icon. */}
+        {({ isExpanded }) => (
+          <>
+            <AccordionButton padding={multiplePadding}>
+              <Box flex="1" textAlign="left">
+                {content.label}
+              </Box>
+              {getIcon(isExpanded)}
+            </AccordionButton>
+            {panel}
+          </>
+        )}
+      </AccordionItem>
+    );
+  });
+};
+
+/**
+ * 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;
 
-      <div className={bem("content", modifiers, "accordion")}>{children}</div>
-    </div>
+  // 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)}
+    </ChakraAccordion>
   );
 }
+
+export default Accordion;

package/src/components/Autosuggest/Autosuggest.stories.mdx

@@ -34,7 +34,7 @@ typing "c" or "tr" in the following input.
 const renderSuggestion = (suggestion) => (
   <span>
     {suggestion}
-    <Icon name={IconNames["check"]} decorative={true}></Icon>
+    <Icon name={IconNames.Check} />
   </span>
 );
 ```

package/src/components/Autosuggest/Autosuggest.stories.tsx

@@ -168,7 +168,7 @@ const FishExample = () => {
   const renderSuggestion = (suggestion) => (
     <span>
       {suggestion}
-      <Icon name={IconNames["check"]} decorative={true}></Icon>
+      <Icon name={IconNames.Check} />
     </span>
   );
   const getSuggestionValue = (suggestion) => suggestion;

package/src/components/Autosuggest/_Autosuggest.scss

@@ -29,7 +29,7 @@
   display: block;
   font-weight: 300;
   margin-top: -6px; // accounts for the focus ring on the input
-  outline: 1px solid var(--ui-gray-light);
+  outline: 1px solid var(--ui-gray-light-cool);
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -47,7 +47,7 @@
 }
 
 .react-autosuggest__suggestion--highlighted {
-  background-color: var(--ui-gray-light);
+  background-color: var(--ui-gray-light-cool);
 }
 
 .auto-suggest-bottom {