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

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

@@ -77,8 +77,12 @@ describe("Notification", () => {
   });
 
   it("renders with an Icon", () => {
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).toBeInTheDocument();
+    // Since the icon has aria-hidden set to true, we can't get it
+    // by its "img" role.
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).toBeInTheDocument();
   });
 
   it("does not render an Icon", () => {
@@ -90,8 +94,10 @@ describe("Notification", () => {
         showIcon={false}
       />
     );
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).not.toBeInTheDocument();
   });
 
   it("renders a custom Icon component", () => {
@@ -111,7 +117,11 @@ describe("Notification", () => {
         notificationHeading="Notification Heading"
       />
     );
-    expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
+
+    const customIcon = utils.container.querySelector(
+      "#notificationID-custom-notification-icon"
+    );
+    expect(customIcon).toBeInTheDocument();
   });
 
   it("renders the announcement Notification type", () => {
@@ -163,14 +173,15 @@ describe("Notification", () => {
         notificationType={NotificationTypes.Standard}
       />
     );
-    const icons = screen.queryAllByRole("img");
 
-    expect(icons).toHaveLength(2);
-    expect(screen.getByTitle("Notification standard icon")).toBeInTheDocument();
+    const dismissibleIcon = utils.container.querySelector(
+      "#notificationID-dismissible-notification-icon"
+    );
+    expect(dismissibleIcon).toBeInTheDocument();
     expect(screen.getByTitle("Notification close icon")).toBeInTheDocument();
   });
 
-  it.skip("renders the UI snapshot correctly", () => {
+  it("renders the UI snapshot correctly", () => {
     const standard = renderer
       .create(
         <Notification
@@ -236,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();
@@ -244,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,79 +50,79 @@ 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,
   });
   const iconElement = () => {
     const baseIconProps = {
       additionalStyles: styles.icon,
-      decorative: false,
       size: IconSizes.Large,
     };
     // If the icon should not display, return null.
@@ -164,13 +162,16 @@ export default function Notification(props: NotificationProps) {
   };
   const dismissibleButton = dismissible && (
     <Button
+      additionalStyles={styles.dismissibleButton}
+      attributes={{
+        "aria-label": "Close the notification",
+      }}
       buttonType={ButtonTypes.Link}
+      id={`${id}-notification-dismissible-button`}
       onClick={handleClose}
-      additionalStyles={styles.dismissibleButton}
     >
       <Icon
-        decorative={false}
-        id={`${id}-notification-dismissible-icon`}
+        id={`${id}-dismissible-notification-icon`}
         name={IconNames.Close}
         size={IconSizes.Large}
         title="Notification close icon"
@@ -180,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}
@@ -212,6 +213,7 @@ export default function Notification(props: NotificationProps) {
       data-type={notificationType}
       id={id}
       __css={styles}
+      {...rest}
     >
       <Box __css={styles.container}>
         {childHeading}
@@ -220,4 +222,6 @@ export default function Notification(props: NotificationProps) {
       {dismissibleButton}
     </Box>
   );
-}
+});
+
+export default Notification;