WL-32 - Install Storybook

stories/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  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', 'large'].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('onClick');
+    },
+  },
+};
+</script>