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 01/10] 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";

From a1ba5911a24b13e407a6f6005ce2f444f61ac49b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 19 Nov 2021 08:53:24 -0500
Subject: [PATCH 02/10] WIP update mixin. Update Alert svg width/height.

---
 src/styles/commonRadioStyles.scss   | 5 +++--
 src/styles/mixins/customMixins.scss | 6 +++---
 src/uxComponents/alert/alert.vue    | 8 ++++++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/styles/commonRadioStyles.scss b/src/styles/commonRadioStyles.scss
index bc74ab260..5d4c4afc0 100644
--- a/src/styles/commonRadioStyles.scss
+++ b/src/styles/commonRadioStyles.scss
@@ -18,7 +18,7 @@
     label {
       position: relative;
       background: $white;
-      height: 3rem;
+      min-height: 3rem;
       transition: all 150ms linear;
       border-radius: $border-radius-lg;
       border: 1px solid $gray-500;
@@ -37,7 +37,8 @@
           color: $danger;
         }
       }
-      @include spinner;
+      //Add spinner. Specify width and height
+      @include spinner(1rem,1rem);
     }
   }
 }
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index fafd5894e..77b4be470 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -7,7 +7,7 @@
 
 //Spinner
 //Choose color and position
-@mixin spinner {
+@mixin spinner($width, $height) {
   &.spinner {
     //Open an overlay to prevent page interaction
     &:before {
@@ -27,8 +27,8 @@
       mask: url(../../assets/img/icons/spinner.svg);
       mask-size: cover;
       position: absolute;
-      width: 1rem;
-      height: 1rem;
+      width: $width;
+      height: $height;
       animation: rotation 1s infinite linear;
       @keyframes rotation {
         100% {
diff --git a/src/uxComponents/alert/alert.vue b/src/uxComponents/alert/alert.vue
index b47d75f3c..811dcb133 100644
--- a/src/uxComponents/alert/alert.vue
+++ b/src/uxComponents/alert/alert.vue
@@ -51,6 +51,8 @@ export default {
     }
     svg {
       fill: $blue-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-danger {
@@ -59,6 +61,8 @@ export default {
     }
     svg {
       fill: $red-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-warning {
@@ -67,6 +71,8 @@ export default {
     }
     svg {
       fill: $yellow-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
   &.alert-success {
@@ -75,6 +81,8 @@ export default {
     }
     svg {
       fill: $green-700;
+      width: 1rem;
+      height: 1rem;
     }
   }
 }

From 863d60ee8912713b9f008f6c887a625ab2b81c1c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 19 Nov 2021 09:06:22 -0500
Subject: [PATCH 03/10] Updated files and folders.

---
 src/layouts/component-test/component-test.vue | 284 +++++++++++++-----
 src/layouts/componentTest/componentTest.vue   | 244 ---------------
 src/ux-components/radio-list/radio-list.vue   |  48 +--
 src/uxComponents/radioList/radioList.vue      |  36 ---
 4 files changed, 236 insertions(+), 376 deletions(-)
 delete mode 100644 src/layouts/componentTest/componentTest.vue
 delete mode 100644 src/uxComponents/radioList/radioList.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 7351b2bff..205778e54 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,112 +1,244 @@
 <template>
-<div class="container-fluid container-shadow p-2 rounded-3">
+  <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+      </div>
+    </div>
     <div class="row g-2">
-        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
-        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
-        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+      <radioCard
+      radioLabel="Windshield"
+      radioImage="windshield-damage.svg"
+      altText="Windshield"
+      groupName="damageKey"
+      radioID="windshield"
+      />
+      <radioCard
+      radioLabel="Side Window"
+      radioImage="side-window-damage.svg"
+      altText="Side Window"
+      groupName="damageKey"
+      radioID="sidewindow"
+      />
+      <radioCard
+      radioLabel="Back Glass"
+      radioImage="back-glass-damage.svg"
+      altText="Back Glass"
+      groupName="damageKey"
+      radioID="backglass"
+      />
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Primary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+        buttonText="Primary"
+        />
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonSecondary buttonText="Secondary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonSecondary
+        buttonText="Secondary"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <listButton buttonText="List Button" errorText="Test error message" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <listButton
+        buttonText="List Button"
+        errorText="Test error message"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+      </div>
     </div>
     <div class="row">
-        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-        <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
-            <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-            <h3 class="visually-hidden" id="select-year-radio-group">
-                Select Vehicle Year
-            </h3>
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
-        </div>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2021"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2020"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2019"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <a href="#">Text Link</a>
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <a href="#">Text Link</a>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <p>This is default body copy font size/weight</p>
-            <p class="small">
-                This is small body copy using <code>.small</code> class
-            </p>
-            <p>
-                <small>This is also small using <code>&lt;small&gt;</code> tag</small>
-            </p>
-        </div>
+      <div class="col">
+        <p>This is default body copy font size/weight</p>
+        <p class="small">This is small body copy using <code>.small</code> class</p>
+        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h1>h1 Heading</h1>
-        </div>
+      <div class="col">
+        <h1>h1 Heading</h1>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h2>h2 Heading</h2>
-        </div>
+      <div class="col">
+        <h2>h2 Heading</h2>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h3>h3 Heading</h3>
-        </div>
+      <div class="col">
+        <h3>h3 Heading</h3>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h4>h4 Heading</h4>
-        </div>
+      <div class="col">
+        <h4>h4 Heading</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h5>h5 Heading</h5>
-        </div>
+      <div class="col">
+        <h5>h5 Heading</h5>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h6>h6 Heading</h6>
-        </div>
+      <div class="col">
+        <h6>h6 Heading</h6>
+      </div>
     </div>
-    <div class="my-3">
-        <div class="select-car">
-            <div class="select-car-form">
-                <radioQuestion questionText="What year is your vehicle?" :answers="this.years" />
-            </div>
-        </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+      </div>
     </div>
-</div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="Dismissible Alert"
+        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+        v-bind:isDismissible = "true"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="NON-Dismissible Alert"
+        alertCopy="This is an example of a NON-DISMISSIBLE alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-warning"
+        alertHeadline="Warning Alert"
+        alertCopy="This is an example of a WARNING alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-info"
+        alertHeadline="Info Alert"
+        alertCopy="This is an example of a INFO alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="Danger Alert"
+        alertCopy="This is an example of a DANGER alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="No Body Copy Alert"
+        alertCopy=""
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import buttonPrimary from "@/ux-components/button-primary/button-primary";
-import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import radioCard from "@/ux-components/radio-card/radio-card";
-import listButton from "@/ux-components/list-button/list-button";
-import radioList from "@/ux-components/radio-list/radio-list";
-export default {
+  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
+  import radioCard from "@/uxComponents/radioCard/radioCard";
+  import listButton from "@/uxComponents/listButton/listButton";
+  import radioList from "@/uxComponents/radioList/radioList";
+  import alert from "@/uxComponents/alert/alert";
+  export default {
     name: "App",
     components: {
-        buttonPrimary,
-        buttonSecondary,
-        radioCard,
-        listButton,
-        radioList,
+      buttonPrimary,
+      buttonSecondary,
+      radioCard,
+      listButton,
+      radioList,
+      alert
     },
     data() {
-        return {
-            years: [2023, 2022, 2021, 2020],
-        };
-    },
-};
+      return {
+        years: [2023, 2022, 2021, 2020],
+      };
+    }
+  };
 </script>
diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
deleted file mode 100644
index 205778e54..000000000
--- a/src/layouts/componentTest/componentTest.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <div class="container-fluid container-shadow p-2 rounded-3">
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
-      </div>
-    </div>
-    <div class="row g-2">
-      <radioCard
-      radioLabel="Windshield"
-      radioImage="windshield-damage.svg"
-      altText="Windshield"
-      groupName="damageKey"
-      radioID="windshield"
-      />
-      <radioCard
-      radioLabel="Side Window"
-      radioImage="side-window-damage.svg"
-      altText="Side Window"
-      groupName="damageKey"
-      radioID="sidewindow"
-      />
-      <radioCard
-      radioLabel="Back Glass"
-      radioImage="back-glass-damage.svg"
-      altText="Back Glass"
-      groupName="damageKey"
-      radioID="backglass"
-      />
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-        buttonText="Primary"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonSecondary
-        buttonText="Secondary"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton
-        buttonText="List Button"
-        errorText="Test error message"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2021"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2020"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2019"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <a href="#">Text Link</a>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <p>This is default body copy font size/weight</p>
-        <p class="small">This is small body copy using <code>.small</code> class</p>
-        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h1>h1 Heading</h1>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h2>h2 Heading</h2>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h3>h3 Heading</h3>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h4>h4 Heading</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h5>h5 Heading</h5>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h6>h6 Heading</h6>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-success"
-        alertHeadline="Dismissible Alert"
-        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-        v-bind:isDismissible = "true"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-danger"
-        alertHeadline="NON-Dismissible Alert"
-        alertCopy="This is an example of a NON-DISMISSIBLE alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-warning"
-        alertHeadline="Warning Alert"
-        alertCopy="This is an example of a WARNING alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-info"
-        alertHeadline="Info Alert"
-        alertCopy="This is an example of a INFO alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-danger"
-        alertHeadline="Danger Alert"
-        alertCopy="This is an example of a DANGER alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-success"
-        alertHeadline="No Body Copy Alert"
-        alertCopy=""
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
-  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
-  import radioCard from "@/uxComponents/radioCard/radioCard";
-  import listButton from "@/uxComponents/listButton/listButton";
-  import radioList from "@/uxComponents/radioList/radioList";
-  import alert from "@/uxComponents/alert/alert";
-  export default {
-    name: "App",
-    components: {
-      buttonPrimary,
-      buttonSecondary,
-      radioCard,
-      listButton,
-      radioList,
-      alert
-    },
-    data() {
-      return {
-        years: [2023, 2022, 2021, 2020],
-      };
-    }
-  };
-</script>
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index b6a02eca2..24b23effa 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -1,28 +1,36 @@
 <template>
-<div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <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' : '',
-      ]">{{ radioID }}</label>
-    <p class="small">{{ errorMessage }}</p>
-</div>
+  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+    <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 ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
+    >{{radioID}}</label>
+    <p class="small">{{errorMessage}}</p>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "radioList",
-    props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
-    data() {
-        return {
-            isLoading: false,
-            isError: false,
-        };
-    },
-    methods: {
-        showLoader() {
-            this.isLoading = true;
-        },
+  name: "radioList",
+  props: [
+    "groupName",
+    "ariaLabelBy",
+    "radioID",
+    "errorMessage",
+    "spinnerColor",
+    "spinnerPosition"
+
+  ],
+  data() {
+    return {
+      isLoading: false,
+      isError: false
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
     },
+  },
 };
 </script>
diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue
deleted file mode 100644
index 24b23effa..000000000
--- a/src/uxComponents/radioList/radioList.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <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 ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
-    >{{radioID}}</label>
-    <p class="small">{{errorMessage}}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "radioList",
-  props: [
-    "groupName",
-    "ariaLabelBy",
-    "radioID",
-    "errorMessage",
-    "spinnerColor",
-    "spinnerPosition"
-
-  ],
-  data() {
-    return {
-      isLoading: false,
-      isError: false
-    };
-  },
-  methods: {
-    showLoader() {
-      this.isLoading = true;
-    },
-  },
-};
-</script>

From ed818f178db0e93a6e1f82c7e9c0b30ef0e1e2fd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 22 Nov 2021 16:21:07 -0500
Subject: [PATCH 04/10] WIP loader component.

---
 package-lock.json                             | 29 ++++++++-----
 src/assets/img/icons/spinner.svg              |  4 +-
 src/layouts/component-test/component-test.vue | 41 +++++++++++++------
 src/styles/common-radio-styles.scss           |  2 +-
 src/styles/mixins/customMixins.scss           | 11 ++---
 src/ux-components/loader/loader.spec.js       |  1 +
 src/ux-components/loader/loader.vue           | 31 ++++++++++++++
 src/ux-components/radio-list/radio-list.vue   |  8 ++--
 8 files changed, 91 insertions(+), 36 deletions(-)
 create mode 100644 src/ux-components/loader/loader.spec.js
 create mode 100644 src/ux-components/loader/loader.vue

diff --git a/package-lock.json b/package-lock.json
index 0ea2e31ca..88a73ac4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
-        "jest-junit": "^13.0.0",
         "vue": "^3.0.0",
         "vue-router": "^4.0.11",
         "vuex": "^4.0.2",
@@ -32,6 +31,7 @@
         "eslint": "^6.7.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^7.0.0",
+        "jest-junit": "^13.0.0",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2",
@@ -10962,6 +10962,7 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
+      "dev": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -10976,6 +10977,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -10984,6 +10986,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -10995,6 +10998,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11006,6 +11010,7 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -11743,9 +11748,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -18003,7 +18005,6 @@
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dev": true,
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
       },
@@ -18067,7 +18068,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -18982,7 +18982,8 @@
     "node_modules/xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "dev": true
     },
     "node_modules/xml-name-validator": {
       "version": "3.0.0",
@@ -27872,6 +27873,7 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
       "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
+      "dev": true,
       "requires": {
         "mkdirp": "^1.0.4",
         "strip-ansi": "^6.0.1",
@@ -27882,17 +27884,20 @@
         "ansi-regex": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
         },
         "mkdirp": {
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
         },
         "strip-ansi": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
           "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.1"
           }
@@ -27900,7 +27905,8 @@
         "uuid": {
           "version": "8.3.2",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
         }
       }
     },
@@ -34454,7 +34460,8 @@
     "xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
+      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
+      "dev": true
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/src/assets/img/icons/spinner.svg b/src/assets/img/icons/spinner.svg
index 1c94e5de6..d5b7fe4c0 100644
--- a/src/assets/img/icons/spinner.svg
+++ b/src/assets/img/icons/spinner.svg
@@ -1,3 +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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xml:space="preserve">
+  <path d="M24.01 48c-2.93 0-5.92-.52-8.85-1.58-6.25-2.25-11.33-7.33-13.58-13.57C-1.25 25-.25 16.76 4.34 10.22A24.05 24.05 0 0 1 24 0v2.26c-7.08 0-13.74 3.46-17.81 9.27-4.16 5.91-5.07 13.4-2.49 20.55 2.03 5.62 6.6 10.19 12.22 12.22 7.14 2.58 14.64 1.67 20.56-2.49A21.78 21.78 0 0 0 45.74 24H48c0 7.81-3.82 15.16-10.22 19.66A23.846 23.846 0 0 1 24.01 48z"/>
 </svg>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 205778e54..15b42874c 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -28,6 +28,19 @@
       radioID="backglass"
       />
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <loader
+          sizeInRem="2"
+          loaderColor="blue"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -74,22 +87,22 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        spinnerColor="blue"
-        spinnerPosition="right"
+        loaderColor="blue"
+        loaderPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2020"
-        spinnerColor="blue"
-        spinnerPosition="right"
+        loaderColor="blue"
+        loaderPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2019"
-        spinnerColor="blue"
-        spinnerPosition="right"
+        loaderColor="blue"
+        loaderPosition="right"
         />
       </div>
     </div>
@@ -219,12 +232,13 @@
 </template>
 
 <script>
-  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
-  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
-  import radioCard from "@/uxComponents/radioCard/radioCard";
-  import listButton from "@/uxComponents/listButton/listButton";
-  import radioList from "@/uxComponents/radioList/radioList";
-  import alert from "@/uxComponents/alert/alert";
+  import buttonPrimary from "@/ux-components/button-primary/button-primary";
+  import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+  import radioCard from "@/ux-components/radio-card/radio-card";
+  import listButton from "@/ux-components/list-button/list-button";
+  import radioList from "@/ux-components/radio-list/radio-list";
+  import alert from "@/ux-components/alert/alert";
+  import loader from "@/ux-components/loader/loader";
   export default {
     name: "App",
     components: {
@@ -233,7 +247,8 @@
       radioCard,
       listButton,
       radioList,
-      alert
+      alert,
+      loader
     },
     data() {
       return {
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 5d4c4afc0..fccad8420 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -38,7 +38,7 @@
         }
       }
       //Add spinner. Specify width and height
-      @include spinner(1rem,1rem);
+      @include loader();
     }
   }
 }
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index 77b4be470..fd6c11206 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -7,8 +7,9 @@
 
 //Spinner
 //Choose color and position
-@mixin spinner($width, $height) {
-  &.spinner {
+@mixin loader() {
+  .loader {
+    display: flex;
     //Open an overlay to prevent page interaction
     &:before {
       content: '';
@@ -26,9 +27,9 @@
       content: '';
       mask: url(../../assets/img/icons/spinner.svg);
       mask-size: cover;
-      position: absolute;
-      width: $width;
-      height: $height;
+      position: relative;
+      width: 100%;
+      height: 100%;
       animation: rotation 1s infinite linear;
       @keyframes rotation {
         100% {
diff --git a/src/ux-components/loader/loader.spec.js b/src/ux-components/loader/loader.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/loader/loader.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
new file mode 100644
index 000000000..b49ebe865
--- /dev/null
+++ b/src/ux-components/loader/loader.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="loader"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: "loader",
+  /* Specify size in rem where 16px = 1rem */
+  props: {
+    sizeInRem: {
+      type: Number,
+      default: 1
+    },
+    /* Color options: red, green, blue, white, black */
+    loaderColor: {
+      type: String
+    },
+    /* Position options: center, right, left (OPTIONAL) */
+    loaderPosition: {
+      type: String
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+  @include loader();
+</style>
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index 24b23effa..13ca433b3 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -2,14 +2,14 @@
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
     <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 ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
+    
     >{{radioID}}</label>
     <p class="small">{{errorMessage}}</p>
   </div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioList",
   props: [
@@ -17,8 +17,8 @@ export default {
     "ariaLabelBy",
     "radioID",
     "errorMessage",
-    "spinnerColor",
-    "spinnerPosition"
+    "loaderColor",
+    "loaderPosition"
 
   ],
   data() {

From 22da25328cb1e707110b32b4f1a42c861052e077 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 22 Nov 2021 17:36:36 -0500
Subject: [PATCH 05/10] WIP component spinner.

---
 src/layouts/component-test/component-test.vue |  3 +++
 src/styles/mixins/customMixins.scss           | 10 +++++-----
 src/ux-components/radio-list/radio-list.vue   | 14 +++++++++++---
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 15b42874c..1c6b82efe 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -89,6 +89,7 @@
         radioID="2021"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
         <radioList
         groupName="demo"
@@ -96,6 +97,7 @@
         radioID="2020"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
         <radioList
         groupName="demo"
@@ -103,6 +105,7 @@
         radioID="2019"
         loaderColor="blue"
         loaderPosition="right"
+        sizeInRem="1"
         />
       </div>
     </div>
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index fd6c11206..ab4ba18a5 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -38,16 +38,16 @@
       }
     }
     //Spinner position
-    &.center:after {
+    &.center {
       left: 0;
       right: 0;
       margin: 0 auto;
     }
-    &.right:after {
-      right: 1rem;
+    &.right {
+      margin: 0 0 0 auto;
     }
-    &.left:after {
-      left: 1rem;
+    &.left {
+      margin: 0 auto 0 0;
     }
     //Spinner color
     &:after { //Default spinner color (blue) if no other color is specified from the options below
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index 13ca433b3..4647f58ce 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -2,8 +2,12 @@
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
     <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"
-    
-    >{{radioID}}</label>
+    >{{radioID}}
+    <loader
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
+      v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    />
+  </label>
     <p class="small">{{errorMessage}}</p>
   </div>
 </template>
@@ -18,7 +22,8 @@ export default {
     "radioID",
     "errorMessage",
     "loaderColor",
-    "loaderPosition"
+    "loaderPosition",
+    "sizeInRem"
 
   ],
   data() {
@@ -32,5 +37,8 @@ export default {
       this.isLoading = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>

From a03e24526ab4574dd8b63fad3229033d4961ce9c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 23 Nov 2021 11:46:25 -0500
Subject: [PATCH 06/10] Styling and structure updates

---
 .../radio-question/radio-question.vue         |  4 +-
 src/layouts/vehicle-year/vehicle-year.vue     | 12 ++++++
 src/store/store.spec.js                       |  2 +-
 .../ymms-common-styles.scss                   | 41 -------------------
 src/styles/common-typography-styles.scss      | 12 ++++++
 vue.config.js                                 |  1 -
 vue.release.config.js                         |  1 -
 7 files changed, 27 insertions(+), 46 deletions(-)
 delete mode 100644 src/styles/common-component-styles/ymms-common-styles.scss

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 2fb50f018..d17020dfc 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info d-flex mt-4 mb-3">
+    <div class="needed_car_info mt-4 mb-3 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
@@ -31,4 +31,4 @@ export default {
     radio,
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 0f40a57b6..5591b9f07 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -32,3 +32,15 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+    .select-car {
+        height: calc(100vh - 1rem);
+
+        .car_list {
+        // Height will be determined by overall height of content above list
+        height: calc(100% - 110px);
+        width: calc(100% - 1rem);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index f14a96f8b..8b5f67deb 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -82,6 +82,6 @@ describe("Actions", () => {
         });
 
         // Assert
-        expect(pageData[0].Type).toBe('PageConfigWidget');
+        expect(pageData[0].Type).toBe('PageHeaderWidget');
     });
 })
\ No newline at end of file
diff --git a/src/styles/common-component-styles/ymms-common-styles.scss b/src/styles/common-component-styles/ymms-common-styles.scss
deleted file mode 100644
index 7fd2a4f18..000000000
--- a/src/styles/common-component-styles/ymms-common-styles.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.select-car {
-    height: calc(100vh - 1rem);
-
-    .car_list {
-      // Height will be determined by overall height of content above list
-      height: calc(100% - 100px);
-      width: calc(100% - 1rem);
-    }
-}
-  
-// Animations
-.slide-enter-from {
-  opacity: 0;
-  transform: translateX(30vw);
-}
-.slide-enter-active, .slide-leave-active {
-  transition: all .4s;
-}
-.slide-leave-to {
-  opacity: 0;
-  transform: translateX(-30vw);
-}
-
-.slide_reverse-enter-from {
-  opacity: 0;
-  transform: translateX(-30vw);
-}
-.slide_reverse-enter-active, .slide_reverse-leave-active {
-  transition: all .4s;
-}
-.slide_reverse-leave-to {
-  opacity: 0;
-  transform: translateX(30vw);
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-active, .fade-leave-active {
-  transition: all .5s ease;
-}
\ No newline at end of file
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 37081a8a4..05af0defc 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -43,3 +43,15 @@ caption {
   line-height: 1.7;
   font-weight: 400;
 }
+
+
+// Font size
+.fs-5 {
+  line-height: 2;
+}
+
+.fs-6 {
+  font-size: 1rem !important;
+  line-height: 1.4;
+  font-weight: 500;
+}
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index d54265f0c..e4497b244 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,7 +18,6 @@ module.exports = {
         @import "@/styles/common-button-styles.scss";
         @import "@/styles/common-radio-styles.scss";
         @import "@/styles/common-typography-styles.scss";
-        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },
diff --git a/vue.release.config.js b/vue.release.config.js
index f85e8ffa8..3e01ceeb2 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -17,7 +17,6 @@ module.exports = {
         @import "@/styles/common-button-styles.scss";
         @import "@/styles/common-radio-styles.scss";
         @import "@/styles/common-typography-styles.scss";
-        @import "@/styles/common-component-styles/ymms-common-styles.scss";
         `,
       },
     },

From 66df9263f94821b6b9ea18249563ce8440045c24 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 23 Nov 2021 14:03:44 -0500
Subject: [PATCH 07/10] Updating state unit tests to take in mock data

---
 src/store/store.spec.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 8b5f67deb..3442d35bf 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,4 +1,5 @@
 import store from './index'
+import globalMethods from '@/global-methods'
 
 describe("Actions", () => {
     it("Should return list of years retrieved", async () => {
@@ -6,9 +7,14 @@ describe("Actions", () => {
         let years = [];
 
         // Act
+        globalMethods.callHttpClient = jest.fn();
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: [2023,2022,2021]});
+        });
         await store.dispatch('getVehicleYears')
         .then( (response) => {
             years = response.data;
+            console.log(response);
         });
 
         // Assert
@@ -20,6 +26,9 @@ describe("Actions", () => {
         let makes = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['Baic','Honda','Ford']});
+        });
         await store.dispatch('getVehicleMakes', {year: 2023})
         .then( (response) => {
             makes = response.data;
@@ -34,6 +43,9 @@ describe("Actions", () => {
         let models = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['BJ40 (MEX)','Civic','Accord']});
+        });
         await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'})
         .then( (response) => {
             models = response.data;
@@ -48,6 +60,9 @@ describe("Actions", () => {
         let styles = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: ['4 DOOR UTILITY','2 DOOR']});
+        });
         await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'})
         .then( (response) => {
             styles = response.data;
@@ -62,13 +77,18 @@ describe("Actions", () => {
         let routeInfo = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: {
+                Result: 'Route Info Data'
+            }});
+        });
         await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' })
         .then( (response) => {
             routeInfo = response.data.Result;
         });
 
         // Assert
-        expect(routeInfo).toBe('{"vehicle-year":{"RelativeUrl":"/vehicle-year","LayoutName":"vehicle-year"}}');
+        expect(routeInfo).toBe('Route Info Data');
     });
 
     it("Should return page data from url retrieved", async () => {
@@ -76,12 +96,17 @@ describe("Actions", () => {
         let pageData = [];
 
         // Act
+        globalMethods.callHttpClient.mockImplementation(() => {
+            return Promise.resolve({ data: {
+                Result: 'Page Info Data'
+            }});
+        });
         await store.dispatch('getPageData', { pageName: 'vehicle-year' })
         .then( (response) => {
             pageData = response.data.Result;
         });
 
         // Assert
-        expect(pageData[0].Type).toBe('PageHeaderWidget');
+        expect(pageData).toBe('Page Info Data');
     });
 })
\ No newline at end of file

From ee6576529372b0815e08278669f996ac2435a1f8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 23 Nov 2021 14:36:31 -0500
Subject: [PATCH 08/10] CSR-119 Push Loader component and updated radio-list
 and list-button.

---
 src/layouts/component-test/component-test.vue | 28 ++++---------
 src/layouts/loader-demo/loader-demo.vue       | 28 +++++++++++++
 src/router/index.js                           |  6 +++
 src/ux-components/list-button/list-button.vue | 40 ++++++++++++-------
 src/ux-components/loader/loader.vue           |  6 +--
 src/ux-components/radio-list/radio-list.vue   | 27 ++++++++-----
 6 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 src/layouts/loader-demo/loader-demo.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 1c6b82efe..c34e7ac61 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -28,19 +28,6 @@
       radioID="backglass"
       />
     </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <loader
-          sizeInRem="2"
-          loaderColor="blue"
-        />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -70,6 +57,9 @@
         <listButton
         buttonText="List Button"
         errorText="Test error message"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1.5"
         />
       </div>
     </div>
@@ -87,9 +77,9 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        loaderColor="blue"
+        loaderColor="red"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
         <radioList
         groupName="demo"
@@ -97,7 +87,7 @@
         radioID="2020"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
         <radioList
         groupName="demo"
@@ -105,7 +95,7 @@
         radioID="2019"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
+        sizeInRem="1.5"
         />
       </div>
     </div>
@@ -241,7 +231,6 @@
   import listButton from "@/ux-components/list-button/list-button";
   import radioList from "@/ux-components/radio-list/radio-list";
   import alert from "@/ux-components/alert/alert";
-  import loader from "@/ux-components/loader/loader";
   export default {
     name: "App",
     components: {
@@ -250,8 +239,7 @@
       radioCard,
       listButton,
       radioList,
-      alert,
-      loader
+      alert
     },
     data() {
       return {
diff --git a/src/layouts/loader-demo/loader-demo.vue b/src/layouts/loader-demo/loader-demo.vue
new file mode 100644
index 000000000..4c19c4d21
--- /dev/null
+++ b/src/layouts/loader-demo/loader-demo.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <loader
+        sizeInRem="10"
+        loaderColor="blue"
+        loaderPosition="center"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+export default {
+  name: "App",
+  components: {
+    loader
+  }
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 1042b093f..2b3d566a1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -16,6 +17,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/loader-demo", // This is a temporary route for testing.
+    name: "LoaderDemo",
+    component: LoaderDemo,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 2580b0f83..5bad044b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,36 +1,48 @@
 <template>
   <div class="d-flex flex-column w-100">
     <button
-      class="btn list-button d-flex align-items-center"
-      v-on:click="showLoader()"
-      v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]"
+    class="btn list-button d-flex align-items-center justify-content-between"
+    @click='displayComponent'
+    v-bind:class="[
+    this.isLoading ? 'button-loader' : 'not-loading',
+    this.isError ? 'error' : '',
+    ]"
     >
-      {{ this.buttonText }}
-    </button>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
+    {{ this.buttonText }}
+    <loader
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
+    />
+  </button>
+  <label class="small mt-1">{{ this.errorText }}</label>
+</div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
     buttonText: String,
     errorText: String,
+    loaderColor: String,
+    loaderPosition: String,
+    sizeInRem: Number
   },
   data() {
     return {
-      isLoading: false,
-      isError: false,
+      display: false,
+      isError: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index b49ebe865..a8e66cad3 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="loader"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
+  v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+  v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
 </template>
 
@@ -27,5 +27,5 @@ export default {
 </script>
 
 <style lang="scss">
-  @include loader();
+@include loader();
 </style>
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index 4647f58ce..2976ce87e 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -1,15 +1,22 @@
 <template>
   <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <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"
+    <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 justify-content-between p-2"
+    @click='displayComponent'
     >{{radioID}}
     <loader
-      v-bind:class="[this.loaderColor, this.loaderPosition]"
-      v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-if="display"
+    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </label>
-    <p class="small">{{errorMessage}}</p>
-  </div>
+  <p class="small">{{errorMessage}}</p>
+</div>
 </template>
 
 <script>
@@ -28,13 +35,13 @@ export default {
   ],
   data() {
     return {
-      isLoading: false,
-      isError: false
+      isError: false,
+      display: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
   components: {

From 9dabb050b8ff3a0356c61013088cb68407408061 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 23 Nov 2021 14:53:51 -0500
Subject: [PATCH 09/10] Update code comment for clarity.

---
 src/ux-components/loader/loader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index a8e66cad3..eeabeb604 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -8,7 +8,7 @@
 <script>
 export default {
   name: "loader",
-  /* Specify size in rem where 16px = 1rem */
+  /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
   props: {
     sizeInRem: {
       type: Number,

From 3c6d76a361a44a0701c04c40c664dae05255e0ef Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 23 Nov 2021 14:56:25 -0500
Subject: [PATCH 10/10] Change color back to default for loader.

---
 src/layouts/component-test/component-test.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index c34e7ac61..157758395 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -77,7 +77,7 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        loaderColor="red"
+        loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1.5"
         />