From bd159fd058c77a01ddbf385d90395b122bc9f551 Mon Sep 17 00:00:00 2001
From: tooppaaa <clementdungler@gmail.com>
Date: Sat, 9 May 2020 11:28:04 +0200
Subject: [PATCH] cli: sfc_vue stories homogenization

---
 .../src/stories/1-Button.stories.js           | 22 ++++-
 .../template-csf/src/stories/Welcome.vue      | 97 +++++++++----------
 .../template-mdx/src/stories/Welcome.vue      | 97 +++++++++----------
 3 files changed, 114 insertions(+), 102 deletions(-)

diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
index c659ea0fb6a3..25bb8d287e59 100644
--- a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
@@ -22,9 +22,23 @@ export const Jsx = () => ({
   methods: { action: linkTo('clicked') },
 });
 
-export const Emoji = () => ({
+export const WithSomeEmojiAndAction = () => ({
   components: { MyButton },
-  template:
-    '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
-  methods: { action: action('clicked') },
+  template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+  methods: { action: action('This was clicked') },
+});
+
+WithSomeEmojiAndAction.story = {
+  name: 'with some emoji and action',
+  parameters: { notes: 'My notes on a button with emojis' },
+};
+
+export const ButtonWithLinkToAnotherStory = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Go to Welcome Story</my-button>',
+  methods: { action: linkTo('Welcome') },
 });
+
+ButtonWithLinkToAnotherStory.story = {
+  name: 'button with link to another story',
+};
diff --git a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
index a7bbd1c4fabe..bfb932da3d2a 100644
--- a/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
+++ b/lib/cli/src/generators/SFC_VUE/template-csf/src/stories/Welcome.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <h1>Welcome to STORYBOOK</h1>
+    <h1>Welcome to storybook</h1>
     <p>
       This is a UI component dev environment for your app.
     </p>
@@ -11,8 +11,8 @@
       <br />
       directory.
       <br />
-      A story is a single state of one or more UI components. You can have as many stories as
-      you want.
+      A story is a single state of one or more UI components. You can have as many stories as you
+      want.
       <br />
       (Basically a story is like a visual test case.)
     </p>
@@ -31,8 +31,8 @@
       <br />
       You can also edit those components and see changes right away.
       <br />
-      (Try editing the <code class="code">Button</code> component
-      located at <code class="code">src/stories/Button.js</code>.)
+      (Try editing the <code class="code">Button</code> component located at
+      <code class="code">src/stories/Button.js</code>.)
     </p>
     <p>
       This is just one thing you can do with Storybook.
@@ -57,64 +57,63 @@
       <br />
       <code class="code">.storybook/webpack.config.js</code>
       <br />
-      to add webpack
-      loaders and plugins you are using in this project.
+      to add webpack loaders and plugins you are using in this project.
     </p>
   </div>
 </template>
 
 <script>
-  const log = () => console.log('Welcome to storybook!')
+const log = () => console.log('Welcome to storybook!');
 
-  export default {
-    name: 'welcome',
+export default {
+  name: 'welcome',
 
-    props: {
-      showApp: {
-        type: Function,
-        default: log
-      }
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
     },
+  },
 
-    methods: {
-      onClick (event) {
-        event.preventDefault()
-        this.showApp()
-      }
-    }
-  }
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
 </script>
 
 <style>
-  .main {
-    padding: 15px;
-    line-height: 1.4;
-    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-    background-color: #ffffff;
-  }
+.main {
+  padding: 15px;
+  line-height: 1.4;
+  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+  background-color: #ffffff;
+}
 
-  .logo {
-    width: 200px;
-  }
+.logo {
+  width: 200px;
+}
 
-  .link {
-    color: #1474f3;
-    text-decoration: none;
-    border-bottom: 1px solid #1474f3;
-    padding-bottom: 2px;
-  }
+.link {
+  color: #1474f3;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
 
-  .code {
-    font-size: 15px;
-    font-weight: 600;
-    padding: 2px 5px;
-    border: 1px solid #eae9e9;
-    border-radius: 4px;
-    background-color: #f3f2f2;
-    color: #3a3a3a;
-  }
+.code {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
 
-  .note {
-    opacity: 0.5;
-  }
+.note {
+  opacity: 0.5;
+}
 </style>
diff --git a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
index a7bbd1c4fabe..bfb932da3d2a 100644
--- a/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
+++ b/lib/cli/src/generators/SFC_VUE/template-mdx/src/stories/Welcome.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <h1>Welcome to STORYBOOK</h1>
+    <h1>Welcome to storybook</h1>
     <p>
       This is a UI component dev environment for your app.
     </p>
@@ -11,8 +11,8 @@
       <br />
       directory.
       <br />
-      A story is a single state of one or more UI components. You can have as many stories as
-      you want.
+      A story is a single state of one or more UI components. You can have as many stories as you
+      want.
       <br />
       (Basically a story is like a visual test case.)
     </p>
@@ -31,8 +31,8 @@
       <br />
       You can also edit those components and see changes right away.
       <br />
-      (Try editing the <code class="code">Button</code> component
-      located at <code class="code">src/stories/Button.js</code>.)
+      (Try editing the <code class="code">Button</code> component located at
+      <code class="code">src/stories/Button.js</code>.)
     </p>
     <p>
       This is just one thing you can do with Storybook.
@@ -57,64 +57,63 @@
       <br />
       <code class="code">.storybook/webpack.config.js</code>
       <br />
-      to add webpack
-      loaders and plugins you are using in this project.
+      to add webpack loaders and plugins you are using in this project.
     </p>
   </div>
 </template>
 
 <script>
-  const log = () => console.log('Welcome to storybook!')
+const log = () => console.log('Welcome to storybook!');
 
-  export default {
-    name: 'welcome',
+export default {
+  name: 'welcome',
 
-    props: {
-      showApp: {
-        type: Function,
-        default: log
-      }
+  props: {
+    showApp: {
+      type: Function,
+      default: log,
     },
+  },
 
-    methods: {
-      onClick (event) {
-        event.preventDefault()
-        this.showApp()
-      }
-    }
-  }
+  methods: {
+    onClick(event) {
+      event.preventDefault();
+      this.showApp();
+    },
+  },
+};
 </script>
 
 <style>
-  .main {
-    padding: 15px;
-    line-height: 1.4;
-    font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
-    background-color: #ffffff;
-  }
+.main {
+  padding: 15px;
+  line-height: 1.4;
+  font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+  background-color: #ffffff;
+}
 
-  .logo {
-    width: 200px;
-  }
+.logo {
+  width: 200px;
+}
 
-  .link {
-    color: #1474f3;
-    text-decoration: none;
-    border-bottom: 1px solid #1474f3;
-    padding-bottom: 2px;
-  }
+.link {
+  color: #1474f3;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
 
-  .code {
-    font-size: 15px;
-    font-weight: 600;
-    padding: 2px 5px;
-    border: 1px solid #eae9e9;
-    border-radius: 4px;
-    background-color: #f3f2f2;
-    color: #3a3a3a;
-  }
+.code {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
 
-  .note {
-    opacity: 0.5;
-  }
+.note {
+  opacity: 0.5;
+}
 </style>