Polish to the vue snippets and docs

docs/snippets/common/component-story-custom-source.js.mdx

@@ -12,7 +12,7 @@ export default {
   component: Button,
 };
 
-export const Template = (args) => ({
+const Template = (args) => ({
   //👇 Your template goes here
 });
 

docs/snippets/vue/badge-story-starter-example.mdx.mdx

@@ -76,4 +76,4 @@ with unique URLs and isolated snapshot tests.
     }}
   </Story>
 </Canvas>
-```
+```

docs/snippets/vue/badge-story.mdx-2.mdx.mdx

@@ -69,4 +69,4 @@ with unique URLs, which is great for review and testing.
     {Template.bind({})}
   </Story>
 </Canvas>
-```
+```

docs/snippets/vue/button-group-story.2.js.mdx

@@ -1,5 +1,5 @@
 ```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/button-group-story.3.js.mdx

@@ -1,5 +1,5 @@
 ```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/button-group-story.ts-2.ts.mdx

@@ -1,5 +1,5 @@
 ```ts
-//ButtonGroup.stories.ts
+// ButtonGroup.stories.ts
 
 import ButtonGroup from './ButtonGroup.vue';
 
@@ -28,4 +28,4 @@ Pair.args = {
   buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
   orientation: 'horizontal',
 };
-```
+```

docs/snippets/vue/button-group-story.ts-3.ts.mdx

@@ -1,5 +1,5 @@
 ```ts
-//ButtonGroup.stories.ts
+// ButtonGroup.stories.ts
 
 import ButtonGroup from './ButtonGroup.vue';
 
@@ -30,4 +30,4 @@ Pair.args = {
   buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
   orientation: 'horizontal',
 };
-```
+```

docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx

@@ -14,4 +14,4 @@ export default {
   component: Button,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx

@@ -14,4 +14,4 @@ export default {
   component: Button,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx

@@ -13,4 +13,4 @@ export default {
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx

@@ -13,4 +13,4 @@ export default {
   title: 'Button',
   component: Button,
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-rename-story.js.mdx

@@ -17,4 +17,4 @@ export const Primary = () => ({
   template: '<Button primary label="Button" />',
 });
 Primary.storyName = 'I am the primary';
-```
+```

docs/snippets/vue/button-story-rename-story.ts-2.ts.mdx

@@ -19,4 +19,4 @@ export const Primary: StoryFn<typeof Button> = () => ({
   template: '<Button primary label="Button" />',
 });
 Primary.storyName = 'I am the primary';
-```
+```

docs/snippets/vue/button-story-rename-story.ts-3.ts.mdx

@@ -19,4 +19,4 @@ export const Primary: StoryFn<typeof Button> = () => ({
   template: '<Button primary label="Button" />',
 });
 Primary.storyName = 'I am the primary';
-```
+```

docs/snippets/vue/button-story-using-args.ts-2.ts.mdx

@@ -30,4 +30,4 @@ Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
-```
+```

docs/snippets/vue/button-story-using-args.ts-3.ts.mdx

@@ -32,4 +32,4 @@ Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
-```
+```

docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx

@@ -23,4 +23,4 @@ export default {
     },
   },
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx

@@ -23,4 +23,4 @@ export default {
     },
   },
 } as Meta<typeof Button>;
-```
+```

docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx

@@ -28,4 +28,4 @@ export const Tertiary: StoryFn<typeof Button> = () => ({
   components: { Button },
   template: '<Button background="#ff0" label="📚📕📈🤓" />',
 });
-```
+```

docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx

@@ -28,4 +28,4 @@ export const Tertiary: StoryFn<typeof Button> = () => ({
   components: { Button },
   template: '<Button background="#ff0" label="📚📕📈🤓" />',
 });
-```
+```

docs/snippets/vue/button-story.ts-2.ts.mdx

@@ -18,4 +18,4 @@ export const Primary: StoryFn<typeof Button> = () => ({
   components: { Button },
   template: '<Button primary label="Button" />',
 });
-```
+```

docs/snippets/vue/button-story.ts-3.ts.mdx

@@ -18,4 +18,4 @@ export const Primary: StoryFn<typeof Button> = () => ({
   components: { Button },
   template: '<Button primary label="Button" />',
 });
-```
+```

docs/snippets/vue/component-story-figma-integration.mdx.mdx

@@ -10,7 +10,7 @@ import MyComponent from './MyComponent.vue';
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
 export const Template = (args) => ({
-// Components used in your story `template` are defined in the `components` object
+  // Components used in your story `template` are defined in the `components` object
   components: { MyComponent },
   template: 'MyComponent />',
 });

docs/snippets/vue/component-story-figma-integration.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
 
 import { withDesign } from 'storybook-addon-designs';
 
@@ -12,10 +12,10 @@ export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
-} as Meta;
+} as Meta<typeof MyComponent>;
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template: Story = () => ({
+const Template: StoryFn<typeof MyComponent> = () => ({
   components: { MyComponent },
   template: '<MyComponent />',
 });

docs/snippets/vue/component-story-with-accessibility.mdx-3.mdx.mdx

@@ -46,4 +46,4 @@ export const Template = (args) => ({
   }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/vue/list-story-expanded.ts-2.ts.mdx

@@ -38,4 +38,4 @@ export const ManyItems: StoryFn<typeof List> = (args, { argTypes }) => ({
     </list>
     `,
 });
-```
+```

docs/snippets/vue/list-story-expanded.ts-3.ts.mdx

@@ -44,4 +44,4 @@ export const ManyItems: StoryFn<typeof List> = (args) => ({
     </list>
     `,
 });
-```
+```

docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx

@@ -33,4 +33,4 @@ ManyItems.args = {
   Selected: Selected.args.isSelected,
   Unselected: Unselected.args.isSelected,
 };
-```
+```

docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx

@@ -35,4 +35,4 @@ ManyItems.args = {
   Selected: Selected.args.isSelected,
   Unselected: Unselected.args.isSelected,
 };
-```
+```

docs/snippets/vue/list-story-starter.ts-2.ts.mdx

@@ -20,4 +20,4 @@ const Template: StoryFn<typeof List> = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: '<list v-bind="$props"/>',
 });
-```
+```

docs/snippets/vue/list-story-starter.ts-3.ts.mdx

@@ -22,4 +22,4 @@ const Template: StoryFn<typeof LoginForm> = (args) => ({
   },
   template: '<list v-bind="args"/>',
 });
