From 56cda31f8ce395055bc7f680daf1dd00231d13c8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 16:18:50 -0500
Subject: [PATCH 01/21] adding condition to when radio button on change event
 fires

---
 .../button-question/button-question.vue                |  3 ++-
 src/ux-components/list-button/list-button.vue          | 10 +++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 0799446d5..2040ab131 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -31,6 +31,7 @@
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
               :selectedButtonIDs="selectedValues"
+              :newPageOnSelect="isOverflowScrollable"
               data-test="button"
             />
           </div>
@@ -126,7 +127,7 @@ export default {
         val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
         this.selectedValues = newSelectedValues;
       } else {
-        this.selectedValues = [val.buttonId]
+        this.selectedValues = [val.buttonId];
       }
     },
   },
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index fcf4ae799..8365834a1 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!newPageOnSelect ? handleCheckChange : ''"
     >
     <label
       tabindex="-1"
@@ -73,6 +73,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    newPageOnSelect: Boolean,
   },
   data() {
     return {
@@ -90,9 +91,8 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
-        this.displayLoader();
-      }
+      this.loaderEnabled ? this.displayLoader() : '';
+      this.newPageOnSelect ? this.handleCheckChange() : '';
       this.handleChange(value);
     },
     handleCheckChange(newValue, oldValue){
@@ -100,7 +100,7 @@ export default {
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
       }
-    }
+    },
   },
   components: {
     loader,

From 781a1f8967ed6f56ddf98167bf79cdfd4a238e50 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 17:11:53 -0500
Subject: [PATCH 02/21] Adding condition to when change event occurs on radio
 buttons

---
 .../button-question/button-question.vue               |  5 ++---
 .../vehicle-make/make-question/make-question.vue      |  2 +-
 .../vehicle-model/model-question/model-question.vue   |  2 +-
 .../vehicle-style/style-question/style-question.vue   |  2 +-
 .../vehicle-year/year-question/year-question.vue      |  2 +-
 .../list-button-horizontal.spec.js                    |  8 ++++----
 .../list-button-horizontal/list-button-horizontal.vue |  7 ++++---
 src/ux-components/list-button/list-button.spec.js     |  8 ++++----
 src/ux-components/list-button/list-button.vue         | 11 ++++++-----
 9 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2040ab131..ae75d671e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -19,7 +19,7 @@
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :sizeInRem="sizeInRem"
@@ -31,7 +31,6 @@
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
               :selectedButtonIDs="selectedValues"
-              :newPageOnSelect="isOverflowScrollable"
               data-test="button"
             />
           </div>
@@ -61,7 +60,7 @@ export default {
       type: String,
       default: "text-center",
     },
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: {
       type: String,
       default: "blue",
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 9fb2d6ea1..bc8ce5f9f 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index e79b8bafc..1876630ef 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index bfec78571..a923c9128 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 96d047244..97c2ab618 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 5cbe02e75..3976b9857 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 034f97c07..5044a7fb0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     />
     <label
       tabindex="-1"
@@ -60,7 +60,7 @@ export default {
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number, String],
@@ -88,8 +88,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 6592e64f7..a07d2d9e0 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -91,7 +91,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -113,7 +113,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -135,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -157,7 +157,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 8365834a1..46cf9fca4 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -12,7 +12,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!newPageOnSelect ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
     >
     <label
       tabindex="-1"
@@ -63,7 +63,7 @@ export default {
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
     sizeInRem: [Number,String],
@@ -73,7 +73,6 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
-    newPageOnSelect: Boolean,
   },
   data() {
     return {
@@ -91,8 +90,10 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      this.loaderEnabled ? this.displayLoader() : '';
-      this.newPageOnSelect ? this.handleCheckChange() : '';
+      if(this.selectingInitiatesLoad) {
+        this.displayLoader();
+        this.handleCheckChange();
+      }
       this.handleChange(value);
     },
     handleCheckChange(newValue, oldValue){

From a4b5528fac1b987ef4bb31d3c886097af93c3ae4 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 14 Feb 2022 17:37:36 -0500
Subject: [PATCH 03/21] Fixing unit tests

---
 .../list-button-horizontal/list-button-horizontal.spec.js   | 4 ++++
 src/ux-components/list-button/list-button.spec.js           | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 3976b9857..ba1f12d23 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -99,6 +99,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -121,6 +122,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -143,6 +145,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -165,6 +168,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index a07d2d9e0..d643201ef 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -99,6 +99,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -120,9 +121,8 @@ describe("list-button.vue", () => {
     // Assert
 
     const label = wrapper.find("label");
-
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
-
     await nextTick();
 
     const loader = wrapper.find("loader-stub");
@@ -143,6 +143,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -165,6 +166,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();

From 6a7c4606c681e5ca0d8cc80ce3c08684c0ecff47 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 08:59:47 -0500
Subject: [PATCH 04/21] CSR-186 scope css to fix specificity issue.

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 937109111..bc290d473 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -57,7 +57,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 h5 {
   line-height: 32px;
 

From b2b874e988a8477c896190bf7f412753d0261dbe Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 15 Feb 2022 14:53:05 -0500
Subject: [PATCH 05/21] Fixing filter functionality

---
 .../damage-location-question/damage-location-question.vue   | 1 -
 .../replace-options-question/replace-options-question.vue   | 2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue               | 6 +++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 36eac0831..58a74a31c 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="damage-location-question">
         <buttonQuestion
-            v-if="answersToDisplay.length > 1"
             :questionText="questionText"
             isMultiSelect
             :answers="answersToDisplay"
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 31c739b49..5efdc34b6 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -64,7 +64,7 @@ export default ({
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9f6a38650..2d4de638d 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,8 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -68,6 +69,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );

From ff1c1c9d7fdba569155af16ed9d5df205a9b8f12 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 15:41:09 -0500
Subject: [PATCH 06/21] CSR-266 qa updates

---
 src/ux-components/button-main/button-main.vue | 11 ++++++++---
 src/ux-components/list-card/list-card.vue     | 15 ++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e14c29f9c..79cf5bb22 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -2,7 +2,7 @@
   <button
     :aria-disabled="isDisabled"
     class="btn d-flex align-items-center py-3 px-2"
-    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
     <span class="m-0">{{ this.buttonText }}</span>
@@ -102,8 +102,9 @@ export default {
       // 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;
+      color: $blue;
+      //@include blue-gradient;
+      background: $white;
     }
     &:disabled {
       background: transparent;
@@ -112,6 +113,10 @@ export default {
       border: 1px solid $gray-300;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      @include blue-gradient;
+    }
   }
 }
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7550c9ec4..7dd9ef207 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="'col' + colLength">
-    <div 
+    <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
     >
@@ -108,11 +108,11 @@ export default {
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const { 
+    const {
         value: inputValue,
         handleChange,
         errors,
-    } = useField(props.groupName, props.validationRules, 
+    } = useField(props.groupName, props.validationRules,
     {
       type: inputType,
       checkedValue: props.value,
@@ -155,6 +155,7 @@ export default {
         cursor: pointer;
       }
       p {
+        color: $gray-600;
         text-align: center;
         &.sub-copy {
           color: $gray-550;
@@ -170,6 +171,14 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+    &:checked + label {
+      p {
+        color: $black;
+      }
+      .sub-copy {
+        color: $gray-600;
+      }
+    }
     + label::before {
       content: "";
       position: absolute;

From 5bbb6dc9f5ff20adccabfef7e5d6102bff6b0596 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 17:00:11 -0500
Subject: [PATCH 07/21] CSR-266 update styles.

---
 src/layouts/component-test/component-test.vue |  2 +-
 src/styles/common-error-styles.scss           | 14 +++++++++++---
 src/ux-components/button-main/button-main.vue |  8 ++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 3f1ae5ad9..42d00a906 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -62,7 +62,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 331c508a5..491d6d926 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -2,16 +2,24 @@
   &.list-button,
   &.list-card,
   &.list-button-horizontal {
+    border: 1px solid transparent;
+    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      border: 1px solid $red;
+      box-shadow: 0 0 0 2.5px $red;
+      border-radius: .5rem;
     }
   }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent;
+  }
 }
 
 .form-test-error {
   color: $red;
-  font-weight: bold;
+  font-size: .875rem;
+  font-weight: 500;
 }
 
 .form-test-invalid {
@@ -28,4 +36,4 @@
     box-shadow: none;
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 79cf5bb22..f36c018d2 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -85,6 +85,10 @@ export default {
       border: none;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
   }
   &.btn-secondary {
     position: relative;
@@ -97,6 +101,10 @@ export default {
       color: $white;
       @include blue-gradient;
     }
+    &:active {
+      @include blue-gradient;
+      color: $white;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
       // Keyboard focus for accessibility

From 6f89fddb4a2489b55ab667d7282fa7fa62c76a05 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 15 Feb 2022 18:58:24 -0500
Subject: [PATCH 08/21] CSR-266 refactor buttons per Rachel Figma update.

---
 src/ux-components/button-main/button-main.vue | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index f36c018d2..c916ab12b 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2"
+    class="btn d-flex align-items-center py-3 px-2 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
@@ -51,12 +51,10 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: $blue-700;
-    @include blue-gradient;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
-    transition: all 150ms linear;
     justify-content: center;
     &:hover {
       background: linear-gradient(
@@ -71,7 +69,11 @@ export default {
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
-      @include blue-gradient;
+      background: linear-gradient(
+        270deg,
+        rgba(6, 87, 124, 1) 0%,
+        rgba(6, 87, 124, 1) 100%
+      );
     }
     &:disabled {
       background: $gray-100 !important;
@@ -89,6 +91,9 @@ export default {
       color: $white;
       background: $blue-700;
     }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
+    }
   }
   &.btn-secondary {
     position: relative;
@@ -101,18 +106,13 @@ export default {
       color: $white;
       @include blue-gradient;
     }
-    &:active {
-      @include blue-gradient;
-      color: $white;
-    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
       // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-      color: $blue;
-      //@include blue-gradient;
-      background: $white;
+      color: $white;
+      @include blue-gradient;
     }
     &:disabled {
       background: transparent;
@@ -125,6 +125,9 @@ export default {
       color: $white;
       @include blue-gradient;
     }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
+    }
   }
 }
 </style>

From e2e7f194b48ada80ab29ebd6853ad766747ed261 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 08:57:23 -0500
Subject: [PATCH 09/21] CSR-262 validation styling updates.

---
 .../button-question/button-question.vue            |  2 +-
 src/layouts/component-test/component-test.vue      |  1 -
 src/layouts/form-test/form-test.vue                |  3 ++-
 src/styles/common-error-styles.scss                | 14 +++++++++-----
 src/ux-components/button-main/button-main.vue      |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5df9531df..b3ea56043 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -37,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 42d00a906..43d67533f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -18,7 +18,6 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 1e6d0d7b2..f12abb261 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 491d6d926..71ae4f2f3 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,18 +1,22 @@
 .has-error {
   &.list-button,
-  &.list-card,
-  &.list-button-horizontal {
+  &.list-card {
     border: 1px solid transparent;
-    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      box-shadow: 0 0 0 2.5px $red;
+      border: 1px solid $red;
       border-radius: .5rem;
     }
   }
   input[type=checkbox]:focus + label,
   input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent;
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
+  &.list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
   }
 }
 
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index c916ab12b..e4a3e6acb 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2 delay"
+    class="btn d-flex align-items-center py-3 px-4 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >

From c3f308cf7e2f8193e220aa949187ca77b518299e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 11:29:40 -0500
Subject: [PATCH 10/21] Update validation styling, add cursor to disabled
 button.

---
 src/styles/common-error-styles.scss           |  5 ++++-
 src/ux-components/button-main/button-main.vue | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 71ae4f2f3..880d54acc 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -9,6 +9,8 @@
     }
   }
   input[type=checkbox]:focus + label,
+  input[type=radio]:focus + label,
+  input[type=checkbox]:checked + label,
   input[type=radio]:checked + label {
     box-shadow: 0 0 0 2.5px transparent !important;
   }
@@ -30,7 +32,8 @@
   &.btn.btn-primary {
     color: $gray;
     background: $gray-200;
-    cursor: default;
+    cursor: pointer;
+    pointer-events: all;
   }
   &.btn.btn-primary:hover,
   &.btn.btn-primary:focus,
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e4a3e6acb..3b8b744f5 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -76,16 +76,18 @@ export default {
       );
     }
     &:disabled {
-      background: $gray-100 !important;
+      background: $gray-200 !important;
       background: linear-gradient(
         270deg,
-        $gray-100 0%,
-        $gray-100 100%
+        $gray-200 0%,
+        $gray-200 100%
       ) !important;
-      color: $gray !important;
+      color: $gray-550 !important;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
     }
     &.has-loader {
       color: $white;

From 4f435164540605f6d71aa7ad46c8cbf9d78a1e3c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 11:38:57 -0500
Subject: [PATCH 11/21] Fix border issue on list-card-horizontal.

---
 .../list-button-horizontal/list-button-horizontal.vue            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 5044a7fb0..60208e3c0 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -166,6 +166,7 @@ export default {
     label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
+      z-index: 2;
     }
   }
   &:last-of-type {

From 845679df74f454c2110baa03f73210569b888463 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 16 Feb 2022 13:25:05 -0500
Subject: [PATCH 12/21] Cleanup and logic fixes

---
 .../button-question/button-question.spec.js   | 39 +++++++++++--------
 .../button-question/button-question.vue       | 22 ++++++-----
 .../replace-options-question.spec.js          |  2 +-
 .../replace-options-question.vue              |  5 ++-
 src/layouts/vehicle-damage/vehicle-damage.vue |  3 +-
 5 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index d5608cd62..464fcf245 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import { nextTick } from "vue";
 
 describe("buttonQuestion.vue", () => {
-  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      isOverflowScrollable: true,
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        isOverflowScrollable: true,
+      }
     });
+
     // Assert
     const fieldSet = wrapper.find('fieldset');
     expect(fieldSet.classes()).toContain("overflow-scroll");
@@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain row if button type is listCard", async () => {
+  it("Fieldset classes should contain row if button type is listCard", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      buttonType: "listCard",
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listCard",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      buttonType: "listButtonHorizontal",
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        buttonType: "listButtonHorizontal",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should add values to array on checkbox click", async () => {
+  it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setProps({
-      modelValue: ["2022", "2021", "2020"],
-      isMultiSelect: true
+    const wrapper = shallowMount(buttonQuestion, {
+      propsData: {
+        modelValue: ["2022", "2021", "2020"],
+        isMultiSelect: true,
+      }
     });
     const val = {isChecked: true, buttonId: "2019", }
     wrapper.vm.handleCheckedChanged(val);
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5df9531df..fc9500d96 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -29,7 +29,7 @@
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :colLength="this.answers.length < 3 ? '' : '-4'"
+              :colLength="getColLength"
               :selectedButtonIDs="selectedValues"
               data-test="button"
               :validationRules="validationRules"
@@ -83,8 +83,6 @@ export default {
     isWide: Boolean,
     modelValue: Array,
     validationRules: String,
-    name: String,
-    value: String,
     suppressError: Boolean,
   },
   computed: {
@@ -111,6 +109,13 @@ export default {
       }
       return classes;
     },
+    getColLength(){
+      if(this.isWide) {
+        return "12"
+      } else {
+        return this.answers.length < 3 ? '' : '-4';
+      }
+    },
     selectedValues: {
       get: function() {
         return this.modelValue;
@@ -120,17 +125,16 @@ export default {
       }
     },
   },
-  mounted(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
+  beforeUpdate(){
+    const exceptions = ["Windshield", "Crack"];
+    const firstItem = typeof(this.answers[0]) === 'object' ? this.answers[0] : this.answers[0];
+    if(Array.isArray(this.answers) && this.answers.length === 1 && !exceptions.includes(typeof(firstItem) === 'object' ? firstItem.Text : firstItem)) {
       const newSelectedValues = this.selectedValues;
-      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
+      newSelectedValues.push(typeof(firstItem) === 'object' ? firstItem.Name : firstItem);
       this.selectedValues = newSelectedValues;
     }
   },
   methods: {
-    chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
index 103aecd4c..df8a16f90 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
     test("Answers to display filtered by data from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
   
       //Act
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 5efdc34b6..6f2606597 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,8 +1,9 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question">
+        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable"
+                isWide
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2d4de638d..8a85de6b5 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,7 +5,7 @@
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" />
+        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -81,6 +81,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      windshieldOptionsData: [],
     }
   },
   methods: {

From 4cd4650fb7763346fb3cc97faf1c3f6739453b04 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 16 Feb 2022 14:43:57 -0500
Subject: [PATCH 13/21] Unit test updates

---
 .../vehicle-damage/vehicle-damage.spec.js     | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 949f4811b..0e47eb37f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -175,7 +175,10 @@ function setupMocks({
     return Promise.resolve({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     });
   });
   const apiResponses = {
@@ -193,6 +196,9 @@ function setupMocks({
     damageOptions: {
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
   };
@@ -220,6 +226,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const windshieldOptions = replaceOptionsQuestion
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
@@ -245,12 +256,18 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const driverSideOptionsWrapper = wrapper.findComponent({
+  const driverSideOptionsWrapper = wrapper.findAllComponents({
     name: "replaceOptionsQuestion",
-  });
+  }).at(0);
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(1);
+  windshieldOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });

From f32439972dcf9a74da845e572b5ca2e37eb61381 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 15:01:17 -0500
Subject: [PATCH 14/21] Add error states to component-test page, update
 disabled button styles

Center footer link when stacked.
---
 .../funnel-footer/funnel-footer.vue           |   8 +
 src/layouts/component-test/component-test.vue | 444 +++++++++++-------
 src/styles/common-error-styles.scss           |  11 +
 src/ux-components/button-main/button-main.vue |   8 +-
 src/ux-components/checkbox/checkbox.vue       |   3 +-
 .../list-button-horizontal.vue                |   2 +
 src/ux-components/list-button/list-button.vue |   2 +
 src/ux-components/list-card/list-card.vue     |   5 +-
 src/ux-components/radio/radio.vue             |   3 +-
 9 files changed, 304 insertions(+), 182 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index af604ed99..edb2420fa 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -97,6 +97,10 @@ export default {
   .btn-primary {
     width: 100%;
   }
+  a {
+    display: flex;
+    justify-content: center;
+  }
   @media only screen and (min-width: 340px) {
     .button-col,
     .link-col {
@@ -105,6 +109,10 @@ export default {
     .btn-primary {
       width: auto;
     }
+    a {
+      display: flex;
+      justify-content: start;
+    }
   }
 }
 </style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 43d67533f..8812fe58a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -13,6 +13,14 @@
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
         />
+        <p class="my-3">With Error:</p>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-2"
+          tabIndex="1"
+          checkboxLabel="Error!"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -28,22 +36,32 @@
           buttonID="radio-button-a"
           isRequired
           value="I'm a radio button!"
-          modelValue="Model Value 1"
           screenReaderOnlyText="Model Value 1"
         />
-      </div>
-      <div class="col">
         <radio
           groupName="radio-demo-2"
           buttonLabel="I'm also a radio button!"
           buttonID="radio-button-b"
           isRequired
           value="I'm also a radio button!"
-          modelValue="Model Value 2"
           screenReaderOnlyText="Model Value 2"
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col">
+        <p class="my-3">With Error:</p>
+        <radio
+          groupName="radio-demo-3"
+          buttonLabel="Error!"
+          buttonID="radio-button-c"
+          isRequired
+          value="Error!"
+          screenReaderOnlyText="Model Value 1"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@@ -61,12 +79,39 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain
+          isPrimary
+          buttonText="Primary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack backButtonAccessibleText="Back button label" />
+        <buttonMain
+          buttonText="Secondary"
+          loaderColor="white"
+          sizeInRem="1"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonMain
+          buttonText="Secondary Disabled"
+          loaderColor="white"
+          sizeInRem="1"
+          disabled
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -98,44 +143,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox in Column Layout</h6>
-      </div>
-    </div>
-    <fieldset>
-      <legend class="sr-only">Functioning as Checkbox</legend>
-      <div class="row g-2">
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 1"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 2"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description with more than one line"
-        />
-        <listCard
-          isMultiSelect
-          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 3"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy=""
-        />
-      </div>
-    </fieldset>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@@ -151,7 +158,7 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox"
+            buttonID="List Card Checkbox 1"
             groupID="checkbox-demo-1"
             buttonLabelSubCopy="Description"
           />
@@ -168,13 +175,31 @@
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
-            buttonID="List Card Checkbox b"
+            buttonID="List Card Checkbox 2"
             groupID="checkbox-demo-1a"
             buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox with Error</legend>
+          <listCard
+            isMultiSelect
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Checkbox 3"
+            groupID="checkbox-demo-1e"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@@ -186,7 +211,7 @@
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button"
-            groupID="radio-demo-2"
+            groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
           />
         </fieldset>
@@ -209,6 +234,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button with Error</legend>
+          <listCard
+            isRadio
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Radio Button c"
+            groupID="radio-demo-2b"
+            buttonLabelSubCopy="Description"
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@@ -245,6 +288,25 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isMultiSelect
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Side Window"
+            altText=""
+            buttonID="List Card Horizontal Checkbox d"
+            groupID="checkbox-demo-3d"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@@ -279,6 +341,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal with Error</legend>
+          <listCard
+            isWide
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Horizontal Radio Button e"
+            groupID="radio-demo-4e"
+            buttonLabelSubCopy=""
+            hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -333,6 +413,21 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <listButton
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-year"
+          buttonID="2019b"
+          buttonLabel="2019"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row">
@@ -381,6 +476,20 @@
           sizeInRem="1"
           screenReaderOnlyText=" opens new window"
         />
+        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+        <listButton
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2016"
+          buttonLabel="2016"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -652,6 +761,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-radio-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="1b"
+          buttonLabel="1"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="2b"
+          buttonLabel="2"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          isMultiSelect
+          groupName="demo-4b"
+          ariaLabelBy="vehicle-model"
+          buttonID="3b"
+          buttonLabel="3"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
@@ -706,6 +872,63 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-checkbox-group"
+        class="d-flex flex-row p-0"
+      >
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="4c"
+          buttonLabel="4"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="5c"
+          buttonLabel="5"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+        <listButtonHorizontal
+          groupName="demo-4-checkboxc"
+          ariaLabelBy="vehicle-model"
+          buttonID="6c"
+          buttonLabel="6"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
+          hasError
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@@ -822,129 +1045,6 @@
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <funnelHeader
-          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
-      </div>
-    </div>
-    <div class="row my-3">
-      <div class="col">
-        <vehicleBanner
-        vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
-         :displayGenericVehicleImage=true
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <buttonQuestion
-        :answers="checkboxAnswers"
-        :isMultiSelect="true"
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list"
-        questionText="List Button as checkbox"
-        />
-        <buttonQuestion
-        :answers="radioAnswers"
-        ariaLabelBy="radio"
-        groupName="radio-list"
-        questionText="List Button as radio"
-        />
-        <buttonQuestion
-        :answers="horizontalCheckboxAnswers"
-        buttonType="listButtonHorizontal"
-        :isMultiSelect="true"
-        isColumn
-        ariaLabelBy="checkbox"
-        groupName="checkbox-list-horizontal"
-        questionText="List Button Horizontal as checkbox"
-        />
-        <buttonQuestion
-        :answers="horizontalRadioAnswers"
-        buttonType="listButtonHorizontal"
-        isColumn
-        ariaLabelBy="radio"
-        groupName="radio-list-horizontal"
-        questionText="List Button Horizontal as radio"
-        sizeInRem="1"
-        />
-        <buttonQuestion
-        :answers="listCardCheckBox"
-        buttonType="listCard"
-        isMultiSelect
-        ariaLabelBy="check_card"
-        groupName="check-list-card"
-        questionText="List Card as checkbox"
-        />
-        <buttonQuestion
-        :answers="listCardRadio"
-        buttonType="listCard"
-        ariaLabelBy="radio_card"
-        groupName="radio-card"
-        questionText="List Card as radio"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card"
-        groupName="horizontal_check-card"
-        questionText="List Card Horizontal as checkbox"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isWide
-        :answers="listCardCheckBoxHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_check_card-st"
-        groupName="horizontal_check-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontal"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card"
-        groupName="horizontal_cradio-card"
-        questionText="List Card Horizontal as radio"
-        />
-        <buttonQuestion
-        isWide
-        :answers="listRadioHorizontalSubText"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-st"
-        groupName="horizontal_cradio-card-st"
-        questionText="With Subtext"
-        />
-        <buttonQuestion
-        isMultiSelect
-        isRow
-        :answers="listCardGroup"
-        buttonType="listCard"
-        ariaLabelBy="horizontal_radio_card-group"
-        groupName="horizontal_cradio-card-group"
-        questionText="In column layout"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -954,8 +1054,6 @@ import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import checkbox from "@/ux-components/checkbox/checkbox";
 import radio from "@/ux-components/radio/radio";
@@ -968,11 +1066,9 @@ export default {
     listCard,
     listButton,
     alert,
-    vehicleBanner,
     listButtonHorizontal,
     checkbox,
     radio,
-    funnelHeader,
     textLink
   },
   data() {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 880d54acc..2b93563cf 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -13,6 +13,7 @@
   input[type=checkbox]:checked + label,
   input[type=radio]:checked + label {
     box-shadow: 0 0 0 2.5px transparent !important;
+    border: 1px solid $blue;
   }
   &.list-button-horizontal {
     color: $red;
@@ -20,6 +21,16 @@
       border: 1px solid $red;
     }
   }
+  &.ui-radio,
+  &.ui-checkbox {
+    input[type=radio]+label:before,
+    input[type=checkbox]+label:before {
+      border: 1px solid $red;
+    }
+    input[type=checkbox]:checked + label:before {
+      border: 1px solid $blue;
+    }
+  }
 }
 
 .form-test-error {
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 3b8b744f5..915c675eb 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -82,7 +82,7 @@ export default {
         $gray-200 0%,
         $gray-200 100%
       ) !important;
-      color: $gray-550 !important;
+      color: $gray-600 !important;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
@@ -118,10 +118,12 @@ export default {
     }
     &:disabled {
       background: transparent;
-      color: $gray !important;
+      color: $gray-550 !important;
       height: 48px;
-      border: 1px solid $gray-300;
+      border: 1px solid $gray-550;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
     }
     &.has-loader {
       color: $white;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index ca30ab330..24c9e830e 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex">
+  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
     <input
       type="checkbox"
       aria-checked="false"
@@ -28,6 +28,7 @@ export default {
     checkboxLabel: String,
     screenReaderOnlyText: String,
     isRequired: Boolean,
+    hasError: Boolean
   },
 };
 </script>
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 60208e3c0..f934ca94d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -71,6 +72,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 46cf9fca4..4c3e2d7b3 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -73,6 +74,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7dd9ef207..b3124ccfb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,7 +2,7 @@
   <div :class="'col' + colLength">
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -53,10 +53,8 @@ import { useField } from "vee-validate";
 export default {
   name: "listCard",
   props: {
-    //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
-    //end must choose
     buttonImage: String, //Required: File name of image
     buttonImageId: String,
     buttonLabel: String, //Required: Label text
@@ -73,6 +71,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data(){
     return {
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 5d5da19f7..83b0976b7 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex">
+  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     aria-checked="false"
@@ -35,6 +35,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    hasError: Boolean,
   },
   data() {
     return {

From 6de922747c438659b342d8d9b090a88de4a85149 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 15:21:17 -0500
Subject: [PATCH 15/21] Update font weights for buttons.

---
 src/ux-components/button-main/button-main.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 915c675eb..2621d6bcd 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -56,6 +56,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     justify-content: center;
+    font-weight: 500;
     &:hover {
       background: linear-gradient(
         270deg,
@@ -83,6 +84,7 @@ export default {
         $gray-200 100%
       ) !important;
       color: $gray-600 !important;
+      font-weight: 400;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
@@ -103,6 +105,7 @@ export default {
     border: 1px solid $blue;
     border-radius: $border-radius-lg;
     color: $blue;
+    font-weight: 500;
     transition: all 150ms linear;
     &:hover {
       color: $white;
@@ -119,6 +122,7 @@ export default {
     &:disabled {
       background: transparent;
       color: $gray-550 !important;
+      font-weight: 400;
       height: 48px;
       border: 1px solid $gray-550;
       border-radius: $border-radius-lg;

From 588a62c3535b6e634d133f7c87ca3e33b51e1c63 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 16 Feb 2022 15:39:43 -0500
Subject: [PATCH 16/21] Moving logic for auto-select to replace options
 question

---
 .../button-question/button-question.vue                  | 9 ---------
 .../replace-options-question.vue                         | 7 +++++++
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 719d2d681..823ce79fd 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -125,15 +125,6 @@ export default {
       }
     },
   },
-  beforeUpdate(){
-    const exceptions = ["Windshield", "Crack"];
-    const firstItem = typeof(this.answers[0]) === 'object' ? this.answers[0] : this.answers[0];
-    if(Array.isArray(this.answers) && this.answers.length === 1 && !exceptions.includes(typeof(firstItem) === 'object' ? firstItem.Text : firstItem)) {
-      const newSelectedValues = this.selectedValues;
-      newSelectedValues.push(typeof(firstItem) === 'object' ? firstItem.Name : firstItem);
-      this.selectedValues = newSelectedValues;
-    }
-  },
   methods: {
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 6f2606597..f47abea5d 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -70,6 +70,13 @@ export default ({
                 : [];
         },
     },
+    mounted(){
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            const newSelectedValues = this.selectedValues;
+            newSelectedValues.push(this.answersToDisplay[0].Name);
+            this.selectedValues = newSelectedValues;
+        }
+    },
     components: {
         buttonQuestion,
     }

From 376d065953f712b2466d151c2bec2899cf83d112 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 15:57:03 -0500
Subject: [PATCH 17/21] Update/remove css.

---
 src/common-components/funnel-footer/funnel-footer.vue | 2 +-
 src/styles/common-error-styles.scss                   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index edb2420fa..cd9ad0975 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -111,7 +111,7 @@ export default {
     }
     a {
       display: flex;
-      justify-content: start;
+      justify-content: flex-start;
     }
   }
 }
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 2b93563cf..d7d1c019d 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -13,7 +13,6 @@
   input[type=checkbox]:checked + label,
   input[type=radio]:checked + label {
     box-shadow: 0 0 0 2.5px transparent !important;
-    border: 1px solid $blue;
   }
   &.list-button-horizontal {
     color: $red;

From ecae48e730984de777e02818f6c7e9bded515798 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 16 Feb 2022 17:04:39 -0500
Subject: [PATCH 18/21] Component-test page cleanup.

---
 src/layouts/component-test/component-test.vue | 1976 +++++++++--------
 1 file changed, 995 insertions(+), 981 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 8812fe58a..062a6d608 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,57 +1,59 @@
-<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">Checkbox</h4>
+  <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">Checkbox</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <checkbox
+      <div class="row">
+        <div class="col">
+          <checkbox
           checkboxName="demo checkbox"
           buttonID="checkbox-1"
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
-        />
-        <p class="my-3">With Error:</p>
-        <checkbox
+          />
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <checkbox
           checkboxName="demo checkbox"
           buttonID="checkbox-2"
           tabIndex="1"
           checkboxLabel="Error!"
           hasError
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <radio
+      <div class="row">
+        <div class="col">
+          <radio
           groupName="radio-demo-2"
           buttonLabel="I'm a radio button!"
           buttonID="radio-button-a"
           isRequired
           value="I'm a radio button!"
           screenReaderOnlyText="Model Value 1"
-        />
-        <radio
+          />
+          <radio
           groupName="radio-demo-2"
           buttonLabel="I'm also a radio button!"
           buttonID="radio-button-b"
           isRequired
           value="I'm also a radio button!"
           screenReaderOnlyText="Model Value 2"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <p class="my-3">With Error:</p>
-        <radio
+      <div class="row">
+        <div class="col">
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <radio
           groupName="radio-demo-3"
           buttonLabel="Error!"
           buttonID="radio-button-c"
@@ -59,101 +61,101 @@
           value="Error!"
           screenReaderOnlyText="Model Value 1"
           hasError
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           isPrimary
           buttonText="Primary"
           loaderColor="white"
           sizeInRem="1"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           isPrimary
           buttonText="Primary Disabled"
           loaderColor="white"
           sizeInRem="1"
           disabled
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           buttonText="Secondary"
           loaderColor="white"
           sizeInRem="1"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonMain
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonMain
           buttonText="Secondary Disabled"
           loaderColor="white"
           sizeInRem="1"
           disabled
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonBack
+      <div class="row">
+        <div class="col my-3 d-flex align-items-center">
+          <buttonBack
           backButtonAccessibleText="Back button label"
-        />
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Links</h4>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col my-3">
-        <textLink
-        linkType=navigation
-        text="Navigation Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType="text"
-        text="Default Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType=textSmall
-        text="Small Link"
-        href="#!"
-        /><br><br>
-        <textLink
-        linkType=footer
-        text="Footer Link"
-        href="https://google.com"
-        />
+      <div class="row">
+        <div class="col my-3">
+          <textLink
+          linkType=navigation
+          text="Navigation Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType="text"
+          text="Default Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType=textSmall
+          text="Small Link"
+          href="#!"
+          /><br><br>
+          <textLink
+          linkType=footer
+          text="Footer Link"
+          href="https://google.com"
+          />
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkbox</h6>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <fieldset>
-          <legend class="sr-only">Functioning as Checkbox</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <fieldset>
+            <legend class="sr-only">Functioning as Checkbox</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -161,16 +163,16 @@
             buttonID="List Card Checkbox 1"
             groupID="checkbox-demo-1"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox No Description</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Checkbox No Description</h6>
+          <fieldset>
+            <legend class="sr-only">Checkbox no Description</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -178,16 +180,17 @@
             buttonID="List Card Checkbox 2"
             groupID="checkbox-demo-1a"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Checkbox with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Checkbox with Error</legend>
+            <listCard
             isMultiSelect
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -196,16 +199,16 @@
             groupID="checkbox-demo-1e"
             buttonLabelSubCopy="Description"
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
-        <fieldset>
-          <legend class="sr-only">Functioning as Radio Button</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Functioning as Radio Button</h6>
+          <fieldset>
+            <legend class="sr-only">Functioning as Radio Button</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -213,16 +216,16 @@
             buttonID="List Card Radio Button"
             groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Radio Button no Description</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -230,16 +233,17 @@
             buttonID="List Card Radio Button b"
             groupID="radio-demo-2b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Radio Button with Error</legend>
+            <listCard
             isRadio
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -248,16 +252,16 @@
             groupID="radio-demo-2b"
             buttonLabelSubCopy="Description"
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal Checkbox</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Horizontal as Checkbox</h6>
+          <fieldset>
+            <legend class="sr-only">Horizontal Checkbox</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -266,16 +270,16 @@
             buttonID="List Card Horizontal Checkbox"
             groupID="checkbox-demo-3"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Checkbox no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Checkbox no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Checkbox no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Checkbox no Description</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -284,16 +288,17 @@
             buttonID="List Card Horizontal Checkbox b"
             groupID="checkbox-demo-3b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Horizontal with Error</legend>
+            <listCard
             isMultiSelect
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
@@ -303,16 +308,16 @@
             groupID="checkbox-demo-3d"
             buttonLabelSubCopy=""
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal Radio Button</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Horizontal as Radio Button</h6>
+          <fieldset>
+            <legend class="sr-only">Horizontal Radio Button</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Rear Window"
@@ -320,16 +325,16 @@
             buttonID="List Card Horizontal Radio Button"
             groupID="radio-demo-4"
             buttonLabelSubCopy="Description"
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
-        <fieldset>
-          <legend class="sr-only">Radio Button no Description</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
+          <fieldset>
+            <legend class="sr-only">Radio Button no Description</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -337,16 +342,17 @@
             buttonID="List Card Horizontal Radio Button b"
             groupID="radio-demo-4b"
             buttonLabelSubCopy=""
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
-        <fieldset>
-          <legend class="sr-only">Horizontal with Error</legend>
-          <listCard
+      <div class="row g-2">
+        <div class="col">
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+          <fieldset>
+            <legend class="sr-only">Horizontal with Error</legend>
+            <listCard
             isWide
             buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
@@ -355,812 +361,820 @@
             groupID="radio-demo-4e"
             buttonLabelSubCopy=""
             hasError
-          />
-        </fieldset>
+            />
+          </fieldset>
+        </div>
       </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div class="row">
+        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+        <div
         role="radiogroup"
         aria-labelledby="demo-1-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="sr-only" id="demo-1-radio-group">Select Vehicle Year</h3>
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2021"
-          buttonLabel="2021"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2021"
+        buttonLabel="2021"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2020"
-          buttonLabel="2020"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2020"
+        buttonLabel="2020"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
-          isMultiSelect
-          groupName="demo-1"
-          ariaLabelBy="vehicle-year"
-          buttonID="2019"
-          buttonLabel="2019"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
+        isMultiSelect
+        groupName="demo-1"
+        ariaLabelBy="vehicle-year"
+        buttonID="2019"
+        buttonLabel="2019"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
-        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+        <small class="d-flex align-self-start">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
         <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-year"
-          buttonID="2019b"
-          buttonLabel="2019"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
+        isMultiSelect
+        groupName="demo-2"
+        ariaLabelBy="vehicle-year"
+        buttonID="2019b"
+        buttonLabel="2019"
+        isRequired="true"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        hasError
         />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
-        role="checkbox"
-        aria-labelledby="demo-1-checkbox-group"
-        class="col my-3 d-flex flex-column"
+      role="checkbox"
+      aria-labelledby="demo-1-checkbox-group"
+      class="col my-3 d-flex flex-column"
       >
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2018"
-          buttonLabel="2018"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2017"
-          buttonLabel="2017"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2016"
-          buttonLabel="2016"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
-        <listButton
-          groupName="demo-1-checkbox"
-          ariaLabelBy="vehicle-year"
-          buttonID="2016"
-          buttonLabel="2016"
-          isRequired="true"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-2-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="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Chevrolet"
-          buttonLabel="Chevrolet"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Dodge"
-          buttonLabel="Dodge"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-2"
-          ariaLabelBy="vehicle-make"
-          buttonID="Ford"
-          buttonLabel="Ford"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-2-checkbox-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="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Honda"
-          buttonLabel="Honda"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Acura"
-          buttonLabel="Acura"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-2-checkbox"
-          ariaLabelBy="vehicle-make"
-          buttonID="Infiniti"
-          buttonLabel="Infiniti"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-start"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">
-          List Button - Multi-Line Centered
-        </h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-3-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="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="Corvette"
-          buttonLabel="Corvette"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="Testarosa"
-          buttonLabel="Testarosa"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          isMultiSelect
-          groupName="demo-3"
-          ariaLabelBy="vehicle-model"
-          buttonID="S600"
-          buttonLabel="S600"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-3-checkbox-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="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Accord"
-          buttonLabel="Accord"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Civic"
-          buttonLabel="Civic"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButton
-          groupName="demo-3-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="Ridgeline"
-          buttonLabel="Ridgeline"
-          buttonLabelSubCopy="Test sub-headline"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
-      </div>
-    </div>
-    <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-radio-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="1"
-          buttonLabel="1"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="2"
-          buttonLabel="2"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4"
-          ariaLabelBy="vehicle-model"
-          buttonID="3"
-          buttonLabel="3"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-radio-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="1b"
-          buttonLabel="1"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="2b"
-          buttonLabel="2"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          isMultiSelect
-          groupName="demo-4b"
-          ariaLabelBy="vehicle-model"
-          buttonID="3b"
-          buttonLabel="3"
-          textPosition="text-center"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-checkbox-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="4"
-          buttonLabel="4"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="5"
-          buttonLabel="5"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkbox"
-          ariaLabelBy="vehicle-model"
-          buttonID="6"
-          buttonLabel="6"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-        />
-      </div>
-    </div>
-    <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
-        role="radiogroup"
-        aria-labelledby="demo-4-checkbox-group"
-        class="d-flex flex-row p-0"
-      >
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="4c"
-          buttonLabel="4"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="1"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="5c"
-          buttonLabel="5"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="2"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-        <listButtonHorizontal
-          groupName="demo-4-checkboxc"
-          ariaLabelBy="vehicle-model"
-          buttonID="6c"
-          buttonLabel="6"
-          textPosition="text-center"
-          loaderEnabled="true"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-          v-bind:totalInGroup="3"
-          v-bind:positionInGroup="3"
-          screenReaderOnlyText=" opens new window"
-          hasError
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Typography</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>
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
+      <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+      <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2018"
+      buttonLabel="2018"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2017"
+      buttonLabel="2017"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2016"
+      buttonLabel="2016"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+      <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+      <listButton
+      groupName="demo-1-checkbox"
+      ariaLabelBy="vehicle-year"
+      buttonID="2016"
+      buttonLabel="2016"
+      isRequired="true"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      hasError
+      />
     </div>
   </div>
-</template>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-2-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="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Chevrolet"
+      buttonLabel="Chevrolet"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Dodge"
+      buttonLabel="Dodge"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      isMultiSelect
+      groupName="demo-2"
+      ariaLabelBy="vehicle-make"
+      buttonID="Ford"
+      buttonLabel="Ford"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-2-checkbox-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="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Honda"
+      buttonLabel="Honda"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Acura"
+      buttonLabel="Acura"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-2-checkbox"
+      ariaLabelBy="vehicle-make"
+      buttonID="Infiniti"
+      buttonLabel="Infiniti"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-start"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">
+        List Button - Multi-Line Centered
+      </h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+  <div class="row">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-3-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="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="Corvette"
+    buttonLabel="Corvette"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="Testarosa"
+    buttonLabel="Testarosa"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButton
+    isMultiSelect
+    groupName="demo-3"
+    ariaLabelBy="vehicle-model"
+    buttonID="S600"
+    buttonLabel="S600"
+    buttonLabelSubCopy="Test sub-headline"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
+      <div
+      role="radiogroup"
+      aria-labelledby="demo-3-checkbox-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="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Accord"
+      buttonLabel="Accord"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Civic"
+      buttonLabel="Civic"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+      <listButton
+      groupName="demo-3-checkbox"
+      ariaLabelBy="vehicle-model"
+      buttonID="Ridgeline"
+      buttonLabel="Ridgeline"
+      buttonLabelSubCopy="Test sub-headline"
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
+    </div>
+  </div>
+  <div class="row px-3">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-radio-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="1"
+    buttonLabel="1"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="2"
+    buttonLabel="2"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4"
+    ariaLabelBy="vehicle-model"
+    buttonID="3"
+    buttonLabel="3"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+    <small class="p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-radio-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="1b"
+    buttonLabel="1"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="2b"
+    buttonLabel="2"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    isMultiSelect
+    groupName="demo-4b"
+    ariaLabelBy="vehicle-model"
+    buttonID="3b"
+    buttonLabel="3"
+    textPosition="text-center"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-checkbox-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="4"
+    buttonLabel="4"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="5"
+    buttonLabel="5"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkbox"
+    ariaLabelBy="vehicle-model"
+    buttonID="6"
+    buttonLabel="6"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    />
+  </div>
+  </div>
+  <div class="row px-3">
+    <h6 class="mx-0 mt-4 mb-0 p-0 d-flex align-self-start">Radio Button with Error</h6>
+    <small class="m-0 p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
+    <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+    <div
+    role="radiogroup"
+    aria-labelledby="demo-4-checkbox-group"
+    class="d-flex flex-row p-0"
+    >
+    <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+    <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="4c"
+    buttonLabel="4"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="1"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="5c"
+    buttonLabel="5"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="2"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+    <listButtonHorizontal
+    groupName="demo-4-checkboxc"
+    ariaLabelBy="vehicle-model"
+    buttonID="6c"
+    buttonLabel="6"
+    textPosition="text-center"
+    loaderEnabled="true"
+    loaderColor="blue"
+    loaderPosition="right"
+    sizeInRem="1"
+    v-bind:totalInGroup="3"
+    v-bind:positionInGroup="3"
+    screenReaderOnlyText=" opens new window"
+    hasError
+    />
+  </div>
+  </div>
+  <div class="row my-4">
+    <div class="col">
+      <h4 class="m-0 p-2 bg-light rounded">Typography</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 buttonMain from "@/ux-components/button-main/button-main";
-import buttonBack from "@/common-components/button-back/button-back";
-import listCard from "@/ux-components/list-card/list-card";
-import listButton from "@/ux-components/list-button/list-button";
-import alert from "@/ux-components/alert/alert";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
-import checkbox from "@/ux-components/checkbox/checkbox";
-import radio from "@/ux-components/radio/radio";
-import textLink from "@/ux-components/text-link/text-link";
-export default {
-  name: "App",
-  components: {
-    buttonMain,
-    buttonBack,
-    listCard,
-    listButton,
-    alert,
-    listButtonHorizontal,
-    checkbox,
-    radio,
-    textLink
-  },
-  data() {
-    return {
-      years: [2023, 2022, 2021, 2020],
-      checkboxAnswers: [
-        "Checkbox Answer 1",
-        "Checkbox Answer 2",
-        "Checkbox Answer 3",
-      ],
-      radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
-      horizontalCheckboxAnswers: [
-        "HCB Answer 1",
-        "HCB Answer 2",
-        "HCB Answer 3",
-      ],
-      horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
-      listCardCheckBox: [
-        {
-          Name: "List-Card-CB",
-          Text: "List Card CB",
-          SubText: "checkbox",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardRadio: [
-        {
-          Name: "List-Card-R",
-          Text: "List Card R",
-          SubText: "Radio",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardCheckBoxHorizontalSubText: [
-        {
-          Name: "List-Card-CBHst",
-          Text: "List Card CBHst",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardCheckBoxHorizontal: [
-        {
-          Name: "List-Card-CBH",
-          Text: "List Card CBH",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listRadioHorizontalSubText: [
-        {
-          Name: "List-Card-RHst",
-          Text: "List Card RHst",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listRadioHorizontal: [
-        {
-          Name: "List-Card-RH",
-          Text: "List Card RH",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-      listCardGroup: [
-        {
-          Name: "Side-Window-1",
-          Text: "Side Window",
-          SubText: "With Subtext",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-        {
-          Name: "Side-Window-2",
-          Text: "Side Window",
-          SubText: "With Subtext that is more than one line",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-        {
-          Name: "Side-Window-3",
-          Text: "Side Window",
-          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
-          AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
-        },
-      ],
-    };
-  },
-};
-</script>
+  <script>
+  import buttonMain from "@/ux-components/button-main/button-main";
+  import buttonBack from "@/common-components/button-back/button-back";
+  import listCard from "@/ux-components/list-card/list-card";
+  import listButton from "@/ux-components/list-button/list-button";
+  import alert from "@/ux-components/alert/alert";
+  import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+  import checkbox from "@/ux-components/checkbox/checkbox";
+  import radio from "@/ux-components/radio/radio";
+  import textLink from "@/ux-components/text-link/text-link";
+  export default {
+    name: "App",
+    components: {
+      buttonMain,
+      buttonBack,
+      listCard,
+      listButton,
+      alert,
+      listButtonHorizontal,
+      checkbox,
+      radio,
+      textLink
+    },
+    data() {
+      return {
+        years: [2023, 2022, 2021, 2020],
+        checkboxAnswers: [
+          "Checkbox Answer 1",
+          "Checkbox Answer 2",
+          "Checkbox Answer 3",
+        ],
+        radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
+        horizontalCheckboxAnswers: [
+          "HCB Answer 1",
+          "HCB Answer 2",
+          "HCB Answer 3",
+        ],
+        horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
+        listCardCheckBox: [
+          {
+            Name: "List-Card-CB",
+            Text: "List Card CB",
+            SubText: "checkbox",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardRadio: [
+          {
+            Name: "List-Card-R",
+            Text: "List Card R",
+            SubText: "Radio",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardCheckBoxHorizontalSubText: [
+          {
+            Name: "List-Card-CBHst",
+            Text: "List Card CBHst",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardCheckBoxHorizontal: [
+          {
+            Name: "List-Card-CBH",
+            Text: "List Card CBH",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listRadioHorizontalSubText: [
+          {
+            Name: "List-Card-RHst",
+            Text: "List Card RHst",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listRadioHorizontal: [
+          {
+            Name: "List-Card-RH",
+            Text: "List Card RH",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+        listCardGroup: [
+          {
+            Name: "Side-Window-1",
+            Text: "Side Window",
+            SubText: "With Subtext",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+          {
+            Name: "Side-Window-2",
+            Text: "Side Window",
+            SubText: "With Subtext that is more than one line",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+          {
+            Name: "Side-Window-3",
+            Text: "Side Window",
+            ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+            AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
+          },
+        ],
+      };
+    },
+  };
+  </script>

From b606dbcb0a2051574a7873f781b9db91f9551608 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 17 Feb 2022 08:34:32 -0500
Subject: [PATCH 19/21] CSR-341 qa bug fix - z-index update.

---
 .../list-button-horizontal/list-button-horizontal.vue          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index f934ca94d..18d6c586d 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -142,6 +142,7 @@ export default {
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
+      z-index: 2;
     }
     &:checked + label p:first-child {
       font-weight: 500;
@@ -158,7 +159,7 @@ export default {
     &:hover {
       box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
-      z-index: 2;
+      z-index: 3 !important;
     }
     + p {
       display: none;

From acd770db5e54e8d39ed56af649208f8678a990fd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 17 Feb 2022 09:11:10 -0500
Subject: [PATCH 20/21] Fix bug with button loader/spinner.

---
 .../button-question/button-question.vue       |  5 ---
 .../funnel-footer/funnel-footer.vue           |  1 -
 src/layouts/component-test/component-test.vue | 40 ++-----------------
 .../button-main/button-main.spec.js           | 23 -----------
 src/ux-components/button-main/button-main.vue |  2 -
 .../list-button-horizontal.spec.js            | 23 -----------
 .../list-button-horizontal.vue                |  2 -
 .../list-button/list-button.spec.js           | 23 -----------
 src/ux-components/list-button/list-button.vue |  2 -
 src/ux-components/loader/loader.vue           |  9 +----
 10 files changed, 6 insertions(+), 124 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 823ce79fd..e8cf4a967 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -22,7 +22,6 @@
               :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
-              :sizeInRem="sizeInRem"
               :isWide="isWide"
               :isRequired="isRequired"
               :buttonImage="answer.AnswerImageUrl"
@@ -74,10 +73,6 @@ export default {
       type: String,
       default: "right",
     },
-    sizeInRem: {
-      type: [String, Number],
-      default: 1.5,
-    },
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index cd9ad0975..062a3574a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -21,7 +21,6 @@
             isPrimary
             :buttonText="buttonText"
             loaderColor="white"
-            sizeInRem="1"
             :class="isDisabled && 'form-test-invalid'"
             :aria-disabled="isDisabled"
             :isDisabled="isDisabled"
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 062a6d608..e18664bec 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -75,7 +75,7 @@
           isPrimary
           buttonText="Primary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -85,7 +85,7 @@
           isPrimary
           buttonText="Primary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -95,7 +95,7 @@
           <buttonMain
           buttonText="Secondary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -104,7 +104,7 @@
           <buttonMain
           buttonText="Secondary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -390,7 +390,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -403,7 +402,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -416,7 +414,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
@@ -431,7 +428,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         hasError
         />
@@ -456,7 +452,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -468,7 +463,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -480,7 +474,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
@@ -494,7 +487,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       hasError
       />
@@ -525,7 +517,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -538,7 +529,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -551,7 +541,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -576,7 +565,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -588,7 +576,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -600,7 +587,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -633,7 +619,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -646,7 +631,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -659,7 +643,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
   </div>
@@ -684,7 +667,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -696,7 +678,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -708,7 +689,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-      sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
@@ -738,7 +718,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -752,7 +731,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -766,7 +744,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -793,7 +770,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -808,7 +784,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -823,7 +798,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -850,7 +824,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -864,7 +837,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -878,7 +850,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -905,7 +876,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -920,7 +890,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -935,7 +904,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-    sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index bbdbbe134..f72040736 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -76,26 +76,3 @@ describe("buttonMain.vue", () => {
 
     expect(loader.attributes("class")).toContain("right");
   });
-
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(buttonMain, {
-      propsData: {
-        sizeInRem: 1,
-        loaderEnabled: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.clicked();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
-});
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 2621d6bcd..c1f65dac1 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -9,7 +9,6 @@
     <loader
       class="ms-2"
       v-if="isLoaderDisplayed"
-      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
       v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
@@ -25,7 +24,6 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isFloat: Boolean,
   },
   data() {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index ba1f12d23..d1175620c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -155,29 +155,6 @@ describe("list-button-horizontal.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(listButtonHorizontal, {
-      propsData: {
-        sizeInRem: 1,
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.handleClick();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
-
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 18d6c586d..cc712e613 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -39,7 +39,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
         :class="[loaderColor, loaderPosition]"
       />
     </label>
@@ -64,7 +63,6 @@ export default {
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isRequired: Boolean,
     value: {
       // Field initial value
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index d643201ef..1e900ce62 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -153,29 +153,6 @@ describe("list-button.vue", () => {
     expect(loader.attributes("class")).toContain("right");
   });
 
-  it("Should return loader size in rem", async () => {
-    // Act
-    const wrapper = shallowMount(listButton, {
-      propsData: {
-        sizeInRem: 1,
-        selectingInitiatesLoad: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    wrapper.vm.handleCheckChange = jest.fn();
-    wrapper.vm.handleClick();
-
-    await nextTick();
-
-    const loader = wrapper.find("loader-stub");
-
-    expect(loader.attributes("style")).toContain("1rem");
-  });
-
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 4c3e2d7b3..3c5c4c27e 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -42,7 +42,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
         :class="[this.loaderColor, this.loaderPosition]"
       />
     </label>
@@ -67,7 +66,6 @@ export default {
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String],
     value: {
     // Field initial value
       type: [String, Number],
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 247e15665..9b3473eb1 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -3,7 +3,6 @@
     class="loader"
     role="alert"
     aria-label="Loading new page"
-    v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
     v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
 </template>
@@ -13,10 +12,6 @@ export default {
   name: "loader",
   /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
   props: {
-    sizeInRem: {
-      type: Number,
-      default: 1,
-    },
     /* Color options: red, green, blue, white, black */
     loaderColor: {
       type: String,
@@ -50,8 +45,8 @@ export default {
     mask: url(../../assets/img/icons/spinner.svg);
     mask-size: cover;
     position: relative;
-    width: 100%;
-    height: 100%;
+    width: 1rem;
+    height: 1rem;
     animation: rotation 1s infinite linear;
     @keyframes rotation {
       100% {

From 5a31488294b64da05aa5fb6a056b1b28e7b996a5 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 17 Feb 2022 09:21:43 -0500
Subject: [PATCH 21/21] Fix unit test.

---
 src/ux-components/button-main/button-main.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index f72040736..ee5589a1d 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -76,3 +76,4 @@ describe("buttonMain.vue", () => {
 
     expect(loader.attributes("class")).toContain("right");
   });
+});