Merge pull request #1867 from storybooks/vue-cli-actions

CLI: Use actions in sample stories for vue + fix them in SFC_VUE template
storybookjs · Sep 25, 2017 · 29ad9af · 29ad9af
2 parents 0ff95a5 + 6f4b7eb
commit 29ad9af
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue b/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue
@@ -7,9 +7,10 @@
 <script>
   export default {
     name: 'my-button',
-  
+
     methods: {
       onClick () {
+        this.$emit('click');
       }
     }
   }

diff --git a/lib/cli/generators/VUE/template/stories/index.js b/lib/cli/generators/VUE/template/stories/index.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import MyButton from './MyButton';
@@ -14,10 +15,10 @@ storiesOf('Button', module)
   .add('with text', () => ({
     components: { MyButton },
     template: '<my-button @click="action">Hello Button</my-button>',
-    methods: { action: linkTo('clicked') },
+    methods: { action: action('clicked') },
   }))
   .add('with some emoji', () => ({
     components: { MyButton },
     template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-    methods: { action: linkTo('clicked') },
+    methods: { action: action('clicked') },
   }));
diff --git a/lib/cli/test/snapshots/sfc_vue/src/stories/MyButton.vue b/lib/cli/test/snapshots/sfc_vue/src/stories/MyButton.vue
@@ -7,9 +7,10 @@
 <script>
   export default {
     name: 'my-button',
-  
+
     methods: {
       onClick () {
+        this.$emit('click');
       }
     }
   }

diff --git a/lib/cli/test/snapshots/vue/stories/index.js b/lib/cli/test/snapshots/vue/stories/index.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import MyButton from './MyButton';
@@ -14,10 +15,10 @@ storiesOf('Button', module)
   .add('with text', () => ({
     components: { MyButton },
     template: '<my-button @click="action">Hello Button</my-button>',
-    methods: { action: linkTo('clicked') },
+    methods: { action: action('clicked') },
   }))
   .add('with some emoji', () => ({
     components: { MyButton },
     template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
-    methods: { action: linkTo('clicked') },
+    methods: { action: action('clicked') },
   }));