From 3951c378d7eb0e0908d8a557b0a12c188e60f207 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 30 Nov 2021 09:13:58 -0500
Subject: [PATCH 1/2] WIP Button Updates

---
 src/layouts/component-test/component-test.vue |  6 ++
 src/styles/common-button-styles.scss          | 67 -------------------
 .../button-primary/button-primary.vue         | 24 +++++--
 .../button-secondary/button-secondary.vue     | 28 +++++---
 4 files changed, 44 insertions(+), 81 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index b25a26b8f..9daf987af 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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>
diff --git a/src/styles/common-button-styles.scss b/src/styles/common-button-styles.scss
index 889b3a3f5..5534c61c0 100644
--- a/src/styles/common-button-styles.scss
+++ b/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);
-          }
-        }
-      }
-    }
   }
 }
diff --git a/src/ux-components/button-primary/button-primary.vue b/src/ux-components/button-primary/button-primary.vue
index 1f5738cb8..f250ea55e 100644
--- a/src/ux-components/button-primary/button-primary.vue
+++ b/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()"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
-  >
+    @click='displayComponent'
+    >
     {{ 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() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>
diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue
index 3840922d4..679b44ba9 100644
--- a/src/ux-components/button-secondary/button-secondary.vue
+++ b/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()"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
-  >
+    @click='displayComponent'
+    >
     {{ 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,
-      isDisabled: false,
+      display: false,
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>

From dd4ca61d8681df7a8b00a69abc178176b96e1d26 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 30 Nov 2021 11:18:07 -0500
Subject: [PATCH 2/2] CSR-198 add loader to primary and secondary buttons.

Update alert button size and position.
---
 src/styles/common-button-styles.scss | 4 ++++
 src/ux-components/alert/alert.vue    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/styles/common-button-styles.scss b/src/styles/common-button-styles.scss
index 5534c61c0..323ad5552 100644
--- a/src/styles/common-button-styles.scss
+++ b/src/styles/common-button-styles.scss
@@ -16,6 +16,8 @@
     &:focus-visible { // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
     }
     &:disabled {
       background: $gray-100 !important;
@@ -42,6 +44,8 @@
     &:focus-visible { // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
     }
     &:disabled {
       background: transparent;
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 043fae922..7358073df 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -39,10 +39,14 @@ export default {
   .btn-close {
     background: none;
     opacity: 1;
+    width: .75rem;
+    height: .75rem;
   }
   &.alert-dismissible {
     button {
       display: flex;
+      top: 2px;
+      right: 2px;
     }
   }
   &.alert-info {