docs: add missing web components snippets for introduction sections

docs/snippets/web-components/button-group-story.js.mdx

@@ -0,0 +1,26 @@
+```js
+// demo-button-group.stories.js
+
+import { html } from 'lit-html';
+
+import './demo-button-group';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './demo-button.stories';
+
+export default {
+  title: 'ButtonGroup',
+};
+
+const Template = ({ buttons, orientation }) => {
+  return html`
+    <demo-button-group .buttons=${buttons} .orientation=${orientation}></demo-button-group>
+  `;
+};
+
+export const Pair = Template.bind({});
+Pair.args = {
+  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+  orientation: 'horizontal',
+};
+```

docs/snippets/web-components/list-story-expanded.js.mdx

@@ -0,0 +1,32 @@
+```js
+// demo-list.stories.js
+
+import { html } from 'lit-html';
+
+import './demo-list';
+import './demo-list-item';
+
+export default {
+  title: 'List',
+};
+
+export const Empty = (args) => html`<demo-list></demo-list>`;
+
+export const OneItem = (args) => {
+  return html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `;
+};
+
+export const ManyItems = (args) => {
+  return html`
+    <demo-list>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+      <demo-list-item></demo-list-item>
+    </demo-list>
+  `;
+};
+```

docs/snippets/web-components/list-story-reuse-data.js.mdx

@@ -0,0 +1,25 @@
+```js
+// demo-list.stories.js
+
+import { html } from 'lit-html';
+
+import './demo-list';
+import './demo-list-item';
+
+export default {
+  title: 'List',
+};
+
+//👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './demo-list-item.stories';
+
+export const ManyItems = (args) => {
+  return html`
+    <demo-list>
+      ${Selected({ ...args, ...Selected.args })}
+      ${Unselected({ ...args, ...Unselected.args })}
+      ${Unselected({ ...args, ...Unselected.args })}
+    </demo-list>
+  `;
+};
+```

docs/snippets/web-components/list-story-starter.js.mdx

@@ -0,0 +1,14 @@
+```js
+// demo-list.stories.js
+
+import { html } from 'lit-html';
+
+import './demo-list';
+
+export default {
+  title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => html`<demo-list></demo-list>`
+```

docs/writing-stories/introduction.md

@@ -142,6 +142,7 @@ What’s more, you can import args to reuse when writing stories for other compo
     'vue/button-group-story.2.js.mdx',
     'vue/button-group-story.3.js.mdx',
     'svelte/button-group-story.js.mdx',
+    'web-components/button-group-story.js.mdx',
   ]}
 />
 
@@ -228,6 +229,7 @@ When building design systems or component libraries, you may have two or more co
     'angular/list-story-starter.ts.mdx',
     'vue/list-story-starter.2.js.mdx',
     'vue/list-story-starter.3.js.mdx',
+    'web-components/list-story-starter.js.mdx',
   ]}
 />
 
@@ -244,6 +246,7 @@ In such cases, it makes sense to render a different function for each story:
     'angular/list-story-expanded.ts.mdx',
     'vue/list-story-expanded.2.js.mdx',
     'vue/list-story-expanded.3.js.mdx',
+    'web-components/list-story-expanded.js.mdx',
   ]}
 />
 
@@ -260,6 +263,7 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'angular/list-story-reuse-data.ts.mdx',
     'vue/list-story-reuse-data.2.js.mdx',
     'vue/list-story-reuse-data.3.js.mdx',
+    'web-components/list-story-reuse-data.js.mdx',
   ]}
 />