@transferwise/components 0.0.0-experimental-9ea3dcb → 0.0.0-experimental-da032bc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9ea3dcb",
+  "version": "0.0.0-experimental-da032bc",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-9ea3dcb",
+    "@transferwise/neptune-css": "0.0.0-experimental-da032bc",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-9ea3dcb",
+    "@transferwise/neptune-css": "0.0.0-experimental-da032bc",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/button/Button/stories/Button.tests.story.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
 import Button from '../../src';
 import { Freeze } from '@transferwise/icons';
@@ -23,11 +23,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Clicked!');
+
+    await step('Click the button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [clicked, setClicked] = useState(false);
@@ -41,12 +47,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [focused, setFocused] = useState(false);
@@ -60,14 +72,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
-    await expect(button).toHaveTextContent('Blurred!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+    });
+
+    await step('Tab away from the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [blurred, setBlurred] = useState(false);
@@ -81,11 +105,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Hovered!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [hovered, setHovered] = useState(false);
@@ -99,14 +129,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    // eslint-disable-next-line no-promise-executor-return
-    await new Promise<void>((resolve) => setTimeout(resolve, 200));
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Left!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Unhover the button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text changes to "Left!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [left, setLeft] = useState(false);
@@ -120,11 +157,17 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Key Pressed!');
+
+    await step('Press Enter key on the button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -136,13 +179,18 @@ export const KeyDownInteraction: Story = {
     );
   },
 };
-
 export const DisabledClickInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Click the disabled button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;
@@ -150,11 +198,17 @@ export const DisabledClickInteraction: Story = {
 };
 
 export const DisabledFocusInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;
@@ -162,11 +216,17 @@ export const DisabledFocusInteraction: Story = {
 };
 
 export const DisabledBlurInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;
@@ -174,11 +234,17 @@ export const DisabledBlurInteraction: Story = {
 };
 
 export const DisabledKeyDownInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Press Enter key on the disabled button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;
@@ -186,11 +252,17 @@ export const DisabledKeyDownInteraction: Story = {
 };
 
 export const DisabledMouseEnterInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Hover over the disabled button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;
@@ -198,11 +270,17 @@ export const DisabledMouseEnterInteraction: Story = {
 };
 
 export const DisabledMouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Unhover the disabled button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args: React.ComponentProps<typeof Button>) {
     return <Button {...args} disabled />;

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
 import PrimitiveAnchor from '../src';
 
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.click(link);
-    await expect(link).toHaveTextContent('Clicked!');
+
+    await step('Click the link', async () => {
+      await userEvent.click(link);
+    });
+
+    await step('Check if link text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -46,12 +52,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await expect(link).toHaveTextContent('Focused!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -65,14 +77,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).toHaveFocus();
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
-    await expect(link).toHaveTextContent('Blurred!');
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link has focus', async () => {
+      await waitFor(async () => expect(link).toHaveFocus());
+    });
+
+    await step('Tab away from the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+      await waitFor(async () => expect(link).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -86,12 +110,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.hover(link);
-    await expect(link).toHaveTextContent('Hovered!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Check if link text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -105,12 +134,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.unhover(link);
-    await expect(link).toHaveTextContent('Left!');
+
+    await step('Hover over the link', async () => {
+      await userEvent.hover(link);
+    });
+
+    await step('Unhover the link', async () => {
+      await userEvent.unhover(link);
+    });
+
+    await step('Check if link text changes to "Left!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -124,14 +162,19 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await expect(link).toHaveTextContent('Click me');
-    await userEvent.tab();
-    await wait();
-    await userEvent.keyboard('{ArrowDown}');
-    await expect(link).toHaveTextContent('Key Pressed!');
+
+    await step('Press ArrowDown key on the link', async () => {
+      await userEvent.tab();
+      await wait();
+      await userEvent.keyboard('{ArrowDown}');
+    });
+
+    await step('Check if link text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(link).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -153,11 +196,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const TabIndexBehavior: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const link = canvas.getByRole('link');
-    await userEvent.tab();
-    await expect(link).not.toHaveFocus();
+
+    await step('Tab to the link', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if link does not have focus', async () => {
+      await waitFor(async () => expect(link).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { userEvent, within, expect } from '@storybook/test';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
 import { Meta, StoryObj } from '@storybook/react';
 import PrimitiveButton from '../src';
 
@@ -22,11 +22,17 @@ const wait = async (duration = 500) =>
   });
 
 export const ClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Clicked!');
+
+    await step('Click the button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text changes to "Clicked!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Clicked!'));
+    });
   },
   render: function Render(args) {
     const [clicked, setClicked] = useState(false);
@@ -40,12 +46,18 @@ export const ClickInteraction: Story = {
 };
 
 export const FocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await expect(button).toHaveTextContent('Focused!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus and text changes to "Focused!"', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Focused!'));
+    });
   },
   render: function Render(args) {
     const [focused, setFocused] = useState(false);
@@ -59,14 +71,26 @@ export const FocusInteraction: Story = {
 };
 
 export const BlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).toHaveFocus();
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
-    await expect(button).toHaveTextContent('Blurred!');
+
+    await step('Tab to the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button has focus', async () => {
+      await waitFor(async () => expect(button).toHaveFocus());
+    });
+
+    await step('Tab away from the button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button loses focus and text changes to "Blurred!"', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+      await waitFor(async () => expect(button).toHaveTextContent('Blurred!'));
+    });
   },
   render: function Render(args) {
     const [blurred, setBlurred] = useState(false);
@@ -80,11 +104,17 @@ export const BlurInteraction: Story = {
 };
 
 export const MouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Hovered!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text changes to "Hovered!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Hovered!'));
+    });
   },
   render: function Render(args) {
     const [hovered, setHovered] = useState(false);
@@ -98,11 +128,21 @@ export const MouseEnterInteraction: Story = {
 };
 
 export const MouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Left!');
+
+    await step('Hover over the button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Unhover the button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text changes to "Left!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Left!'));
+    });
   },
   render: function Render(args) {
     const [left, setLeft] = useState(false);
@@ -116,11 +156,17 @@ export const MouseLeaveInteraction: Story = {
 };
 
 export const KeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Key Pressed!');
+
+    await step('Press Enter key on the button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text changes to "Key Pressed!"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Key Pressed!'));
+    });
   },
   render: function Render(args) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -134,11 +180,17 @@ export const KeyDownInteraction: Story = {
 };
 
 export const DisabledClickInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Click the disabled button', async () => {
