@nypl/design-system-react-components 0.25.11 → 0.26.0

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.11`  |
+| 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();
   });
 });

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,18 +54,21 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
     id,
     role: "img",
     title,
+    ...rest,
   };
   let childSVG = null;
 
   // Component prop validation
   if (name && children) {
     console.warn(
-      "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."
     );
     return null;
   } else if (!name && !children) {
     console.warn(
-      "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."
     );
     return null;
   }
@@ -83,15 +91,24 @@ export default function Logo(props: React.PropsWithChildren<LogoProps>) {
   // Apply logo props to the SVG child.
   if (
     (children as JSX.Element).type === "svg" ||
-    (children as JSX.Element).props.type === "svg" ||
-    (children as JSX.Element).props.mdxType === "svg"
+    (children as JSX.Element).props?.type === "svg" ||
+    (children as JSX.Element).props?.mdxType === "svg"
   ) {
     childSVG = React.cloneElement(children as JSX.Element, {
       ...logoProps,
     });
   } else {
-    console.warn("You must pass an `svg` element to the `Logo` component.");
+    console.warn(
+      "NYPL Reservoir Logo: An `svg` element must be passed to the `Logo` " +
+        "component as its child."
+    );
   }
 
-  return <Box __css={styles}>{childSVG}</Box>;
-}
+  return (
+    <Box __css={styles} {...rest}>
+      {childSVG}
+    </Box>
+  );
+});
+
+export default Logo;

package/src/components/Logo/LogoSvgs.tsx

@@ -3,6 +3,8 @@ import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
 import logo_bpl_white from "../../../icons/svg/logo_bpl_white.svg";
 import logo_clever_color from "../../../icons/svg/logo_clever_color.svg";
 import logo_clever_white from "../../../icons/svg/logo_clever_white.svg";
+import logo_firstbook_color from "../../../icons/svg/logo_firstbook_color.svg";
+import logo_firstbook_color_negative from "../../../icons/svg/logo_firstbook_color_negative.svg";
 import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
 import logo_lpa_black from "../../../icons/svg/logo_lpa_black.svg";
 import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
@@ -12,11 +14,17 @@ import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
 import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
 import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
 import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
+import logo_openebooks_color from "../../../icons/svg/logo_openebooks_color.svg";
+import logo_openebooks_negative from "../../../icons/svg/logo_openebooks_negative.svg";
+import logo_openebooks_wtext_color from "../../../icons/svg/logo_openebooks_wtext_color.svg";
+import logo_openebooks_wtext_negative from "../../../icons/svg/logo_openebooks_wtext_negative.svg";
 import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
 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";
@@ -36,6 +44,8 @@ export default {
   logo_bpl_white,
   logo_clever_color,
   logo_clever_white,
+  logo_firstbook_color,
+  logo_firstbook_color_negative,
   logo_lpa_black,
   logo_lpa_color,
   logo_lpa_white,
@@ -45,11 +55,17 @@ export default {
   logo_nypl_full_white,
   logo_nypl_lion_black,
   logo_nypl_lion_white,
+  logo_openebooks_color,
+  logo_openebooks_negative,
+  logo_openebooks_wtext_color,
+  logo_openebooks_wtext_negative,
   logo_qpl_alt_black,
   logo_qpl_alt_white,
   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

@@ -5,12 +5,12 @@ export enum LogoColors {
 }
 
 export enum LogoSizes {
+  Default = "default",
   ExtraExtraSmall = "xxsmall",
   ExtraSmall = "xsmall",
   Small = "small",
   Medium = "medium",
   Large = "large",
-  Default = "default",
 }
 
 export enum LogoNames {
@@ -18,6 +18,8 @@ export enum LogoNames {
   BrooklynPublicLibraryWhite = "logo_bpl_white",
   CleverColor = "logo_clever_color",
   CleverWhite = "logo_clever_white",
+  FirstBookColor = "logo_firstbook_color",
+  FirstBookColorNegative = "logo_firstbook_color_negative",
   LPAColor = "logo_lpa_color",
   LPABlack = "logo_lpa_black",
   LPAWhite = "logo_lpa_white",
@@ -27,11 +29,17 @@ export enum LogoNames {
   NYPLWhite = "logo_nypl_full_white",
   NYPLLionBlack = "logo_nypl_lion_black",
   NYPLLionWhite = "logo_nypl_lion_white",
+  OpenEBooksColor = "logo_openebooks_color",
+  OpenEBooksNegative = "logo_openebooks_negative",
+  OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
+  OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
   QueensPublicLibraryColor = "logo_qpl_color",
   QueensPublicLibraryBlack = "logo_qpl_black",
   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>
+`;

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

@@ -34,6 +34,17 @@ import { getCategory } from "../../utils/componentCategories";
 | Added             | `0.1.0`    |
 | Latest            | `0.3.5`    |
 
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Code Implementation](#code-implementation)
+
+## Overview
+
+_Note: This component is going through an accessibility review and is not
+recommended for use until it is updated._
+
 <Description of={Modal} />
 
 export const ModalStory = (args) => {
@@ -124,6 +135,8 @@ export const ModalStory = (args) => {
   );
 };
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Modal"

package/src/components/Notification/Notification.stories.mdx

@@ -33,15 +33,15 @@ export const enumValues = getStorybookEnumValues(
     jest: ["Notification.test.tsx"],
   }}
   argTypes={{
-    centered: {
-      table: { defaultValue: { summary: false } },
-    },
     className: { control: false },
     dismissible: {
       table: { defaultValue: { summary: false } },
     },
     icon: { control: false },
     id: { control: false },
+    isCentered: {
+      table: { defaultValue: { summary: false } },
+    },
     noMargin: {
       table: { defaultValue: { summary: false } },
     },
@@ -59,7 +59,18 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Variants](#variants)
+- [Custom Icon](#custom-icon)
+- [Dismissible](#dismissible)
+
+## Overview
 
 <Description of={Notification} />
 
@@ -70,16 +81,18 @@ In the preview below, the border around the `Notification` is not part of the
 component. It has been added to help illustrate how the `Notification` sits
 within a parent element.
 
+## Component Props
+
 <Canvas>
   <Story
     name="Notification with Controls"
     args={{
       ariaLabel: "Notification label",
-      centered: false,
       className: undefined,
       dismissible: false,
       icon: undefined,
       id: "notification-id",
+      isCentered: false,
       noMargin: false,
       notificationHeading: "Notification Heading",
       notificationContent: (
@@ -118,6 +131,22 @@ be rendered inside other landmark elements such as the `header` and `footer`
 landmark elements. Adding a `Notification` component inside an HTML `main` landmark
 element is acceptable.
 
+Every `Notification` component must have a unique `aria-label` attribute. This
+is set through the `ariaLabel` prop. A unique `aria-label` value, along with the
+`aside` HTML landmark element, helps screen readers better navigate a page with
+multiple `Notification`s.
+
+Icons rendered in the `Notification` component are decorative by default which
+means that they are hidden to screen readers. Since the "X" close icon inside the
+dismissible button is decorative and because there is no discernible text inside
+the button, an `aria-label` attribute is added to the button.
+
+Resources:
+
+- [MDN Aria: complementary role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role)
+- [Deque Creating Accessible SVGs](https://www.deque.com/blog/creating-accessible-svgs/)
+- [CSS Tricks Accessible SVG Icons](https://css-tricks.com/accessible-svg-icons/)
+
 ## Variants
 
 ### With NotificationHeading