feat(button): cleanup and set spinner to button

Author: codebender828

src/App.vue

@@ -1,69 +1,41 @@
 <template>
   <theme-provider :theme="theme" :icons="$kiwi.icons">
     <div class="root">
-      <Icon
-        name="star"
-        color="yellow.500"
-        size="6"
-        mx="3"
-      />
-      <Icon
-        name="email"
-        color="orange.400"
-        size="12"
-        mx="3"
-      />
-      <Icon
-        name="not-allowed"
-        color="red.400"
-        size="12"
-        mx="3"
-      />
-      <Icon
-        name="chevron-circle-up"
-        color="blue.500"
-        size="12"
-        mx="3"
-      />
-      <Icon
-        name="times-circle"
-        color="indigo.300"
-        size="24"
-        mx="3"
-      />
-        <Button variant-color="blue" size="lg">Large</Button>
-        <Button variant-color="red" size="md">Medium</Button>
-        <Button variant-color="blue" size="sm">Small</Button>
+      <Button size="lg" variant-color="blue" @click="setLoading" :is-loading="loading"> Button </Button>
     </div>
   </theme-provider>
 </template>
 
 <script>
 import ThemeProvider from './components/ThemeProvider'
-import { Icon, Button } from './lib/core/'
+import { Button } from './lib/core/'
 import Badge from './components/Badge'
 import theme from './lib/theme'
+import { setTimeout } from 'timers'
 
 export default {
   data () {
     return {
       theme,
       element: true,
-      Badge
+      Badge,
+      loading: false
     }
   },
   name: 'App',
   components: {
     ThemeProvider,
-    Icon,
     Button
   },
   methods: {
     toggle () {
       this.element = !this.element
     },
-    alert () {
-      console.log('button clicked')
+    setLoading () {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
     }
   },
   computed: {

src/components/Button/index.js

@@ -2,6 +2,7 @@ import PseudoBox from '../PseudoBox'
 import styleProps from '../../lib/config/props'
 import { forwardProps } from '../../lib/utils'
 import createButtonStyles from './button.styles'
+import { Spinner } from '../../lib/core'
 
 /**
  * @description The Button component is an accessible rich component that does what a button does :)
@@ -61,8 +62,17 @@ export default {
     },
     iconSpacing: {
       type: String,
+      default: 2,
       validator: (value) => value >= 0
     },
+    leftIcon: {
+      type: String,
+      default: null
+    },
+    rightIcon: {
+      type: String,
+      default: null
+    },
     rounded: {
       type: Boolean,
       default: false
@@ -105,6 +115,19 @@ export default {
       on: {
         click: ($event) => this.$emit('click', $event)
       }
-    }, this.$slots.default)
+    }, [
+      this.leftIcon && !this.isLoading && h(Spinner),
+      this.isLoading && h(Spinner, {
+        props: {
+          position: this.loadingText ? 'relative' : 'absolute',
+          color: 'currentColor',
+          mb: '-4px',
+          mr: this.loadingText ? this.iconSpacing : 0,
+          size: '1em'
+        }
+      }),
+      this.isLoading ? this.loadingText : this.$slots.default,
+      this.rightIcon && !this.isLoading && h(Spinner)
+    ])
   }
 }

src/components/Spinner/index.d.ts

@@ -0,0 +1,16 @@
+import * as Vue from 'vue';
+
+/**
+ * The Spinner component is a loading component for users
+ */
+declare const Spinner: Vue.Component<{
+  size?:String,
+  label?: String,
+  thickness?: String,
+  speed?: String,
+  color?: String,
+  emptyColor?: String,
+  _ref?: Object
+}>;
+export default Spinner;
+

src/components/Spinner/index.js

@@ -35,8 +35,15 @@ const sizes = {
   }
 }
 
+const createCustomSize = (size) => {
+  return {
+    w: size,
+    h: size
+  }
+}
+
 const setSizes = (props) => {
-  return sizes[props.size] || sizes['md']
+  return sizes[props.size] || createCustomSize(props.size)
 }
 
 export default {