feat(ToastNotification): add dismissType with automated dismissing (#…

…1980)

- add in new feature with default
- add tests and snapshots

src/components/ToastNotification/ToastNotification.stories.ts

@@ -10,7 +10,10 @@ export default {
     layout: 'centered',
     badges: ['intro-1.0', 'current-2.0'],
   },
-  argTypes: { onDismiss: { action: 'dismissed' } },
+  argTypes: {
+    onDismiss: { action: 'dismissed' },
+    timeout: { table: { disable: true } },
+  },
   args: {
     title: "You've got a temporary notification!",
     className: 'w-96',
@@ -39,3 +42,12 @@ export const NotDismissable: StoryObj<Args> = {
     onDismiss: undefined,
   },
 };
+
+export const AutoDismiss: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    dissmissType: 'auto',
+    timeout: 500,
+    onDismiss: () => console.log('trigger onDismiss'),
+  },
+};

src/components/ToastNotification/ToastNotification.test.tsx

@@ -0,0 +1,26 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import { composeStories, type StoryFile } from '@storybook/testing-react';
+import { render, waitFor } from '@testing-library/react';
+
+import React from 'react';
+import * as stories from './ToastNotification.stories';
+
+const { AutoDismiss } = composeStories(stories);
+
+const { AutoDismiss: skip, ...staticStories } = stories;
+
+describe('<ToastNotification /> (v2)', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  generateSnapshots(staticStories as StoryFile);
+
+  it('triggers the onDissmiss after a delay', async () => {
+    const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+
+    render(<AutoDismiss />);
+
+    await waitFor(() => expect(consoleSpy).toHaveBeenCalledTimes(1));
+  });
+});

src/components/ToastNotification/ToastNotification.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
 import type { Status } from '../../util/variant-types';
@@ -19,7 +19,18 @@ export type ToastNotificationProps = {
    * Callback when notification is dismissed. When passed in, renders banner with a close icon in the top right.
    */
   onDismiss?: () => void;
+  /**
+   * Length of time to wait until `onDismiss` is called
+   */
+  timeout?: number;
   // Design API
+  /**
+   * Determines whether the toast notification will dismiss on its own, or due to user action. When set to `"auto"`,
+   * it will dismiss after 8 seconds.
+   *
+   * **Default is `"manual"`**.
+   */
+  dissmissType?: 'manual' | 'auto';
   /**
    * Keyword to characterize the state of the notification
    */
@@ -37,8 +48,10 @@ export type ToastNotificationProps = {
  */
 export const ToastNotification = ({
   className,
+  dissmissType = 'manual',
   onDismiss,
   status = 'favorable',
+  timeout = 8000,
   title,
   ...other
 }: ToastNotificationProps) => {
@@ -47,6 +60,18 @@ export const ToastNotification = ({
     status && styles[`toast--status-${status}`],
     className,
   );
+
+  useEffect(() => {
+    const expireId =
+      dissmissType === 'auto'
+        ? setTimeout(() => {
+            onDismiss && onDismiss();
+          }, timeout)
+        : undefined;
+
+    return () => clearTimeout(expireId);
+  }, [onDismiss, dissmissType, timeout]);
+
   return (
     <div className={componentClassName} {...other}>
       <Icon