@nypl/design-system-react-components 0.25.0 → 0.25.4

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

@@ -8,13 +8,15 @@ import {
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
 
-import Notification, {
-  NotificationContent,
-  NotificationHeading,
-  NotificationProps,
-} from "./Notification";
+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";
 
@@ -37,12 +39,16 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Notification} />
 
-The `Notification` component is a configurable callout that should be used to display important messages.
+The `Notification` component is a configurable callout that should be used to
+display important messages.
 
-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.
+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.
 
 <Canvas>
   <Story
@@ -50,25 +56,22 @@ In the preview below, the border around the `Notification` is not part of the co
     args={{
       id: "basic-notification",
       centered: true,
-    }}
-    argTypes={{
-      blockName: { table: { disable: true } },
-      modifiers: { table: { disable: true } },
+      notificationHeading: "Notification Heading",
+      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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus,
+          nisi erat porttitor ligula.
+        </>
+      ),
     }}
   >
     {(args) => (
       <div style={{ border: "1px solid #ccc" }}>
-        <Notification {...args}>
-          <NotificationHeading>Notification Heading</NotificationHeading>
-          <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. Vivamus sagittis lacus
-            vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non
-            commodo luctus, nisi erat porttitor ligula.
-          </NotificationContent>
-        </Notification>
+        <Notification {...args} />
       </div>
     )}
   </Story>
@@ -82,48 +85,57 @@ In the preview below, the border around the `Notification` is not part of the co
 
 <Canvas>
   <DSProvider>
