From ee014becc16497a34f24100eb5407d6718834066 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Tue, 26 Mar 2024 10:21:01 -0500
Subject: [PATCH] feat(Toast)!: introduce 2.0 component

- unmark as deprecated
- add tests and 2.0 version
---
 .../BannerNotification.module.css             |   3 -
 .../BannerNotification/BannerNotification.tsx |   6 +-
 src/components/Toast/Toast-v2.module.css      |  35 ++++++
 src/components/Toast/Toast-v2.stories.ts      |  39 +++++++
 src/components/Toast/Toast-v2.test.ts         |   8 ++
 src/components/Toast/Toast-v2.tsx             | 104 ++++++++++++++++++
 .../Toast/__snapshots__/Toast-v2.test.ts.snap | 100 +++++++++++++++++
 7 files changed, 289 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Toast/Toast-v2.module.css
 create mode 100644 src/components/Toast/Toast-v2.stories.ts
 create mode 100644 src/components/Toast/Toast-v2.test.ts
 create mode 100644 src/components/Toast/Toast-v2.tsx
 create mode 100644 src/components/Toast/__snapshots__/Toast-v2.test.ts.snap

diff --git a/src/components/BannerNotification/BannerNotification.module.css b/src/components/BannerNotification/BannerNotification.module.css
index 566143f22..4b62c1158 100644
--- a/src/components/BannerNotification/BannerNotification.module.css
+++ b/src/components/BannerNotification/BannerNotification.module.css
@@ -8,9 +8,6 @@
  * Message of information, success, caution, or warning to the user.
  */
 .banner {
-  /* Position is relative to allow for absolute-positioned close button. */
-  position: relative;
-  /* Grid is used to separate the icon from the text with correct spacing. */
   display: flex;
   gap: 1rem;
   padding: 1rem;
diff --git a/src/components/BannerNotification/BannerNotification.tsx b/src/components/BannerNotification/BannerNotification.tsx
index bdb28bcd9..a6272a727 100644
--- a/src/components/BannerNotification/BannerNotification.tsx
+++ b/src/components/BannerNotification/BannerNotification.tsx
@@ -21,7 +21,7 @@ export type BannerNotificationProps = {
    */
   className?: string;
   /**
-   * Callback when banner is dismissed. When passed in, renders banner with a close icon in the top right.
+   * Callback when notification is dismissed. When passed in, renders banner with a close icon in the top right.
    */
   onDismiss?: () => void;
   // Design API
@@ -42,7 +42,7 @@ export type BannerNotificationProps = {
    */
   subTitle?: string;
   /**
-   * The title/heading of the banner
+   * The title/heading of the notification
    */
   title?: string;
 };
@@ -125,7 +125,7 @@ export const BannerNotification = ({
           </div>
         )}
       </div>
-
+      {/* TODO-AH: Use `Button` properly */}
       {onDismiss && (
         <button
           className={styles['banner-notification__close-button']}
diff --git a/src/components/Toast/Toast-v2.module.css b/src/components/Toast/Toast-v2.module.css
new file mode 100644
index 000000000..a854556fa
--- /dev/null
+++ b/src/components/Toast/Toast-v2.module.css
@@ -0,0 +1,35 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # TOAST
+\*------------------------------------*/
+
+.toast {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  align-items: center;
+
+  border: 0.125rem solid;
+  border-left: 1rem solid;
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+
+  &.toast--status-critical {
+    color: var(--eds-theme-color-text-utility-critical);
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
+
+  &.toast--status-favorable {
+    color: var(--eds-theme-color-text-utility-favorable);
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
+}
+
+.toast__icon {
+  flex-shrink: 0;
+}
+
+.toast__body {
+  flex-grow: 2;
+}
\ No newline at end of file
diff --git a/src/components/Toast/Toast-v2.stories.ts b/src/components/Toast/Toast-v2.stories.ts
new file mode 100644
index 000000000..fa656c7d8
--- /dev/null
+++ b/src/components/Toast/Toast-v2.stories.ts
@@ -0,0 +1,39 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import { Toast } from './Toast-v2';
+
+export default {
+  title: 'Components/V2/Toast',
+  component: Toast,
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+  argTypes: { onDismiss: { action: 'dismissed' } },
+  args: {
+    children: "You've got a temporary notification!",
+  },
+} as Meta<Args>;
+
+type Args = ComponentProps<typeof Toast>;
+
+export const Default: StoryObj<Args> = {};
+
+export const Favorable: StoryObj<Args> = {
+  args: {
+    status: 'favorable',
+  },
+};
+
+export const Critical: StoryObj<Args> = {
+  args: {
+    status: 'critical',
+  },
+};
+
+export const NotDismissable: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    onDismiss: undefined,
+  },
+};
diff --git a/src/components/Toast/Toast-v2.test.ts b/src/components/Toast/Toast-v2.test.ts
new file mode 100644
index 000000000..b49bc10f2
--- /dev/null
+++ b/src/components/Toast/Toast-v2.test.ts
@@ -0,0 +1,8 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import type { StoryFile } from '@storybook/testing-react';
+
+import * as stories from './Toast.stories';
+
+describe('<Toast /> (v2)', () => {
+  generateSnapshots(stories as StoryFile);
+});
diff --git a/src/components/Toast/Toast-v2.tsx b/src/components/Toast/Toast-v2.tsx
new file mode 100644
index 000000000..7c144fffb
--- /dev/null
+++ b/src/components/Toast/Toast-v2.tsx
@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import React from 'react';
+import type { ReactNode } from 'react';
+
+import type { Status } from '../../util/variant-types';
+import { ButtonV2 as Button } from '../Button';
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
+import styles from './Toast-v2.module.css';
+
+/**
+ * TODO-AH:
+ * - which status is default?
+ * - default / min / max widths?
+ */
+
+export type ToastProps = {
+  // Component API
+  /**
+   * Additional class names that can be appended to the component, passed in for styling.
+   */
+  className?: string;
+  /**
+   * The child node(s) contains the toast message.
+   */
+  children: ReactNode;
+  /**
+   * Callback when notification is dismissed. When passed in, renders banner with a close icon in the top right.
+   */
+  onDismiss?: () => void;
+  // Design API
+  /**
+   * Keyword to characterize the state of the notification
+   */
+  status?: Extract<Status, 'favorable' | 'critical'>;
+  /**
+   * The title/heading of the notification
+   */
+  title: string;
+};
+
+/**
+ * Map statuses to existing icon names
+ * TODO-AH: de-dupe this with the function in InlineNotification
+ *
+ * @param status component status
+ * @returns the matching icon name
+ */
+function getIconNameFromStatus(status: Status): IconName {
+  const map: Record<Status, IconName> = {
+    informational: 'info',
+    critical: 'dangerous',
+    warning: 'warning',
+    favorable: 'check-circle',
+  };
+  return map[status];
+}
+
+/**
+ * `import {Toast} from "@chanzuckerberg/eds";`
+ *
+ * Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
+ */
+export const Toast = ({
+  children,
+  className,
+  onDismiss,
+  status = 'favorable',
+  ...other
+}: ToastProps) => {
+  const componentClassName = clsx(
+    styles['toast'],
+    status && styles[`toast--status-${status}`],
+    className,
+  );
+  return (
+    <div className={componentClassName} {...other}>
+      <Icon
+        className={styles['toast__icon']}
+        name={getIconNameFromStatus(status)}
+        purpose="decorative"
+        size="1.875rem"
+      />
+      <div className={styles['toast__body']}>
+        <Text as="span" className={styles['toast__text']} preset="title-md">
+          {children}
+        </Text>
+      </div>
+      {onDismiss && (
+        <Button
+          aria-label="close"
+          context="default"
+          icon="close"
+          iconLayout="icon-only"
+          onClick={onDismiss}
+          rank="tertiary"
+        >
+          Close
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Toast/__snapshots__/Toast-v2.test.ts.snap b/src/components/Toast/__snapshots__/Toast-v2.test.ts.snap
new file mode 100644
index 000000000..9c242381b
--- /dev/null
+++ b/src/components/Toast/__snapshots__/Toast-v2.test.ts.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Toast /> (v2) Error story renders snapshot 1`] = `
+<div
+  class="toast toast--error"
+>
+  <div
+    class="toast__content"
+  >
+    <svg
+      class="icon"
+      fill="currentColor"
+      height="1.5rem"
+      role="img"
+      style="--icon-size: 1.5rem;"
+      viewBox="0 0 24 24"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        error
+      </title>
+      <path
+        d="M1 21L12 2L23 21H1ZM11 15H13V10H11V15ZM12 18C12.2833 18 12.521 17.904 12.713 17.712C12.9043 17.5207 13 17.2833 13 17C13 16.7167 12.9043 16.4793 12.713 16.288C12.521 16.096 12.2833 16 12 16C11.7167 16 11.4793 16.096 11.288 16.288C11.096 16.4793 11 16.7167 11 17C11 17.2833 11.096 17.5207 11.288 17.712C11.4793 17.904 11.7167 18 12 18Z"
+      />
+    </svg>
+    <p
+      class="toast__text"
+    >
+      You've got toast!
+    </p>
+  </div>
+</div>
+`;
+
+exports[`<Toast /> (v2) NotDismissable story renders snapshot 1`] = `
+<div
+  class="toast toast--success"
+>
+  <div
+    class="toast__content"
+  >
+    <svg
+      class="icon"
+      fill="currentColor"
+      height="1.5rem"
+      role="img"
+      style="--icon-size: 1.5rem;"
+      viewBox="0 0 24 24"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        success
+      </title>
+      <path
+        d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      />
+    </svg>
+    <p
+      class="toast__text"
+    >
+      You've got toast!
+    </p>
+  </div>
+</div>
+`;
+
+exports[`<Toast /> (v2) Success story renders snapshot 1`] = `
+<div
+  class="toast toast--success"
+>
+  <div
+    class="toast__content"
+  >
+    <svg
+      class="icon"
+      fill="currentColor"
+      height="1.5rem"
+      role="img"
+      style="--icon-size: 1.5rem;"
+      viewBox="0 0 24 24"
+      width="1.5rem"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        success
+      </title>
+      <path
+        d="M12 22C10.6167 22 9.31667 21.7373 8.1 21.212C6.88333 20.6873 5.825 19.975 4.925 19.075C4.025 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.31233 8.1 2.787C9.31667 2.26233 10.6167 2 12 2C13.3833 2 14.6833 2.26233 15.9 2.787C17.1167 3.31233 18.175 4.025 19.075 4.925C19.975 5.825 20.6873 6.88333 21.212 8.1C21.7373 9.31667 22 10.6167 22 12C22 13.3833 21.7373 14.6833 21.212 15.9C20.6873 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6873 15.9 21.212C14.6833 21.7373 13.3833 22 12 22ZM10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6Z"
+      />
+    </svg>
+    <p
+      class="toast__text"
+    >
+      You've got toast!
+    </p>
+  </div>
+</div>
+`;