From a24698955191efc3f21407fc1bf537ddd67c2f63 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+sivin-git@users.noreply.github.com>
Date: Fri, 26 Mar 2021 20:20:20 +0530
Subject: [PATCH] Enhancement: button component (#1932)

---
 .../dashboard/components/ui/WootButton.vue    | 61 +++++++++++++++++++
 app/javascript/packs/application.js           |  2 +
 2 files changed, 63 insertions(+)
 create mode 100644 app/javascript/dashboard/components/ui/WootButton.vue

diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
new file mode 100644
index 000000000..e97f41f41
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -0,0 +1,61 @@
+<template>
+  <button
+    class="button"
+    :class="[
+      variant,
+      size,
+      colorScheme,
+      classNames,
+      isDisabled ? 'disabled' : '',
+    ]"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <spinner v-if="isLoading" size="small" />
+    <i v-if="icon" :class="icon"></i>
+    <span v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  name: 'WootButton',
+  components: { Spinner },
+  props: {
+    variant: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    colorScheme: {
+      type: String,
+      default: 'primary',
+    },
+    classNames: {
+      type: String,
+      default: '',
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b7abc18c2..8d5a926ee 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -12,6 +12,7 @@ import hljs from 'highlight.js';
 import Multiselect from 'vue-multiselect';
 import WootSwitch from 'components/ui/Switch';
 import WootWizard from 'components/ui/Wizard';
+import WootButton from 'components/ui/WootButton';
 import { sync } from 'vuex-router-sync';
 import Vuelidate from 'vuelidate';
 import VTooltip from 'v-tooltip';
@@ -48,6 +49,7 @@ Vue.use(hljs.vuePlugin);
 Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
+Vue.component('woot-button', WootButton);
 
 const i18nConfig = new VueI18n({
   locale: 'en',