Vue stories

lib/cli/src/frameworks/vue/1-Button.stories.js

@@ -1,43 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import MyButton from './Button.vue';
-
-export default {
-  title: 'Button',
-  component: MyButton,
-};
-
-const Template = (args) => ({
-  props: Object.keys(args),
-  components: { MyButton },
-  template: '<my-button @click="onClick">{{children}}</my-button>',
-});
-
-export const Text = Template.bind({});
-Text.args = {
-  children: 'Button',
-  onClick: action('onClick'),
-};
-
-export const Emoji = Template.bind({});
-Emoji.args = {
-  children: '😀 😎 👍 💯',
-};
-
-export const TextWithAction = () => ({
-  components: { MyButton },
-  template: '<my-button @click="action">Trigger Action</my-button>',
-  methods: { action: () => action('This was clicked')() },
-});
-
-TextWithAction.storyName = 'With an action';
-TextWithAction.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('example-introduction--page') },
-});
-
-ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';

lib/cli/src/frameworks/vue/Button.stories.js

@@ -0,0 +1,39 @@
+import MyButton from './Button.vue';
+
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+const Template = (args) => ({
+  props: Object.keys(args),
+  components: { MyButton },
+  template:
+    '<my-button @onClick="onClick" :label="label" :primary="primary" :size="size" :backgroundColor="backgroundColor" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

lib/cli/src/frameworks/vue/Button.vue

@@ -1,29 +1,54 @@
 <template>
-  <button class="button-styles" @click="onClick">
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-    <slot></slot>
-  </button>
 </template>
 
 <script>
+import "./button.css";
+
 export default {
-    name: 'my-button',
+  name: "my-button",
+
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    primary: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(value) {
+        return ["small", "medium", "marge"].indexOf(value) !== -1;
+      }
+    },
+    backgroundColor: {
+      type: String
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        "storybook-button": true,
+        "storybook-button--primary": this.primary,
+        "storybook-button--secondary": !this.primary,
+        [`storybook-button--${this.size}`]: true
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor
+      };
+    }
+  },
 
   methods: {
     onClick() {
-        this.$emit('click');
+      this.$emit("onClick");
-      }
     }
   }
+};
 </script>
-
-<style>
-  .button-styles {
-    border: 1px solid #eee;
-    border-radius: 3px;
-    background-color: #FFFFFF;
-    cursor: pointer;
-    font-size: 15pt;
-    padding: 3px 10px;
-    margin: 10px;
-  }
-</style>

lib/cli/src/frameworks/vue/Header.stories.js

@@ -0,0 +1,21 @@
+import MyHeader from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+
+const Template = (args) => ({
+  props: Object.keys(args),
+  components: { MyHeader },
+  template:
+    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

lib/cli/src/frameworks/vue/Header.vue

@@ -0,0 +1,59 @@
+<template>
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
+        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
+        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import "./header.css";
+import MyButton from "./Button.vue";
+
+export default {
+  name: "my-header",
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object
+    }
+  },
+
+  methods: {
+    onLogin() {
+      this.$emit("onLogin");
+    },
+    onLogout() {
+      this.$emit("onLogout");
+    },
+    onCreateAccount() {
+      this.$emit("onCreateAccount");
+    }
+  }
+};
+</script>

lib/cli/src/frameworks/vue/Page.stories.js

@@ -0,0 +1,24 @@
+import MyPage from './Page';
+import * as HeaderStories from './Header.stories';
+
+export default {
+  title: 'Example/Page',
+  component: MyPage,
+};
+
+const Template = (args) => ({
+  props: Object.keys(args),
+  components: { MyPage },
+  template:
+    '<my-page :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  ...HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  ...HeaderStories.LoggedOut.args,
+};

lib/cli/src/frameworks/vue/Page.vue

@@ -0,0 +1,104 @@
+<template>
+  <article>
+    <my-header
+      :user="user"
+      @onLogin="onLogin"
+      @onLogout="onLogout"
+      @onCreateAccount="onCreateAccount"
+    />
+
+    <section>
+      <h2>Pages in Storybook</h2>
+      <p>
+        We recommend building UIs with a
+        <a
+          href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <strong>component-driven</strong>
+        </a>
+        process starting with atomic components and ending with pages.
+      </p>
+      <p>
+        Render pages with mock data. This makes it easy to build and review page states without
+        needing to navigate to them in your app. Here are some handy patterns for managing page data
+        in Storybook:
+      </p>
+      <ul>
+        <li>
+          Use a higher-level connected component. Storybook helps you compose such data from the
+          "args" of child component stories
+        </li>
+        <li>
+          Assemble data in the page component from your services. You can mock these services out
+          using Storybook.
+        </li>
+      </ul>
+      <p>
+        Get a guided tutorial on component-driven development at
+        <a
+          href="https://www.learnstorybook.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >Learn Storybook</a>
+        . Read more in the
+        <a
+          href="https://storybook.js.org/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >docs</a>
+        .
+      </p>
+      <div class="tip-wrapper">
+        <span class="tip">Tip</span>
+        Adjust the width of the canvas with the
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 12 12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+              id="a"
+              fill="#999"
+            />
+          </g>
+        </svg>
+        Viewports addon in the toolbar
+      </div>
+    </section>
+  </article>
+</template>
+
+<script>
+import "./page.css";
+import MyHeader from "./Header.vue";
+
+export default {
+  name: "my-page",
+
+  components: { MyHeader },
+
+  props: {
+    user: {
+      type: Object
+    }
+  },
+
+  methods: {
+    onLogin() {
+      this.$emit("onLogin");
+    },
+    onLogout() {
+      this.$emit("onLogout");
+    },
+    onCreateAccount() {
+      this.$emit("onCreateAccount");
+    }
+  }
+};
+</script>
+