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

package/src/components/Notification/Notification.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
-import bem from "../../utils/bem";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Heading from "../Heading/Heading";
@@ -8,194 +8,191 @@ import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
 import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
 import { NotificationTypes } from "./NotificationTypes";
+import generateUUID from "../../helpers/generateUUID";
 
-export interface NotificationProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
+interface BaseProps {
+  /** Optional prop to control text alignment in `NotificationContent` */
+  alignText?: boolean;
   /** Optional prop to control horizontal alignment of the `Notification` content */
   centered?: boolean;
-  /** Optional `className` that appears in addition to "notification" */
+  /** Optional custom `Icon` that will override the default `Icon`. */
+  icon?: JSX.Element;
+  /** Optional prop to control the coloring of the `Notification` text and the
+   * visibility of an applicable icon. */
+  notificationType?: NotificationTypes;
+}
+
+// Used for `NotificationHeading` and `Notification`
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+// Used for `NotificationContent`
+type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+
+export interface NotificationProps extends BasePropsWithoutAlignText {
+  /** Additional `className` to add.  */
   className?: string;
-  /** Optional prop to control whether a `Notification` can be dismissed (closed) by a user */
+  /** Optional prop to control whether a `Notification` can be dismissed
+   * (closed) by a user. */
   dismissible?: boolean;
-  /** Optional custom `Icon` that will override the default `Icon` */
-  icon?: React.ReactNode;
-  /** ID that other components can cross reference for accessibility purposes */
+  /** 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 */
+  /** Optional prop to control the margin around the `Notification` component. */
   noMargin?: boolean;
-  /** Optional prop to control the coloring of notification text and the visibility of an applicable icon */
-  notificationType?: NotificationTypes;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
+  /** Content to be rendered in a `NotificationContent` component. */
+  notificationContent: string | JSX.Element;
+  /** Content to be rendered in a `NotificationHeading` component. */
+  notificationHeading?: string;
 }
 
