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

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

@@ -7,14 +7,14 @@ import List from "./List";
 import { ListTypes } from "./ListTypes";
 
 const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
-const fishDefinitions = [
+const fishDescriptions = [
   {
     term: "Mahi-mahi",
-    definition: <p>The mahi-mahi is an ocean fish known...</p>,
+    description: <p>The mahi-mahi is an ocean fish known...</p>,
   },
   {
     term: "Golden trout",
-    definition: "The golden trout is a beautifully colored fish...",
+    description: "The golden trout is a beautifully colored fish...",
   },
 ];
 
@@ -43,12 +43,12 @@ describe("List Accessibility", () => {
     rerender(<List type={ListTypes.Ordered} listItems={fishArray} />);
     expect(await axe(container)).toHaveNoViolations();
   });
-  it("passes axe accessibility test for definition list", async () => {
+  it("passes axe accessibility test for description list", async () => {
     const { container } = render(
       <List
-        type={ListTypes.Definition}
+        type={ListTypes.Description}
         title="Animal Crossing Fish"
-        listItems={fishDefinitions}
+        listItems={fishDescriptions}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -102,9 +102,9 @@ describe("List", () => {
     expect(screen.getByText("Suckerfish")).toBeInTheDocument();
   });
 
-  it("returns definition list", () => {
+  it("returns description list", () => {
     render(
-      <List type={ListTypes.Definition}>
+      <List type={ListTypes.Description}>
         <dt>Mahi-mahi</dt>
         <dd>The mahi-mahi is an ocean fish known...</dd>
       </List>
@@ -116,12 +116,12 @@ describe("List", () => {
     ).toBeInTheDocument();
   });
 
-  it("returns definition list with the `listItems` prop", () => {
+  it("returns description list with the `listItems` prop", () => {
     render(
       <List
-        type={ListTypes.Definition}
+        type={ListTypes.Description}
         title="Animal Crossing Fish"
-        listItems={fishDefinitions}
+        listItems={fishDescriptions}
       />
     );
     expect(screen.getAllByRole("definition")).toHaveLength(2);
@@ -138,7 +138,8 @@ describe("List", () => {
       </List>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+      "NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` children " +
+        "or use the `listItems` data prop. Do not use both."
     );
   });
 
@@ -146,7 +147,8 @@ describe("List", () => {
     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."
+      "NYPL Reservoir List: Pass in either `<li>` children or pass data in " +
+        "the `listItems` prop, not both."
     );
   });
 
@@ -160,21 +162,22 @@ describe("List", () => {
       </List>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Direct children of `List` (ol) should be `<li>`s."
+      "NYPL Reservoir List: Direct children of `List` (ol) must be `<li>`s."
     );
   });
 
-  it("consoles a warning when you pass a definition list children that aren't `<dt>`s or `<dd>`s", () => {
+  it("consoles a warning when you pass a description list children that aren't `<dt>`s or `<dd>`s", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <List type={ListTypes.Definition}>
+      <List type={ListTypes.Description}>
         <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."
+      "NYPL Reservoir List: Direct children of `List` (description) must be " +
+        "`<dt>`s and `<dd>`s."
     );
   });
 
@@ -213,13 +216,57 @@ describe("List", () => {
         />
       )
       .toJSON();
-    const definition = renderer
+    const description = renderer
       .create(
         <List
-          id="definition"
-          type={ListTypes.Definition}
+          id="description"
+          type={ListTypes.Description}
           title="Animal Crossing Fish"
-          listItems={fishDefinitions}
+          listItems={fishDescriptions}
+        />
+      )
+      .toJSON();
+    const withChakraPropsUnordered = renderer
+      .create(
+        <List
+          id="chakra"
+          type={ListTypes.Unordered}
+          listItems={fishArray}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherPropsUnordered = renderer
+      .create(
+        <List
+          id="other"
+          type={ListTypes.Unordered}
+          listItems={fishArray}
+          data-testid="other"
+        />
+      )
+      .toJSON();
+    const withChakraPropsDescription = renderer
+      .create(
+        <List
+          id="chakra"
+          type={ListTypes.Description}
+          title="Animal Crossing Fish"
+          listItems={fishDescriptions}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherPropsDescription = renderer
+      .create(
+        <List
+          id="other"
+          type={ListTypes.Description}
+          title="Animal Crossing Fish"
+          listItems={fishDescriptions}
+          data-testid="other"
         />
       )
       .toJSON();
@@ -228,6 +275,10 @@ describe("List", () => {
     expect(unorderedNoStyling).toMatchSnapshot();
     expect(ordered).toMatchSnapshot();
     expect(orderedNoStyling).toMatchSnapshot();
-    expect(definition).toMatchSnapshot();
+    expect(description).toMatchSnapshot();
+    expect(withChakraPropsUnordered).toMatchSnapshot();
+    expect(withOtherPropsUnordered).toMatchSnapshot();
+    expect(withChakraPropsDescription).toMatchSnapshot();
+    expect(withOtherPropsDescription).toMatchSnapshot();
   });
 });

package/src/components/List/List.tsx

@@ -1,14 +1,12 @@
+import { As, Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
-import { As, Box, useStyleConfig } from "@chakra-ui/react";
 
 import { ListTypes } from "./ListTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
-import generateUUID from "../../helpers/generateUUID";
-
-interface DefinitionProps {
+interface DescriptionProps {
   term: string;
-  definition: string | JSX.Element;
+  description: string | JSX.Element;
 }
 export interface ListProps {
   /** Optionally pass in additional Chakra-based styles. */
@@ -21,36 +19,37 @@ export interface ListProps {
   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`
+   * strings to renders as `li` items. For `ListTypes.Description` `List` types,
+   * the data structure is an array of objects with `term` and `description`
    * properties to render `dt` and `dd` elements, respectively.
    */
-  listItems?: (string | JSX.Element | DefinitionProps)[];
+  listItems?: (string | JSX.Element | DescriptionProps)[];
   /** Remove list styling. */
   noStyling?: boolean;
   /** An optional title that will appear over the list. This prop only applies
-   * to Definition Lists. */
+   * to Description Lists. */
   title?: string;
-  /** The type of list: Ordered, Unordered, or Definition. Unordered by default. */
+  /** The type of list: Ordered, Unordered, or Description. Unordered by default. */
   type: ListTypes;
 }
 
 /**
- * A component that renders list item `li` elements or definition item `dt`
+ * A component that renders list item `li` elements or description item `dt`
  * and `dd` elements based on the `type` prop. Note that the `title` prop will
- * only display for the `Definition` list type.
+ * only display for the `Description` list type.
  */
-export default function List(props: React.PropsWithChildren<ListProps>) {
+export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
   const {
     additionalStyles = {},
     children,
     className,
-    id = generateUUID(),
+    id,
     inline = false,
     listItems,
     noStyling = false,
     title,
     type = ListTypes.Unordered,
+    ...rest
   } = props;
   const styles = useStyleConfig("List", { inline, noStyling, variant: type });
   const finalStyles = { ...styles, ...additionalStyles };
@@ -60,13 +59,15 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
   // prop must be used.
   if (children && (listItems || listItems?.length > 0)) {
     console.warn(
-      "Pass in either `<li>`, `<dt>`, or `<dd>` children or use the `listItems` data prop, but don't use both."
+      "NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " +
+        "children or use the `listItems` data prop. Do not use both."
     );
     return null;
   }
   if (!children && !listItems) {
     console.warn(
-      "Either `<li>` children or the `listItems` prop must be used."
+      "NYPL Reservoir List: Pass in either `<li>` children or pass data in " +
+        "the `listItems` prop, not both."
     );
     return null;
   }
@@ -76,7 +77,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
    * 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.
+   * combination of `dt` and `dd` elements for the "Description" type.
    */
   const listChildrenElms = (listType: ListTypes) => {
     if (children) {
@@ -84,10 +85,10 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
     }
     if (listType === ListTypes.Ordered || listType === ListTypes.Unordered) {
       return listItems.map((item, i) => <li key={i}>{item}</li>);
-    } else if (listType === ListTypes.Definition) {
-      return (listItems as DefinitionProps[]).map((item, i) => [
+    } else if (listType === ListTypes.Description) {
+      return (listItems as DescriptionProps[]).map((item, i) => [
         <dt key={`${i}-term`}>{item.term}</dt>,
-        <dd key={`${i}-def`}>{item.definition}</dd>,
+        <dd key={`${i}-des`}>{item.description}</dd>,
       ]);
     }
     return null;
@@ -100,7 +101,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
     React.Children.map(children, (child: React.ReactElement) => {
       if (child && child?.type !== "li" && child?.props?.mdxType !== "li") {
         console.warn(
-          `Direct children of \`List\` (${listType}) should be \`<li>\`s.`
+          `NYPL Reservoir List: Direct children of \`List\` (${listType}) must be \`<li>\`s.`
         );
       }
     });
@@ -109,7 +110,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
    * Checks for `dt` and `dd` elements and consoles a warning if the
    * children are different HTML elements.
    */
-  const checkDefinitionChildrenError = () => {
+  const checkDescriptionChildrenError = () => {
     React.Children.map(children, function (child: React.ReactElement) {
       if (
         child.type !== "dt" &&
@@ -120,7 +121,8 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
         child.props.mdxType !== React.Fragment
       ) {
         console.warn(
-          "Direct children of `List` (definition) should be `<dt>`s and `<dd>`s."
+          "NYPL Reservoir List: Direct children of `List` (description) must " +
+            "be `<dt>`s and `<dd>`s."
         );
       }
     });
@@ -129,14 +131,26 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
   if (type === ListTypes.Ordered || type === ListTypes.Unordered) {
     checkListChildrenError(type);
     listElement = (
-      <Box as={type as As} id={id} className={className} __css={finalStyles}>
+      <Box
+        as={type as As}
+        id={id}
+        className={className}
+        __css={finalStyles}
+        {...rest}
+      >
         {listChildrenElms(type)}
       </Box>
     );
-  } else if (type === ListTypes.Definition) {
-    checkDefinitionChildrenError();
+  } else if (type === ListTypes.Description) {
+    checkDescriptionChildrenError();
     listElement = (
-      <Box as="section" id={id} className={className} __css={finalStyles}>
+      <Box
+        as="section"
+        id={id}
+        className={className}
+        __css={finalStyles}
+        {...rest}
+      >
         {title && (
           <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
             {title}
@@ -148,4 +162,6 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
   }
 
   return listElement;
-}
+});
+
+export default List;

package/src/components/List/ListTypes.tsx

@@ -1,5 +1,5 @@
 export enum ListTypes {
   Ordered = "ol",
   Unordered = "ul",
-  Definition = "dl",
+  Description = "dl",
 }

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

@@ -2,7 +2,7 @@
 
 exports[`List Renders the UI snapshot correctly 1`] = `
 <ul
-  className="css-0"
+  className="css-1xdhyk6"
   id="unordered"
 >
   <li>
@@ -22,7 +22,7 @@ exports[`List Renders the UI snapshot correctly 1`] = `
 
 exports[`List Renders the UI snapshot correctly 2`] = `
 <ul
-  className="css-0"
+  className="css-1xdhyk6"
   id="ordered"
 >
   <li>
@@ -42,7 +42,7 @@ exports[`List Renders the UI snapshot correctly 2`] = `
 
 exports[`List Renders the UI snapshot correctly 3`] = `
 <ol
-  className="css-0"
+  className="css-1xdhyk6"
   id="unordered-no-styling"
 >
   <li>
@@ -62,7 +62,7 @@ exports[`List Renders the UI snapshot correctly 3`] = `
 
 exports[`List Renders the UI snapshot correctly 4`] = `
 <ol
-  className="css-0"
+  className="css-1xdhyk6"
   id="ordered-no-styling"
 >
   <li>
@@ -82,12 +82,114 @@ exports[`List Renders the UI snapshot correctly 4`] = `
 
 exports[`List Renders the UI snapshot correctly 5`] = `
 <section
-  className="css-0"
-  id="definition"
+  className="css-1xdhyk6"
+  id="description"
 >
   <h2
-    className="chakra-heading css-0"
-    id="definition-heading"
+    className="chakra-heading css-1xdhyk6"
+    id="description-heading"
+  >
+    Animal Crossing Fish
+  </h2>
+  <dl>
+    <dt>
+      Mahi-mahi
+    </dt>
+    <dd>
+      <p>
+        The mahi-mahi is an ocean fish known...
+      </p>
+    </dd>
+    <dt>
+      Golden trout
+    </dt>
+    <dd>
+      The golden trout is a beautifully colored fish...
+    </dd>
+  </dl>
+</section>
+`;
+
+exports[`List Renders the UI snapshot correctly 6`] = `
+<ul
+  className="css-kle7zy"
+  id="chakra"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ul>
+`;
+
+exports[`List Renders the UI snapshot correctly 7`] = `
+<ul
+  className="css-1xdhyk6"
+  data-testid="other"
+  id="other"
+>
+  <li>
+    Mahi-mahi
+  </li>
+  <li>
+    Golden trout
+  </li>
+  <li>
+    Rainbowfish
+  </li>
+  <li>
+    Suckerfish
+  </li>
+</ul>
+`;
+
+exports[`List Renders the UI snapshot correctly 8`] = `
+<section
+  className="css-kle7zy"
+  id="chakra"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="chakra-heading"
+  >
+    Animal Crossing Fish
+  </h2>
+  <dl>
+    <dt>
+      Mahi-mahi
+    </dt>
+    <dd>
+      <p>
+        The mahi-mahi is an ocean fish known...
+      </p>
+    </dd>
+    <dt>
+      Golden trout
+    </dt>
+    <dd>
+      The golden trout is a beautifully colored fish...
+    </dd>
+  </dl>
+</section>
+`;
+
+exports[`List Renders the UI snapshot correctly 9`] = `
+<section
+  className="css-1xdhyk6"
+  data-testid="other"
+  id="other"
+>
+  <h2
+    className="chakra-heading css-1xdhyk6"
+    id="other-heading"
   >
     Animal Crossing Fish
   </h2>

package/src/components/Logo/Logo.stories.mdx

@@ -57,10 +57,23 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.12`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Logo Sizes](#logo-sizes)
+- [All Logos](#all-logos)
+- [Custom Logos](#custom-logos)
+
+## Overview
 
 <Description of={Logo} />
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Logo with Controls"
@@ -142,30 +155,29 @@ export const allLogosGrid = (list) => (
 
 ## Accessibility
 
-For accessibility purposes, every DS `Logo` will render the `svg` element with
-its `svg` file name in the `title` element. The default text in the `title` element
-is the logo's code name. Pass in better descriptive text in the `title` prop
-when using the `Logo` component in your application. This will give screenreaders
-a better descriptive title for the `svg` graphic.
+For accessibility purposes, every Reservoir Design System (DS) `Logo` will 
+render the `svg` element with its `svg` file name in the `title` element. The 
+default text in the `title` element is the logo's code name. Pass in better 
+descriptive text in the `title` prop when using the `Logo` component in your 
+application. This will give screenreaders a better descriptive title for the 
+`svg` graphic.
 
-## All Logos
+`Logos`s are decorative by default. This means that they are presentational and
+screenreaders will not read them because the `aria-hidden` attribute is set to
+`true`.
 
-The `Logo` component contains the logos most commonly used by are listed available
-logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
+Resources:
 
-If you feel a necessary logo should be added to the `Logo` component, please reach out
-to the DS team.
-
-<Canvas withToolbar>
-  <Story name="All Logos">{allLogosGrid(logos)}</Story>
-</Canvas>
+- [W3C Design System SVG Icons](https://design-system.w3.org/styles/svg-icons.html)
+- [CSS-Tricks Accessible SVG Icons](https://css-tricks.com/accessible-svg-icons/)
+- [Chakra UI Icon](https://chakra-ui.com/docs/components/media-and-icons/icon)
 
 ## Logo Sizes
 
 Update the size of the `Logo` component by passing the `size` prop with a value from
 `LogoSizes`. The `LogoSizes` enum can be found in`src/components/Logo/LogoTypes.tsx`.
 
-Note: `LogoSizes.Default` sets the width to `100%` and the logo will expand to
+Note: `LogoSizes.Default` sets the width to `100%` and the rendered logo will expand to
 fill the full width of the parent element.
 
 ```jsx
@@ -177,6 +189,18 @@ fill the full width of the parent element.
   <Story name="Logo Sizes">{allLogosGrid(sizes)}</Story>
 </Canvas>
 
+## All Logos
+
+The `Logo` component contains the logos most commonly used by are listed available
+logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
+
+If you feel a necessary logo should be added to the `Logo` component, please reach out
+to the DS team.
+
+<Canvas withToolbar>
+  <Story name="All Logos">{allLogosGrid(logos)}</Story>
+</Canvas>
+
 ## Custom Logos
 
 If you'd like to pass a custom `svg` to your application, you can pass it a

package/src/components/Logo/Logo.test.tsx

@@ -28,7 +28,7 @@ describe("Logo", () => {
       </Logo>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Logo accepts either a `name` prop or an `svg` element child. It can not accept both."
+      "NYPL Reservoir Logo: Pass either a `name` prop or an `svg` element child. Do not pass both."
     );
   });
 
@@ -36,7 +36,17 @@ describe("Logo", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Logo />);
     expect(warn).toHaveBeenCalledWith(
-      "Pass a logo `name` prop or an SVG child to `Logo` to ensure a logo appears."
+      "NYPL Reservoir Logo: Pass a logo `name` prop or an SVG child to " +
+        "`Logo` to ensure a logo appears."
+    );
+  });
+
+  it("consoles a warning if name is not passed and a child is but it's not an SVG element", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Logo>Not an SVG</Logo>);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Logo: An `svg` element must be passed to the `Logo` " +
+        "component as its child."
     );
   });
 
@@ -91,8 +101,25 @@ describe("Logo", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Logo
+          id="chakra"
+          name={LogoNames.NYPLBlack}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Logo id="props" name={LogoNames.NYPLBlack} data-testid="props" />
+      )
+      .toJSON();
 
     expect(standard).toMatchSnapshot();
     expect(withCustomSize).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });