From e6bbb1411f2aead6bd5a9c586e6c351ee5f5c4a9 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Sun, 17 Mar 2024 21:09:57 -0600
Subject: [PATCH 1/5] WIP: Update multiple components guidance

---
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} | 15 +---
 .../reuse-story-render-function.ts.mdx        | 36 ++++++++++
 .../reuse-story-csf2.js.mdx}                  |  8 +--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 .../react/reuse-story-portable.js.mdx         | 22 ++++++
 .../react/reuse-story-portable.ts-4-9.mdx     | 26 +++++++
 .../react/reuse-story-portable.ts.mdx         | 29 ++++++++
 .../reuse-story-csf2.js.mdx}                  |  8 +--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 .../solid/reuse-story-render-function.js.mdx  | 19 +++++
 .../reuse-story-render-function.ts-4-9.mdx    | 24 +++++++
 .../solid/reuse-story-render-function.ts.mdx  | 24 +++++++
 ...ecked.3.js.mdx => reuse-story-csf2.js.mdx} | 14 ++--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...ecked.3.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 docs/snippets/vue/reuse-story-portable.js.mdx | 28 ++++++++
 .../vue/reuse-story-portable.ts-4-9.mdx       | 32 +++++++++
 docs/snippets/vue/reuse-story-portable.ts.mdx | 32 +++++++++
 ...checked.js.mdx => reuse-story-csf2.js.mdx} |  3 +-
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  3 +-
 .../reuse-story-render-function.js.mdx        | 16 +++++
 .../reuse-story-render-function.ts.mdx        | 21 ++++++
 .../stories-for-multiple-components.md        | 69 +++++++++++++++----
 25 files changed, 381 insertions(+), 96 deletions(-)
 rename docs/snippets/angular/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/angular/reuse-story-render-function.ts.mdx
 rename docs/snippets/{solid/list-story-unchecked.js.mdx => react/reuse-story-csf2.js.mdx} (53%)
 rename docs/snippets/react/{list-story-unchecked.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (64%)
 rename docs/snippets/react/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/react/reuse-story-portable.js.mdx
 create mode 100644 docs/snippets/react/reuse-story-portable.ts-4-9.mdx
 create mode 100644 docs/snippets/react/reuse-story-portable.ts.mdx
 rename docs/snippets/{react/list-story-unchecked.js.mdx => solid/reuse-story-csf2.js.mdx} (53%)
 rename docs/snippets/solid/{list-story-unchecked.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (64%)
 rename docs/snippets/solid/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/solid/reuse-story-render-function.js.mdx
 create mode 100644 docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/reuse-story-render-function.ts.mdx
 rename docs/snippets/vue/{list-story-unchecked.3.js.mdx => reuse-story-csf2.js.mdx} (74%)
 rename docs/snippets/vue/{list-story-unchecked.3.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (78%)
 rename docs/snippets/vue/{list-story-unchecked.3.ts.mdx => reuse-story-csf2.ts.mdx} (77%)
 create mode 100644 docs/snippets/vue/reuse-story-portable.js.mdx
 create mode 100644 docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
 create mode 100644 docs/snippets/vue/reuse-story-portable.ts.mdx
 rename docs/snippets/web-components/{list-story-unchecked.js.mdx => reuse-story-csf2.js.mdx} (84%)
 rename docs/snippets/web-components/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (88%)
 create mode 100644 docs/snippets/web-components/reuse-story-render-function.js.mdx
 create mode 100644 docs/snippets/web-components/reuse-story-render-function.ts.mdx

diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/angular/list-story-unchecked.ts.mdx
rename to docs/snippets/angular/reuse-story-csf2.ts.mdx
index 31b0be7651c7..968d8f6c12d5 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/reuse-story-csf2.ts.mdx
@@ -1,24 +1,16 @@
 ```ts
 // List.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { moduleMetadata } from '@storybook/angular';
-
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -31,11 +23,6 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const OneItem: Story = {
   render: (args) => ({
     props: args,
diff --git a/docs/snippets/angular/reuse-story-render-function.ts.mdx b/docs/snippets/angular/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..dd16565a95c1
--- /dev/null
+++ b/docs/snippets/angular/reuse-story-render-function.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+const meta: Meta<List> = {
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<List>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        ${Unchecked.render({ ...Unchecked.args })}
+      </app-list>
+   `,
+  }),
+};
+```
diff --git a/docs/snippets/solid/list-story-unchecked.js.mdx b/docs/snippets/react/reuse-story-csf2.js.mdx
similarity index 53%
rename from docs/snippets/solid/list-story-unchecked.js.mdx
rename to docs/snippets/react/reuse-story-csf2.js.mdx
index e9df70ee1467..24d8894648a9 100644
--- a/docs/snippets/solid/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/reuse-story-csf2.js.mdx
@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx b/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/react/list-story-unchecked.ts-4-9.mdx
rename to docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
index e3664a92818f..183ee1c2d037 100644
--- a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
@@ -1,19 +1,13 @@
 ```ts
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/react/list-story-unchecked.ts.mdx
rename to docs/snippets/react/reuse-story-csf2.ts.mdx
index 8ff062ecc89f..2d7bc40aa229 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/reuse-story-csf2.ts.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-portable.js.mdx b/docs/snippets/react/reuse-story-portable.js.mdx
new file mode 100644
index 000000000000..205b04a171ed
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.js.mdx
@@ -0,0 +1,22 @@
+```js
+// List.stories.js|jsx
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
diff --git a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
new file mode 100644
index 000000000000..24a54edbd7fc
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```ts
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
diff --git a/docs/snippets/react/reuse-story-portable.ts.mdx b/docs/snippets/react/reuse-story-portable.ts.mdx
new file mode 100644
index 000000000000..c7e287a09b5f
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.ts.mdx
@@ -0,0 +1,29 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
+
+
+
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/solid/reuse-story-csf2.js.mdx
similarity index 53%
rename from docs/snippets/react/list-story-unchecked.js.mdx
rename to docs/snippets/solid/reuse-story-csf2.js.mdx
index e9df70ee1467..24d8894648a9 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.js.mdx
@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
rename to docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
index c88e42c9dbed..79ebacf11f73 100644
--- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-unchecked.ts.mdx b/docs/snippets/solid/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/solid/list-story-unchecked.ts.mdx
rename to docs/snippets/solid/reuse-story-csf2.ts.mdx
index 30cc4d698609..ed0e86ec488f 100644
--- a/docs/snippets/solid/list-story-unchecked.ts.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.ts.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-render-function.js.mdx b/docs/snippets/solid/reuse-story-render-function.js.mdx
new file mode 100644
index 000000000000..5d9511565367
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.js.mdx
@@ -0,0 +1,19 @@
+```js
+// List.stories.js|jsx
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
new file mode 100644
index 000000000000..2bc85bc8e315
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts.mdx b/docs/snippets/solid/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..42ad3235ffd6
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.ts.mdx
@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}>
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/reuse-story-csf2.js.mdx
similarity index 74%
rename from docs/snippets/vue/list-story-unchecked.3.js.mdx
rename to docs/snippets/vue/reuse-story-csf2.js.mdx
index 8d521c737efe..3499760b547b 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.js.mdx
@@ -1,18 +1,12 @@
 ```js
 // List.stories.js
