@nypl/design-system-react-components 0.27.0 → 0.28.0

package/src/components/Logo/LogoSvgs.tsx

@@ -1,82 +1,82 @@
 /* eslint-disable camelcase */
-import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
-import logo_bpl_white from "../../../icons/svg/logo_bpl_white.svg";
-import logo_clever_color from "../../../icons/svg/logo_clever_color.svg";
-import logo_clever_white from "../../../icons/svg/logo_clever_white.svg";
-import logo_firstbook_color from "../../../icons/svg/logo_firstbook_color.svg";
-import logo_firstbook_color_negative from "../../../icons/svg/logo_firstbook_color_negative.svg";
-import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
-import logo_lpa_black from "../../../icons/svg/logo_lpa_black.svg";
-import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
-import logo_mln_black from "../../../icons/svg/logo_mln_black.svg";
-import logo_mln_white from "../../../icons/svg/logo_mln_white.svg";
-import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
-import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
-import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
-import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
-import logo_openebooks_color from "../../../icons/svg/logo_openebooks_color.svg";
-import logo_openebooks_negative from "../../../icons/svg/logo_openebooks_negative.svg";
-import logo_openebooks_wtext_color from "../../../icons/svg/logo_openebooks_wtext_color.svg";
-import logo_openebooks_wtext_negative from "../../../icons/svg/logo_openebooks_wtext_negative.svg";
-import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
-import logo_qpl_alt_white from "../../../icons/svg/logo_qpl_alt_white.svg";
-import logo_qpl_black from "../../../icons/svg/logo_qpl_black.svg";
-import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
-import logo_qpl_white from "../../../icons/svg/logo_qpl_white.svg";
-import logo_reservoir_icon_color from "../../../icons/svg/logo_reservoir_icon_color.svg";
-import logo_reservoir_vertical_color from "../../../icons/svg/logo_reservoir_vertical_color.svg";
-import logo_schomburg_black from "../../../icons/svg/logo_schomburg_black.svg";
-import logo_schomburg_circle_black from "../../../icons/svg/logo_schomburg_circle_black.svg";
-import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
-import logo_schomburg_circle_white from "../../../icons/svg/logo_schomburg_circle_white.svg";
-import logo_schomburg_color from "../../../icons/svg/logo_schomburg_color.svg";
-import logo_schomburg_white from "../../../icons/svg/logo_schomburg_white.svg";
-import logo_simplye_black from "../../../icons/svg/logo_simplye_black.svg";
-import logo_simplye_white from "../../../icons/svg/logo_simplye_white.svg";
-import logo_simplye_color from "../../../icons/svg/logo_simplye_color.svg";
-import logo_snfl_black from "../../../icons/svg/logo_snfl_black.svg";
-import logo_snfl_white from "../../../icons/svg/logo_snfl_white.svg";
-import logo_treasures_color from "../../../icons/svg/logo_treasures_color.svg";
-import logo_treasures_color_negative from "../../../icons/svg/logo_treasures_color_negative.svg";
+import bplBlack from "../../../icons/svg/logo-bpl-black.svg";
+import bplWhite from "../../../icons/svg/logo-bpl-white.svg";
+import cleverColor from "../../../icons/svg/logo-clever-color.svg";
+import cleverWhite from "../../../icons/svg/logo-clever-white.svg";
+import firstbookColor from "../../../icons/svg/logo-firstbook-color.svg";
+import firstbookColorNegative from "../../../icons/svg/logo-firstbook-color-negative.svg";
+import lpaColor from "../../../icons/svg/logo-lpa-color.svg";
+import lpaBlack from "../../../icons/svg/logo-lpa-black.svg";
+import lpaWhite from "../../../icons/svg/logo-lpa-white.svg";
+import mlnBlack from "../../../icons/svg/logo-mln-black.svg";
+import mlnWhite from "../../../icons/svg/logo-mln-white.svg";
+import nyplFullBlack from "../../../icons/svg/logo-nypl-full-black.svg";
+import nyplFullWhite from "../../../icons/svg/logo-nypl-full-white.svg";
+import nyplLionBlack from "../../../icons/svg/logo-nypl-lion-black.svg";
+import nyplLionWhite from "../../../icons/svg/logo-nypl-lion-white.svg";
+import openebooksColor from "../../../icons/svg/logo-openebooks-color.svg";
+import openebooksNegative from "../../../icons/svg/logo-openebooks-negative.svg";
+import openebooksWithTextColor from "../../../icons/svg/logo-openebooks-with-text-color.svg";
+import openebooksWithTextNegative from "../../../icons/svg/logo-openebooks-with-text-negative.svg";
+import qplAltBlack from "../../../icons/svg/logo-qpl-alt-black.svg";
+import qplAltWhite from "../../../icons/svg/logo-qpl-alt-white.svg";
+import qplBlack from "../../../icons/svg/logo-qpl-black.svg";
+import qplColor from "../../../icons/svg/logo-qpl-color.svg";
+import qplWhite from "../../../icons/svg/logo-qpl-white.svg";
+import reservoirIconColor from "../../../icons/svg/logo-reservoir-icon-color.svg";
+import reservoirVerticalColor from "../../../icons/svg/logo-reservoir-vertical-color.svg";
+import schomburgBlack from "../../../icons/svg/logo-schomburg-black.svg";
+import schomburgCircleBlack from "../../../icons/svg/logo-schomburg-circle-black.svg";
+import schomburgCircleColor from "../../../icons/svg/logo-schomburg-circle-color.svg";
+import schomburgCircleWhite from "../../../icons/svg/logo-schomburg-circle-white.svg";
+import schomburgColor from "../../../icons/svg/logo-schomburg-color.svg";
+import schomburgWhite from "../../../icons/svg/logo-schomburg-white.svg";
+import simplyeBlack from "../../../icons/svg/logo-simplye-black.svg";
+import simplyeWhite from "../../../icons/svg/logo-simplye-white.svg";
+import simplyeColor from "../../../icons/svg/logo-simplye-color.svg";
+import snflBlack from "../../../icons/svg/logo-snfl-black.svg";
+import snflWhite from "../../../icons/svg/logo-snfl-white.svg";
+import treasuresColor from "../../../icons/svg/logo-treasures-color.svg";
+import treasuresColorNegative from "../../../icons/svg/logo-treasures-color-negative.svg";
 
 export default {
-  logo_bpl_black,
-  logo_bpl_white,
-  logo_clever_color,
-  logo_clever_white,
-  logo_firstbook_color,
-  logo_firstbook_color_negative,
-  logo_lpa_black,
-  logo_lpa_color,
-  logo_lpa_white,
-  logo_mln_black,
-  logo_mln_white,
-  logo_nypl_full_black,
-  logo_nypl_full_white,
-  logo_nypl_lion_black,
-  logo_nypl_lion_white,
-  logo_openebooks_color,
-  logo_openebooks_negative,
-  logo_openebooks_wtext_color,
-  logo_openebooks_wtext_negative,
-  logo_qpl_alt_black,
-  logo_qpl_alt_white,
-  logo_qpl_black,
-  logo_qpl_color,
-  logo_qpl_white,
-  logo_reservoir_icon_color,
-  logo_reservoir_vertical_color,
-  logo_schomburg_black,
-  logo_schomburg_circle_black,
-  logo_schomburg_circle_color,
-  logo_schomburg_circle_white,
-  logo_schomburg_color,
-  logo_schomburg_white,
-  logo_simplye_black,
-  logo_simplye_white,
-  logo_simplye_color,
-  logo_snfl_black,
-  logo_snfl_white,
-  logo_treasures_color,
-  logo_treasures_color_negative,
+  bplBlack,
+  bplWhite,
+  cleverColor,
+  cleverWhite,
+  firstbookColor,
+  firstbookColorNegative,
+  lpaBlack,
+  lpaColor,
+  lpaWhite,
+  mlnBlack,
+  mlnWhite,
+  nyplFullBlack,
+  nyplFullWhite,
+  nyplLionBlack,
+  nyplLionWhite,
+  openebooksColor,
+  openebooksNegative,
+  openebooksWithTextColor,
+  openebooksWithTextNegative,
+  qplAltBlack,
+  qplAltWhite,
+  qplBlack,
+  qplColor,
+  qplWhite,
+  reservoirIconColor,
+  reservoirVerticalColor,
+  schomburgBlack,
+  schomburgCircleBlack,
+  schomburgCircleColor,
+  schomburgCircleWhite,
+  schomburgColor,
+  schomburgWhite,
+  simplyeBlack,
+  simplyeWhite,
+  simplyeColor,
+  snflBlack,
+  snflWhite,
+  treasuresColor,
+  treasuresColorNegative,
 };

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

