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

package/src/components/List/List.test.tsx

@@ -1,53 +1,77 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import List from "./List";
 import { ListTypes } from "./ListTypes";
 
-describe("Link Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
+const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
+const fishDefinitions = [
+  {
+    term: "Mahi-mahi",
+    definition: "The mahi-mahi is an ocean fish known...",
+  },
+  {
+    term: "Golden trout",
+    definition: "The golden trout is a beautifully colored fish...",
+  },
+];
+
+describe("List Accessibility", () => {
+  it("passes axe accessibility test for unordered list", async () => {
+    const { container, rerender } = render(
       <List type={ListTypes.Unordered}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
     expect(await axe(container)).toHaveNoViolations();
+
+    rerender(<List type={ListTypes.Unordered} listItems={fishArray} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("passes axe accessibility test for ordered list", async () => {
+    const { container, rerender } = render(
+      <List type={ListTypes.Ordered}>
+        <li>Mahi-mahi</li>
+        <li>Golden trout</li>
+      </List>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+
+    rerender(<List type={ListTypes.Ordered} listItems={fishArray} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("passes axe accessibility test for definition list", async () => {
+    const { container } = render(
+      <List
+        type={ListTypes.Definition}
+        title="Animal Crossing Fish"
+        listItems={fishDefinitions}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
   });
 });
 
 describe("List", () => {
-  const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
-  const fishDefinitions = [
-    {
-      term: "Mahi-mahi",
-      definition: "The mahi-mahi is an ocean fish known...",
-    },
-    {
-      term: "Golden trout",
-      definition: "The golden trout is a beautifully colored fish...",
-    },
-  ];
-
   it("renders unordered list", () => {
-    const utils = render(
+    render(
       <List type={ListTypes.Unordered}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
-    expect(utils.container.querySelector(".list")).toBeInTheDocument();
+
     expect(screen.getAllByRole("listitem")).toHaveLength(2);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
   });
 
   it("renders unordered list with the `listItems` prop", () => {
-    const utils = render(
-      <List type={ListTypes.Unordered} listItems={fishArray} />
-    );
-    expect(utils.container.querySelector(".list")).toBeInTheDocument();
+    render(<List type={ListTypes.Unordered} listItems={fishArray} />);
+
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
@@ -56,23 +80,21 @@ describe("List", () => {
   });
 
   it("renders ordered list", () => {
-    const utils = render(
+    render(
       <List type={ListTypes.Ordered}>
         <li>Mahi-mahi</li>
         <li>Golden trout</li>
       </List>
     );
-    expect(utils.container.querySelector(".list")).toBeInTheDocument();
+
     expect(screen.getAllByRole("listitem")).toHaveLength(2);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
   });
 
   it("renders ordered list with the `listItems` prop", () => {
-    const utils = render(
-      <List type={ListTypes.Ordered} listItems={fishArray} />
-    );
-    expect(utils.container.querySelector(".list")).toBeInTheDocument();
+    render(<List type={ListTypes.Ordered} listItems={fishArray} />);
+
     expect(screen.getAllByRole("listitem")).toHaveLength(4);
     expect(screen.getByText("Mahi-mahi")).toBeInTheDocument();
     expect(screen.getByText("Golden trout")).toBeInTheDocument();
@@ -105,50 +127,107 @@ describe("List", () => {
     expect(screen.getAllByRole("definition")).toHaveLength(2);
   });
 
-  it("throws an error when you pass an ordered or unordered list children that aren't <li>s", () => {
-    expect(() =>
-      render(
-        <List type={ListTypes.Ordered}>
-          <span>Mahi-mahi</span>
-          <span>Golden trout</span>
-          <span>Rainbowfish</span>
-        </List>
-      )
-    ).toThrowError("Direct children of `List` (ordered) should be `<li>`s");
+  it("consoles a warning when children and the `listItems` prop are both passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <List type={ListTypes.Ordered} listItems={fishArray}>
+        <li>Mahi-mahi</li>
+        <li>Golden trout</li>
+        <li>Rainbowfish</li>
+        <li>Suckerfish</li>
+      </List>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+    );
   });
 
-  it("throws an error when you pass a definition list children that aren't `<dt>`s or `<dd>`s", () => {
-    expect(() =>
-      render(
-        <List type={ListTypes.Definition}>
-          <span>Mahi-mahi</span>
-          <span>Golden trout</span>
-          <span>Rainbowfish</span>
-        </List>
-      )
-    ).toThrowError(
-      "Direct children of `List` (definition) should be `<dt>`s or `<dd>`s"
+  it("consoles a warning when no children are passed or the `listItems` prop is not passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<List type={ListTypes.Ordered}></List>);
+    expect(warn).toHaveBeenCalledWith(
+      "Either `<li>` children or the `listItems` prop must be used."
     );
   });
 
-  it("throws an error when no children are passed or the `listItems` prop is not passed", () => {
-    expect(() => render(<List type={ListTypes.Ordered}></List>)).toThrowError(
-      "Either `<li>` children or the `listItems` prop must be used."
+  it("consoles a warning when you pass an ordered or unordered list children that aren't <li>s", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <List type={ListTypes.Ordered}>
+        <span>Mahi-mahi</span>
+        <span>Golden trout</span>
+        <span>Rainbowfish</span>
+      </List>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "Direct children of `List` (ol) should be `<li>`s."
     );
   });
 
-  it("throws an error when children and the `listItems` prop are both passed", () => {
-    expect(() =>
-      render(
-        <List type={ListTypes.Ordered} listItems={fishArray}>
-          <li>Mahi-mahi</li>
-          <li>Golden trout</li>
-          <li>Rainbowfish</li>
-          <li>Suckerfish</li>
-        </List>
-      )
-    ).toThrowError(
-      "Pass in either `<li>` children or use the `listItems` data prop, don't use both."
+  it("consoles a warning when you pass a definition list children that aren't `<dt>`s or `<dd>`s", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <List type={ListTypes.Definition}>
+        <span>Mahi-mahi</span>
+        <span>Golden trout</span>
+        <span>Rainbowfish</span>
+      </List>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "Direct children of `List` (definition) should be `<dt>`s and `<dd>`s."
     );
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const unordered = renderer
+      .create(
+        <List id="unordered" type={ListTypes.Unordered} listItems={fishArray} />
+      )
+      .toJSON();
+    const unorderedNoStyling = renderer
+      .create(
+        <List
+          id="ordered"
+          type={ListTypes.Unordered}
+          listItems={fishArray}
+          noStyling
+        />
+      )
+      .toJSON();
+    const ordered = renderer
+      .create(
+        <List
+          id="unordered-no-styling"
+          type={ListTypes.Ordered}
+          listItems={fishArray}
+        />
+      )
+      .toJSON();
+    const orderedNoStyling = renderer
+      .create(
+        <List
+          id="ordered-no-styling"
+          type={ListTypes.Ordered}
+          listItems={fishArray}
+          noStyling
+        />
+      )
+      .toJSON();
+    const definition = renderer
+      .create(
+        <List
+          id="definition"
+          type={ListTypes.Definition}
+          title="Animal Crossing Fish"
+          listItems={fishDefinitions}
+        />
+      )
+      .toJSON();
+
+    expect(unordered).toMatchSnapshot();
+    expect(unorderedNoStyling).toMatchSnapshot();
+    expect(ordered).toMatchSnapshot();
+    expect(orderedNoStyling).toMatchSnapshot();
+    expect(definition).toMatchSnapshot();
+  });
 });

package/src/components/List/List.tsx

@@ -1,80 +1,87 @@
 import * as React from "react";
+import { As, Box, useStyleConfig } from "@chakra-ui/react";
 
-import bem from "../../utils/bem";
 import { ListTypes } from "./ListTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 interface DefinitionProps {
   term: string;
   definition: string;
 }
 export interface ListProps {
-  /** BlockName for use with BEM. See how to work with blockNames and
-   * BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'list' */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and
-   * BEM here: http://getbem.com/introduction/ */
-  modifiers?: any[];
-  /** An optional title that will appear over the list. This prop only applies
-   * to Definition Lists. */
-  title?: string;
-  /** Ordered, Unordered, or Definition */
-  type: ListTypes;
+  /** Display the list in a row. */
+  inline?: boolean;
   /** Data to render if children are not passed. For `ListTypes.Ordered` and
    * `ListTypes.Unordered` `List` types, the data structure is an array of
    * strings to renders as `li` items. For `ListTypes.Definition` `List` types,
    * the data structure is an array of objects with `term` and `definition`
    * properties to render `dt` and `dd` elements, respectively.
    */
-  listItems?: (string | DefinitionProps)[];
+  listItems?: (string | JSX.Element | DefinitionProps)[];
+  /** Remove list styling. */
+  noStyling?: boolean;
+  /** An optional title that will appear over the list. This prop only applies
+   * to Definition Lists. */
+  title?: string;
+  /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+  type: ListTypes;
 }
 
-/** A component that renders list item `li` elements or definition item `dt`
- * and `dd` elements based on the `type` prop. */
+/**
+ * A component that renders list item `li` elements or definition item `dt`
+ * and `dd` elements based on the `type` prop. Note that the `title` prop will
+ * only display for the `Definition` list type.
+ */
 export default function List(props: React.PropsWithChildren<ListProps>) {
   const {
-    blockName,
+    additionalStyles = {},
     children,
     className,
-    id,
-    modifiers = [],
-    type,
-    title,
+    id = generateUUID(),
+    inline = false,
     listItems,
+    noStyling = false,
+    title,
+    type = ListTypes.Unordered,
   } = props;
+  const styles = useStyleConfig("List", { inline, noStyling, variant: type });
+  const finalStyles = { ...styles, ...additionalStyles };
+  let listElement = null;
 
   // Either li/dt/dd children elements must be passed or the `listItems`
   // prop must be used.
   if (children && (listItems || listItems?.length > 0)) {
-    throw new Error(
-      "Pass in either `<li>` children or use the `listItems` data prop, don't use both."
+    console.warn(
+      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+    );
+    return null;
+  }
+  if (!children && !listItems) {
+    console.warn(
+      "Either `<li>` children or the `listItems` prop must be used."
     );
+    return null;
   }
 
-  const baseClass = "list";
-  let listTag;
-  let invalidText = "";
   /**
    * This returns either the `children` elements passed to the `List` component
-   * first, and if that is not passed, it will check and render the data passed
-   * into `listItems` based on the `ListType` type of list. If it is of type
-   * Unordered or Ordered, it will return `li` elements. Otherwise, it will
-   * return a combination of `dt` and `dd` elements for the Definition type.
+   * first, otherwise it will check and render the data passed into the
+   * `listItems` props based on the `ListType` type. If it is of type "Unordered"
+   * or "Ordered", it will return `li` elements. Otherwise, it will return a
+   * combination of `dt` and `dd` elements for the "Definition" type.
    */
-  const listChildrenElms = (listType) => {
+  const listChildrenElms = (listType: ListTypes) => {
     if (children) {
       return children;
     }
-    if (!listItems || listItems?.length === 0) {
-      throw new Error(
-        "Either `<li>` children or the `listItems` prop must be used."
-      );
-    }
     if (listType === ListTypes.Ordered || listType === ListTypes.Unordered) {
       return listItems.map((item, i) => <li key={i}>{item}</li>);
     } else if (listType === ListTypes.Definition) {
@@ -86,70 +93,59 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
     return null;
   };
   /**
-   * Checks for `li` element type and throws an error if it is a different type.
+   * Checks for `li` elements and consoles a warning if the
+   * children are different HTML elements.
    */
-  const checkLiChildrenError = (listType) => {
-    invalidText = `Direct children of \`List\` (${listType}) should be \`<li>\`s`;
-    React.Children.map(children, function (child: React.ReactElement) {
+  const checkListChildrenError = (listType: ListTypes) => {
+    React.Children.map(children, (child: React.ReactElement) => {
       if (child?.type !== "li" && child?.props?.mdxType !== "li") {
-        throw new Error(invalidText);
+        console.warn(
+          `Direct children of \`List\` (${listType}) should be \`<li>\`s.`
+        );
+      }
+    });
+  };
+  /**
+   * Checks for `dt` and `dd` elements and consoles a warning if the
+   * children are different HTML elements.
+   */
+  const checkDefinitionChildrenError = () => {
+    React.Children.map(children, function (child: React.ReactElement) {
+      if (
+        child.type !== "dt" &&
+        child.type !== "dd" &&
+        child.type !== React.Fragment &&
+        child.props.mdxType !== "dt" &&
+        child.props.mdxType !== "dd" &&
+        child.props.mdxType !== React.Fragment
+      ) {
+        console.warn(
+          "Direct children of `List` (definition) should be `<dt>`s and `<dd>`s."
+        );
       }
     });
   };
 
-  switch (type) {
-    case ListTypes.Ordered:
-      checkLiChildrenError("ordered");
-      listTag = (
-        <ol
-          id={id}
-          className={bem(baseClass, modifiers, blockName, [className])}
-        >
-          {listChildrenElms(type)}
-        </ol>
-      );
-      break;
-    case ListTypes.Unordered:
-      checkLiChildrenError("unordered");
-      listTag = (
-        <ul
-          id={id}
-          className={bem(baseClass, modifiers, blockName, [className])}
-        >
-          {listChildrenElms(type)}
-        </ul>
-      );
-      break;
-    case ListTypes.Definition:
-      invalidText =
-        "Direct children of `List` (definition) should be `<dt>`s or `<dd>`s";
-      React.Children.map(children, function (child: React.ReactElement) {
-        if (
-          child.type !== "dt" &&
-          child.type !== "dd" &&
-          child.type !== React.Fragment &&
-          child.props.mdxType !== "dt" &&
-          child.props.mdxType !== "dd" &&
-          child.props.mdxType !== React.Fragment
-        ) {
-          throw new Error(invalidText);
-        }
-      });
-      listTag = (
-        <section
-          id={id}
-          className={bem("definition-list", modifiers, baseClass)}
-        >
-          {title && (
-            <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-              {title}
-            </Heading>
-          )}
-          <dl>{listChildrenElms(type)}</dl>
-        </section>
-      );
-      break;
+  if (type === ListTypes.Ordered || type === ListTypes.Unordered) {
+    checkListChildrenError(type);
+    listElement = (
+      <Box as={type as As} id={id} className={className} __css={finalStyles}>
+        {listChildrenElms(type)}
+      </Box>
+    );
+  } else if (type === ListTypes.Definition) {
+    checkDefinitionChildrenError();
+    listElement = (
+      <Box as="section" id={id} className={className} __css={finalStyles}>
+        {title && (
+          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
+            {title}
+          </Heading>
+        )}
+        <dl>{listChildrenElms(type)}</dl>
+      </Box>
+    );
   }
 
-  return listTag;
+  return listElement;
 }

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

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List Renders the UI snapshot correctly 1`] = `
+<ul
+  className="css-0"
+  id="unordered"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ul>
+`;
+
+exports[`List Renders the UI snapshot correctly 2`] = `
+<ul
+  className="css-0"
+  id="ordered"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ul>
+`;
+
+exports[`List Renders the UI snapshot correctly 3`] = `
+<ol
+  className="css-0"
+  id="unordered-no-styling"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ol>
+`;
+
+exports[`List Renders the UI snapshot correctly 4`] = `
+<ol
+  className="css-0"
+  id="ordered-no-styling"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ol>
+`;
+
+exports[`List Renders the UI snapshot correctly 5`] = `
+<section
+  className="css-0"
+  id="definition"
+>
+  <h2
+    className="chakra-heading css-0"
+    id="definition-heading"
+  >
+    Animal Crossing Fish
+  </h2>
+  <dl>
+    <dt>
+      Mahi-mahi
+    </dt>
+    <dd>
+      The mahi-mahi is an ocean fish known...
+    </dd>
+    <dt>
+      Golden trout
+    </dt>
+    <dd>
+      The golden trout is a beautifully colored fish...
+    </dd>
+  </dl>
+</section>
+`;

package/src/components/Modal/Modal.stories.mdx

@@ -3,7 +3,7 @@ import {
   Meta,
   Story,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import Modal from "./Modal";
@@ -118,11 +118,11 @@ export const ModalStory = (args) => {
   );
 };
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" args={{ open: false }}>
     {(args) => <ModalStory {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 

package/src/components/Modal/_Modal.scss

@@ -5,9 +5,9 @@
 }
 
 .modal {
-  @include space-inset-s;
+  padding: var(--nypl-space-s);
 
-  background-color: var(--ui-gray-x-light-warm);
+  background-color: var(--nypl-colors-ui-gray-x-light-warm);
   height: 100vh;
   left: 0;
   overflow-y: auto;