-
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -22,9 +16,6 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
-  args: {
-    ...Unchecked.args,
-  },
   render: (args) => ({
     components: { List, ListItem },
     setup() {
@@ -33,5 +24,8 @@ export const OneItem = {
     },
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx b/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
similarity index 78%
rename from docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
rename to docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
index 478e65d6f878..068f78d8006e 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
@@ -1,20 +1,14 @@
 ```ts
 // List.stories.js
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts.mdx b/docs/snippets/vue/reuse-story-csf2.ts.mdx
similarity index 77%
rename from docs/snippets/vue/list-story-unchecked.3.ts.mdx
rename to docs/snippets/vue/reuse-story-csf2.ts.mdx
index d928c99296a3..fd99cc271851 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.ts.mdx
@@ -1,20 +1,14 @@
 ```ts
 // List.stories.js
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/vue/reuse-story-portable.js.mdx b/docs/snippets/vue/reuse-story-portable.js.mdx
new file mode 100644
index 000000000000..a2a57cbb1c5b
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.js.mdx
@@ -0,0 +1,28 @@
+```js
+// List.stories.js
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
new file mode 100644
index 000000000000..964ffbb467e9
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
@@ -0,0 +1,32 @@
+```ts
+// List.stories.js
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/vue/reuse-story-portable.ts.mdx b/docs/snippets/vue/reuse-story-portable.ts.mdx
new file mode 100644
index 000000000000..eab1b1ea72b9
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// List.stories.js
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/reuse-story-csf2.js.mdx
similarity index 84%
rename from docs/snippets/web-components/list-story-unchecked.js.mdx
rename to docs/snippets/web-components/reuse-story-csf2.js.mdx
index be30704c8341..0b04e69da378 100644
--- a/docs/snippets/web-components/list-story-unchecked.js.mdx
+++ b/docs/snippets/web-components/reuse-story-csf2.js.mdx
@@ -1,9 +1,8 @@
 ```js
 // MyList.stories.js
-
 import { html } from 'lit';
 
-// 👇 Import the stories of MyListItem
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './MyListItem.stories';
 
 export default {
diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/reuse-story-csf2.ts.mdx
similarity index 88%
rename from docs/snippets/web-components/list-story-unchecked.ts.mdx
rename to docs/snippets/web-components/reuse-story-csf2.ts.mdx
index 80c135f68a4f..1b6ca2af48ab 100644
--- a/docs/snippets/web-components/list-story-unchecked.ts.mdx
+++ b/docs/snippets/web-components/reuse-story-csf2.ts.mdx
@@ -1,11 +1,10 @@
 ```ts
 // MyList.stories.ts
-
 import { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-// 👇 Import the stories of MyListItem
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './my-list-item.stories';
 
 const meta: Meta = {
diff --git a/docs/snippets/web-components/reuse-story-render-function.js.mdx b/docs/snippets/web-components/reuse-story-render-function.js.mdx
new file mode 100644
index 000000000000..57ac1aa0fbd8
--- /dev/null
+++ b/docs/snippets/web-components/reuse-story-render-function.js.mdx
@@ -0,0 +1,16 @@
+```js
+// MyList.stories.js
+import { html } from 'lit';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './MyListItem.stories';
+
+export default {
+  title: 'MyList',
+  component: 'demo-my-list',
+};
+
+export const OneItem = {
+  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
+};
+```
diff --git a/docs/snippets/web-components/reuse-story-render-function.ts.mdx b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..f77d65410fc7
--- /dev/null
+++ b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// MyList.stories.ts
+import { Meta, StoryObj } from '@storybook/web-components';
+
+import { html } from 'lit';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './my-list-item.stories';
+
+const meta: Meta = {
+  title: 'MyList',
+  component: 'demo-my-list',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OneItem: Story = {
+  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
+};
+```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 708ccce28787..2c326f5b1c46 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup` or `List` components. Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -35,28 +35,71 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing subcomponent stories
 
-The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
+We can also reuse the stories of the `ListItem` subcomponent in `List` stories.
+
+If the story to be reused is written in [CSF 2](../../../release-6-5/docs/api/csf.md), we can reuse it directly:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/reuse-story-csf2.js.mdx', 
+    'react/reuse-story-csf2.ts.mdx',
+    'vue/reuse-story-csf2.js.mdx',
+    'vue/reuse-story-csf2.ts.mdx',
+    'angular/reuse-story-csf2.ts.mdx',
+    'web-components/reuse-story-csf2.js.mdx',
+    'web-components/reuse-story-csf2.ts.mdx',
+    'solid/reuse-story-csf2.js.mdx',
+    'solid/reuse-story-csf2.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<If renderer={['react', 'vue', 'svelte']}>
+
+If the story to be reused is written in [CSF 3](../api/csf.md), we can reuse it by composing it into a [portable story](../api/portable-stories-jest.md):
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/list-story-unchecked.js.mdx',
-    'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.3.js.mdx',
-    'vue/list-story-unchecked.3.ts.mdx',
-    'angular/list-story-unchecked.ts.mdx',
-    'web-components/list-story-unchecked.js.mdx',
-    'web-components/list-story-unchecked.ts.mdx',
-    'solid/list-story-unchecked.js.mdx',
-    'solid/list-story-unchecked.ts.mdx',
+    'react/reuse-story-portable.js.mdx',
+    'react/reuse-story-portable.ts.mdx',
+    'vue/reuse-story-portable.3.js.mdx',
+    'vue/reuse-story-portable.3.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
 />
 
 <!-- prettier-ignore-end -->
 
+<!-- END if react, vue, svelte -->
+</If>
+
+<If notRenderer={['react', 'vue', 'svelte']}>
+
+If the story to be reused is written in [CSF 3](../api/csf.md) and defines a [`render` function](../api/csf.md#custom-render-functions), we can use that `render` function to reuse the story:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/reuse-story-render-function.ts.mdx',
+    'web-components/reuse-story-render-function.js.mdx',
+    'web-components/reuse-story-render-function.ts.mdx',
+    'solid/reuse-story-render-function.js.mdx',
+    'solid/reuse-story-render-function.ts.mdx',
+  ]}
+  usesCsf3
+/>
+
+<!-- prettier-ignore-end -->
+
+<!-- END if not react, vue, svelte -->
+</If>
+
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
@@ -65,6 +108,8 @@ However, we still aren’t using args to control the `ListItem` stories, which m
 
 One way we improve that situation is by pulling the rendered subcomponent out into a `children` arg:
 
+<!-- TODO: Update this snippet, too -->
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

From df0bf8bce97ac7c3015254947276e79b391fb4e0 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Wed, 20 Mar 2024 14:12:31 -0600
Subject: [PATCH 2/5] Revert "WIP: Update multiple components guidance"

This reverts commit dba4179e2f4ca8a9c8669ecd28f36ca41f449a08.
---
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} | 15 +++-
 .../reuse-story-render-function.ts.mdx        | 36 ----------
 .../list-story-unchecked.js.mdx}              |  8 ++-
 ...-9.mdx => list-story-unchecked.ts-4-9.mdx} |  8 ++-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  8 ++-
 .../react/reuse-story-portable.js.mdx         | 22 ------
 .../react/reuse-story-portable.ts-4-9.mdx     | 26 -------
 .../react/reuse-story-portable.ts.mdx         | 29 --------
 .../list-story-unchecked.js.mdx}              |  8 ++-
 ...-9.mdx => list-story-unchecked.ts-4-9.mdx} |  8 ++-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  8 ++-
 .../solid/reuse-story-render-function.js.mdx  | 19 -----
 .../reuse-story-render-function.ts-4-9.mdx    | 24 -------
 .../solid/reuse-story-render-function.ts.mdx  | 24 -------
 ...2.js.mdx => list-story-unchecked.3.js.mdx} | 14 ++--
 ....mdx => list-story-unchecked.3.ts-4-9.mdx} |  8 ++-
 ...2.ts.mdx => list-story-unchecked.3.ts.mdx} |  8 ++-
 docs/snippets/vue/reuse-story-portable.js.mdx | 28 --------
 .../vue/reuse-story-portable.ts-4-9.mdx       | 32 ---------
 docs/snippets/vue/reuse-story-portable.ts.mdx | 32 ---------
 ...sf2.js.mdx => list-story-unchecked.js.mdx} |  3 +-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  3 +-
 .../reuse-story-render-function.js.mdx        | 16 -----
 .../reuse-story-render-function.ts.mdx        | 21 ------
 .../stories-for-multiple-components.md        | 69 ++++---------------
 25 files changed, 96 insertions(+), 381 deletions(-)
 rename docs/snippets/angular/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/angular/reuse-story-render-function.ts.mdx
 rename docs/snippets/{solid/reuse-story-csf2.js.mdx => react/list-story-unchecked.js.mdx} (53%)
 rename docs/snippets/react/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.ts-4-9.mdx} (64%)
 rename docs/snippets/react/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/react/reuse-story-portable.js.mdx
 delete mode 100644 docs/snippets/react/reuse-story-portable.ts-4-9.mdx
 delete mode 100644 docs/snippets/react/reuse-story-portable.ts.mdx
 rename docs/snippets/{react/reuse-story-csf2.js.mdx => solid/list-story-unchecked.js.mdx} (53%)
 rename docs/snippets/solid/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.ts-4-9.mdx} (64%)
 rename docs/snippets/solid/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.js.mdx
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.ts.mdx
 rename docs/snippets/vue/{reuse-story-csf2.js.mdx => list-story-unchecked.3.js.mdx} (74%)
 rename docs/snippets/vue/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.3.ts-4-9.mdx} (78%)
 rename docs/snippets/vue/{reuse-story-csf2.ts.mdx => list-story-unchecked.3.ts.mdx} (77%)
 delete mode 100644 docs/snippets/vue/reuse-story-portable.js.mdx
 delete mode 100644 docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/reuse-story-portable.ts.mdx
 rename docs/snippets/web-components/{reuse-story-csf2.js.mdx => list-story-unchecked.js.mdx} (84%)
 rename docs/snippets/web-components/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (88%)
 delete mode 100644 docs/snippets/web-components/reuse-story-render-function.js.mdx
 delete mode 100644 docs/snippets/web-components/reuse-story-render-function.ts.mdx

