Adds AutoDocs webcomponent snippet (js/ts)

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

@@ -0,0 +1,29 @@
+```js
+// Button.stories.js
+
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  render: (args) => Button(args),
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```

docs/snippets/web-components/button-story-auto-docs.ts.mdx

@@ -0,0 +1,34 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+
+const Meta: Meta<ButtonProps> = {
+  title: 'Button',
+  render: (args) => Button(args),
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```

docs/writing-docs/docs-page.md

@@ -24,6 +24,8 @@ To enable auto-generated documentation for your stories, you'll need to add the
     'vue/button-story-auto-docs.ts.mdx',
     'angular/button-story-auto-docs.ts.mdx',
     'svelte/button-story-auto-docs.js.mdx',
+    'web-components/button-story-auto-docs.js.mdx',
+    'web-components/button-story-auto-docs.ts.mdx',
   ]}
 />