@nypl/design-system-react-components 0.25.7 → 0.25.10

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"

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

@@ -1,12 +1,13 @@
 import {
-  Meta,
-  Story,
   ArgsTable,
   Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
+
 import Pagination from "./Pagination";
 import * as stories from "./Pagination.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -18,15 +19,16 @@ 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"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
-    getPageHref: { table: { disable: true } },
-    onPageChange: { table: { disable: true } },
+    className: { control: false },
+    getPageHref: { control: false },
+    id: { control: false },
+    initialPage: { table: { defaultValue: { summary: 1 } } },
+    onPageChange: { control: false },
   }}
 />
 
@@ -35,7 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Pagination} />
 
@@ -70,7 +72,11 @@ const getPageHref = (selectedPage: number) => {
   <Story
     name="Pagination with URL Updates"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id",
       initialPage: 1,
+      onPageChange: undefined,
       pageCount: 10,
     }}
   >
@@ -103,7 +109,11 @@ const onPageChange = (currentPage: number) => {
   <Story
     name="Pagination with Unchanging URL"
     args={{
+      className: undefined,
+      getPageHref: undefined,
+      id: "pagination-id-2",
       initialPage: 7,
+      onPageChange: undefined,
       pageCount: 100,
     }}
   >

package/src/components/Pagination/Pagination.tsx

@@ -31,10 +31,10 @@ export interface PaginationProps {
 const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
   const {
     className,
-    initialPage = 1,
     getPageHref,
     id = generateUUID(),
-    onPageChange = () => {},
+    initialPage = 1,
+    onPageChange,
     pageCount,
   } = props;
   const [currentPage, setCurrentPage] = useState<number>(initialPage);
@@ -63,7 +63,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
     e.preventDefault && e.preventDefault();
     if (currentPage === selectedPage) return;
     setCurrentPage(selectedPage);
-    onPageChange(selectedPage);
+    onPageChange && onPageChange(selectedPage);
   };
   // Select the previous page.
   const previousPage = (e: Event) => {