From cd4b84880624d69463b4f4f71148bfff1b6d2fb4 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 19 Feb 2024 15:19:07 +0000
Subject: [PATCH] Docs: Fix conditional rendering of sections

---
 docs/api/csf.md              | 7 ++++---
 docs/writing-stories/args.md | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/api/csf.md b/docs/api/csf.md
index 5ddbab04d894..b91f45fd57a4 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -204,7 +204,7 @@ 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.
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
 
 ## Custom render functions
 
@@ -226,6 +226,7 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red
    'solid/component-story-with-custom-render-function.ts.mdx',
   ]}
   usesCsf3
+  csf2Path="api/csf#snippet-component-story-with-custom-render-function"
 />
 
 <!-- prettier-ignore-end -->
@@ -430,7 +431,7 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct
   ]}
 />
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
 
 Learn more about [render functions](#custom-render-functions).
 
@@ -452,7 +453,7 @@ CSF 3 provides default render functions for each renderer. If all you're doing i
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
 
 For more information, see the section on [custom render functions](#custom-render-functions).
 
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 49952701c8b0..c6b44c7ea88e 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -160,7 +160,7 @@ Args are useful when writing stories for composite components that are assembled
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
 
 <!-- Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example -->