From 331e58068695314991d86fb8a5e2deadf546f755 Mon Sep 17 00:00:00 2001
From: Michael Winter <mcwinter07@gmail.com>
Date: Tue, 31 Oct 2023 12:30:53 +1100
Subject: [PATCH] story clean up and add delay timer

---
 .changeset/metal-snakes-crash.md              |   2 +-
 .../ToastNotification/ToastNotification.tsx   |   7 +-
 ...ToastNotification.stickersheet.stories.tsx | 121 ++++++++++--------
 .../_docs/ToastNotification.stories.tsx       |  23 ++--
 .../ToastNotificationManager.spec.tsx         |   1 -
 .../Notification/ToastNotification/types.ts   |   5 +-
 6 files changed, 88 insertions(+), 71 deletions(-)

diff --git a/.changeset/metal-snakes-crash.md b/.changeset/metal-snakes-crash.md
index c5af93bf905..23e56cc2206 100644
--- a/.changeset/metal-snakes-crash.md
+++ b/.changeset/metal-snakes-crash.md
@@ -2,4 +2,4 @@
 "@kaizen/components": minor
 ---
 
-migrate Toast Notifications
+Migrate ToastNotification from kaizen-legacy.
\ No newline at end of file
diff --git a/packages/components/src/Notification/ToastNotification/ToastNotification.tsx b/packages/components/src/Notification/ToastNotification/ToastNotification.tsx
index 77f5e7d8160..4b4b6b9cf39 100644
--- a/packages/components/src/Notification/ToastNotification/ToastNotification.tsx
+++ b/packages/components/src/Notification/ToastNotification/ToastNotification.tsx
@@ -15,7 +15,7 @@ export type ToastNotificationProps = Omit<
 }
 
 export const ToastNotification = ({
-  id,
+  id: propsId,
   hideCloseIcon = false,
   type,
   title,
@@ -23,11 +23,12 @@ export const ToastNotification = ({
   children,
   ...restProps
 }: ToastNotificationProps): null => {
-  const localID = id || useId()
+  const reactId = useId()
+  const id = propsId || reactId
   const persistent = hideCloseIcon
 
   addToastNotification({
-    id: localID,
+    id,
     type,
     title,
     message: children,
diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx
index 3be64bb35b7..a76e2a511f5 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx
@@ -1,11 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-
-import { ToastNotification } from "../ToastNotification"
+import { StickerSheetStory } from "~storybook/components/StickerSheet"
+import { addToastNotification } from "../subcomponents/ToastNotificationManager"
 
 export default {
   title: "Components/Notifications/ToastNotification",
@@ -16,49 +12,75 @@ export default {
 } satisfies Meta
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    /** @note: If you have multiple StickerSheets to display, you can add a `heading` */
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <ToastNotification id="abc-123" title="Positive" type="positive">
-            <div>
-              New user data, imported by mackenzie@hooli.com has successfully
-              uploaded. <a href="/">Manage users is now available</a>
-            </div>
-          </ToastNotification>
-          <ToastNotification
-            id="abc-234"
-            title="Informative"
-            type="informative"
-          >
-            <div>
-              New user data, imported by mackenzie@hooli.com has successfully
-              uploaded. <a href="/">Manage users is now available</a>
-            </div>
-          </ToastNotification>
-          <ToastNotification id="abc-345" title="Cautionary" type="cautionary">
-            <div>
-              New user data, imported by mackenzie@hooli.com has successfully
-              uploaded. <a href="/">Manage users is now available</a>
-            </div>
-          </ToastNotification>
-          <ToastNotification id="abc-456" title="Negative" type="negative">
-            <div>
-              New user data, imported by mackenzie@hooli.com has successfully
-              uploaded. <a href="/">Manage users is now available</a>
-            </div>
-          </ToastNotification>
-          <ToastNotification id="abc-567" title="Security" type="security">
-            <div>
-              New user data, imported by mackenzie@hooli.com has successfully
-              uploaded. <a href="/">Manage users is now available</a>
-            </div>
-          </ToastNotification>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+  render: () => {
+    React.useEffect(() => {
+      addToastNotification({
+        type: "positive",
+        title: "Positive",
+        message: (
+          <>
+            New user data, imported by mackenzie@hooli.com has successfully
+            uploaded. <a href="/">Manage users is now available</a>
+          </>
+        ),
+      })
+      addToastNotification({
+        type: "informative",
+        title: "Informative",
+        message: (
+          <>
+            New user data is currently being processed. We’ll let you know when
+            the process is completed. <a href="/">Manage users</a>
+          </>
+        ),
+      })
+      addToastNotification({
+        type: "cautionary",
+        title: "Cautionary",
+        message: (
+          <>
+            New user data, imported by mackenzie@hooli.com has uploaded with
+            some minor issues. <a href="/">View issues</a>
+          </>
+        ),
+      })
+      addToastNotification({
+        type: "security",
+        title: "Security",
+        message: (
+          <>
+            Results hidden to protect confidentiality of individuals and small
+            groups. <a href="/">Learn more</a>
+          </>
+        ),
+      })
+      addToastNotification({
+        type: "negative",
+        title: "Negative",
+        message: (
+          <>
+            Check your connection and try again. <a href="/">Refresh</a>.
+          </>
+        ),
+      })
+      addToastNotification({
+        type: "positive",
+        title:
+          "Very long Title Example Very long title Example VerylongTitleExampleVerylongtitleExample ",
+        message: (
+          <>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+            semper odio vitae sem gravida rutrum. Praesent vel sapien eget eros
+            dictum luctus scelerisque eu nibh. Etiam ullamcorper lobortis
+            gravida. Suspendisse massa tortor, ultricies et ipsum at, iaculis
+            bibendum est.
+          </>
+        ),
+      })
+    }, [])
+
+    return <></>
+  },
 }
 
 export const StickerSheetDefault: StickerSheetStory = {
@@ -70,7 +92,6 @@ export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
     ...StickerSheetTemplate.parameters,
     textDirection: "rtl",
   },
diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 4f58a0ac1b9..114d54d5418 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -7,7 +7,6 @@ import {
   clearToastNotifications,
   ToastNotification,
 } from "../index"
-// import { ToastNotificationWithOptionals } from "../types"
 
 const meta = {
   title: "Components/Notifications/ToastNotification",
@@ -41,18 +40,16 @@ export const Playground: Story = {
 
 export const CreateNotification: Story = {
   render: () => (
-    <>
-      <Button
-        label="Create notification"
-        onClick={() =>
-          addToastNotification({
-            title: "Informative",
-            type: "informative",
-            message: "New notification!",
-          })
-        }
-      />
-    </>
+    <Button
+      label="Create notification"
+      onClick={() =>
+        addToastNotification({
+          title: "Informative",
+          type: "informative",
+          message: "New notification!",
+        })
+      }
+    />
   ),
 }
 
diff --git a/packages/components/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.spec.tsx b/packages/components/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.spec.tsx
index 08b6707c426..3cae0e2e9b3 100644
--- a/packages/components/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.spec.tsx
+++ b/packages/components/src/Notification/ToastNotification/subcomponents/ToastNotificationManager/ToastNotificationManager.spec.tsx
@@ -130,7 +130,6 @@ describe("ToastNotificationsManager", () => {
       const toastItem1 = await screen.getByTestId("id--toast-1")
       const toastItem2 = await screen.getByTestId("id--toast-2")
 
-      // const toastItem = await screen.findByText("Message goes here")
       expect(toastItem1).toBeInTheDocument()
       expect(toastItem2).toBeInTheDocument()
 
diff --git a/packages/components/src/Notification/ToastNotification/types.ts b/packages/components/src/Notification/ToastNotification/types.ts
index 74cdc57b6fa..dd00da6e952 100644
--- a/packages/components/src/Notification/ToastNotification/types.ts
+++ b/packages/components/src/Notification/ToastNotification/types.ts
@@ -1,3 +1,4 @@
+import { DataAttributes } from "~types/DataAttributes"
 import { NotificationType } from "../types"
 
 type Modify<T, R> = Omit<T, keyof R> & R
@@ -13,9 +14,7 @@ export type ToastNotification = {
    * @default false
    */
   persistent?: boolean
-} & {
-  [key: `data-${string}`]: unknown
-}
+} & DataAttributes
 
 export type ToastNotificationWithOptionals = Modify<
   ToastNotification,