chore: added story for button with loading

Author: codebender828

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
-      <Button size="lg" variant-color="blue" @click="setLoading" :is-loading="loading"> Button </Button>
+      <Button variant-color="blue" @click="setLoading" :is-loading="loading"> Button </Button>
     </div>
   </theme-provider>
 </template>

stories/3-Button.stories.js

@@ -55,15 +55,28 @@ storiesOf('UI | Button', module)
     `,
     methods: { action: action('Button Clicked') }
   }))
-  .add('Ripple', () => ({
+  .add('With Loading', () => ({
     components: { Button },
     template: `
       <div>
-        <Button @click="action" ripple variant-color="orange">No rounded</Button>
+        <Button :variant-color="variantColor" @click="setLoading" :is-loading="loading"> {{ buttonText }} </Button>
       </div>
     `,
-    methods: { action: action('Button Clicked') }
-    // mounted () {
-    //   console.log({ instance: this.$options.components })
-    // }
+    data () {
+      return {
+        loading: false,
+        buttonText: 'Save settings',
+        variantColor: 'blue'
+      }
+    },
+    methods: {
+      setLoading () {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+          this.buttonText = 'Success'
+          this.variantColor = 'green'
+        }, 1500)
+      }
+    }
   }))