From 297426dfbdcf5d25ac6679deeebf797be92801f4 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 7 Jul 2022 21:15:32 +0100
Subject: [PATCH] Minor docs tweaks

---
 docs/api/csf.md                       | 22 ++++++++++++++++++++++
 docs/writing-stories/introduction.md  |  5 -----
 docs/writing-stories/play-function.md |  6 ++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/docs/api/csf.md b/docs/api/csf.md
index e6adfbcd619..cdf0b586b74 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -155,6 +155,28 @@ A good use case for the `play` function is a form component. With previous Story
 
 When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
 
+## Custom render functions
+
+Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/component-story-with-custom-render-function.js.mdx',
+   'react/component-story-with-custom-render-function.ts.mdx',
+   'angular/component-story-with-custom-render-function.ts.mdx',
+   'vue/component-story-with-custom-render-function.js.mdx',
+   'vue/component-story-with-custom-render-function.ts.mdx',
+   'preact/component-story-with-custom-render-function.js.mdx',
+   'web-components/component-story-with-custom-render-function.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index fb59e4cdfe8..8ac21987ca0 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -163,11 +163,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-💡 `Template.bind({})` is a [standard JavaScript technique](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
-
-</div>
 
 By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
 
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index 0923ee57a2c..b95c7514ff0 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -55,6 +55,12 @@ Storybook's `play` functions are small code snippets that run once the story fin
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+💡 See the [Interaction testing documentation](../writing-tests/interaction-testing.md#api-for-user-events) for an overview of the available API events.
+
+</div>
+
 When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
 
 ## Composing stories