diff --git a/docs/snippets/angular/reuse-story-csf2.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/angular/reuse-story-csf2.ts.mdx
rename to docs/snippets/angular/list-story-unchecked.ts.mdx
index 968d8f6c12d5..31b0be7651c7 100644
--- a/docs/snippets/angular/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -1,16 +1,24 @@
 ```ts
 // List.stories.ts
+
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { moduleMetadata } from '@storybook/angular';
+
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -23,6 +31,11 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
 export const OneItem: Story = {
   render: (args) => ({
     props: args,
diff --git a/docs/snippets/angular/reuse-story-render-function.ts.mdx b/docs/snippets/angular/reuse-story-render-function.ts.mdx
deleted file mode 100644
index dd16565a95c1..000000000000
--- a/docs/snippets/angular/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-```ts
-// List.stories.ts
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-
-import { List } from './list.component';
-import { ListItem } from './list-item.component';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-const meta: Meta<List> = {
-  component: List,
-  decorators: [
-    moduleMetadata({
-      declarations: [List, ListItem],
-      imports: [CommonModule],
-    }),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<List>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <app-list>
-        ${Unchecked.render({ ...Unchecked.args })}
-      </app-list>
-   `,
-  }),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-csf2.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
similarity index 53%
rename from docs/snippets/solid/reuse-story-csf2.js.mdx
rename to docs/snippets/react/list-story-unchecked.js.mdx
index 24d8894648a9..e9df70ee1467 100644
--- a/docs/snippets/solid/reuse-story-csf2.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,11 +1,17 @@
 ```js
 // List.stories.js|jsx
+
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/react/list-story-unchecked.ts-4-9.mdx
index 183ee1c2d037..e3664a92818f 100644
--- a/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
@@ -1,13 +1,19 @@
 ```ts
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/react/reuse-story-csf2.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/react/reuse-story-csf2.ts.mdx
rename to docs/snippets/react/list-story-unchecked.ts.mdx
index 2d7bc40aa229..8ff062ecc89f 100644
--- a/docs/snippets/react/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-portable.js.mdx b/docs/snippets/react/reuse-story-portable.js.mdx
deleted file mode 100644
index 205b04a171ed..000000000000
--- a/docs/snippets/react/reuse-story-portable.js.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```js
-// List.stories.js|jsx
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
diff --git a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
deleted file mode 100644
index 24a54edbd7fc..000000000000
--- a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```ts
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
diff --git a/docs/snippets/react/reuse-story-portable.ts.mdx b/docs/snippets/react/reuse-story-portable.ts.mdx
deleted file mode 100644
index c7e287a09b5f..000000000000
--- a/docs/snippets/react/reuse-story-portable.ts.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
-
-
-
diff --git a/docs/snippets/react/reuse-story-csf2.js.mdx b/docs/snippets/solid/list-story-unchecked.js.mdx
similarity index 53%
rename from docs/snippets/react/reuse-story-csf2.js.mdx
rename to docs/snippets/solid/list-story-unchecked.js.mdx
index 24d8894648a9..e9df70ee1467 100644
--- a/docs/snippets/react/reuse-story-csf2.js.mdx
+++ b/docs/snippets/solid/list-story-unchecked.js.mdx
@@ -1,11 +1,17 @@
 ```js
 // List.stories.js|jsx
+
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
index 79ebacf11f73..c88e42c9dbed 100644
--- a/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/reuse-story-csf2.ts.mdx b/docs/snippets/solid/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/solid/reuse-story-csf2.ts.mdx
rename to docs/snippets/solid/list-story-unchecked.ts.mdx
index ed0e86ec488f..30cc4d698609 100644
--- a/docs/snippets/solid/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-render-function.js.mdx b/docs/snippets/solid/reuse-story-render-function.js.mdx
deleted file mode 100644
index 5d9511565367..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.js.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```js
-// List.stories.js|jsx
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
deleted file mode 100644
index 2bc85bc8e315..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts.mdx b/docs/snippets/solid/reuse-story-render-function.ts.mdx
deleted file mode 100644
index 42ad3235ffd6..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}>
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-csf2.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
similarity index 74%
rename from docs/snippets/vue/reuse-story-csf2.js.mdx
rename to docs/snippets/vue/list-story-unchecked.3.js.mdx
index 3499760b547b..8d521c737efe 100644
--- a/docs/snippets/vue/reuse-story-csf2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -1,12 +1,18 @@
 ```js
 // List.stories.js
+
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
@@ -16,6 +22,9 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
+  args: {
+    ...Unchecked.args,
+  },
   render: (args) => ({
     components: { List, ListItem },
     setup() {
@@ -24,8 +33,5 @@ export const OneItem = {
     },
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
-  args: {
-    ...Unchecked.args,
-  },
 };
 ```
diff --git a/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
similarity index 78%
rename from docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
index 068f78d8006e..478e65d6f878 100644
--- a/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
@@ -1,14 +1,20 @@
 ```ts
 // List.stories.js
+
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/vue/reuse-story-csf2.ts.mdx b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
similarity index 77%
rename from docs/snippets/vue/reuse-story-csf2.ts.mdx
rename to docs/snippets/vue/list-story-unchecked.3.ts.mdx
index fd99cc271851..d928c99296a3 100644
--- a/docs/snippets/vue/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
@@ -1,14 +1,20 @@
 ```ts
 // List.stories.js
+
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/vue/reuse-story-portable.js.mdx b/docs/snippets/vue/reuse-story-portable.js.mdx
deleted file mode 100644
index a2a57cbb1c5b..000000000000
--- a/docs/snippets/vue/reuse-story-portable.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// List.stories.js
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
deleted file mode 100644
index 964ffbb467e9..000000000000
--- a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-```ts
-// List.stories.js
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-portable.ts.mdx b/docs/snippets/vue/reuse-story-portable.ts.mdx
deleted file mode 100644
index eab1b1ea72b9..000000000000
--- a/docs/snippets/vue/reuse-story-portable.ts.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-```ts
-// List.stories.js
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/web-components/reuse-story-csf2.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx
similarity index 84%
rename from docs/snippets/web-components/reuse-story-csf2.js.mdx
rename to docs/snippets/web-components/list-story-unchecked.js.mdx
index 0b04e69da378..be30704c8341 100644
--- a/docs/snippets/web-components/reuse-story-csf2.js.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.js.mdx
@@ -1,8 +1,9 @@
 ```js
 // MyList.stories.js
+
 import { html } from 'lit';
 
-//👇 Import the story from the CSF 2 stories file
+// 👇 Import the stories of MyListItem
 import { Unchecked } from './MyListItem.stories';
 
 export default {
diff --git a/docs/snippets/web-components/reuse-story-csf2.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx
similarity index 88%
rename from docs/snippets/web-components/reuse-story-csf2.ts.mdx
rename to docs/snippets/web-components/list-story-unchecked.ts.mdx
index 1b6ca2af48ab..80c135f68a4f 100644
--- a/docs/snippets/web-components/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx
@@ -1,10 +1,11 @@
 ```ts
 // MyList.stories.ts
+
 import { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-//👇 Import the story from the CSF 2 stories file
+// 👇 Import the stories of MyListItem
 import { Unchecked } from './my-list-item.stories';
 
 const meta: Meta = {
diff --git a/docs/snippets/web-components/reuse-story-render-function.js.mdx b/docs/snippets/web-components/reuse-story-render-function.js.mdx
deleted file mode 100644
index 57ac1aa0fbd8..000000000000
--- a/docs/snippets/web-components/reuse-story-render-function.js.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-```js
-// MyList.stories.js
-import { html } from 'lit';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './MyListItem.stories';
-
-export default {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
-
-export const OneItem = {
-  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
-};
-```
diff --git a/docs/snippets/web-components/reuse-story-render-function.ts.mdx b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
deleted file mode 100644
index f77d65410fc7..000000000000
--- a/docs/snippets/web-components/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-// MyList.stories.ts
-import { Meta, StoryObj } from '@storybook/web-components';
-
-import { html } from 'lit';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './my-list-item.stories';
-
-const meta: Meta = {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
-export default meta;
-
-type Story = StoryObj;
-
-export const OneItem: Story = {
-  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
-};
-```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 2c326f5b1c46..708ccce28787 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup` or `List` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -35,71 +35,28 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing subcomponent stories
 
-We can also reuse the stories of the `ListItem` subcomponent in `List` stories.
-
-If the story to be reused is written in [CSF 2](../../../release-6-5/docs/api/csf.md), we can reuse it directly:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/reuse-story-csf2.js.mdx', 
-    'react/reuse-story-csf2.ts.mdx',
-    'vue/reuse-story-csf2.js.mdx',
-    'vue/reuse-story-csf2.ts.mdx',
-    'angular/reuse-story-csf2.ts.mdx',
-    'web-components/reuse-story-csf2.js.mdx',
-    'web-components/reuse-story-csf2.ts.mdx',
-    'solid/reuse-story-csf2.js.mdx',
-    'solid/reuse-story-csf2.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-<If renderer={['react', 'vue', 'svelte']}>
-
-If the story to be reused is written in [CSF 3](../api/csf.md), we can reuse it by composing it into a [portable story](../api/portable-stories-jest.md):
+The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/reuse-story-portable.js.mdx',
-    'react/reuse-story-portable.ts.mdx',
-    'vue/reuse-story-portable.3.js.mdx',
-    'vue/reuse-story-portable.3.ts.mdx',
+    'react/list-story-unchecked.js.mdx',
+    'react/list-story-unchecked.ts.mdx',
+    'vue/list-story-unchecked.3.js.mdx',
+    'vue/list-story-unchecked.3.ts.mdx',
+    'angular/list-story-unchecked.ts.mdx',
+    'web-components/list-story-unchecked.js.mdx',
+    'web-components/list-story-unchecked.ts.mdx',
+    'solid/list-story-unchecked.js.mdx',
+    'solid/list-story-unchecked.ts.mdx',
   ]}
   usesCsf3
+  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
 />
 
 <!-- prettier-ignore-end -->
 
-<!-- END if react, vue, svelte -->
-</If>
-
-<If notRenderer={['react', 'vue', 'svelte']}>
-
-If the story to be reused is written in [CSF 3](../api/csf.md) and defines a [`render` function](../api/csf.md#custom-render-functions), we can use that `render` function to reuse the story:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'angular/reuse-story-render-function.ts.mdx',
-    'web-components/reuse-story-render-function.js.mdx',
-    'web-components/reuse-story-render-function.ts.mdx',
-    'solid/reuse-story-render-function.js.mdx',
-    'solid/reuse-story-render-function.ts.mdx',
-  ]}
-  usesCsf3
-/>
-
-<!-- prettier-ignore-end -->
-
-<!-- END if not react, vue, svelte -->
-</If>
-
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
@@ -108,8 +65,6 @@ However, we still aren’t using args to control the `ListItem` stories, which m
 
 One way we improve that situation is by pulling the rendered subcomponent out into a `children` arg:
 
-<!-- TODO: Update this snippet, too -->
-
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

From 82e9f71cc78ab63cb13e7623ad3792df68a260b2 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 26 Mar 2024 13:13:27 -0600
Subject: [PATCH 3/5] Update multiple components guidance

- Remove guidance to reuse entire stories
- Clarify other guidance
---
 .../angular/list-story-reuse-data.ts.mdx      |  5 ---
 .../html/list-story-reuse-data.js.mdx         |  9 ----
 .../html/list-story-reuse-data.ts.mdx         |  9 ----
 .../react/list-story-reuse-data.js.mdx        |  6 ---
 .../react/list-story-reuse-data.ts-4-9.mdx    |  5 ---
 .../react/list-story-reuse-data.ts.mdx        |  5 ---
 .../solid/list-story-reuse-data.js.mdx        |  6 ---
 .../solid/list-story-reuse-data.ts-4-9.mdx    |  5 ---
 .../solid/list-story-reuse-data.ts.mdx        |  5 ---
 .../vue/list-story-reuse-data.3.js.mdx        |  5 ---
 .../vue/list-story-reuse-data.3.ts-4-9.mdx    |  5 ---
 .../vue/list-story-reuse-data.3.ts.mdx        |  5 ---
 docs/writing-stories/index.md                 |  4 +-
 .../stories-for-multiple-components.md        | 42 ++++++++++++-------
 14 files changed, 30 insertions(+), 86 deletions(-)

diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx
index 3ff20f0d824a..7f531c257527 100644
--- a/docs/snippets/angular/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx
@@ -26,11 +26,6 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   args: {
     Selected: Selected.args.isSelected,
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
index 76a6f8820a3b..fe46d1a44f71 100644
--- a/docs/snippets/html/list-story-reuse-data.js.mdx
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -8,18 +8,9 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'List',
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems = {
   render: (args) => {
     const list = createList(args);
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
index 999a38a65c25..50f984c0bb85 100644
--- a/docs/snippets/html/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -10,21 +10,12 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 const meta: Meta<ListArgs> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'List',
 };
 
 export default meta;
 type Story = StoryObj<ListArgs>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => {
     const list = createList(args);
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index 2e35ca9c2dab..6f99fad942ef 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -13,12 +13,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
 export const ManyItems = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
index 07767df39468..6fbee90aa76a 100644
--- a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 006e28639c99..5e8382162d6a 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.js.mdx b/docs/snippets/solid/list-story-reuse-data.js.mdx
index 812843a505e6..e893f403e914 100644
--- a/docs/snippets/solid/list-story-reuse-data.js.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.js.mdx
@@ -11,12 +11,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
 export const ManyItems = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
index 5d4e5aae4e28..78e8b4d089fb 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.ts.mdx b/docs/snippets/solid/list-story-reuse-data.ts.mdx
index 636f66d6b020..cccd2b421cc8 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index d9384dd001d2..ab3b3f042072 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -11,11 +11,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
index 37c83e2a7edc..bfcc9be89175 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
index 99c0bde71faa..93bf88a25d67 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index abc6632d90f8..7a99a45e1df7 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -357,7 +357,7 @@ Decorators [can be more complex](./decorators.md#context-for-mocking) and are of
 
 ## Stories for two or more components
 
-When building design systems or component libraries, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
+Sometimes, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
 
 <!-- prettier-ignore-start -->
 
@@ -405,7 +405,7 @@ In such cases, it makes sense to render a different function for each story:
 
 <!-- prettier-ignore-end -->
 
-You can also reuse stories from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical story definitions updated in multiple places.
+You can also reuse story definitions from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical details updated in multiple places.
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 708ccce28787..5a9889f17b4c 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,13 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
+
+## Subcomponents
+
+When the components you're documenting have a parent-child relationship, you can use the `subcomponents` property to document them together. This is especially useful when the child component is not meant to be used on its own, but only as part of the parent component.
+
+Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -33,32 +39,36 @@ Subcomponents are only intended for documentation purposes and have some limitat
 
 Let's talk about some techniques you can use to mitigate the above, which are especially useful in more complicated situations.
 
-## Reusing subcomponent stories
+## Reusing story definitions
 
-The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
+We can also reduce repitition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/list-story-unchecked.js.mdx',
-    'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.3.js.mdx',
-    'vue/list-story-unchecked.3.ts.mdx',
-    'angular/list-story-unchecked.ts.mdx',
-    'web-components/list-story-unchecked.js.mdx',
-    'web-components/list-story-unchecked.ts.mdx',
-    'solid/list-story-unchecked.js.mdx',
-    'solid/list-story-unchecked.ts.mdx',
+    'react/list-story-reuse-data.js.mdx',
+    'react/list-story-reuse-data.ts.mdx',
+    'angular/list-story-reuse-data.ts.mdx',
+    'vue/list-story-reuse-data.3.js.mdx',
+    'vue/list-story-reuse-data.3.ts.mdx',
+    'web-components/list-story-reuse-data.js.mdx',
+    'web-components/list-story-reuse-data.ts.mdx',
+    'html/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.ts.mdx',
+    'solid/list-story-reuse-data.js.mdx',
+    'solid/list-story-reuse-data.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
+  csf2Path="writing-stories/#snippet-list-story-reuse-data"
 />
 
 <!-- prettier-ignore-end -->
 
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
+<If renderer="react">
+
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
 
 ## Using children as an arg
@@ -82,9 +92,10 @@ Now that `children` is an arg, we can potentially reuse it in another story.
 
 However, there are some caveats when using this approach that you should be aware of.
 
-The `children` `args` as any other arg needs to be JSON serializable. It means that you should:
+The `children` arg, just like all args, needs to be JSON serializable. It means that you should:
 
 - Avoid using empty values
+- Use [mapping](../essentials/controls.md#dealing-with-complex-values) if you want to adjust the value with [controls](../essentials/controls.md)
 - Use caution with components that include third party libraries
 
 As they could lead into errors with your Storybook.
@@ -95,6 +106,9 @@ We're currently working on improving the overall experience for the children arg
 
 </Callout>
 
+<!-- End if react -->
+</If>
+
 ## Creating a Template Component
 
 Another option that is more “data”-based is to create a special “story-generating” template component:

From 30e39545504d9d34cac2a21b66ff433241babdcf Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 1 Apr 2024 08:54:37 -0600
Subject: [PATCH 4/5] Apply suggestions from code review

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
Co-authored-by: jonniebigodes <joaocontadesenvolvimento@gmail.com>
---
 docs/writing-stories/index.md                           | 4 ++--
 docs/writing-stories/stories-for-multiple-components.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index 7a99a45e1df7..ec51a7dc1d39 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -357,7 +357,7 @@ Decorators [can be more complex](./decorators.md#context-for-mocking) and are of
 
 ## Stories for two or more components
 
-Sometimes, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
+Sometimes you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
 
 <!-- prettier-ignore-start -->
 
@@ -405,7 +405,7 @@ In such cases, it makes sense to render a different function for each story:
 
 <!-- prettier-ignore-end -->
 
-You can also reuse story definitions from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical details updated in multiple places.
+You can also reuse _story data_ from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to update it in multiple places.
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 5a9889f17b4c..5ae20d893ae6 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
+It's useful to write stories that [render two or more components](./index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
 
 ## Subcomponents
 

From b8e46fea16c340a9ee38d6e7979bcc2446f3659b Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 1 Apr 2024 08:58:36 -0600
Subject: [PATCH 5/5] Address feedback

---
 docs/writing-stories/stories-for-multiple-components.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 5ae20d893ae6..a51a58867445 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -41,7 +41,7 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing story definitions
 
-We can also reduce repitition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
+We can also reduce repetition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
 
 <!-- prettier-ignore-start -->
 
@@ -92,14 +92,12 @@ Now that `children` is an arg, we can potentially reuse it in another story.
 
 However, there are some caveats when using this approach that you should be aware of.
 
-The `children` arg, just like all args, needs to be JSON serializable. It means that you should:
+The `children` arg, just like all args, needs to be JSON serializable. To avoid errors with your Storybook, you should:
 
 - Avoid using empty values
 - Use [mapping](../essentials/controls.md#dealing-with-complex-values) if you want to adjust the value with [controls](../essentials/controls.md)
 - Use caution with components that include third party libraries
 
-As they could lead into errors with your Storybook.
-
 <Callout variant="info">
 
 We're currently working on improving the overall experience for the children arg and allow you to edit children arg in a control and allow you to use other types of components in the near future. But for now you need to factor in this caveat when you're implementing your stories.