-// NotificationHeading child-component
-export function NotificationHeading(props) {
-  const { children, className } = props;
+/**
+ * NotificationHeading child-component.
+ */
+export function NotificationHeading(
+  props: React.PropsWithChildren<BasePropsWithoutAlignText>
+) {
+  const { centered, children, icon, notificationType } = props;
+  const styles = useMultiStyleConfig("NotificationHeading", {
+    centered,
+    notificationType,
+  });
   return (
-    <Heading
-      level={HeadingLevels.Four}
-      className={bem("notification-heading", [], "", [className])}
-    >
-      {children}
-    </Heading>
+    <Box as="header" __css={styles}>
+      {icon}
+      <Heading level={HeadingLevels.Four} additionalStyles={styles.heading}>
+        {children}
+      </Heading>
+    </Box>
   );
 }
 
-// NotificationContent child-component
-export function NotificationContent(props) {
-  const { children, className } = props;
+/**
+ * NotificationContent child-component.
+ */
+export function NotificationContent(
+  props: React.PropsWithChildren<BasePropsWithoutCentered>
+) {
+  const { alignText, children, icon, notificationType } = props;
+  const styles = useMultiStyleConfig("NotificationContent", {
+    alignText,
+    notificationType,
+  });
   return (
-    <div className={bem("notification-content", [], "", [className])}>
-      {children}
-    </div>
+    <Box __css={styles}>
+      {icon}
+      <Box __css={styles.content}>{children}</Box>
+    </Box>
   );
 }
 
-export default function Notification(
-  props: React.PropsWithChildren<NotificationProps>
-) {
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+export default function Notification(props: NotificationProps) {
   const {
-    blockName,
-    centered,
-    children,
+    centered = false,
     className,
     dismissible = false,
-    noMargin = false,
     icon,
-    id,
-    modifiers = [],
-    notificationType = "standard",
+    id = generateUUID(),
+    noMargin = false,
+    notificationContent,
+    notificationHeading,
+    notificationType = NotificationTypes.Standard,
   } = props;
-
   const [isOpen, setIsOpen] = useState(true);
-
-  if (!isOpen) {
-    return null;
-  }
-
   const handleClose = () => setIsOpen(false);
-
-  const baseClass = "notification";
-
-  const notificationModifiers = modifiers ? modifiers : [];
-
-  notificationModifiers.push(notificationType);
-
-  if (centered) notificationModifiers.push("centered");
-
-  if (noMargin) notificationModifiers.push("no-margin");
-
+  const styles = useMultiStyleConfig("Notification", {
+    centered,
+    noMargin,
+    notificationType,
+  });
   const iconElement = () => {
-    if (icon) return icon;
-    switch (notificationType) {
-      case "announcement":
-        return (
-          <Icon
-            decorative={false}
-            className="notification-icon"
-            name={IconNames.SpeakerNotes}
-            color={IconColors.SectionResearchSecondary}
-            size={IconSizes.Large}
-          />
-        );
-      case "warning":
-        return (
-          <Icon
-            decorative={false}
-            className="notification-icon"
-            name={IconNames.ErrorFilled}
-            color={IconColors.BrandPrimary}
-            size={IconSizes.Large}
-          />
-        );
-      default:
-        return null;
-    }
+    const baseIconProps = {
+      decorative: false,
+      size: IconSizes.Large,
+      additionalStyles: styles.icon,
+    };
+    // If a custom icon is passed, add specific `Notification` styles.
+    if (icon)
+      return React.cloneElement(icon, {
+        id: `${id}-custom-notification-icon`,
+        ...baseIconProps,
+      });
+    const iconProps = {
+      [NotificationTypes.Announcement]: {
+        name: IconNames.SpeakerNotes,
+        color: IconColors.SectionResearchSecondary,
+      },
+      [NotificationTypes.Warning]: {
+        name: IconNames.ErrorFilled,
+        color: IconColors.BrandPrimary,
+      },
+    };
+    return notificationType !== NotificationTypes.Standard ? (
+      <Icon
+        id={`${id}-notification-icon`}
+        {...baseIconProps}
+        {...iconProps[notificationType]}
+      />
+    ) : null;
   };
+  const dismissibleButton = dismissible && (
+    <Button
+      buttonType={ButtonTypes.Link}
+      onClick={handleClose}
+      additionalStyles={styles.dismissibleButton}
+    >
+      <Icon
+        id={`${id}-notification-dismissible-icon`}
+        decorative={false}
+        name={IconNames.Close}
+        size={IconSizes.Large}
+      />
+    </Button>
+  );
+  const iconElem = iconElement();
+  const childHeading = notificationHeading && (
+    <NotificationHeading
+      centered={centered}
+      icon={iconElem}
+      notificationType={notificationType}
+    >
+      {notificationHeading}
+    </NotificationHeading>
+  );
+  // Specific alignment styles for the content.
+  const alignText =
+    childHeading &&
+    (!!icon || (notificationType !== NotificationTypes.Standard && !centered));
+  const childContent = (
+    <NotificationContent
+      alignText={alignText}
+      icon={!childHeading ? iconElem : null}
+      notificationType={notificationType}
+    >
+      {notificationContent}
+    </NotificationContent>
+  );
 
-  let childHeading;
-  let childContent;
-  let headingCount = 0;
-  let contentCount = 0;
-
-  React.Children.map(children, (child: React.ReactElement) => {
-    if (
-      child.type === NotificationHeading ||
-      child.props.mdxType === "NotificationHeading"
-    ) {
-      childHeading = child;
-      headingCount++;
-    }
-
-    if (
-      child.type === NotificationContent ||
-      child.props.mdxType === "NotificationContent"
-    ) {
-      childContent = child;
-      contentCount++;
-    }
-  });
-
-  if (headingCount > 1) {
-    console.error(
-      `Only one NotificationHeading child component may be passed to Notification.`
-    );
-    childHeading =
-      "Error: Only one NotificationHeading child component may be passed to Notification.";
-  }
-
-  if (contentCount > 1) {
-    console.error(
-      `Only one NotificationContent child component may be passed to Notification.`
-    );
-    childContent =
-      "Error: Only one NotificationContent child component may be passed to Notification.";
-  }
-
-  if (
-    headingCount &&
-    (icon ||
-      ((notificationType === NotificationTypes.Announcement ||
-        notificationType === NotificationTypes.Warning) &&
-        !centered))
-  ) {
-    notificationModifiers.push("align-text");
+  // If the `Notification` is closed, don't render anything.
+  if (!isOpen) {
+    return null;
   }
-
   return (
-    <aside
-      className={bem(baseClass, notificationModifiers, blockName, [className])}
+    <Box
+      as="aside"
       id={id}
+      className={className}
+      __css={styles}
+      data-type={notificationType}
     >
-      <div className={bem("container", [], baseClass)}>
-        {headingCount ? (
-          <header>
-            {iconElement()}
-            {childHeading}
-          </header>
-        ) : null}
-        {contentCount ? (
-          <div className="content__container">
-            {!headingCount ? iconElement() : null}
-            {childContent}
-          </div>
-        ) : null}
-      </div>
-      {dismissible ? (
-        <Button
-          buttonType={ButtonTypes.Link}
-          className="dismissible-button"
-          onClick={handleClose}
-        >
-          <Icon
-            decorative={false}
-            name={IconNames.Close}
-            size={IconSizes.Large}
-          />
-        </Button>
-      ) : null}
-    </aside>
+      <Box __css={styles.container}>
+        {childHeading}
+        {childContent}
+      </Box>
+      {dismissibleButton}
+    </Box>
   );
 }

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

@@ -1,25 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Notification Snapshot Renders the UI snapshot correctly 1`] = `
+exports[`Notification renders the UI snapshot correctly 1`] = `
 <aside
-  className="notification notification--standard "
-  id="notificationID"
+  className="css-0"
+  data-type="standard"
+  id="notificationID1"
 >
   <div
-    className="notification__container"
+    className="css-0"
   >
-    <header>
+    <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 2`] = `
+<aside
+  className="css-0"
+  data-type="announcement"
+  id="notificationID2"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-0"
+    >
+      <svg
+        aria-hidden={false}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="notificationID2-notification-icon"
+        role="img"
+        title="speaker_notes 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"
+      >
+        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 3`] = `
+<aside
+  className="css-0"
+  data-type="warning"
+  id="notificationID3"
+>
+  <div
+    className="css-0"
+  >
+    <header
+      className="css-0"
+    >
+      <svg
+        aria-hidden={false}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="notificationID3-notification-icon"
+        role="img"
+        title="error_filled 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 notification-heading  css-0"
+        className="chakra-heading css-0"
       >
         Notification Heading
       </h4>
     </header>
     <div
-      className="content__container"
+      className="css-0"
+    >
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`Notification renders the UI snapshot correctly 4`] = `
+<aside
+  className="css-0"
+  data-type="standard"
+  id="notificationID4"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
     >
       <div
-        className="notification-content "
+        className="css-0"
       >
         Notification content.
       </div>

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

@@ -15,11 +15,6 @@ import { getCategory } from "../../utils/componentCategories";
   title={getCategory("Pagination")}
   component={Pagination}
   decorators={[withDesign, withQuery]}
-  argTypes={{
-    blockName: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    className: { table: { disable: true } },
-  }}
   parameters={{
     design: {
       type: "figma",
@@ -28,6 +23,11 @@ import { getCategory } from "../../utils/componentCategories";
     },
     jest: ["Pagination.test.tsx"],
   }}
+  argTypes={{
+    id: { table: { disable: true } },
+    getPageHref: { table: { disable: true } },
+    onPageChange: { table: { disable: true } },
+  }}
 />
 
 # Pagination
@@ -35,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.22.2`   |
+| Latest            | `0.25.3`   |
 
 <Description of={Pagination} />
 
@@ -49,17 +49,20 @@ Pagination uses anchor tags because it is navigating between URLs.
 
 In order to update the URL with a query parameter, the parent component must
 declare and pass a `getPageHref` function to the `Pagination` component. This
-function should return a string with the desired URL that the pagination links
-should go to. Note that this will refresh the browser on every click.
+function takes a `selectedPage` number argument for the selected page and it
+should return a string with the desired URL that the pagination links should go
+to. Note that this will refresh the browser on every click.
 
 In the following example, the `getPageHref` function will compute a new URL that
 has `&page=` as a URL query. In your own application this query parameter can be
 named anything but you have to pick up the value in the wrapper component.
 
-```jsx
+```tsx
 // Example in a search results page.
-const getPageHref = (page) => {
-  return `${location.origin}?q=celeste&page=${page}`;
+const getPageHref = (selectedPage: number) => {
+  // This should be updated for your router system, if any, including the
+  // base or origin URL.
+  return `${location.origin}?q=celeste&page=${selectedPage}`;
 };
 ```
 
@@ -67,8 +70,8 @@ const getPageHref = (page) => {
   <Story
     name="Pagination with URL Updates"
     args={{
-      currentPage: 4,
-      pageCount: 100,
+      initialPage: 1,
+      pageCount: 10,
     }}
   >
     {(args) => stories.PaginationGetPageHref(args)}
@@ -82,29 +85,25 @@ const getPageHref = (page) => {
 It is preferred to use the `Pagination` component with the `getPageHref`
 function passed as a prop and that the URL is updated whenever a page is
 changed. However, the optional `onPageChange` prop is available in case URL
-updating is not desired. The parent component must now keep track of the state
-of the current page value.
+updating is not desired.
 
-the `getPageHref` function will compute a new URL that
-has `&page=` as a URL query. In your own application this query parameter can be
-named anything but you have to pick up the value in the wrapper component.
+In the following example, the `onPageChange` function gets the current page as
+its only function argument. This is computed internally in the `Pagination`
+component through its own state.
 
-In the following example, the `onPageChange` function is keeping track of the
-current page through the use of React's `useState` feature.
-
-```jsx
+```tsx
 // Example in a search results page.
-const [computedCurrentPage, setComputedCurrentPage] = useState(
-  args.currentPage
-);
-const onPageChange = (page: number) => setComputedCurrentPage(page);
+const onPageChange = (currentPage: number) => {
+  console.log(`Current page: ${currentPage}`);
+  // Do what you need to with the `currentPage` value.
+};
 ```
 
 <Canvas withToolbar>
   <Story
     name="Pagination with Unchanging URL"
     args={{
-      currentPage: 7,
+      initialPage: 7,
       pageCount: 100,
     }}
   >