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

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

@@ -43,6 +43,8 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
   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;
 }
 
 /**
@@ -54,6 +56,7 @@ export function NotificationHeading(
   const { centered, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
     centered,
+    icon,
     notificationType,
   });
   return (
@@ -75,6 +78,7 @@ export function NotificationContent(
   const { alignText, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationContent", {
     alignText,
+    icon,
     notificationType,
   });
   return (
@@ -100,6 +104,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 +112,7 @@ export default function Notification(props: NotificationProps) {
     centered,
     noMargin,
     notificationType,
+    showIcon,
   });
   const iconElement = () => {
     const baseIconProps = {
@@ -114,6 +120,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 +135,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
@@ -163,9 +177,7 @@ export default function Notification(props: NotificationProps) {
     </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,6 +12,38 @@ 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"
       >
@@ -162,6 +194,91 @@ 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"
+      >
+        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"

package/src/components/Pagination/Pagination.stories.mdx

@@ -18,8 +18,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17226%3A932",
     },
     jest: ["Pagination.test.tsx"],
   }}

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

@@ -18,6 +18,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-1858g8z"
         href="page=1"
         id="firstPage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -29,6 +31,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=2"
         id="firstPage-2"
+        rel={null}
+        target={null}
       >
         2
       </a>
@@ -40,6 +44,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=3"
         id="firstPage-3"
+        rel={null}
+        target={null}
       >
         3
       </a>
@@ -51,6 +57,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=4"
         id="firstPage-4"
+        rel={null}
+        target={null}
       >
         4
       </a>
@@ -62,6 +70,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=5"
         id="firstPage-5"
+        rel={null}
+        target={null}
       >
         5
       </a>
@@ -76,6 +86,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=10"
         id="firstPage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -86,6 +98,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 1`] = `
         className="css-0"
         href="page=2"
         id="firstPage-Next"
+        rel={null}
+        target={null}
       >
         Next
       </a>
@@ -111,6 +125,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=9"
         id="lastPage-Previous"
+        rel={null}
+        target={null}
       >
         Previous
       </a>
@@ -122,6 +138,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=1"
         id="lastPage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -136,6 +154,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=6"
         id="lastPage-6"
+        rel={null}
+        target={null}
       >
         6
       </a>
@@ -147,6 +167,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=7"
         id="lastPage-7"
+        rel={null}
+        target={null}
       >
         7
       </a>
@@ -158,6 +180,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=8"
         id="lastPage-8"
+        rel={null}
+        target={null}
       >
         8
       </a>
@@ -169,6 +193,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-0"
         href="page=9"
         id="lastPage-9"
+        rel={null}
+        target={null}
       >
         9
       </a>
@@ -180,6 +206,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 2`] = `
         className="css-1858g8z"
         href="page=10"
         id="lastPage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -205,6 +233,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=4"
         id="middlePage-Previous"
+        rel={null}
+        target={null}
       >
         Previous
       </a>
@@ -216,6 +246,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=1"
         id="middlePage-1"
+        rel={null}
+        target={null}
       >
         1
       </a>
@@ -230,6 +262,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=4"
         id="middlePage-4"
+        rel={null}
+        target={null}
       >
         4
       </a>
@@ -241,6 +275,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-1858g8z"
         href="page=5"
         id="middlePage-5"
+        rel={null}
+        target={null}
       >
         5
       </a>
@@ -252,6 +288,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=6"
         id="middlePage-6"
+        rel={null}
+        target={null}
       >
         6
       </a>
@@ -266,6 +304,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=10"
         id="middlePage-10"
+        rel={null}
+        target={null}
       >
         10
       </a>
@@ -276,6 +316,8 @@ exports[`Pagination Rendering Renders the UI snapshot correctly 3`] = `
         className="css-0"
         href="page=6"
         id="middlePage-Next"
+        rel={null}
+        target={null}
       >
         Next
       </a>

package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx

@@ -25,8 +25,7 @@ import { GridGaps } from "../Grid/GridTypes";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=37638%3A23842",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=37638%3A23842",
     },
     jest: ["ProgressIndicator.test.tsx"],
   }}
@@ -40,7 +39,7 @@ import { GridGaps } from "../Grid/GridTypes";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.4`   |
+| Latest            | `0.25.8`   |
 
 <Description of={ProgressIndicator} />