WIP Button Updates

src/layouts/component-test/component-test.vue

@@ -37,6 +37,9 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
         buttonText="Primary"
+        loaderColor="white"
+        loaderPosition="right"
+        sizeInRem="1"
         />
       </div>
     </div>
@@ -44,6 +47,9 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonSecondary
         buttonText="Secondary"
+        loaderColor="white"
+        loaderPosition="right"
+        sizeInRem="1"
         />
       </div>
     </div>

src/styles/common-button-styles.scss

@@ -17,23 +17,6 @@
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
     }
-    &.button-loader {
-      padding: 0 40px 0 12px;
-      &:after {
-        content: url(../../assets/img/icons/button-spinner-white.svg);
-        position: absolute;
-        right: 14px;
-        width: 16px;
-        height: 16px;
-        margin-left: 12px;
-        animation: rotation 1s infinite linear;
-        @keyframes rotation {
-          100% {
-            transform:rotate(360deg);
-          }
-        }
-      }
-    }
     &:disabled {
       background: $gray-100 !important;
       background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
@@ -60,39 +43,6 @@
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
     }
-    &.button-loader {
-      padding: 0 40px 0 12px;
-      &:after {
-        content: url(../../assets/img/icons/button-spinner-blue.svg);
-        position: absolute;
-        right: 14px;
-        width: 16px;
-        height: 16px;
-        margin-left: 12px;
-        animation: rotation 1s infinite linear;
-        @keyframes rotation {
-          100% {
-            transform:rotate(360deg);
-          }
-        }
-      }
-      &:focus:hover {
-        &:after {
-          content: url(../../assets/img/icons/button-spinner-white.svg);
-          position: absolute;
-          right: 14px;
-          width: 16px;
-          height: 16px;
-          margin-left: 12px;
-          animation: rotation 1s infinite linear;
-          @keyframes rotation {
-            100% {
-              transform:rotate(360deg);
-            }
-          }
-        }
-      }
-    }
     &:disabled {
       background: transparent;
       color: $gray !important;
@@ -130,22 +80,5 @@
         color: $danger;
       }
     }
-    &.button-loader {
-      padding: 0 40px 0 12px;
-      &:after {
-        content: url(../../assets/img/icons/button-spinner-blue.svg);
-        position: absolute;
-        right: 14px;
-        width: 16px;
-        height: 16px;
-        margin-left: 12px;
-        animation: rotation 1s infinite linear;
-        @keyframes rotation {
-          100% {
-            transform:rotate(360deg);
-          }
-        }
-      }
-    }
   }
 }

src/ux-components/button-primary/button-primary.vue

@@ -3,29 +3,41 @@
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
     class="btn btn-primary d-flex align-items-center"
-    v-on:click="showLoader()"
+    @click='displayComponent'
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+    >
-  >
     {{ this.buttonText }}
+    <loader
+    class="ms-2"
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+    />
   </button>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "buttonPrimary",
   props: {
     buttonText: String,
     isDisabled: Boolean,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: Number
   },
   data() {
     return {
-      isLoading: false,
+      display: false,
     };
   },
   methods: {
-    showLoader() {
+    displayComponent() {
-      this.isLoading = true;
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>

src/ux-components/button-secondary/button-secondary.vue

@@ -3,29 +3,41 @@
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
     class="btn btn-secondary d-flex align-items-center"
-    v-on:click="showLoader()"
+    @click='displayComponent'
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+    >
-  >
     {{ this.buttonText }}
+    <loader
+    class="ms-2"
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+    />
   </button>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
-  name: "buttonSecondary",
+  name: "buttonPrimary",
   props: {
     buttonText: String,
+    isDisabled: Boolean,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: Number
   },
   data() {
     return {
-      isLoading: false,
+      display: false,
-      isDisabled: false,
     };
   },
   methods: {
-    showLoader() {
+    displayComponent() {
-      this.isLoading = true;
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>