@progressiveui/react 1.22.0

package/src/components/Notification/Notification-test.js

@@ -0,0 +1,258 @@
+import React from "react";
+import {
+  NotificationButton,
+  NotificationTextDetails,
+  ToastNotification,
+  InlineNotification,
+} from ".";
+
+import { shallow, mount } from "enzyme";
+import { settings } from "../../globals/js";
+
+const { prefix } = settings;
+
+describe("NotificationButton", () => {
+  describe("Renders as expected", () => {
+    const wrapper = shallow(<NotificationButton className="some-class" />);
+
+    it("renders given className", () => {
+      expect(wrapper.hasClass("some-class")).toBe(true);
+    });
+
+    describe('When notificationType equals "toast"', () => {
+      it("button should have correct className by default", () => {
+        expect(
+          wrapper.hasClass(`${prefix}--toast-notification__close-button`)
+        ).toBe(true);
+      });
+    });
+
+    describe('When notificationType equals "inline"', () => {
+      it("button should have correct className", () => {
+        wrapper.setProps({ notificationType: "inline" });
+        expect(
+          wrapper.hasClass(`${prefix}--inline-notification__close-button`)
+        ).toBe(true);
+      });
+    });
+  });
+});
+
+describe("NotificationTextDetails", () => {
+  describe("Renders as expected", () => {
+    const wrapper = shallow(<NotificationTextDetails />);
+
+    describe('When notificationType equals "toast"', () => {
+      it("div shoudld have correct className by default", () => {
+        expect(wrapper.hasClass(`${prefix}--toast-notification__details`)).toBe(
+          true
+        );
+      });
+    });
+
+    describe('When notificationType equals "inline"', () => {
+      it("div shoudld have correct className", () => {
+        wrapper.setProps({ notificationType: "inline" });
+        expect(
+          wrapper.hasClass(`${prefix}--inline-notification__text-wrapper`)
+        ).toBe(true);
+      });
+    });
+  });
+});
+
+describe("ToastNotification", () => {
+  describe("Renders as expected", () => {
+    const toast = shallow(
+      <ToastNotification
+        kind="error"
+        title="this is a title"
+        subtitle="this is a subtitle"
+        caption="this is a caption"
+      />
+    );
+    it("renders itself", () => {
+      expect(toast.length).toEqual(1);
+    });
+
+    it("renders HTML for toast notifications when caption exists", () => {
+      expect(toast.hasClass(`${prefix}--toast-notification`)).toBe(true);
+    });
+
+    it("adds extra classes via className", () => {
+      toast.setProps({ className: "extra-class" });
+
+      expect(toast.hasClass("extra-class")).toBe(true);
+    });
+
+    it("interpolates matching className based on kind prop", () => {
+      const kinds = ["error", "info", "success", "warning"];
+
+      kinds.forEach((kind) => {
+        toast.setProps({ kind });
+        expect(
+          toast.hasClass(`${prefix}--toast-notification--${kind}`)
+        ).toEqual(true);
+      });
+    });
+
+    it('has [role="alert"] on wrapping <div>', () => {
+      expect(toast.props().role).toEqual("alert");
+    });
+
+    it("sets a new kind when passed in via props", () => {
+      toast.setProps({ kind: "success" });
+      expect(toast.props().kind).toEqual("success");
+    });
+
+    it("can render any node for the subtitle and caption", () => {
+      toast.setProps({
+        subtitle: <button type="button" />,
+        caption: <button type="button" />,
+      });
+      expect(toast.length).toEqual(1);
+    });
+  });
+  describe("events and state", () => {
+    it("initial open state set to true", () => {
+      const wrapper = mount(
+        <ToastNotification
+          kind="error"
+          title="this is a title"
+          subtitle="this is a subtitle"
+          caption="this is a caption"
+        />
+      );
+
+      expect(wrapper.children().length > 0).toBe(true);
+    });
+
+    it("sets open state to false when close button is clicked", () => {
+      const wrapper = mount(
+        <ToastNotification
+          kind="error"
+          title="this is a title"
+          subtitle="this is a subtitle"
+          caption="this is a caption"
+        />
+      );
+
+      wrapper.find("button").simulate("click");
+      expect(wrapper.children().length).toBe(0);
+    });
+
+    it("renders null when open state is false", () => {
+      const wrapper = mount(
+        <ToastNotification
+          kind="error"
+          title="this is a title"
+          subtitle="this is a subtitle"
+          caption="this is a caption"
+        />
+      );
+
+      wrapper.find("button").simulate("click");
+      expect(wrapper.html()).toBeNull();
+    });
+  });
+});
+
+describe("InlineNotification", () => {
+  describe("Renders as expected", () => {
+    const inline = mount(
+      <InlineNotification
+        title="this is a title"
+        subtitle="this is a subtitle"
+        kind="error"
+      />
+    );
+
+    it("renders itself", () => {
+      expect(inline.length).toEqual(1);
+    });
+
+    it('renders warning notification with matching kind and <icon name=""> values', () => {
+      inline.setProps({ kind: "warning" });
+      expect(
+        inline.find(`.${prefix}--inline-notification__icon`).exists()
+      ).toBe(true);
+    });
+
+    it("renders HTML for inline notifications when caption does not exist", () => {
+      expect(inline.find(`.${prefix}--inline-notification`).exists()).toBe(
+        true
+      );
+    });
+
+    it("adds extra classes via className", () => {
+      inline.setProps({ className: "extra-class" });
+      expect(inline.find(".extra-class").exists()).toBe(true);
+    });
+
+    it("interpolates matching className based on kind prop", () => {
+      const kinds = ["error", "info", "success", "warning"];
+
+      kinds.forEach((kind) => {
+        inline.setProps({ kind });
+        expect(
+          inline.find(`.${prefix}--inline-notification--${kind}`).exists()
+        ).toEqual(true);
+      });
+    });
+
+    it('has [role="alert"] on wrapping <div>', () => {
+      expect(inline.props().role).toEqual("alert");
+    });
+
+    it("sets a new kind when passed in via props", () => {
+      inline.setProps({ kind: "success" });
+      expect(inline.props().kind).toEqual("success");
+    });
+
+    it("can render any node for the subtitle", () => {
+      inline.setProps({ subtitle: <button type="button" /> });
+      expect(inline.length).toEqual(1);
+    });
+  });
+
+  describe("events and state", () => {
+    it("initial open state set to true", () => {
+      const wrapper = mount(
+        <InlineNotification
+          title="this is a title"
+          subtitle="this is a subtitle"
+          kind="error"
+        />
+      );
+
+      expect(wrapper.children().length > 0).toBe(true);
+    });
+
+    it("sets open state to false when close button is clicked", () => {
+      const wrapper = mount(
+        <InlineNotification
+          kind="success"
+          title="title"
+          subtitle="subtitle"
+          iconDescription="description"
+        />
+      );
+
+      wrapper.find("button").simulate("click");
+      expect(wrapper.children().length).toBe(0);
+    });
+
+    it("renders null when open state is false", () => {
+      const wrapper = mount(
+        <InlineNotification
+          title="this is a title"
+          subtitle="this is a subtitle"
+          kind="error"
+        />
+      );
+
+      wrapper.find("button").simulate("click");
+      expect(wrapper.html()).toBeNull();
+    });
+  });
+});

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,286 @@
+import React from "react";
+import {
+  ToastNotification,
+  //InlineNotification,
+  NotificationActionButton,
+  Callout,
+} from ".";
+import Button from "../Button";
+import { notificationtypes } from "../../prop-types/types";
+
+import markdown from "./README.mdx";
+
+export default {
+  title: "Components/UI Elements/Notification",
+  component: NotificationActionButton,
+  subcomponents: { ToastNotification /*, InlineNotification*/ },
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const ToastDefault: Story = {
+  render: (args) => (
+    <ToastNotification
+      {...args}
+      caption={"00:00:00 AM"}
+      style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+    />
+  ),
+  args: {
+    kind: "error",
+    role: "alert",
+    title: "Notification title",
+    subtitle: "Subtitle text goes here.",
+    iconDescription: "describes the close button",
+    statusIconDescription: "describes the status icon",
+    hideCloseButton: false,
+  },
+};
+
+export const NotificationTypes = (args) => (
+  <>
+    {notificationtypes.map((e) => (
+      <div
+        style={{
+          display: "inline-block",
+          background: e === "inverse" ? "#ccc" : "",
+          padding: "0.3rem",
+        }}
+      >
+        <ToastNotification
+          {...args}
+          kind={e}
+          caption={"00:00:00 AM"}
+          style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+        />
+      </div>
+    ))}
+  </>
+);
+
+NotificationTypes.args = {
+  kind: "error",
+  lowContrast: false,
+  role: "alert",
+  title: "Notification title",
+  subtitle: "Subtitle text goes here.",
+  iconDescription: "describes the close button",
+  statusIconDescription: "describes the status icon",
+  hideCloseButton: false,
+};
+
+const hello = `
+By specifying the \`notificationTypes\` prop with any of the types below, you can use different styles of the notification.
+
+| type   |  purpose  |
+|----------|-------------|
+| \`inline\` | Inline notifications show up in task flows, to notify users of the status of an action. They usually appear at the top of the primary content area. |
+| \`toast\` | Toasts are non-modal, time-based window elements used to display short messages; they usually appear at the top of the screen and disappear after a few seconds.  |
+
+By changing the \`kind\` prop you can use different styles of the notification.
+
+| kind   |  Description  |
+|----------|-------------|
+| \`info\` | notification alert to give information |
+| \`success\` | notification alert to give success message  |
+| \`warning\` | notification alert to give warning message |
+| \`error\` | notification alert to give error message |
+`;
+
+NotificationTypes.story = {
+  name: "NotificationTypes",
+  parameters: {
+    markdown: "hello",
+    docs: {
+      storyDescription: hello,
+    },
+  },
+};
+
+export const ToastLowContrast = (args) => (
+  <>
+    <ToastNotification
+      {...args}
+      kind="success"
+      style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+    />
+    <ToastNotification
+      {...args}
+      kind="error"
+      style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+    />
+    <ToastNotification
+      {...args}
+      kind="warning"
+      style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+    />
+    <ToastNotification
+      {...args}
+      kind="info"
+      style={{ minWidth: "30rem", marginBottom: ".5rem" }}
+    />
+  </>
+);
+
+ToastLowContrast.args = {
+  lowContrast: true,
+  caption: "00:00:00 AM",
+  role: "alert",
+  title: "Notification title",
+  subtitle: "Subtitle text goes here.",
+  iconDescription: "describes the close button",
+  statusIconDescription: "describes the status icon",
+  hideCloseButton: false,
+};
+
+ToastLowContrast.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Use \`lowContrast\` property to show notification in a low contrast styling`,
+    },
+  },
+};
+
+export const CalloutDefault: Story = {
+  render: (args) => (
+    <Callout
+      {...args}
+      kind="success"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+  ),
+  args: {
+    role: "alert",
+    title: "Notification title",
+    subtitle: "Subtitle text goes here.",
+    iconDescription: "describes the close button",
+    statusIconDescription: "describes the status icon",
+  },
+};
+
+export const Inline = (args) => (
+  <>
+    <Callout
+      {...args}
+      kind="success"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="error"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="warning"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="info"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+  </>
+);
+
+Inline.args = {
+  role: "alert",
+  title: "Notification title",
+  subtitle: "Subtitle text goes here.",
+  iconDescription: "describes the close button",
+  statusIconDescription: "describes the status icon",
+};
+
+Inline.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Set \`notificationType\` property to \`inline\` to style notifcation with an inline flow`,
+    },
+  },
+};
+
+export const InlineLowContrast = (args) => (
+  <>
+    <Callout
+      {...args}
+      kind="success"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="error"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="warning"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      {...args}
+      kind="info"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+  </>
+);
+
+InlineLowContrast.args = {
+  role: "alert",
+  lowContrast: true,
+  title: "Notification title",
+  subtitle: "Subtitle text goes here.",
+  iconDescription: "describes the close button",
+  statusIconDescription: "describes the status icon",
+};
+
+export const CalloutElement = (args) => (
+  <>
+    <Callout
+      {...args}
+      kind="success"
+      actions={<NotificationActionButton>{"Action"}</NotificationActionButton>}
+    />
+    <Callout
+      advancedActions
+      {...args}
+      subtitle="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+      kind="info"
+      icon={false}
+      actions={
+        <>
+          <Button>Accept</Button>
+          <Button kind="tertiary">Reject</Button>
+        </>
+      }
+    />
+    <Callout
+      advancedActions
+      {...args}
+      kind="info"
+      icon={false}
+      actions={
+        <>
+          <Button>Accept</Button>
+          <Button kind="tertiary">Reject</Button>
+        </>
+      }
+    />
+    <Callout
+      {...args}
+      kind="warning"
+      icon={<div>Icon</div>}
+      actions={<Button small>{"Action"}</Button>}
+    />
+  </>
+);
+
+CalloutElement.args = {
+  role: "alert",
+  title: "Notification title",
+  subtitle: "Subtitle text goes here.",
+  iconDescription: "describes the close button",
+  statusIconDescription: "describes the status icon",
+};

