fix(ToastNotification): fix typo in prop name (#2122)

- add in dismissType
- add in tests and console messages so make sure the new field falls back
- add deprecation flag for old prop
- simplify dismiss type evaluation

src/components/ToastNotification/ToastNotification.stories.tsx

@@ -62,7 +62,7 @@ export const NotDismissable: Story = {
 export const AutoDismiss: Story = {
   args: {
     ...Default.args,
-    dissmissType: 'auto',
+    dismissType: 'auto',
     timeout: 500,
     onDismiss: () => console.log('trigger onDismiss'),
   },
@@ -111,7 +111,7 @@ const ToastNotificationManager = (args: Args) => {
           >
             <ToastNotification
               {...args}
-              dissmissType="auto"
+              dismissType="auto"
               onDismiss={() => {
                 setToasts(
                   toasts.map((thisToast) => {

src/components/ToastNotification/ToastNotification.test.tsx

@@ -36,10 +36,22 @@ describe('<ToastNotification />', () => {
     it('generates an error when onDissmiss and type=auto are misused', async () => {
       // One must use onDismiss if auto is used
       render(
-        <ToastNotification dissmissType="auto" timeout={50} title="test" />,
+        <ToastNotification dismissType="auto" timeout={50} title="test" />,
       );
 
       await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1));
     });
+
+    it('[EDS-1453] generates an error message when using the dissmissType prop', async () => {
+      render(<ToastNotification dissmissType="manual" title="test" />);
+
+      await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1));
+    });
+
+    it('[EDS-1453] generates no error when using the correct dismissType prop', async () => {
+      render(<ToastNotification dismissType="manual" title="test" />);
+
+      await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(0));
+    });
   });
 });

src/components/ToastNotification/ToastNotification.tsx

@@ -31,7 +31,7 @@ export type ToastNotificationProps = {
    *
    * **Default is `"manual"`**.
    */
-  dissmissType?: 'manual' | 'auto';
+  dismissType?: 'manual' | 'auto';
   /**
    * Keyword to characterize the state of the notification
    */
@@ -40,6 +40,8 @@ export type ToastNotificationProps = {
    * The title/heading of the notification
    */
   title: string;
+  /** @deprecated Please use `dismissType` instead */
+  dissmissType?: 'manual' | 'auto'; // TODO(next-major): remove this misspelled prop at next major release
 };
 
 /**
@@ -49,7 +51,8 @@ export type ToastNotificationProps = {
  */
 export const ToastNotification = ({
   className,
-  dissmissType = 'manual',
+  dismissType = 'manual',
+  dissmissType,
   onDismiss,
   status = 'favorable',
   timeout = 8000,
@@ -62,22 +65,36 @@ export const ToastNotification = ({
     className,
   );
 
+  // if both are defined, temporarily prefer the original value of dissmissType to avoid accidental overrides
+  const tempDismissType = dissmissType ?? dismissType;
+
   assertEdsUsage(
-    [!!timeout && typeof onDismiss === 'undefined' && dissmissType === 'auto'],
+    [
+      !!timeout &&
+        typeof onDismiss === 'undefined' &&
+        tempDismissType === 'auto',
+    ],
     'When using dismissType=auto, an onDismiss method must be defined',
     'error',
   );
 
+  // TODO(next-major): remove this misspelled prop at next major release
+  assertEdsUsage(
+    [typeof dissmissType !== 'undefined'],
+    '`dissmissType` should not be used. Use `dismissType` instead',
+    'error',
+  );
+
   useEffect(() => {
     const expireId =
-      dissmissType === 'auto'
+      tempDismissType === 'auto'
         ? setTimeout(() => {
             onDismiss && onDismiss();
           }, timeout)
         : undefined;
 
     return () => clearTimeout(expireId);
-  }, [onDismiss, dissmissType, timeout]);
+  }, [onDismiss, tempDismissType, timeout]);
 
   return (
     <div className={componentClassName} {...other}>