Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

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

@@ -16,23 +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;
-    &.button-loader {
+      @include blue-gradient;
-      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;
@@ -59,39 +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;
-    &.button-loader {
+      @include blue-gradient;
-      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;
@@ -130,22 +84,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/alert/alert.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="alert fade show text-center mb-0" role="alert"
+  <div class="alert fade show text-center mb-0 py-2 px-3" role="alert"
     :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
     >
     <p class="m-0 fw-bold small alert-heading">{{alertHeadline}}</p>
     <p class="m-0 text-body small">{{alertCopy}}</p>
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+    <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
         <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
       </svg>
@@ -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 {

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>