From 156966b51db64214b36c328d670f9a79861db7b9 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 26 Jun 2024 12:50:08 +0200
Subject: [PATCH] Update docs

---
 .../my-component-play-function-composition.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/_snippets/my-component-play-function-composition.md b/docs/_snippets/my-component-play-function-composition.md
index 6052d455a55..d5f69d9d864 100644
--- a/docs/_snippets/my-component-play-function-composition.md
+++ b/docs/_snippets/my-component-play-function-composition.md
@@ -33,12 +33,12 @@ export const SecondStory: Story = {
 };
 
 export const CombinedStories: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ context, canvasElement }) => {
     const canvas = within(canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play({ canvasElement });
-    await SecondStory.play({ canvasElement });
+    await FirstStory.play(context);
+    await SecondStory.play(context);
     await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
@@ -74,8 +74,8 @@ export const SecondStory = {
 };
 
 export const CombinedStories = {
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
     await FirstStory.play(context);
@@ -121,12 +121,12 @@ export const SecondStory: Story = {
 };
 
 export const CombinedStories: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ context, canvasElement }) => {
     const canvas = within(canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play({ canvasElement });
-    await SecondStory.play({ canvasElement });
+    await FirstStory.play(context);
+    await SecondStory.play(context);
     await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
@@ -168,7 +168,7 @@ export const SecondStory: Story = {
 };
 
 export const CombinedStories: Story = {
-  play: async (context) => {
+  play: async ({ context, canvasElement }) => {
     const canvas = within(context.canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
@@ -207,8 +207,8 @@ export const SecondStory = {
 };
 
 export const CombinedStories = {
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
     await FirstStory.play(context);
@@ -250,8 +250,8 @@ export const SecondStory: Story = {
 };
 
 export const CombinedStories: Story = {
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
+  play: async ({ context, canvasElement }) => {
+    const canvas = within(canvasElement);
 
     // Runs the FirstStory and Second story play function before running this story's play function
     await FirstStory.play(context);