Merge pull request #12490 from andre-brdoch/docs-vue-snippets

docs: vue snippets

docs/essentials/viewport.md

@@ -120,6 +120,7 @@ You can change your story through [parameters](../writing-stories/parameters.md)
 <CodeSnippets
   paths={[
     'react/my-component-story-configure-viewports.js.mdx',
+    'vue/my-component-story-configure-viewports.js.mdx',
   ]}
 />
 

docs/snippets/vue/button-story-component-args-primary.js.mdx

@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {
+    // Now all Button stories will be primary.
+    primary: true,
+  },
+};
+```

docs/snippets/vue/button-story-component-decorator.js.mdx

@@ -0,0 +1,11 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
+};
+```

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

@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+export const Primary = () => ({
+  components: { Button },
+  template: '<Button primary label="Hello World" />',
+});
+Primary.decorators = [() => ({ template: '<div style="margin: 3em;"><story /></div>' })];
+```

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

@@ -0,0 +1,10 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button
+};
+```

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

@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+export const Primary = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+
+Primary.storyName = 'I am the primary';
+```

docs/snippets/vue/button-story-using-args.js.mdx

@@ -0,0 +1,24 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+// We create a “template” of how args map to rendering
+const Template = (args, { argTypes }) => ({
+  components: { Button },
+  props: Object.keys(argTypes),
+  template: '<Button :background="background" :label="label" />',
+});
+
+// Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { background: '#ff0', label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```

docs/snippets/vue/button-story-with-args.js.mdx

@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+// We create a “template” of how args map to rendering
+const Template = (args, { argTypes }) => ({
+  components: { Button },
+  props: Object.keys(argTypes),
+  template: '<Button :primary="primary" :label="label" />',
+});
+
+// Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Primary',
+};
+```

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

@@ -0,0 +1,19 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+```

docs/snippets/vue/button-story-with-emojis.js.mdx

@@ -0,0 +1,20 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+export const Primary = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="Button" />',
+});
+export const Secondary = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="😄👍😍💯" />',
+});
+export const Tertiary = () => ({
+  components: { Button },
+  template: '<Button background="#ff0" label="📚📕📈🤓" />',
+});
+```

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

@@ -0,0 +1,12 @@
+```js
+// Button.stories.js
+
+import Button from './Button';
+
+export default { title: 'Components/Button' };
+
+export const Primary = () => ({
+  components: { Button },
+  template: '<Button primary label="Button" />',
+});
+```

docs/snippets/vue/my-component-story-configure-viewports.js.mdx

@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+export default {
+  title: 'Stories',
+  parameters: {
+    // the viewports object from the Essentials addon
+    viewport: {
+      // the viewports you want to use
+      viewports: INITIAL_VIEWPORTS,
+      // your own default viewport
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export const myStory = () => ({
+  template: '<div />',
+});
+myStory.parameters = {
+  viewport: {
+    defaultViewport: 'iphonex',
+  },
+};
+```

docs/snippets/vue/storybook-preview-global-decorator.js.mdx

@@ -0,0 +1,5 @@
+// .storybook/preview.js
+
+```js
+export const decorators = [() => ({ template: '<div style="margin: 3em;"><story /></div>' })];
+```

docs/snippets/vue/your-component-with-decorator.js.mdx

@@ -0,0 +1,8 @@
+```js
+// YourComponent.stories.js
+
+export default {
+  component: YourComponent,
+  decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
+};
+```

docs/writing-stories/args.md

@@ -22,6 +22,7 @@ To define the args of a single story, use the `args` CSF story key:
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
+    'vue/button-story-with-args.js.mdx',
     'angular/button-story-with-args.ts.mdx',
   ]}
 />
@@ -52,6 +53,7 @@ You can also define args at the component level; such args will apply to all sto
   paths={[
     'react/button-story-component-args-primary.js.mdx',
     'react/button-story-component-args-primary.ts.mdx',
+    'vue/button-story-component-args-primary.js.mdx',
     'angular/button-story-component-args-primary.ts.mdx',
   ]}
 />

docs/writing-stories/decorators.md

@@ -18,6 +18,7 @@ Some components require a “harness” to render in a useful way. For instance
   paths={[
     'react/your-component-with-decorator.js.mdx',
     'react/your-component-with-decorator.ts.mdx',
+    'vue/your-component-with-decorator.js.mdx',
   ]}
 />
 
@@ -61,6 +62,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
   paths={[
     'react/button-story-decorator.js.mdx',
     'react/button-story-decorator.ts.mdx',
+    'vue/button-story-decorator.js.mdx',
   ]}
 />
 
@@ -78,6 +80,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
   paths={[
     'react/button-story-component-decorator.js.mdx',
     'react/button-story-component-decorator.ts.mdx',
+    'vue/button-story-component-decorator.js.mdx',
   ]}
 />
 
@@ -93,6 +96,7 @@ We can also set a decorator for **all stories** via the `decorators` export of y
   paths={[
     'react/storybook-preview-global-decorator.js.mdx',
     'react/storybook-preview-global-decorator.ts.mdx',
+    'vue/storybook-preview-global-decorator.js.mdx',
   ]}
 />
 

docs/writing-stories/introduction.md

@@ -31,6 +31,7 @@ The _default_ export metadata controls how Storybook lists your stories and prov
   paths={[
     'react/button-story-default-export-with-component.js.mdx',
     'react/button-story-default-export-with-component.ts.mdx',
+    'vue/button-story-default-export-with-component.js.mdx',
     'angular/button-story-default-export-with-component.ts.mdx',
   ]}
 />
@@ -47,6 +48,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
   paths={[
     'react/button-story.js.mdx',
     'react/button-story.ts.mdx',
+    'vue/button-story.js.mdx',
     'angular/button-story.ts.mdx',
   ]}
 />
@@ -63,6 +65,7 @@ You can rename any particular story you need. For instance to give it a more cle
   paths={[
     'react/button-story-rename-story.js.mdx',
     'react/button-story-rename-story.ts.mdx',
+    'vue/button-story-rename-story.js.mdx',
     'angular/button-story-rename-story.ts.mdx',
   ]}
 />
@@ -81,6 +84,7 @@ A story is a function that describes how to render a component. You can have mul
   paths={[
     'react/button-story-with-emojis.js.mdx',
     'react/button-story-with-emojis.ts.mdx',
+    'vue/button-story-with-emojis.js.mdx',
     'angular/button-story-with-emojis.ts.mdx',
   ]}
 />
@@ -99,6 +103,7 @@ Refine this pattern by defining a master template for a component’s stories th
   paths={[
     'react/button-story-using-args.js.mdx',
     'react/button-story-using-args.ts.mdx',
+    'vue/button-story-using-args.js.mdx',
     'angular/button-story-using-args.ts.mdx',
   ]}
 />
@@ -153,6 +158,7 @@ For instance, suppose you wanted to test your Button component against a differe
   paths={[
     'react/button-story-with-blue-args.js.mdx',
     'react/button-story-with-blue-args.ts.mdx',
+    'vue/button-story-with-blue-args.js.mdx',
     'angular/button-story-with-blue-args.ts.mdx',
   ]}
 />
@@ -175,6 +181,7 @@ A simple example is adding padding to a component’s stories. Accomplish this u
   paths={[
     'react/button-story-component-decorator.js.mdx',
     'react/button-story-component-decorator.ts.mdx',
+    'vue/button-story-component-decorator.js.mdx',
   ]}
 />