From 66b79e7409d207dd4ebe76fe03e0213f6a7c9f8f Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 14:40:39 -0500
Subject: [PATCH 01/22] updating style

---
 src/styles/common-error-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index b5017fc60..2c26e69d7 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,7 +1,7 @@
 .has-error {
   &.list-button,
   &.list-card {
-    border: 1px solid $red;
+    border: 1px solid $gray-500;
     color: $red;
     label {
       box-shadow: 0 0 1px $red;

From 550c0d6e732c80de730b97b4a263982d729a423e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 15:59:18 -0500
Subject: [PATCH 02/22] Side door options fixes

---
 .../button-question/button-question.vue       |  6 ++-
 .../side-door-options.spec.js                 |  4 +-
 .../side-door-options/side-door-options.vue   | 40 ++++++-------------
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 4 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index c828f9ff9..7937f0cca 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,15 +122,17 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
+      const newSelectedValues = this.selectedValues;
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         if(Array.isArray(this.selectedValues)) {
-          const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;  
         }
       } else {
-        this.selectedValues = [val.value];
+        newSelectedValues.splice(0,newSelectedValues.length);
+        newSelectedValues.push(val.value);
+        this.selectedValues = newSelectedValues; 
       }
     },
   },
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
index 239a54fd4..245076308 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -43,11 +43,11 @@ describe("replace-options-question.vue", () => {
       const { wrapper } = setupMocks({});
   
       //Act
-      wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
+      wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
+      expect(wrapper.emitted()["update:selectedDriverSideReplaceOptions"][0]).toEqual([["FrontDoor"]]);
     });
   });
 
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 1372f23f6..540074779 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -13,9 +13,9 @@
             </div>
         </transition>
         
-        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedDriverSideReplaceOptionsValues" />
 
-        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedPassengerSideReplaceOptionsValues" />
     </div>
 </template>
 
@@ -30,10 +30,6 @@ export default ({
         return {
             questionText: String,
             answersFromCms: Array,
-            selectedDoorSides: [],
-            // Child component data
-            selectedDriverSideReplacOptions: [],
-            selectedPassengerSideReplaceOptions: [],
         }
     },
     props: {
@@ -49,11 +45,11 @@ export default ({
             this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
             this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
         },
-        getSideDoorReplacementOptions(){
+        getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
             return {
-                selectedDoorSides: this.selectedDoorSides,
-                selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
-                selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
+                selectedDoorSides: selectedDoorSides,
+                selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
+                selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions
             }
         },
     },
@@ -68,29 +64,26 @@ export default ({
         },
         selectedDoorSidesValues: {
             get: function() {
-                return this.selectedDoorSides;
+                return this.selectedValues.selectedDoorSides;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDoorSides", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(newValue, this.selectedValues.selectedDriverSideReplaceOptions, this.selectedValues.selectedPassengerSideReplaceOptions);
             }
         },
-        selectedDriverSideReplacOptionsValues: {
+        selectedDriverSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedDriverSideReplacOptions;
+                return this.selectedValues.selectedDriverSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedDriverSideReplacOptions", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, newValue, this.selectedValues.selectedPassengerSideReplaceOptions);
             }
         },
         selectedPassengerSideReplaceOptionsValues: {
             get: function() {
-                return this.selectedPassengerSideReplaceOptions;
+                return this.selectedValues.selectedPassengerSideReplaceOptions;
             },
             set: function(newValue) {
-                this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
-                this.selectedValues = this.getSideDoorReplacementOptions();
+                this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
             }
         },
          answersToDisplay(){
@@ -115,13 +108,6 @@ export default ({
             return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
         },
     },
-    mounted() {
-        if(typeof(this.selectedValues) === "object"){
-            this.selectedDoorSides = this.selectedValues.selectedDoorSides;
-            this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
-            this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
-        }
-    },
     components: {
         buttonQuestion,
         replaceOptionsQuestion,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index edbaf3a0c..aa888e14a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -115,7 +115,7 @@ export default {
       selectedDamageLocations: [],
       sideDoorOptionsData: {
         selectedDoorSides: [],
-        selectedDriverSideReplacOptions: [],
+        selectedDriverSideReplaceOptions: [],
         selectedPassengerSideReplaceOptions: []
       },
       selectedWindshieldOptions: [],

From b2a94baad5c999f5e6cd71ca691645adc3ed7bf4 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 16:00:45 -0500
Subject: [PATCH 03/22] array fix

---
 src/common-components/button-question/button-question.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 7937f0cca..e29639e09 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -130,9 +130,11 @@ export default {
           this.selectedValues = newSelectedValues;  
         }
       } else {
-        newSelectedValues.splice(0,newSelectedValues.length);
-        newSelectedValues.push(val.value);
-        this.selectedValues = newSelectedValues; 
+        if(this.isMultiSelect && this.selectedValues) {
+          newSelectedValues.splice(0,newSelectedValues.length);
+          newSelectedValues.push(val.value);
+          this.selectedValues = newSelectedValues; 
+        }
       }
     },
   },

From 74122ae7dc70e63bb73e88e004488843641253f7 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 21:38:43 -0500
Subject: [PATCH 04/22] Changing button question logic back on radio button
 select

---
 src/common-components/button-question/button-question.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e29639e09..6bc67a273 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -122,19 +122,15 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      const newSelectedValues = this.selectedValues;
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
+        const newSelectedValues = this.selectedValues;
         if(Array.isArray(this.selectedValues)) {
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;  
         }
       } else {
-        if(this.isMultiSelect && this.selectedValues) {
-          newSelectedValues.splice(0,newSelectedValues.length);
-          newSelectedValues.push(val.value);
-          this.selectedValues = newSelectedValues; 
-        }
+        this.selectedValues = [val.value];
       }
     },
   },

