@kaizen/components 0.0.0-canary-debug-kaizenprovider-20241223004555 → 0.0.0-canary-debug-kaizen-provider-20241223031700

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-debug-kaizenprovider-20241223004555",
+  "version": "0.0.0-canary-debug-kaizen-provider-20241223031700",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -117,8 +117,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.6",
-    "@kaizen/package-bundler": "2.0.3"
+    "@kaizen/package-bundler": "2.0.3",
+    "@kaizen/design-tokens": "10.8.6"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, within } from '@storybook/test'
+import { expect, userEvent, within } from '@storybook/test'
 import { Button } from '~components/Button'
 import { ToastNotification, useToastNotification } from '../index'
 
@@ -175,26 +175,27 @@ export const NoDuplicatesWithSameId: Story = {
   render: () => {
     const { addToastNotification } = useToastNotification()
 
-    useEffect(() => {
-      addToastNotification({
-        id: 'id--clear-example-1',
-        title: 'First',
-        type: 'positive',
-        message: 'There should only be one notification',
-      })
-      addToastNotification({
-        id: 'id--clear-example-1',
-        title: 'First',
-        type: 'positive',
-        message: 'There should only be one notification',
-      })
-    }, [addToastNotification])
-
-    return <div>Irrelevant content</div>
+    return (
+      <Button
+        label="Create notification"
+        onClick={() =>
+          addToastNotification({
+            id: 'id--clear-example-1',
+            title: 'First',
+            type: 'positive',
+            message: 'There should only be one notification',
+          })
+        }
+      />
+    )
   },
   play: async (context) => {
     const { canvasElement } = context
-    const { findAllByText } = within(canvasElement.parentElement!)
+    const { findAllByText, findByRole } = within(canvasElement.parentElement!)
+
+    const createNotificationButton = await findByRole('button', { name: 'Create notification' })
+    await userEvent.click(createNotificationButton)
+    await userEvent.click(createNotificationButton)
 
     const notifications = await findAllByText('There should only be one notification')
     expect(notifications).toHaveLength(1)