+      await userEvent.click(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -150,11 +202,17 @@ export const DisabledClickInteraction: Story = {
 };
 
 export const DisabledFocusInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -166,11 +224,17 @@ export const DisabledFocusInteraction: Story = {
 };
 
 export const DisabledBlurInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.tab();
-    await expect(button).not.toHaveFocus();
+
+    await step('Tab to the disabled button', async () => {
+      await userEvent.tab();
+    });
+
+    await step('Check if button does not have focus', async () => {
+      await waitFor(async () => expect(button).not.toHaveFocus());
+    });
   },
   render: function Render(args) {
     return (
@@ -182,11 +246,17 @@ export const DisabledBlurInteraction: Story = {
 };
 
 export const DisabledKeyDownInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.type(button, '{enter}');
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Press Enter key on the disabled button', async () => {
+      await userEvent.type(button, '{enter}');
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -198,11 +268,17 @@ export const DisabledKeyDownInteraction: Story = {
 };
 
 export const DisabledMouseEnterInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.hover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Hover over the disabled button', async () => {
+      await userEvent.hover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (
@@ -214,11 +290,17 @@ export const DisabledMouseEnterInteraction: Story = {
 };
 
 export const DisabledMouseLeaveInteraction: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
-    await userEvent.unhover(button);
-    await expect(button).toHaveTextContent('Button text');
+
+    await step('Unhover the disabled button', async () => {
+      await userEvent.unhover(button);
+    });
+
+    await step('Check if button text remains "Button text"', async () => {
+      await waitFor(async () => expect(button).toHaveTextContent('Button text'));
+    });
   },
   render: function Render(args) {
     return (