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

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

@@ -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

@@ -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 {
@@ -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

@@ -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.12`  |
+| 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,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,17 +8,15 @@ 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;
-  /** Optional prop to control horizontal alignment of the `Notification` content */
-  centered?: boolean;
   /** Optional custom `Icon` that will override the default `Icon`. */
   icon?: JSX.Element;
   /** ID that other components can cross reference for accessibility purposes. */
   id?: string;
+  /** Optional prop to control horizontal alignment of the `Notification` content */
+  isCentered?: boolean;
   /** Optional prop to control the coloring of the `Notification` text and the
    * visibility of an applicable icon. */
   notificationType?: NotificationTypes;
@@ -27,7 +25,7 @@ interface BaseProps {
 // Used for `NotificationHeading` and `Notification`
 type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 // Used for `NotificationContent`
-type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
 
 export interface NotificationProps extends BasePropsWithoutAlignText {
   /** Label used to describe the `Notification`'s aside HTML element. */
@@ -52,72 +50,73 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 /**
  * NotificationHeading child-component.
  */
-export function NotificationHeading(
-  props: React.PropsWithChildren<BasePropsWithoutAlignText>
-) {
-  const { centered, children, icon, id, notificationType } = props;
-  const styles = useMultiStyleConfig("NotificationHeading", {
-    centered,
-    icon,
-    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<BasePropsWithoutCentered>
-) {
-  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,
-    centered = false,
     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);
   const styles = useMultiStyleConfig("Notification", {
-    centered,
     dismissible,
+    isCentered,
     noMargin,
     notificationType,
   });
@@ -182,16 +181,16 @@ export default function Notification(props: NotificationProps) {
   const iconElem = iconElement();
   const childHeading = notificationHeading && (
     <NotificationHeading
-      centered={centered}
       icon={iconElem}
       id={id}
+      isCentered={isCentered}
       notificationType={notificationType}
     >
       {notificationHeading}
     </NotificationHeading>
   );
   // Specific alignment styles for the content.
-  const alignText = childHeading && showIcon && (!!icon || !centered);
+  const alignText = childHeading && showIcon && (!!icon || !isCentered);
   const childContent = (
     <NotificationContent
       alignText={alignText}
@@ -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;