@@ -7,7 +7,7 @@ exports[`Logo renders the UI snapshot correctly 1`] = `
   focusable={false}
   id="test-logo"
   role="img"
-  title="logo_nypl_full_black logo"
+  title="nyplFullBlack logo"
   viewBox="0 0 24 24"
 >
   <g
@@ -42,7 +42,7 @@ exports[`Logo renders the UI snapshot correctly 2`] = `
   focusable={false}
   id="test-logo-size"
   role="img"
-  title="logo_nypl_full_black logo"
+  title="nyplFullBlack logo"
   viewBox="0 0 24 24"
 >
   <g
@@ -77,7 +77,7 @@ exports[`Logo renders the UI snapshot correctly 3`] = `
   focusable={false}
   id="chakra"
   role="img"
-  title="logo_nypl_full_black logo"
+  title="nyplFullBlack logo"
   viewBox="0 0 24 24"
 >
   <g
@@ -113,7 +113,7 @@ exports[`Logo renders the UI snapshot correctly 4`] = `
   focusable={false}
   id="props"
   role="img"
-  title="logo_nypl_full_black logo"
+  title="nyplFullBlack logo"
   viewBox="0 0 24 24"
 >
   <g

package/src/components/Modal/Modal.stories.mdx

@@ -1,4 +1,3 @@
-import { ButtonGroup } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -9,7 +8,7 @@ import {
 import { useState } from "react";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import Heading from "../Heading/Heading";
 import Link from "../Link/Link";
 import { ModalTrigger, useModal } from "./Modal";
@@ -61,12 +60,12 @@ import { ModalTrigger } from "@nypl/design-system-react-components";
   buttonText="Button Text"
   id="modal-trigger"
   modalProps={{
-    bodyContent="body text"
-    closeButtonLabel="Close Button"
-    headingText="Modal Heading Text"
-    onClose={() => {
+    bodyContent: "body text",
+    closeButtonLabel: "Close Button",
+    headingText: "Modal Heading Text",
+    onClose: () => {
       console.log("custom close");
-    }}
+    },
   }}
 />;
 ```
@@ -139,7 +138,7 @@ export const ModalStory = (args) => {
         <Button id="1" onClick={onOpen}>
           Open Modal
         </Button>
-        <Button buttonType={ButtonTypes.Secondary} id="2" onClick={onOpen}>
+        <Button buttonType="secondary" id="2" onClick={onOpen}>
           I can open the modal, too
         </Button>
       </ButtonGroup>
@@ -180,7 +179,7 @@ export const ModalStory = (args) => {
         <Button id="1" onClick={onOpen}>
           Open Modal
         </Button>
-        <Button buttonType={ButtonTypes.Secondary} id="2" onClick={onOpen}>
+        <Button buttonType="secondary" id="2" onClick={onOpen}>
           I can open the modal, too
         </Button>
       </ButtonGroup>

package/src/components/Modal/Modal.test.tsx

@@ -1,11 +1,10 @@
-import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks";
 import { axe } from "jest-axe";
+import * as React from "react";
 import renderer from "react-test-renderer";
 
-import { Button } from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
+import Button from "../Button/Button";
 import { ModalTrigger, useModal } from "./Modal";
 
 describe("Modal Accessibility", () => {
@@ -37,11 +36,7 @@ describe("Modal Accessibility", () => {
             Go back
           </Button>
           <p>This is the body content.</p>
-          <Button
-            buttonType={ButtonTypes.NoBrand}
-            id="custom-close2"
-            onClick={onClose}
-          >
+          <Button buttonType="noBrand" id="custom-close2" onClick={onClose}>
             This is a custom close button.
           </Button>
         </>
@@ -55,7 +50,7 @@ describe("Modal Accessibility", () => {
     };
     const { container } = render(
       <>
-        <Button id="1" onClick={onOpen} buttonType={ButtonTypes.NoBrand}>
+        <Button id="1" onClick={onOpen} buttonType="noBrand">
           Open Modal
         </Button>
         <Modal {...modalProps} />
@@ -128,7 +123,7 @@ describe("useModal", () => {
   };
   const useModalComponent = (
     <>
-      <Button id="1" onClick={onOpen} buttonType={ButtonTypes.NoBrand}>
+      <Button id="1" onClick={onOpen} buttonType="noBrand">
         Open Modal
       </Button>
       <Modal {...modalProps} />

package/src/components/Modal/Modal.tsx

@@ -8,11 +8,11 @@ import {
   ModalBody,
   ModalCloseButton,
   useDisclosure,
-  ButtonGroup,
 } from "@chakra-ui/react";
 import * as React from "react";
 
 import Button from "../Button/Button";
+import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import useWindowSize from "../../hooks/useWindowSize";
 
 interface BaseModalProps {

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

@@ -8,18 +8,10 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Icon from "../Icons/Icon";
-import { IconColors, IconNames } from "../Icons/IconTypes";
 import Link from "../Link/Link";
 import Notification from "./Notification";
-import { NotificationTypes } from "./NotificationTypes";
 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")}
@@ -47,9 +39,7 @@ export const enumValues = getStorybookEnumValues(
     },
     notificationContent: { control: false },
     notificationType: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "NotificationTypes.Standard" } },
-      options: enumValues.options,
+      table: { defaultValue: { summary: "standard" } },
     },
   }}
 />
@@ -59,7 +49,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -105,16 +95,13 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
-      notificationType: "NotificationTypes.Standard",
+      notificationType: "standard",
       showIcon: true,
     }}
   >
     {(args) => (
       <div style={{ border: "1px solid #ccc" }}>
-        <Notification
-          {...args}
-          notificationType={enumValues.getValue(args.notificationType)}
-        />
+        <Notification {...args} />
       </div>
     )}
   </Story>
@@ -172,7 +159,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
       notificationHeading="Announcement Notification"
       notificationContent={
         <>
@@ -191,7 +178,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Warning}
+      notificationType="warning"
       notificationHeading="Warning Notification"
       notificationContent={
         <>
@@ -229,7 +216,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
       notificationContent={
         <>
           This is an "announcement" Notification without a heading. Cras mattis
@@ -247,7 +234,7 @@ Resources:
 <Canvas>
   <DSProvider>
     <Notification
-      notificationType={NotificationTypes.Warning}
+      notificationType="warning"
       notificationContent={
         <>
           This is a "warning" Notification without a heading. Cras mattis
@@ -330,12 +317,7 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
 <Canvas>
   <Story name="Custom Icons">
     <Notification
-      icon={
-        <Icon
-          name={IconNames.Check}
-          color={IconColors.SectionResearchSecondary}
-        />
-      }
+      icon={<Icon name="check" color="section.research.secondary" />}
       notificationHeading="Custom Icon"
       notificationContent={
         <>
@@ -370,7 +352,7 @@ appears once.
           nascetur ridiculus mus.
         </>
       }
-      notificationType={NotificationTypes.Announcement}
+      notificationType="announcement"
     />
   </Story>
 </Canvas>

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

@@ -1,12 +1,10 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 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 with heading", async () => {
@@ -56,7 +54,7 @@ describe("Notification Accessibility", () => {
 });
 
 describe("Notification", () => {
-  let utils;
+  let utils: RenderResult;
   beforeEach(() => {
     utils = render(
       <Notification
@@ -107,9 +105,9 @@ describe("Notification", () => {
           <Icon
             id="custom-icon"
             className="custom-icon"
-            color={IconColors.BrandPrimary}
-            name={IconNames.Check}
-            size={IconSizes.Large}
+            color="brand.primary"
+            name="check"
+            size="large"
           />
         }
         id="notificationID"
@@ -130,7 +128,7 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Announcement}
+        notificationType="announcement"
       />
     );
 
@@ -146,7 +144,7 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Warning}
+        notificationType="warning"
       />
     );
 
@@ -170,7 +168,6 @@ describe("Notification", () => {
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
-        notificationType={NotificationTypes.Standard}
       />
     );
 
@@ -197,7 +194,7 @@ describe("Notification", () => {
           id="notificationID2"
           notificationContent={<>Notification content.</>}
           notificationHeading="Notification Heading"
-          notificationType={NotificationTypes.Announcement}
+          notificationType="announcement"
         />
       )
       .toJSON();
@@ -207,7 +204,7 @@ describe("Notification", () => {
           id="notificationID3"
           notificationContent={<>Notification content.</>}
           notificationHeading="Notification Heading"
-          notificationType={NotificationTypes.Warning}
+          notificationType="warning"
         />
       )
       .toJSON();

package/src/components/Notification/Notification.tsx

@@ -2,12 +2,10 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState } from "react";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import Icon from "../Icons/Icon";
-import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
-import { NotificationTypes } from "./NotificationTypes";
+import Icon, { IconColors, IconNames, IconSizes } from "../Icons/Icon";
+
+export type NotificationTypes = "standard" | "announcement" | "warning";
 interface BaseProps {
   /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
@@ -61,11 +59,7 @@ export const NotificationHeading = chakra(
     return (
       <Box as="header" __css={styles} {...rest}>
         {icon}
-        <Heading
-          additionalStyles={styles.heading}
-          id={`${id}-heading`}
-          level={HeadingLevels.Four}
-        >
+        <Heading id={`${id}-heading`} level="four" __css={styles.heading}>
           {children}
         </Heading>
       </Box>
@@ -108,7 +102,7 @@ export const Notification = chakra((props: NotificationProps) => {
     noMargin = false,
     notificationContent,
     notificationHeading,
-    notificationType = NotificationTypes.Standard,
+    notificationType = "standard",
     showIcon = true,
     ...rest
   } = props;
@@ -122,12 +116,12 @@ export const Notification = chakra((props: NotificationProps) => {
   });
   const iconElement = () => {
     const baseIconProps = {
-      additionalStyles: styles.icon,
-      size: IconSizes.Large,
+      size: "large" as IconSizes,
+      __css: styles.icon,
     };
-    // If the icon should not display, return null.
+    // If the icon should not display, return undefined.
     if (!showIcon) {
-      return null;
+      return undefined;
     }
     // If a custom icon is passed, add specific `Notification` styles.
     if (icon)
@@ -135,45 +129,48 @@ export const Notification = chakra((props: NotificationProps) => {
         id: `${id}-custom-notification-icon`,
         ...baseIconProps,
       });
+    interface IconProps {
+      color: IconColors;
+      name: IconNames;
+      title: string;
+    }
     const iconProps = {
-      [NotificationTypes.Announcement]: {
-        color: IconColors.SectionResearchSecondary,
-        name: IconNames.SpeakerNotes,
+      announcement: {
+        color: "section.research.secondary",
+        name: "speakerNotes",
         title: "Notification announcement icon",
-      },
-      [NotificationTypes.Standard]: {
-        color: IconColors.UiBlack,
-        name: IconNames.AlertNotificationImportant,
+      } as IconProps,
+      standard: {
+        color: "ui.black",
+        name: "alertNotificationImportant",
         title: "Notification standard icon",
-      },
-      [NotificationTypes.Warning]: {
-        color: IconColors.BrandPrimary,
-        name: IconNames.ErrorFilled,
+      } as IconProps,
+      warning: {
+        color: "brand.primary",
+        name: "errorFilled",
         title: "Notification warning icon",
-      },
+      } as IconProps,
     };
     return (
       <Icon
         id={`${id}-notification-icon`}
-        {...baseIconProps}
         {...iconProps[notificationType]}
+        {...baseIconProps}
       />
     );
   };
   const dismissibleButton = dismissible && (
     <Button
-      additionalStyles={styles.dismissibleButton}
-      attributes={{
-        "aria-label": "Close the notification",
-      }}
-      buttonType={ButtonTypes.Link}
+      aria-label="Close the notification"
+      buttonType="link"
       id={`${id}-notification-dismissible-button`}
       onClick={handleClose}
+      __css={styles.dismissibleButton}
     >
       <Icon
         id={`${id}-dismissible-notification-icon`}
-        name={IconNames.Close}
-        size={IconSizes.Large}
+        name="close"
+        size="large"
         title="Notification close icon"
       />
     </Button>
@@ -190,11 +187,11 @@ export const Notification = chakra((props: NotificationProps) => {
     </NotificationHeading>
   );
   // Specific alignment styles for the content.
-  const alignText = childHeading && showIcon && (!!icon || !isCentered);
+  const alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
   const childContent = (
     <NotificationContent
       alignText={alignText}
-      icon={!childHeading ? iconElem : null}
+      icon={!childHeading ? iconElem : undefined}
       notificationType={notificationType}
     >
       {notificationContent}

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

@@ -43,7 +43,7 @@ export const hrefProps = getStorybookHrefProps(10);
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -170,7 +170,7 @@ export function CurrentPagePaginationExample() {
         currentPage={page}
         onPageChange={(selectedPage) => handleSelection(selectedPage)}
       />
-      <Button type="button" buttonType="primary" onClick={handleClick}>
+      <Button type="button" onClick={handleClick}>
         Go to Page 1
       </Button>
     </VStack>