@nypl/design-system-react-components 0.25.5 → 0.25.9

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

@@ -1,24 +1,24 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
+import Icon from "../Icons/Icon";
+import { IconColors, IconNames } from "../Icons/IconTypes";
 import Notification from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
-import Icon from "../Icons/Icon";
-import {
-  IconSizes,
-  IconColors,
-  IconNames,
-  IconAlign,
-} from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  NotificationTypes,
+  "NotificationTypes"
+);
 
 <Meta
   title={getCategory("Notification")}
@@ -27,11 +27,29 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A812",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A812",
     },
     jest: ["Notification.test.tsx"],
   }}
+  argTypes={{
+    centered: {
+      table: { defaultValue: { summary: false } },
+    },
+    className: { control: false },
+    dismissible: {
+      table: { defaultValue: { summary: false } },
+    },
+    icon: { control: false },
+    id: { control: false },
+    noMargin: {
+      table: { defaultValue: { summary: false } },
+    },
+    notificationType: {
+      control: { type: "select" },
+      table: { defaultValue: { summary: "NotificationTypes.Standard" } },
+      options: enumValues.options,
+    },
+  }}
 />
 
 # Notification
@@ -39,7 +57,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.9`   |
 
 <Description of={Notification} />
 
@@ -52,10 +70,14 @@ within a parent element.
 
 <Canvas>
   <Story
-    name="Notification Props"
+    name="Notification with Controls"
     args={{
-      id: "basic-notification",
-      centered: true,
+      centered: false,
+      className: undefined,
+      dismissible: false,
+      icon: undefined,
+      id: "notification-id",
+      noMargin: false,
       notificationHeading: "Notification Heading",
       notificationContent: (
         <>
@@ -67,17 +89,21 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
+      showIcon: true,
     }}
   >
     {(args) => (
       <div style={{ border: "1px solid #ccc" }}>
-        <Notification {...args} />
+        <Notification
+          {...args}
+          notificationType={enumValues.getValue(args.notificationType)}
+        />
       </div>
     )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Notification Props" />
+<ArgsTable story="Notification with Controls" />
 
 ## Variants
 
@@ -194,31 +220,61 @@ within a parent element.
   </DSProvider>
 </Canvas>
 
+### Without Icon
+
+The `Notification` icon can be hidden with the `showIcon` prop set to `false`.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification without Icon"
+      notificationContent={
+        <>
+          Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+          mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum
+          at eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+    <Notification
+      notificationContent={
+        <>
+          This is an Standard Notification without a heading or icon. Cras
+          mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      showIcon={false}
+    />
+  </DSProvider>
+</Canvas>
+
 ## Custom Icon
 
 The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.
 
 <Canvas>
   <Story name="Custom Icons">
-    {(args) => (
-      <Notification
-        icon={
-          <Icon
-            name={IconNames.Check}
-            color={IconColors.SectionResearchSecondary}
-          />
-        }
-        notificationHeading="Custom Icon"
-        notificationContent={
-          <>
-            This is a Notification with a custom icon. Cras mattis consectetur
-            purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi
-            leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis
-            natoque penatibus et magnis dis parturient montes, nascetur
-            ridiculus mus.
-          </>
-        }
-      />
-    )}
+    <Notification
+      icon={
+        <Icon
+          name={IconNames.Check}
+          color={IconColors.SectionResearchSecondary}
+        />
+      }
+      notificationHeading="Custom Icon"
+      notificationContent={
+        <>
+          This is a Notification with a custom icon. Cras mattis consectetur
+          purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo
+          risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque
+          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+        </>
+      }
+    />
   </Story>
 </Canvas>

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

@@ -13,8 +13,8 @@ describe("Notification Accessibility", () => {
     const { container } = render(
       <Notification
         id="notificationID"
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -29,6 +29,18 @@ describe("Notification Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test without an icon", async () => {
+    const { container } = render(
+      <Notification
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        showIcon={false}
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Notification", () => {
@@ -37,8 +49,8 @@ describe("Notification", () => {
     utils = render(
       <Notification
         id="notificationID"
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
   });
@@ -51,7 +63,20 @@ describe("Notification", () => {
     expect(screen.getByText("Notification content.")).toBeInTheDocument();
   });
 
-  it("renders without Icon", () => {
+  it("renders with an Icon", () => {
+    // The Icon's role is "img".
+    expect(screen.queryByRole("img")).toBeInTheDocument();
+  });
+
+  it("does not render an Icon", () => {
+    utils.rerender(
+      <Notification
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        showIcon={false}
+      />
+    );
     // The Icon's role is "img".
     expect(screen.queryByRole("img")).not.toBeInTheDocument();
   });
@@ -59,18 +84,18 @@ describe("Notification", () => {
   it("renders a custom Icon component", () => {
     utils.rerender(
       <Notification
-        id="notificationID"
         icon={
           <Icon
             id="custom-icon"
+            className="custom-icon"
+            color={IconColors.BrandPrimary}
             name={IconNames.Check}
             size={IconSizes.Large}
-            color={IconColors.BrandPrimary}
-            className="custom-icon"
           />
         }
-        notificationHeading="Notification Heading"
+        id="notificationID"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
       />
     );
     expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
@@ -80,9 +105,9 @@ describe("Notification", () => {
     utils.rerender(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Announcement}
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Announcement}
       />
     );
 
@@ -96,9 +121,9 @@ describe("Notification", () => {
     utils.rerender(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Warning}
-        notificationHeading="Notification Heading"
         notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Warning}
       />
     );
 
@@ -113,8 +138,8 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID1"
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
         />
       )
       .toJSON();
@@ -122,9 +147,9 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID2"
-          notificationType={NotificationTypes.Announcement}
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          notificationType={NotificationTypes.Announcement}
         />
       )
       .toJSON();
@@ -132,9 +157,9 @@ describe("Notification", () => {
       .create(
         <Notification
           id="notificationID3"
-          notificationType={NotificationTypes.Warning}
-          notificationHeading="Notification Heading"
           notificationContent={<>Notification content.</>}
+          notificationHeading="Notification Heading"
+          notificationType={NotificationTypes.Warning}
         />
       )
       .toJSON();
@@ -146,9 +171,30 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const withoutAnIcon = renderer
+      .create(
+        <Notification
+          id="notificationID5"
+          notificationHeading="Notification Heading"
+          notificationContent={<>Notification content.</>}
+          showIcon={false}
+        />
+      )
+      .toJSON();
+    const withoutHeadingAndIcon = renderer
+      .create(
+        <Notification
+          id="notificationID6"
+          notificationContent={<>Notification content.</>}
+          showIcon={false}
+        />
+      )
+      .toJSON();
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
     expect(warning).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
+    expect(withoutAnIcon).toMatchSnapshot();
+    expect(withoutHeadingAndIcon).toMatchSnapshot();
   });
 });

package/src/components/Notification/Notification.tsx

@@ -17,6 +17,8 @@ interface BaseProps {
   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 the coloring of the `Notification` text and the
    * visibility of an applicable icon. */
   notificationType?: NotificationTypes;
@@ -35,14 +37,14 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
   dismissible?: 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 the margin around the `Notification` component. */
   noMargin?: boolean;
   /** Content to be rendered in a `NotificationContent` component. */
   notificationContent: string | JSX.Element;
   /** Content to be rendered in a `NotificationHeading` component. */
   notificationHeading?: string;
+  /** Prop to display the `Notification` icon. Defaults to `true`. */
+  showIcon?: boolean;
 }
 
 /**
@@ -51,15 +53,20 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
 export function NotificationHeading(
   props: React.PropsWithChildren<BasePropsWithoutAlignText>
 ) {
-  const { centered, children, icon, notificationType } = props;
+  const { centered, children, icon, id, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
     centered,
+    icon,
     notificationType,
   });
   return (
     <Box as="header" __css={styles}>
       {icon}
-      <Heading level={HeadingLevels.Four} additionalStyles={styles.heading}>
+      <Heading
+        additionalStyles={styles.heading}
+        id={`${id}-heading`}
+        level={HeadingLevels.Four}
+      >
         {children}
       </Heading>
     </Box>
@@ -75,6 +82,7 @@ export function NotificationContent(
   const { alignText, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationContent", {
     alignText,
+    icon,
     notificationType,
   });
   return (
@@ -100,6 +108,7 @@ export default function Notification(props: NotificationProps) {
     notificationContent,
     notificationHeading,
     notificationType = NotificationTypes.Standard,
+    showIcon = true,
   } = props;
   const [isOpen, setIsOpen] = useState(true);
   const handleClose = () => setIsOpen(false);
@@ -107,6 +116,7 @@ export default function Notification(props: NotificationProps) {
     centered,
     noMargin,
     notificationType,
+    showIcon,
   });
   const iconElement = () => {
     const baseIconProps = {
@@ -114,6 +124,10 @@ export default function Notification(props: NotificationProps) {
       size: IconSizes.Large,
       additionalStyles: styles.icon,
     };
+    // If the icon should not display, return null.
+    if (!showIcon) {
+      return null;
+    }
     // If a custom icon is passed, add specific `Notification` styles.
     if (icon)
       return React.cloneElement(icon, {
@@ -125,18 +139,22 @@ export default function Notification(props: NotificationProps) {
         name: IconNames.SpeakerNotes,
         color: IconColors.SectionResearchSecondary,
       },
+      [NotificationTypes.Standard]: {
+        name: IconNames.AlertNotificationImportant,
+        color: IconColors.UiBlack,
+      },
       [NotificationTypes.Warning]: {
         name: IconNames.ErrorFilled,
         color: IconColors.BrandPrimary,
       },
     };
-    return notificationType !== NotificationTypes.Standard ? (
+    return (
       <Icon
         id={`${id}-notification-icon`}
         {...baseIconProps}
         {...iconProps[notificationType]}
       />
-    ) : null;
+    );
   };
   const dismissibleButton = dismissible && (
     <Button
@@ -157,15 +175,14 @@ export default function Notification(props: NotificationProps) {
     <NotificationHeading
       centered={centered}
       icon={iconElem}
+      id={id}
       notificationType={notificationType}
     >
       {notificationHeading}
     </NotificationHeading>
   );
   // Specific alignment styles for the content.
-  const alignText =
-    childHeading &&
-    (!!icon || (notificationType !== NotificationTypes.Standard && !centered));
+  const alignText = childHeading && showIcon && (!!icon || !centered);
   const childContent = (
     <NotificationContent
       alignText={alignText}

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

@@ -12,8 +12,41 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
     <header
       className="css-0"
     >
+      <svg
+        aria-hidden={false}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="notificationID1-notification-icon"
+        role="img"
+        title="alert_notification_important icon"
+        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>
       <h4
         className="chakra-heading css-0"
+        id="notificationID1-heading"
       >
         Notification Heading
       </h4>
@@ -77,6 +110,7 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
       </svg>
       <h4
         className="chakra-heading css-0"
+        id="notificationID2-heading"
       >
         Notification Heading
       </h4>
@@ -140,6 +174,7 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
       </svg>
       <h4
         className="chakra-heading css-0"
+        id="notificationID3-heading"
       >
         Notification Heading
       </h4>
@@ -162,6 +197,92 @@ exports[`Notification renders the UI snapshot correctly 4`] = `
   className="css-0"
   data-type="standard"
   id="notificationID4"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <svg
+        aria-hidden={false}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="notificationID4-notification-icon"
+        role="img"
+        title="alert_notification_important icon"
+        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>
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 5`] = `
+<aside
+  className="css-0"
+  data-type="standard"
+  id="notificationID5"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-0"
+    >
+      <h4
+        className="chakra-heading css-0"
+        id="notificationID5-heading"
+      >
+        Notification Heading
+      </h4>
+    </header>
+    <div
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 6`] = `
+<aside
+  className="css-0"
+  data-type="standard"
+  id="notificationID6"
 >
   <div
     className="css-0"