@nypl/design-system-react-components 0.25.13 → 0.27.0

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 };
@@ -78,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) {
@@ -86,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;
@@ -111,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" &&
@@ -122,7 +121,7 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
         child.props.mdxType !== React.Fragment
       ) {
         console.warn(
-          "NYPL Reservoir List: Direct children of `List` (definition) must " +
+          "NYPL Reservoir List: Direct children of `List` (description) must " +
             "be `<dt>`s and `<dd>`s."
         );
       }
@@ -132,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}
@@ -151,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,11 +155,22 @@ 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.
+
+`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`.
+
+Resources:
+
+- [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
 

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

@@ -101,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();
   });
 });

package/src/components/Logo/Logo.tsx

@@ -1,7 +1,11 @@
+import {
+  Box,
+  chakra,
+  Icon as ChakraIcon,
+  useStyleConfig,
+} from "@chakra-ui/react";
 import * as React from "react";
-import { Icon as ChakraIcon, Box, useStyleConfig } from "@chakra-ui/react";
 
-import generateUUID from "../../helpers/generateUUID";
 import { LogoNames, LogoSizes } from "./LogoTypes";
 import logoSvgs from "./LogoSvgs";
 
@@ -29,16 +33,17 @@ export interface LogoProps {
  * The `Logo` component renders SVG-based logos and color variants that are
  * commonly used by the New York Public Library.
  */
-export default function Logo(props: React.PropsWithChildren<LogoProps>) {
+export const Logo = chakra((props: React.PropsWithChildren<LogoProps>) => {
   const {
     additionalStyles = {},
     children,
     className,
     decorative = false,
-    id = generateUUID(),
+    id,
     name,
     size = LogoSizes.Medium,
     title = `${name} logo`,
+    ...rest
   } = props;
   const styles = useStyleConfig("Logo", {
     size,
@@ -49,6 +54,7 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
     id,
     role: "img",
     title,
+    ...rest,
   };
   let childSVG = null;
 
@@ -98,5 +104,11 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
     );
   }
 
-  return <Box __css={styles}>{childSVG}</Box>;
-}
+  return (
+    <Box __css={styles} {...rest}>
+      {childSVG}
+    </Box>
+  );
+});
+
+export default Logo;

package/src/components/Logo/LogoSvgs.tsx

@@ -23,6 +23,8 @@ import logo_qpl_alt_white from "../../../icons/svg/logo_qpl_alt_white.svg";
 import logo_qpl_black from "../../../icons/svg/logo_qpl_black.svg";
 import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
 import logo_qpl_white from "../../../icons/svg/logo_qpl_white.svg";
+import logo_reservoir_icon_color from "../../../icons/svg/logo_reservoir_icon_color.svg";
+import logo_reservoir_vertical_color from "../../../icons/svg/logo_reservoir_vertical_color.svg";
 import logo_schomburg_black from "../../../icons/svg/logo_schomburg_black.svg";
 import logo_schomburg_circle_black from "../../../icons/svg/logo_schomburg_circle_black.svg";
 import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
@@ -62,6 +64,8 @@ export default {
   logo_qpl_black,
   logo_qpl_color,
   logo_qpl_white,
+  logo_reservoir_icon_color,
+  logo_reservoir_vertical_color,
   logo_schomburg_black,
   logo_schomburg_circle_black,
   logo_schomburg_circle_color,

package/src/components/Logo/LogoTypes.tsx

@@ -38,6 +38,8 @@ export enum LogoNames {
   QueensPublicLibraryWhite = "logo_qpl_white",
   QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
   QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
+  ReservoirIconColor = "logo_reservoir_icon_color",
+  ReservoirVerticalColor = "logo_reservoir_vertical_color",
   SchomburgColor = "logo_schomburg_color",
   SchomburgBlack = "logo_schomburg_black",
   SchomburgWhite = "logo_schomburg_white",

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

@@ -3,7 +3,7 @@
 exports[`Logo renders the UI snapshot correctly 1`] = `
 <svg
   aria-hidden={false}
-  className="chakra-icon css-onkibi"
+  className="chakra-icon css-1grhd2q"
   focusable={false}
   id="test-logo"
   role="img"
@@ -38,7 +38,7 @@ exports[`Logo renders the UI snapshot correctly 1`] = `
 exports[`Logo renders the UI snapshot correctly 2`] = `
 <svg
   aria-hidden={false}
-  className="chakra-icon css-onkibi"
+  className="chakra-icon css-1grhd2q"
   focusable={false}
   id="test-logo-size"
   role="img"
@@ -69,3 +69,74 @@ exports[`Logo renders the UI snapshot correctly 2`] = `
   </g>
 </svg>
 `;
+
+exports[`Logo renders the UI snapshot correctly 3`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-1ayys74"
+  focusable={false}
+  id="chakra"
+  role="img"
+  title="logo_nypl_full_black logo"
+  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>
+`;
+
+exports[`Logo renders the UI snapshot correctly 4`] = `
+<svg
+  aria-hidden={false}
+  className="chakra-icon css-1grhd2q"
+  data-testid="props"
+  focusable={false}
+  id="props"
+  role="img"
+  title="logo_nypl_full_black logo"
+  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>
+`;