Write stories

src/stories/Button.stories.js

@@ -3,14 +3,14 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
-  },
+//   argTypes: {
+//     backgroundColor: { control: 'color' },
+//     size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
+//   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
+const Template = (args) => ({
+  props: Object.keys(args),
   components: { MyButton },
   template: '<my-button @onClick="onClick" v-bind="$props" />',
 });
@@ -37,3 +37,17 @@ Small.args = {
   size: 'small',
   label: 'Button',
 };
+
+export const BlackOutline = Template.bind({});
+BlackOutline.args = {
+  label: 'Black Outline Button',
+  outline: true,
+  outlineColor: 'black',
+};
+
+export const GreenOutline = Template.bind({});
+GreenOutline.args = {
+  label: 'Green Outline Button',
+  outline: true,
+  outlineColor: 'green',
+};

src/stories/Button.vue

@@ -27,6 +27,13 @@ export default {
     backgroundColor: {
       type: String,
     },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    outlineColor: {
+      type: String,
+    },
   },
 
   computed: {
@@ -36,11 +43,13 @@ export default {
         'storybook-button--primary': this.primary,
         'storybook-button--secondary': !this.primary,
         [`storybook-button--${this.size}`]: true,
+        'storybook-button--outline': this.outline,
       };
     },
     style() {
       return {
         backgroundColor: this.backgroundColor,
+        borderColor: this.outlineColor,
       };
     },
   },

src/stories/button.css

@@ -28,3 +28,8 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+
+.storybook-button--outline {
+    border-width: 1px;
+    border-style: solid;
+  }