package/src/components/Notification/NotificationActionButton.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import Button from "../Button/Button";
+import useSettings from "../../hooks/useSettings";
+import classNames from "classnames";
+
+interface NotificationActionButton {
+  /**
+   * Specify the content of the notification action button.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specify an optional className to be applied to the notification action button
+   */
+  className?: string;
+
+  /**
+   * Optionally specify a click handler for the notification action button.
+   */
+  onClick?: () => void;
+}
+
+/** Notifications are messages that communicate information to the user. The two main types of notifications are toast notifications and inline notifications. */
+export const NotificationActionButton: React.FC<NotificationActionButton> = ({
+  children,
+  className: customClassName,
+  onClick,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const className = classNames(
+    customClassName,
+    `${prefix}--inline-notification__action-button`
+  );
+
+  return (
+    <Button
+      className={className}
+      kind="ghost"
+      onClick={onClick}
+      small //TODO size="small"
+      {...other}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/components/Notification/NotificationButton.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import { InputProps } from "../Input";
+
+import { Close } from "@progressiveui/icons-react";
+
+interface NotificationButtonProps
+  extends InputProps,
+    React.ComponentPropsWithRef<"button"> {
+  /**
+   * Specify a label to be read by screen readers on the notification button
+   */
+  ariaLabel?: string;
+
+  /**
+   * Specify an optional className to be applied to the notification button
+   */
+  className?: string;
+
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify an optional icon for the Button through a string,
+   * if something but regular "close" icon is desirable
+   */
+  name?: string;
+
+  /**
+   * Specify the notification type
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon?: any; // TODO: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Optional prop to specify the type of the Button
+   */
+  type?: "button" | "submit" | "reset" | undefined;
+}
+
+export const NotificationButton: React.FC<NotificationButtonProps> = ({
+  ariaLabel = "close notification",
+  className,
+  iconDescription = "close icon",
+  type = "button",
+  renderIcon: IconTag = Close, // IconTag, // Close
+  name,
+  notificationType = "toast",
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const buttonClassName = classNames(className, {
+    [`${prefix}--${notificationType}-notification__close-button`]:
+      notificationType,
+  });
+  const iconClassName = classNames({
+    [`${prefix}--${notificationType}-notification__close-icon`]:
+      notificationType,
+  });
+
+  // const Icon = renderIcon;
+
+  return (
+    // eslint-disable-next-line react/button-has-type
+    <button
+      {...other}
+      type={type}
+      aria-label={iconDescription}
+      title={iconDescription}
+      className={buttonClassName}
+    >
+      {IconTag && (
+        <IconTag aria-label={ariaLabel} className={iconClassName} name={name} />
+      )}
+    </button>
+  );
+};