@nypl/design-system-react-components 0.25.13 → 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.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>
+`;

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

@@ -59,7 +59,18 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.13`  |
+| 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,6 +81,8 @@ 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"
@@ -118,11 +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

package/src/components/Notification/Notification.test.tsx

@@ -247,6 +247,27 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Notification
+          id="chakra"
+          notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Notification
+          id="props"
+          notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          data-testid="props"
+        />
+      )
+      .toJSON();
 
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
@@ -255,5 +276,7 @@ describe("Notification", () => {
     expect(withoutAnIcon).toMatchSnapshot();
     expect(withoutHeadingAndIcon).toMatchSnapshot();
     expect(dismissible).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Notification/Notification.tsx

@@ -1,5 +1,5 @@
+import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState } from "react";
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
@@ -8,8 +8,6 @@ import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import { NotificationTypes } from "./NotificationTypes";
-import generateUUID from "../../helpers/generateUUID";
-
 interface BaseProps {
   /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
@@ -52,66 +50,67 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export function NotificationHeading(
-  props: React.PropsWithChildren<BasePropsWithoutAlignText>
-) {
-  const { children, icon, id, isCentered, notificationType } = props;
-  const styles = useMultiStyleConfig("NotificationHeading", {
-    icon,
-    isCentered,
-    notificationType,
-  });
-  return (
-    <Box as="header" __css={styles}>
-      {icon}
-      <Heading
-        additionalStyles={styles.heading}
-        id={`${id}-heading`}
-        level={HeadingLevels.Four}
-      >
-        {children}
-      </Heading>
-    </Box>
-  );
-}
+export const NotificationHeading = chakra(
+  (props: React.PropsWithChildren<BasePropsWithoutAlignText>) => {
+    const { children, icon, id, isCentered, notificationType, ...rest } = props;
+    const styles = useMultiStyleConfig("NotificationHeading", {
+      icon,
+      isCentered,
+      notificationType,
+    });
+    return (
+      <Box as="header" __css={styles} {...rest}>
+        {icon}
+        <Heading
+          additionalStyles={styles.heading}
+          id={`${id}-heading`}
+          level={HeadingLevels.Four}
+        >
+          {children}
+        </Heading>
+      </Box>
+    );
+  }
+);
 
 /**
  * NotificationContent child-component.
  */
-export function NotificationContent(
-  props: React.PropsWithChildren<BasePropsWithoutIsCentered>
-) {
-  const { alignText, children, icon, notificationType } = props;
-  const styles = useMultiStyleConfig("NotificationContent", {
-    alignText,
-    icon,
-    notificationType,
-  });
-  return (
-    <Box __css={styles}>
-      {icon}
-      <Box __css={styles.content}>{children}</Box>
-    </Box>
-  );
-}
+export const NotificationContent = chakra(
+  (props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => {
+    const { alignText, children, icon, notificationType, ...rest } = props;
+    const styles = useMultiStyleConfig("NotificationContent", {
+      alignText,
+      icon,
+      notificationType,
+    });
+    return (
+      <Box __css={styles} {...rest}>
+        {icon}
+        <Box __css={styles.content}>{children}</Box>
+      </Box>
+    );
+  }
+);
 
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.
  */
-export default function Notification(props: NotificationProps) {
+export const Notification = chakra((props: NotificationProps) => {
   const {
     ariaLabel,
     className,
     dismissible = false,
     icon,
-    id = generateUUID(),
+    id,
     isCentered = false,
     noMargin = false,
     notificationContent,
     notificationHeading,
     notificationType = NotificationTypes.Standard,
     showIcon = true,
+    ...rest
   } = props;
   const [isOpen, setIsOpen] = useState(true);
   const handleClose = () => setIsOpen(false);
@@ -214,6 +213,7 @@ export default function Notification(props: NotificationProps) {
       data-type={notificationType}
       id={id}
       __css={styles}
+      {...rest}
     >
       <Box __css={styles.container}>
         {childHeading}
@@ -222,4 +222,6 @@ export default function Notification(props: NotificationProps) {
       {dismissibleButton}
     </Box>
   );
-}
+});
+
+export default Notification;