From 4ffa8d75fe65feb459056c703db1ebae95e0cbf0 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 22:05:08 -0500
Subject: [PATCH 05/22] Fixing method name  typo for radio button

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

diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 8d1ed6210..ed08026b2 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -10,7 +10,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged()"
+    @change="handleCheckChange()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>

From ff9b4d5f08601d48d080bbd993e0518ffdd46084 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 24 Feb 2022 09:43:47 -0500
Subject: [PATCH 06/22] Fixing unit tests and adding multselect to
 windshield-options

---
 .../side-door-options/side-door-options.spec.js           | 8 ++++----
 .../windshield-options/windshield-options.vue             | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
index 245076308..9c40a0683 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -30,9 +30,9 @@ describe("replace-options-question.vue", () => {
       //Act
       wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
       await wrapper.vm.$nextTick();
-  
+
       //Assert
-      expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
+     expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 
@@ -47,7 +47,7 @@ describe("replace-options-question.vue", () => {
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedDriverSideReplaceOptions"][0]).toEqual([["FrontDoor"]]);
+      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 
@@ -62,7 +62,7 @@ describe("replace-options-question.vue", () => {
       await wrapper.vm.$nextTick();
   
       //Assert
-      expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
+      expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
     });
   });
 
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 694103d8a..ed214158e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -13,6 +13,7 @@
         />
         <replaceOptionsQuestion ref="replaceOptionsQuestion"
             :isAvailable=isReplaceOptionSelected
+            isMultiSelect
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
         />

From 137d0684c29afc18be304b0542a82449dc5dea17 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 24 Feb 2022 10:42:24 -0500
Subject: [PATCH 07/22] Fixing bug for when sideDoor not selected

---
 .../vehicle-damage/side-door-options/side-door-options.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 540074779..3b63f2152 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -102,10 +102,10 @@ export default ({
             });
         },
         isDriverSideReplaceOptionsQuestionAvailable(){
-            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
         },
         isPassengerSideReplaceOptionsQuestionAvailable(){
-            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
         },
     },
     components: {

From b242538a50c716778a8906942f306653290fc46e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Feb 2022 13:33:07 -0500
Subject: [PATCH 08/22] Update placeholder color.

---
 .../dropdown-question/dropdown-question.vue                 | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index bef238272..b38e63c0d 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -30,15 +30,11 @@ export default {
     margin-bottom: .25rem;
   }
   .form-select {
-    color: $gray-500;
+    color: $gray-600;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
     border: 1px solid $gray-500;
     border-radius: .5rem;
     min-height: 3rem;
-    option[selected] {
-      color: $gray-500;
-      background-color: red;
-    }
     &:focus,
     &:focus-visible {
       box-shadow: 0 0 0 2px $blue;

From cb4f65b2af3caff98399c93b901e8f124dc46bd3 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Feb 2022 15:02:02 -0500
Subject: [PATCH 09/22] Update image placement.

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

diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 869099dfd..526744af5 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -86,7 +86,7 @@ export default {
   computed: {
     getLabelClasses() {
       if (this.isWide) {
-        let classes = "flex-row py-r ps-3 pe-8";
+        let classes = "flex-row py-r ps-3 pe-4";
         if (this.buttonLabelSubCopy) {
           classes += " checkboxTop";
         }

From 71912c016224ee46182911ff45a5d6a4c10128d0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Feb 2022 15:09:30 -0500
Subject: [PATCH 10/22] Fix unit test.

---
 src/ux-components/list-card/list-card.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index a345c7b18..2176e683d 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -145,7 +145,7 @@ describe("list-card.vue", () => {
 
     // Assert
     const label = wrapper.find("label");
-    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8"]);
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4"]);
   });
 
   it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
@@ -167,7 +167,7 @@ describe("list-card.vue", () => {
 
     // Assert
     const label = wrapper.find("label");
-    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-8", "checkboxTop"]);
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4", "checkboxTop"]);
   });
 
   it("Should return flex column classes if isWide is false", async () => {

From 2102e007ed72058e793abc5dc8cbc9feb9a539c0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 25 Feb 2022 11:52:43 -0500
Subject: [PATCH 11/22] Add icon prop to text input.

---
 src/assets/img/icons/location-pin.svg         |  3 ++
 .../textbox-question/textbox-question.vue     | 28 ++++++++++++++++--
 src/layouts/component-test/component-test.vue | 29 +++++++++++++++++--
 3 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/img/icons/location-pin.svg

diff --git a/src/assets/img/icons/location-pin.svg b/src/assets/img/icons/location-pin.svg
new file mode 100644
index 000000000..e84330374
--- /dev/null
+++ b/src/assets/img/icons/location-pin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
+  <path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
+</svg>
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 9df4c19e7..5daaa9bd4 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="textbox-question">
+  <div class="textbox-question" :class="hasError ? 'has-error' : ''">
     <label :for="inputId" class="form-label">{{labelText}}</label>
-    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
-    <p class="mt-1 mb-0">There has been an error!</p>
+    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']">
+    <p class="mt-2 form-test-error" v-if="!suppressError">
+      There has been an error!
+    </p>
   </div>
 </template>
 
@@ -16,12 +18,29 @@ export default {
     placeholderText: String,
     inputId: String,
     isRequired: Boolean,
+    hasIcon: Boolean,// If input has an icon
+    iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
+    iconURL: String,
+    hasError: Boolean,
   }
 };
 </script>
 
 <style lang="scss">
 .textbox-question {
+  input {
+    &.has-icon {
+      background-image: url(~@/assets/img/icons/location-pin.svg);
+      background-repeat: no-repeat;
+      background-position: .75rem 50%;
+      background-size: 1rem auto;
+      padding: 0 0.75rem 0 2.5rem;
+      &.icon-right {
+        background-position: calc(100% - .75rem) 50%;
+        padding: 0 2.5rem 0 0.75rem
+      }
+    }
+  }
   .form-label {
     margin-bottom: .25rem;
   }
@@ -48,5 +67,8 @@ export default {
       box-shadow: 0 0 0 4px $blue-300;
     }
   }
+  p {
+    display: none;
+  }
 }
 </style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d75266010..c4d45822f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -27,12 +27,37 @@
       </div>
       <div class="row">
         <div class="col">
-          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <h6 class="my-4">With icon aligned left</h6>
+          <textboxQuestion
+            labelText="Text Input Label"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            hasIcon
+            imgUrl="~@/assets/img/icons/spinner.svg"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With icon aligned right</h6>
+          <textboxQuestion
+            labelText="Text Input Label"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            hasIcon
+            iconRight
+            imgUrl="~@/assets/img/icons/spinner.svg"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error</h6>
           <textboxQuestion
             labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
-            class="has-error"
+            hasError
           />
         </div>
       </div>

From 9f81097b6b91647ec2fe086be7810667464b6fd8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 25 Feb 2022 14:27:21 -0500
Subject: [PATCH 12/22] Style updates.

---
 src/ux-components/checkbox/checkbox.vue | 12 ++++++++++++
 src/ux-components/radio/radio.vue       | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 73eb562bf..2d1c892b9 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -41,6 +41,13 @@ export default {
     &:checked {
       background-size: 125%;
       border: 1px solid $blue;
+      + label {
+        p {
+          font-weight: 500;
+          font-size: .875rem;
+          color: $black;
+        }
+      }
     }
     &:focus {
       box-shadow: 0 0 0 4px $blue-300;
@@ -51,5 +58,10 @@ export default {
       box-shadow: 0 0 0 4px $blue-300;
     }
   }
+  p {
+    font-weight: 400;
+    font-size: .875rem;
+    color: $gray-600;
+  }
 }
 </style>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index ed08026b2..44aa08880 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -89,6 +89,13 @@ export default {
       background-size: 71%;
       border: 1px solid $blue;
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+      + label {
+        p {
+          font-weight: 500;
+          font-size: .875rem;
+          color: $black;
+        }
+      }
     }
     &:focus {
       box-shadow: 0 0 0 4px $blue-300;
@@ -99,5 +106,10 @@ export default {
       box-shadow: 0 0 0 4px $blue-300;
     }
   }
+  p {
+    font-weight: 400;
+    font-size: .875rem;
+    color: $gray-600;
+  }
 }
 </style>

From f6af95a753a2c710578c16f2f074a721cfc9ef8e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 25 Feb 2022 14:45:57 -0500
Subject: [PATCH 13/22] Adding button question example test page

---
 .../button-question/button-question.vue       |   1 +
 .../button-question-examples.vue              | 138 ++++++++++++++++++
 src/router/index.js                           |   6 +
 3 files changed, 145 insertions(+)
 create mode 100644 src/layouts/button-question-examples/button-question-examples.vue

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 6bc67a273..5a1f2ee21 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,3 +1,4 @@
+<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component#Example-of-listButton-as-radio-button -->
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
diff --git a/src/layouts/button-question-examples/button-question-examples.vue b/src/layouts/button-question-examples/button-question-examples.vue
new file mode 100644
index 000000000..6df20ddf1
--- /dev/null
+++ b/src/layouts/button-question-examples/button-question-examples.vue
@@ -0,0 +1,138 @@
+<template>
+    <div class="container-fluid">
+        <h4 class="m-0 p-2 bg-light rounded">List Buttons</h4>
+
+        <buttonQuestion :answers="years" text-position="text-start" questionText="List Button as Radio" groupName="years" />
+
+        <buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-start" questionText="List Button as checkbox" groupName="check-box-answers" />
+
+        <buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-end" questionText="List Button as checkbox text end" groupName="check-box-answers-text-right" />
+
+        <buttonQuestion :answers="years" questionText="List Button as Radio text center (default)" groupName="years-text-center" />
+
+        <buttonQuestion :answers="years" selectingInitiatesLoad questionText="List Button as Radio with spinner" groupName="years-text-spinner" />
+        <span>(Selecting button with spinner will cause page overlay, page refresh needed to select buttons from other groups)</span>
+
+        <h4 class="m-0 p-2 bg-light rounded mt-5">List ButtonHorizontals</h4>
+
+        <buttonQuestion buttonType="listButtonHorizontal" :answers="radioAnswers"  questionText="List Button Horizontal as radio" groupName="lbh-radio" />
+
+        <buttonQuestion buttonType="listButtonHorizontal" isMultiSelect :answers="horizontalCheckboxAnswers"  questionText="List Button Horizontal as checkbox" groupName="lbh-checkbox" />
+
+        <h4 class="m-0 p-2 bg-light rounded mt-5">List Cards</h4>
+
+        <buttonQuestion buttonType="listCard" :answers="listCardRadio"  questionText="List Card as radio" groupName="lc-radio" />
+
+        <buttonQuestion isMultiSelect buttonType="listCard" :answers="listCardCheckBox"  questionText="List Card as checkbox" groupName="lc-checkbox" />
+
+        <buttonQuestion buttonType="listCard" :answers="listCardGroup"  questionText="List Cards as radios" groupName="lc-mult" />
+
+        <buttonQuestion buttonType="listCard" isMultiSelect :answers="listCardGroup"  questionText="List Cards as checkboxes" groupName="lcc-mult" />
+
+        <buttonQuestion isWide buttonType="listCard" :answers="listCardGroup"  questionText="List Cards as radios full width (text left image right)" groupName="lc-multWide" />
+
+        <buttonQuestion isWide isMultiSelect buttonType="listCard" :answers="listCardGroup"  questionText="List Cards as checkboxes full width (text left image right)" groupName="lcc-multWide" />
+
+        <h4 class="m-0 p-2 bg-light rounded mt-5">Radio</h4>
+
+         <buttonQuestion buttonType="radio" :answers="radioAnswers"  questionText="Used with radio" groupName="radio" />
+    </div>
+</template>
+
+<script>
+    import buttonQuestion from "@/common-components/button-question/button-question";
+
+    export default {
+        name: "App",
+        components: {
+            buttonQuestion
+        },
+        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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index b564b7e94..337c3f766 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import ComponentTest from "@/layouts/component-test/component-test.vue";
 import AddressPOC from "@/layouts/address-poc/address-poc.vue";
 import FormTest from "@/layouts/form-test/form-test.vue";
 import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
+import buttonQuestionExamples from "@/layouts/button-question-examples/button-question-examples.vue"
 
 const routes = [
   {
@@ -39,6 +40,11 @@ const routes = [
     name: "NestedRadio",
     component: NestedRadio,
   },
+  {
+    path: "/button-question-examples", // This is a temporary route for testing.
+    name: "buttonQuestionExamples",
+    component: buttonQuestionExamples,
+  },
   {
     path: "/",
     name: "root",

From c40107b3bfd81b3dd3ab1fc45f7cedcf3820df51 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 25 Feb 2022 16:56:25 -0500
Subject: [PATCH 14/22] Update focus state.

---
 src/ux-components/checkbox/checkbox.vue | 2 +-
 src/ux-components/radio/radio.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 2d1c892b9..448be5859 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -50,7 +50,7 @@ export default {
       }
     }
     &:focus {
-      box-shadow: 0 0 0 4px $blue-300;
+      box-shadow: 0 0 0 2.5px $blue;
     }
   }
   &:hover {
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 44aa08880..e1704167a 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -98,7 +98,7 @@ export default {
       }
     }
     &:focus {
-      box-shadow: 0 0 0 4px $blue-300;
+      box-shadow: 0 0 0 2.5px $blue;
     }
   }
   &:hover {

From b1346f4a55e60d028beb86c6334aa287279f29c8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 28 Feb 2022 08:21:16 -0500
Subject: [PATCH 15/22] Update label text for clarity.

---
 src/layouts/component-test/component-test.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index c4d45822f..d9d6ca37f 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -30,7 +30,7 @@
           <h6 class="my-4">With icon aligned left</h6>
           <textboxQuestion
             labelText="Text Input Label"
-            placeholderText="Disabled"
+            placeholderText="Text Input Label"
             inputID="test-text-input"
             hasIcon
             imgUrl="~@/assets/img/icons/spinner.svg"
@@ -42,7 +42,7 @@
           <h6 class="my-4">With icon aligned right</h6>
           <textboxQuestion
             labelText="Text Input Label"
-            placeholderText="Disabled"
+            placeholderText="Text Input Label"
             inputID="test-text-input"
             hasIcon
             iconRight

From d614e57af25ccff633baf4c20da9b6decb542472 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 28 Feb 2022 08:57:08 -0500
Subject: [PATCH 16/22] Style updates to match Figma.

---
 .../dropdown-question/dropdown-question.vue                | 7 +++++--
 .../textbox-question/textbox-question.vue                  | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index b38e63c0d..e95116b53 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -26,6 +26,9 @@ export default {
 
 <style lang="scss">
 .dropdown-question {
+  label {
+    color: $black;
+  }
   .form-label {
     margin-bottom: .25rem;
   }
@@ -37,7 +40,7 @@ export default {
     min-height: 3rem;
     &:focus,
     &:focus-visible {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
     }
     &:disabled,
     &.disabled {
@@ -49,7 +52,7 @@ export default {
       }
     }
     &:hover {
-      border: 1px solid transparent;
+      border: 1px solid $gray-500;
       box-shadow: 0 0 0 4px $blue-300;
     }
   }
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 5daaa9bd4..00874a385 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -28,6 +28,9 @@ export default {
 
 <style lang="scss">
 .textbox-question {
+  label {
+    color: $black;
+  }
   input {
     &.has-icon {
       background-image: url(~@/assets/img/icons/location-pin.svg);
@@ -52,7 +55,7 @@ export default {
       color: $gray-500;
     }
     &:focus {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
     }
     &:disabled,
     &.disabled {
@@ -63,7 +66,7 @@ export default {
       }
     }
     &:hover {
-      border: 1px solid transparent;
+      border: 1px solid $gray-500;
       box-shadow: 0 0 0 4px $blue-300;
     }
   }

From f93f26feae1987a81815fb8c8d59653696e2802e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 09:45:50 -0500
Subject: [PATCH 17/22] spacing adjustment

---
 src/common-components/button-question/button-question.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 5a1f2ee21..805afbc1a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,8 +1,8 @@
-<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component#Example-of-listButton-as-radio-button -->
+<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
-    <div v-if="questionText" class="mt-6 mb-4 d-flex">
-      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
+    <div v-if="questionText" class="mt-5 mb-4 d-flex">
+      <span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">

From 68ccfcbb15dbdb9ba2b4b6af7930d5a461f72dfe Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 10:37:43 -0500
Subject: [PATCH 18/22] Adjusting button-question so question text is always
 black font and adjusting list-card padding bottom to 3 rem

---
 src/common-components/button-question/button-question.vue | 8 +++++---
 src/ux-components/list-card/list-card.vue                 | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 805afbc1a..2c5d1168f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,6 +1,6 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
-  <div :class="isOverflowScrollable ? 'button_question' : ''">
+  <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
     <div v-if="questionText" class="mt-5 mb-4 d-flex">
       <span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span>
     </div>
@@ -146,8 +146,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.button_question {
-  color: $black;
+.button-question-overflow {
   height: calc(100vh - 280px);
 
   .overflow-scroll {
@@ -156,4 +155,7 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 }
+.button-question {
+  color: $black;
+}
 </style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 526744af5..af20ab797 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -17,7 +17,7 @@
       />
       <label
         :for="buttonID"
-        class="d-flex w-100 align-items-center px-2 h-100"
+        class="d-flex w-100 align-items-center px-3 h-100"
         :class="getLabelClasses" tabindex="-1"
       >
         <img

From cec09ad185121d468db176bec5657d7c42e80b3c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 10:46:41 -0500
Subject: [PATCH 19/22] Fixing padding change to padding bottom and updating
 unit test to reflect

---
 src/ux-components/list-card/list-card.spec.js | 2 +-
 src/ux-components/list-card/list-card.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 2176e683d..398c89c78 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -188,7 +188,7 @@ describe("list-card.vue", () => {
 
     // Assert
     const label = wrapper.find("label");
-    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
   });
 
   it("Should emit button value on click", async () => {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index af20ab797..a939b5a94 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -17,7 +17,7 @@
       />
       <label
         :for="buttonID"
-        class="d-flex w-100 align-items-center px-3 h-100"
+        class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses" tabindex="-1"
       >
         <img
@@ -92,7 +92,7 @@ export default {
         }
         return classes;
       } else {
-        return "flex-column pt-4 pb-2";
+        return "flex-column pt-4 pb-3";
       }
     },
   },

From 54f6f0cad219777685175b1585fa698e367a01a3 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 14:23:35 -0500
Subject: [PATCH 20/22] aligning question text to left on radio question type

---
 src/common-components/button-question/button-question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 2c5d1168f..e066a8c6a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -2,7 +2,7 @@
 <template>
   <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
     <div v-if="questionText" class="mt-5 mb-4 d-flex">
-      <span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span>
+      <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">

From 77aceda01f5e2f09a2bd5753d7c7d3fb9e71656b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 28 Feb 2022 15:47:00 -0500
Subject: [PATCH 21/22] Removing hover state from mobile devices for list-card
 and list-button-horizontal

---
 .../list-button-horizontal/list-button-horizontal.vue     | 8 +++++---
 src/ux-components/list-card/list-card.vue                 | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

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 5c328bc4c..c64a2adb4 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -157,9 +157,11 @@ export default {
     width: 100%;
     color: $gray-600;
     &:hover {
-      box-shadow: 0 0 0 4px $blue-300;
-      cursor: pointer;
-      z-index: 4 !important;
+      @include media-breakpoint-up(sm) {
+        box-shadow: 0 0 0 4px $blue-300;
+        cursor: pointer;
+        z-index: 4 !important;
+      }
     }
     + p {
       display: none;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index a939b5a94..858a3ef7b 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -139,8 +139,10 @@ export default {
     max-width: 100%;
   }
   &:hover {
-    box-shadow: 0px 0px 0px 4px $blue-300;
-    border: 1px solid transparent;
+    @include media-breakpoint-up(sm) {
+      box-shadow: 0px 0px 0px 4px $blue-300;
+      border: 1px solid transparent;
+    }
   }
   input[type="checkbox"],
   input[type="radio"] {

From 0684a75f40585725b4afb72c75f06644fa665464 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 1 Mar 2022 08:14:47 -0500
Subject: [PATCH 22/22] Remove unneeded code.

---
 src/common-components/textbox-question/textbox-question.vue | 1 -
 src/layouts/component-test/component-test.vue               | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 00874a385..feb65ffd9 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -20,7 +20,6 @@ export default {
     isRequired: Boolean,
     hasIcon: Boolean,// If input has an icon
     iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
-    iconURL: String,
     hasError: Boolean,
   }
 };
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d9d6ca37f..63df009e2 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -33,7 +33,6 @@
             placeholderText="Text Input Label"
             inputID="test-text-input"
             hasIcon
-            imgUrl="~@/assets/img/icons/spinner.svg"
           />
         </div>
       </div>
@@ -46,7 +45,6 @@
             inputID="test-text-input"
             hasIcon
             iconRight
-            imgUrl="~@/assets/img/icons/spinner.svg"
           />
         </div>
       </div>