@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,279 +0,0 @@
-import * as React from "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 Icon from "../Icons/Icon";
-
-describe("Notification Accessibility", () => {
-  it("passes axe accessibility test with heading", async () => {
-    const { container } = render(
-      <Notification
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("passes axe accessibility test without heading", async () => {
-    const { container } = render(
-      <Notification
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-      />
-    );
-    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();
-  });
-
-  it("passes axe accessibility test for the dismissible type", async () => {
-    const { container } = render(
-      <Notification
-        dismissible
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("Notification", () => {
-  let utils: RenderResult;
-  beforeEach(() => {
-    utils = render(
-      <Notification
-        ariaLabel="Notification label"
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-      />
-    );
-  });
-
-  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 with an Icon", () => {
-    // Since the icon has aria-hidden set to true, we can't get it
-    // by its "img" role.
-    const icon = utils.container.querySelector(
-      "#notificationID-notification-icon"
-    );
-    expect(icon).toBeInTheDocument();
-  });
-
-  it("does not render an Icon", () => {
-    utils.rerender(
-      <Notification
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-        showIcon={false}
-      />
-    );
-    const icon = utils.container.querySelector(
-      "#notificationID-notification-icon"
-    );
-    expect(icon).not.toBeInTheDocument();
-  });
-
-  it("renders a custom Icon component", () => {
-    utils.rerender(
-      <Notification
-        icon={
-          <Icon
-            id="custom-icon"
-            className="custom-icon"
-            color="brand.primary"
-            name="check"
-            size="large"
-          />
-        }
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-      />
-    );
-
-    const customIcon = utils.container.querySelector(
-      "#notificationID-custom-notification-icon"
-    );
-    expect(customIcon).toBeInTheDocument();
-  });
-
-  it("renders the announcement Notification type", () => {
-    utils.rerender(
-      <Notification
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-        notificationType="announcement"
-      />
-    );
-
-    expect(utils.container.querySelector("aside")).toHaveAttribute(
-      "data-type",
-      "announcement"
-    );
-  });
-
-  it("renders the warning Notification type", () => {
-    utils.rerender(
-      <Notification
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-        notificationType="warning"
-      />
-    );
-
-    expect(utils.container.querySelector("aside")).toHaveAttribute(
-      "data-type",
-      "warning"
-    );
-  });
-
-  it("renders with an aria-label attribute", () => {
-    expect(screen.getByRole("complementary")).toHaveAttribute(
-      "aria-label",
-      "Notification label"
-    );
-  });
-
-  it("renders a dismissible icon", () => {
-    utils.rerender(
-      <Notification
-        dismissible
-        id="notificationID"
-        notificationContent={<>Notification content.</>}
-        notificationHeading="Notification Heading"
-      />
-    );
-
-    const dismissibleIcon = utils.container.querySelector(
-      "#notificationID-dismissible-notification-icon"
-    );
-    expect(dismissibleIcon).toBeInTheDocument();
-    expect(screen.getByTitle("Notification close icon")).toBeInTheDocument();
-  });
-
-  it("renders the UI snapshot correctly", () => {
-    const standard = renderer
-      .create(
-        <Notification
-          id="notificationID1"
-          notificationContent={<>Notification content.</>}
-          notificationHeading="Notification Heading"
-        />
-      )
-      .toJSON();
-    const announcement = renderer
-      .create(
-        <Notification
-          id="notificationID2"
-          notificationContent={<>Notification content.</>}
-          notificationHeading="Notification Heading"
-          notificationType="announcement"
-        />
-      )
-      .toJSON();
-    const warning = renderer
-      .create(
-        <Notification
-          id="notificationID3"
-          notificationContent={<>Notification content.</>}
-          notificationHeading="Notification Heading"
-          notificationType="warning"
-        />
-      )
-      .toJSON();
-    const withoutHeading = renderer
-      .create(
-        <Notification
-          id="notificationID4"
-          notificationContent={<>Notification content.</>}
-        />
-      )
-      .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();
-    const dismissible = renderer
-      .create(
-        <Notification
-          dismissible
-          id="notificationID7"
-          notificationContent={<>Notification content.</>}
-        />
-      )
-      .toJSON();
-    const withChakraProps = renderer
-      .create(
-        <Notification
-          id="chakra"
-          notificationContent={<>Notification content.</>}
-          notificationHeading="Notification Heading"
-          p="20px"
-          color="ui.error.primary"
-        />
-      )
-      .toJSON();
-    const withOtherProps = renderer
-      .create(
-        <Notification
-          id="props"
-          notificationContent={<>Notification content.</>}
-          notificationHeading="Notification Heading"
-          data-testid="props"
-        />
-      )
-      .toJSON();
-
-    expect(standard).toMatchSnapshot();
-    expect(announcement).toMatchSnapshot();
-    expect(warning).toMatchSnapshot();
-    expect(withoutHeading).toMatchSnapshot();
-    expect(withoutAnIcon).toMatchSnapshot();
-    expect(withoutHeadingAndIcon).toMatchSnapshot();
-    expect(dismissible).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-});

package/src/components/Notification/Notification.tsx

@@ -1,224 +0,0 @@
-import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
-import React, { useState } from "react";
-
-import Button from "../Button/Button";
-import Heading from "../Heading/Heading";
-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;
-  /** 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 horizontal alignment of the `Notification` content */
-  isCentered?: boolean;
-  /** 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 BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
-
-export interface NotificationProps extends BasePropsWithoutAlignText {
-  /** Label used to describe the `Notification`'s aside HTML element. */
-  ariaLabel?: string;
-  /** Additional `className` to add.  */
-  className?: string;
-  /** 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?: JSX.Element;
-  /** 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;
-}
-
-/**
- * NotificationHeading child-component.
- */
-export const NotificationHeading = chakra(
-  (props: React.PropsWithChildren<BasePropsWithoutAlignText>) => {
-    const { children, icon, id, isCentered, notificationType, ...rest } = props;
-    const styles = useMultiStyleConfig("NotificationHeading", {
-      icon,
-      isCentered,
-      notificationType,
-    });
-    return (
-      <Box as="header" __css={styles} {...rest}>
-        {icon}
-        <Heading id={`${id}-heading`} level="four" __css={styles.heading}>
-          {children}
-        </Heading>
-      </Box>
-    );
-  }
-);
-
-/**
- * NotificationContent child-component.
- */
-export const NotificationContent = chakra(
-  (props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => {
-    const { alignText, children, icon, notificationType, ...rest } = props;
-    const styles = useMultiStyleConfig("NotificationContent", {
-      alignText,
-      icon,
-      notificationType,
-    });
-    return (
-      <Box __css={styles} {...rest}>
-        {icon}
-        <Box __css={styles.content}>{children}</Box>
-      </Box>
-    );
-  }
-);
-
-/**
- * Component used to present users with three different levels of notifications:
- * standard, announcement, and warning.
- */
-export const Notification = chakra((props: NotificationProps) => {
-  const {
-    ariaLabel,
-    className,
-    dismissible = false,
-    icon,
-    id,
-    isCentered = false,
-    noMargin = false,
-    notificationContent,
-    notificationHeading,
-    notificationType = "standard",
-    showIcon = true,
-    ...rest
-  } = props;
-  const [isOpen, setIsOpen] = useState(true);
-  const handleClose = () => setIsOpen(false);
-  const styles = useMultiStyleConfig("Notification", {
-    dismissible,
-    isCentered,
-    noMargin,
-    notificationType,
-  });
-  const iconElement = () => {
-    const baseIconProps = {
-      size: "large" as IconSizes,
-      __css: styles.icon,
-    };
-    // If the icon should not display, return undefined.
-    if (!showIcon) {
-      return undefined;
-    }
-    // If a custom icon is passed, add specific `Notification` styles.
-    if (icon)
-      return React.cloneElement(icon, {
-        id: `${id}-custom-notification-icon`,
-        ...baseIconProps,
-      });
-    interface IconProps {
-      color: IconColors;
-      name: IconNames;
-      title: string;
-    }
-    const iconProps = {
-      announcement: {
-        color: "section.research.secondary",
-        name: "speakerNotes",
-        title: "Notification announcement icon",
-      } as IconProps,
-      standard: {
-        color: "ui.black",
-        name: "alertNotificationImportant",
-        title: "Notification standard icon",
-      } as IconProps,
-      warning: {
-        color: "brand.primary",
-        name: "errorFilled",
-        title: "Notification warning icon",
-      } as IconProps,
-    };
-    return (
-      <Icon
-        id={`${id}-notification-icon`}
-        {...iconProps[notificationType]}
-        {...baseIconProps}
-      />
-    );
-  };
-  const dismissibleButton = dismissible && (
-    <Button
-      aria-label="Close the notification"
-      buttonType="link"
-      id={`${id}-notification-dismissible-button`}
-      onClick={handleClose}
-      __css={styles.dismissibleButton}
-    >
-      <Icon
-        id={`${id}-dismissible-notification-icon`}
-        name="close"
-        size="large"
-        title="Notification close icon"
-      />
-    </Button>
-  );
-  const iconElem = iconElement();
-  const childHeading = notificationHeading && (
-    <NotificationHeading
-      icon={iconElem}
-      id={id}
-      isCentered={isCentered}
-      notificationType={notificationType}
-    >
-      {notificationHeading}
-    </NotificationHeading>
-  );
-  // Specific alignment styles for the content.
-  const alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
-  const childContent = (
-    <NotificationContent
-      alignText={alignText}
-      icon={!childHeading ? iconElem : undefined}
-      notificationType={notificationType}
-    >
-      {notificationContent}
-    </NotificationContent>
-  );
-
-  // If the `Notification` is closed, don't render anything.
-  if (!isOpen) {
-    return null;
-  }
-  return (
-    <Box
-      aria-label={ariaLabel}
-      as="aside"
-      className={className}
-      data-type={notificationType}
-      id={id}
-      __css={styles}
-      {...rest}
-    >
-      <Box __css={styles.container}>
-        {childHeading}
-        {childContent}
-      </Box>
-      {dismissibleButton}
-    </Box>
-  );
-});
-
-export default Notification;