-```
+```

docs/snippets/vue/login-form-with-play-function.2.js.mdx

@@ -16,7 +16,7 @@ export default {
   component: LoginForm,
 };
 
-export const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes }) => ({
   components: { LoginForm },
   props: Object.keys(argTypes),
   template: `<LoginForm v-bind="$props" v-on="$props" />`,

docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx

@@ -3,6 +3,8 @@
 
 import { userEvent, within } from '@storybook/testing-library';
 
+import { expect } from '@storybook/jest';
+
 import LoginForm from './LoginForm.vue';
 
 import { Meta, StoryFn } from '@storybook/vue';
@@ -16,7 +18,7 @@ export default {
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-export const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
+const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
   components: { LoginForm },
   props: Object.keys(argTypes),
   template: `<LoginForm v-bind="$props" v-on="$props" />`,
@@ -29,14 +31,19 @@ FilledForm.play = async ({ canvasElement }) => {
   // Starts querying the component from its root element
   const canvas = within(canvasElement);
 
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
-    delay: 100,
-  });
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
-    delay: 100,
-  });
+  // 👇 Simulate interactions with the component
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
   // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
   await userEvent.click(canvas.getByRole('button'));
+
+  // 👇 Assert DOM structure
+  await expect(
+    canvas.getByText(
+      'Everything is perfect. Your account is ready and we should probably get you started!'
+    )
+  ).toBeInTheDocument();
 };
-```
+```

docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx

@@ -1,8 +1,10 @@
 ```js
-// LoginForm.stories.js
+// LoginForm.stories.ts
 
 import { userEvent, within } from '@storybook/testing-library';
 
+import { expect } from '@storybook/jest';
+
 import LoginForm from './LoginForm.vue';
 
 import { Meta, StoryFn } from '@storybook/vue3';
@@ -31,14 +33,19 @@ FilledForm.play = async ({ canvasElement }) => {
   // Starts querying the component from its root element
   const canvas = within(canvasElement);
 
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
-    delay: 100,
-  });
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
-    delay: 100,
-  });
+  // 👇 Simulate interactions with the component
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
 
   // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
   await userEvent.click(canvas.getByRole('button'));
+
+  // 👇 Assert DOM structure
+  await expect(
+    canvas.getByText(
+      'Everything is perfect. Your account is ready and we should probably get you started!'
+    )
+  ).toBeInTheDocument();
 };
-```
+```

docs/snippets/vue/my-component-play-function-with-delay.js.mdx

@@ -33,4 +33,4 @@ DelayedStory.play = async () => {
      delay: 100,
   });
 };
-```
+```

docs/snippets/vue/my-component-play-function-with-delay.mdx.mdx

@@ -31,4 +31,4 @@ const Template = (args) => ({
   }}>
   {Template.bind({})}
 </Story>
-```
+```

docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx

@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue';
 import * as globalStorybookConfig from './.storybook/preview';
 
 setGlobalConfig(globalStorybookConfig);
-```
+```

docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx

@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue3';
 import * as globalStorybookConfig from './.storybook/preview';
 
 setGlobalConfig(globalStorybookConfig);
-```
+```

docs/writing-stories/introduction.md

@@ -11,7 +11,7 @@ Storybook uses the generic term arguments (args for short) when talking about Re
 A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.
 
 ```
-Button.vue | js | ts | jsx | tsx 
+Button.js | ts | jsx | tsx | vue | svelte
 Button.stories.js | ts | jsx | tsx | mdx
 ```