From 14f9d86a3dc71a000682f95b87efd317cb287feb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 18 Nov 2021 15:32:21 -0500
Subject: [PATCH] WIP CSR-119 spinner updates and overlay.

---
 src/assets/img/icons/spinner.svg            |  3 +
 src/layouts/componentTest/componentTest.vue |  9 ++-
 src/styles/commonRadioStyles.scss           | 18 +-----
 src/styles/commonStyles.scss                |  7 ---
 src/styles/mixins/customMixins.scss         | 68 +++++++++++++++++++++
 src/uxComponents/radioList/radioList.vue    |  6 +-
 vue.config.js                               |  1 +
 vue.release.config.js                       |  1 +
 8 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 src/assets/img/icons/spinner.svg
 create mode 100644 src/styles/mixins/customMixins.scss

diff --git a/src/assets/img/icons/spinner.svg b/src/assets/img/icons/spinner.svg
new file mode 100644
index 000000000..1c94e5de6
--- /dev/null
+++ b/src/assets/img/icons/spinner.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z"/>
+</svg>
diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index e577eed59..205778e54 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -74,19 +74,22 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2020"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2019"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
       </div>
     </div>
diff --git a/src/styles/commonRadioStyles.scss b/src/styles/commonRadioStyles.scss
index 953a75985..bc74ab260 100644
--- a/src/styles/commonRadioStyles.scss
+++ b/src/styles/commonRadioStyles.scss
@@ -37,23 +37,7 @@
           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);
-            }
-          }
-        }
-      }
+      @include spinner;
     }
   }
 }
diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss
index d47d79fa4..ab36e35c5 100644
--- a/src/styles/commonStyles.scss
+++ b/src/styles/commonStyles.scss
@@ -22,10 +22,3 @@ body {
       cursor: pointer;
     }
   }
-
-//Custom Mixins
-
-//Blue gradient background mixin
-@mixin blue-gradient {
-  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-}
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
new file mode 100644
index 000000000..fafd5894e
--- /dev/null
+++ b/src/styles/mixins/customMixins.scss
@@ -0,0 +1,68 @@
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}
+
+//Spinner
+//Choose color and position
+@mixin spinner {
+  &.spinner {
+    //Open an overlay to prevent page interaction
+    &:before {
+      content: '';
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 9999;
+      cursor: default;
+    }
+    //Spinner basics
+    &:after {
+      content: '';
+      mask: url(../../assets/img/icons/spinner.svg);
+      mask-size: cover;
+      position: absolute;
+      width: 1rem;
+      height: 1rem;
+      animation: rotation 1s infinite linear;
+      @keyframes rotation {
+        100% {
+          transform:rotate(360deg);
+        }
+      }
+    }
+    //Spinner position
+    &.center:after {
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+    &.right:after {
+      right: 1rem;
+    }
+    &.left:after {
+      left: 1rem;
+    }
+    //Spinner color
+    &:after { //Default spinner color (blue) if no other color is specified from the options below
+      background-color: $blue;
+    }
+    &.red:after {
+      background-color: $red;
+    }
+    &.green:after {
+      background-color: $green;
+    }
+    &.white:after {
+      background-color: $white;
+    }
+    &.black:after {
+      background-color: $black;
+    }
+  }
+}
diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue
index 6b59e6f57..24b23effa 100644
--- a/src/uxComponents/radioList/radioList.vue
+++ b/src/uxComponents/radioList/radioList.vue
@@ -3,7 +3,7 @@
     <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
     <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
     v-on:click="showLoader()"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+    v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
     >{{radioID}}</label>
     <p class="small">{{errorMessage}}</p>
   </div>
@@ -16,7 +16,9 @@ export default {
     "groupName",
     "ariaLabelBy",
     "radioID",
-    "errorMessage"
+    "errorMessage",
+    "spinnerColor",
+    "spinnerPosition"
 
   ],
   data() {
diff --git a/vue.config.js b/vue.config.js
index bda41b2dd..2838ed844 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,6 +21,7 @@ module.exports = {
         @import "@/styles/uxVariables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/commonStyles.scss";
         @import "@/styles/commonButtonStyles.scss";
diff --git a/vue.release.config.js b/vue.release.config.js
index 5bc60309f..4a0145d30 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -11,6 +11,7 @@ module.exports = {
         @import "@/styles/uxVariables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/commonStyles.scss";
         @import "@/styles/commonButtonStyles.scss";