-    <Notification>
-      <NotificationHeading>Standard Notification</NotificationHeading>
-      <NotificationContent>
-        This is a "standard" Notification with a heading. 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. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-        auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationHeading="Standard Notification"
+      notificationContent={
+        <>
+          This is a "standard" Notification with a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Notification notificationType={NotificationTypes.Announcement}>
-      <NotificationHeading>Announcement Notification</NotificationHeading>
-      <NotificationContent>
-        This is an "announcement" Notification with a heading. 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. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-        auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationType={NotificationTypes.Announcement}
+      notificationHeading="Announcement Notification"
+      notificationContent={
+        <>
+          This is an "announcement" Notification with a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Notification notificationType={NotificationTypes.Warning}>
-      <NotificationHeading>Warning Notification</NotificationHeading>
-      <NotificationContent>
-        This is a "warning" Notification with a heading. 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.
-        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationType={NotificationTypes.Warning}
+      notificationHeading="Warning Notification"
+      notificationContent={
+        <>
+          This is a "warning" Notification with a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
@@ -131,46 +143,54 @@ In the preview below, the border around the `Notification` is not part of the co
 
 <Canvas>
   <DSProvider>
-    <Notification>
-      <NotificationContent>
-        This is a "standard" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-        auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationContent={
+        <>
+          This is a "standard" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Notification notificationType={NotificationTypes.Announcement}>
-      <NotificationContent>
-        This is an "announcement" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-        auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationType={NotificationTypes.Announcement}
+      notificationContent={
+        <>
+          This is an "announcement" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
 <Canvas>
   <DSProvider>
-    <Notification notificationType={NotificationTypes.Warning}>
-      <NotificationContent>
-        This is a "warning" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
-        auctor.
-      </NotificationContent>
-    </Notification>
+    <Notification
+      notificationType={NotificationTypes.Warning}
+      notificationContent={
+        <>
+          This is a "warning" Notification without a heading. 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. Vivamus sagittis lacus vel augue laoreet
+          rutrum faucibus dolor auctor.
+        </>
+      }
+    />
   </DSProvider>
 </Canvas>
 
@@ -183,34 +203,22 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
     {(args) => (
       <Notification
         icon={
-          <Icon name="check" size="large" color="section-research-secondary" />
+          <Icon
+            name={IconNames.Check}
+            color={IconColors.SectionResearchSecondary}
+          />
         }
-      >
-        <NotificationHeading>Custom Icon</NotificationHeading>
-        <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.
-        </NotificationContent>
-      </Notification>
-    )}
-  </Story>
-</Canvas>
-
-## Development Errors
-
-The `Notification` component will only accept one `NotificationHeading` child and one `NotificationContent` child.
-
-<Canvas>
-  <Story name="Development Errors">
-    {(args) => (
-      <Notification>
-        <NotificationHeading>Heading One</NotificationHeading>
-        <NotificationHeading>Heading Two</NotificationHeading>
-        <NotificationContent>Content one.</NotificationContent>
-        <NotificationContent>Content two.</NotificationContent>
-      </Notification>
+        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

@@ -3,176 +3,152 @@ import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
-import Notification, {
-  NotificationContent,
-  NotificationHeading,
-} from "./Notification";
+import Notification from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
 import Icon from "../Icons/Icon";
 import { IconNames, IconColors, IconSizes } from "../Icons/IconTypes";
 
 describe("Notification Accessibility", () => {
-  it("passes axe accessibility test", async () => {
+  it("passes axe accessibility test with heading", async () => {
     const { container } = render(
-      <Notification id="notificationID">
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
+      <Notification
+        id="notificationID"
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
-});
-
-describe("Notification: check for basic DOM structure", () => {
-  let utils;
-  beforeEach(() => {
-    utils = render(
-      <Notification id="notificationID">
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
-    );
-  });
-
-  it("Renders Notification component wrapper", () => {
-    expect(utils.container.querySelector(".notification")).toBeInTheDocument();
-  });
-
-  it("Renders Notification heading child component", () => {
-    expect(screen.getByText("Notification Heading")).toBeInTheDocument();
-  });
-
-  it("Renders Notification content child component", () => {
-    expect(screen.getByText("Notification content.")).toBeInTheDocument();
-  });
-
-  it("Renders without Icon", () => {
-    expect(
-      utils.container.querySelector(".notification-icon")
-    ).not.toBeInTheDocument();
-  });
-});
 
-describe("Notification Snapshot", () => {
-  it("Renders the UI snapshot correctly", () => {
-    const tree = renderer
-      .create(
-        <Notification id="notificationID">
-          <NotificationHeading>Notification Heading</NotificationHeading>
-          <NotificationContent>Notification content.</NotificationContent>
-        </Notification>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
-
-describe("Notification: check for Announcement Notification", () => {
-  let utils;
-  beforeEach(() => {
-    utils = render(
+  it("passes axe accessibility test without heading", async () => {
+    const { container } = render(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Announcement}
-      >
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
+        notificationContent={<>Notification content.</>}
+      />
     );
-  });
-
-  it("Renders Notification component as Announcement", () => {
-    expect(
-      utils.container.querySelector(".notification--announcement")
-    ).toBeInTheDocument();
-  });
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(
-        ".notification-icon.icon--section-research-secondary"
-      )
-    ).toBeInTheDocument();
+    expect(await axe(container)).toHaveNoViolations();
   });
 });
 
-describe("Notification: check for Warning Notification", () => {
+describe("Notification", () => {
   let utils;
   beforeEach(() => {
     utils = render(
       <Notification
         id="notificationID"
-        notificationType={NotificationTypes.Warning}
-      >
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
     );
   });
 
-  it("Renders Notification component as Warning", () => {
-    expect(
-      utils.container.querySelector(".notification--warning")
-    ).toBeInTheDocument();
+  it("renders Notification heading child component", () => {
+    expect(screen.getByText("Notification Heading")).toBeInTheDocument();
   });
 
-  it("Renders Icon with proper color", () => {
-    expect(
-      utils.container.querySelector(".notification-icon.icon--brand-primary")
-    ).toBeInTheDocument();
+  it("renders Notification content child component", () => {
+    expect(screen.getByText("Notification content.")).toBeInTheDocument();
   });
-});
 
-describe("Notification: check for custom Icon", () => {
-  let utils;
-  beforeEach(() => {
-    utils = render(
+  it("renders without Icon", () => {
+    // The Icon's role is "img".
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+
+  it("renders a custom Icon component", () => {
+    utils.rerender(
       <Notification
         id="notificationID"
         icon={
           <Icon
-            name={IconNames.check}
-            size={IconSizes.large}
-            color={IconColors.brand_primary}
+            id="custom-icon"
+            name={IconNames.Check}
+            size={IconSizes.Large}
+            color={IconColors.BrandPrimary}
             className="custom-icon"
           />
         }
-      >
-        <NotificationHeading>Notification Heading</NotificationHeading>
-        <NotificationContent>Notification content.</NotificationContent>
-      </Notification>
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
     );
-  });
-
-  it("Renders custom Icon component", () => {
     expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
   });
-});
 
-describe("Notification: check for validation", () => {
-  beforeEach(() => {
-    render(
-      <Notification id="notificationID">
-        <NotificationHeading>First Notification Heading</NotificationHeading>
-        <NotificationHeading>Second Notification Heading</NotificationHeading>
-        <NotificationContent>First notification content.</NotificationContent>
-        <NotificationContent>Second notification content.</NotificationContent>
-      </Notification>
+  it("renders the announcement Notification type", () => {
+    utils.rerender(
+      <Notification
+        id="notificationID"
+        notificationType={NotificationTypes.Announcement}
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
+    );
+
+    expect(utils.container.querySelector("aside")).toHaveAttribute(
+      "data-type",
+      "announcement"
     );
   });
 
-  it("Shows error when two NotificationHeading children are passed to Notification", () => {
-    expect(
-      screen.getByText(
-        "Error: Only one NotificationHeading child component may be passed to Notification."
-      )
-    ).toBeInTheDocument();
+  it("renders the warning Notification type", () => {
+    utils.rerender(
+      <Notification
+        id="notificationID"
+        notificationType={NotificationTypes.Warning}
+        notificationHeading="Notification Heading"
+        notificationContent={<>Notification content.</>}
+      />
+    );
+
+    expect(utils.container.querySelector("aside")).toHaveAttribute(
+      "data-type",
+      "warning"
+    );
   });
 
-  it("Shows error when two NotificationContent children are passed to Notification", () => {
-    expect(
-      screen.getByText(
-        "Error: Only one NotificationContent child component may be passed to Notification."
+  it("renders the UI snapshot correctly", () => {
+    const standard = renderer
+      .create(
+        <Notification
+          id="notificationID1"
+          notificationHeading="Notification Heading"
+          notificationContent={<>Notification content.</>}
+        />
+      )
+      .toJSON();
+    const announcement = renderer
+      .create(
+        <Notification
+          id="notificationID2"
+          notificationType={NotificationTypes.Announcement}
+          notificationHeading="Notification Heading"
+          notificationContent={<>Notification content.</>}
+        />
+      )
+      .toJSON();
+    const warning = renderer
+      .create(
+        <Notification
+          id="notificationID3"
+          notificationType={NotificationTypes.Warning}
+          notificationHeading="Notification Heading"
+          notificationContent={<>Notification content.</>}
+        />
       )
-    ).toBeInTheDocument();
+      .toJSON();
+    const withoutHeading = renderer
+      .create(
+        <Notification
+          id="notificationID4"
+          notificationContent={<>Notification content.</>}
+        />
+      )
+      .toJSON();
+    expect(standard).toMatchSnapshot();
+    expect(announcement).toMatchSnapshot();
+    expect(warning).toMatchSnapshot();
+    expect(withoutHeading).toMatchSnapshot();
   });
 });