From c9b09ae23a629bf85819e69dd694dec3012c0931 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 14 Feb 2022 10:59:31 -0500
Subject: [PATCH 01/58] CSR-269 wip

---
 src/layouts/vehicle-damage/vehicle-damage.vue |  27 +++-
 .../windshield-chip-count-question.vue        |  49 ++++++++
 .../windshield-damage-type-question.vue       |  54 ++++++++
 .../windshield-options/windshield-options.vue | 118 ++++++++++++++++++
 4 files changed, 246 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-options.vue

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c5b8df783..e809e97fc 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,6 +5,7 @@
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
     </div>
 </template>
 
@@ -15,6 +16,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from"@/layouts/vehicle-damage/windshield-options/windshield-options";
+
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -26,6 +29,7 @@ import baseMixin from "@/mixins/base-mixin";
 export default {
   name: "vehicle-damage",
   async beforeRouteEnter(to, from, next) {
+    console.log("vd: beforeRoute");
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
@@ -46,10 +50,12 @@ export default {
       },
     ];
 
+    console.log("vd: before settle");
     const resultMap = await settleAllPromises(promiseResultMap);
-
+    console.log("vd: after settle");
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
+      console.log("vd: next");
       vm.$refs.funnelHeader.initializeComponent(
         resultMap.cmsContent.FunnelHeaderWidget
       );
@@ -65,12 +71,19 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      console.log("vd: initialize wo");
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion
+      );
     });
   },
   data(){
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      selectedWindshieldOptions: [],
+      selectedChipCount: []
     }
   },
   methods: {
@@ -80,14 +93,24 @@ export default {
     resetDependentState() {
       // Invokes
       store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
-    },
+    }
   },
+  //computed: {
+        // selectedWindshieldDamageType(){
+        //     return  this.modelValue.some(selectedDamages => 
+        //         {
+        //             const categoryAndGlass = selectedDamages.split('-'); //ie: model looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+        //             return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+        //         });
+        // },        
+    //},
   components: {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,
     damageLocationQuestion,
+    windshieldOptions,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
new file mode 100644
index 000000000..fc3452dcb
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -0,0 +1,49 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-chip-count">
+            <buttonQuestion
+                :questionText="buttonQuestionText"
+                :answers="buttonAnswers"
+                :groupName="buttongroupName"
+                buttonType="listButtonHorizontal"
+                v-model="selectedChipCountValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        modelValue: Array,
+        questionText: String,
+        answersFromCms: Array,
+        groupName: String,
+    },
+    computed: {
+        buttonQuestionText() {
+            return this.questionText;
+        },
+        buttonAnswers() {
+            return this.answersFromCms;
+        },
+        buttongroupName() {
+            return this.groupName;
+        },
+        selectedChipCountValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..911d3e8ad
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,54 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-options">
+            <buttonQuestion
+                :questionText="buttonQuestionText"
+                :answers="buttonAnswers"
+                :groupName="buttongroupName"
+                buttonType="listCard"
+                v-model="selectedValues"
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "windshieldOptions",
+    props: {
+        modelValue: Array,
+        questionText: String,
+        answersFromCms: Array,
+        groupName: String,
+    },
+    methods: {
+        initializeComponent(qt, an){
+            alert("hi");
+        }
+    },
+    computed: {
+        buttonQuestionText() {
+            return this.questionText;
+        },
+        buttonAnswers() {
+            return this.answersFromCms;
+        },
+        buttongroupName() {
+            return this.groupName;
+        },
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    }
+})
+</script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
new file mode 100644
index 000000000..1baf8dd82
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -0,0 +1,118 @@
+<template>
+    <transition name="fade">
+        <div class="windshield-options">
+            <!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+                v-if="isWindshieldDamageLocation"
+                :questionText="questionText"
+                :answersFromCms="answersFromCms"
+                groupName="WindshieldDamageTypeQuestion"
+                v-model="selectedValues" 
+            />
+            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+                v-if="isWindshieldDamageLocation && isRepairOptionSelected"
+                :questionText="chipCountQuestionText"
+                :answersFromCms="chipCountAnswersFromCms"
+                groupName="WindshieldChipCountQuestion"
+                v-model="selectedChipCountValues" 
+            /> -->
+            <replaceOptionsQuestion :ref="replaceOptionsQuestion" 
+                v-if="isWindshieldDamageLocation"
+                isAvailable
+                :questionText="replaceOptionsQuestionText"
+                :answersFromCms="replaceOptionsAnswersFromCms"
+                groupName="WindshieldChipCountQuestion"
+                v-model="selectedReplaceOptions" 
+            />
+        </div>
+    </transition>
+</template>
+
+<script>
+import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+export default ({
+    name: "windshieldOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+            chipCountQuestionText: String,
+            chipCountAnswersFromCms: Array,
+            replaceOptionsQuestionText: String,
+            replaceOptionsAnswersFromCms: Array,
+        }
+    },
+
+    props: {
+        modelValue: Array,
+        selectedDamageLocations: Array,
+        selectedChipCount: Array,
+        selectedReplaceOptions: Array
+    },
+    mounted() {
+
+
+console.log(this);
+    },
+    methods: {
+        initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
+            windshieldReplaceOptionsQuestionFromCms){
+            this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
+            this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
+
+            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
+            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
+
+            this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
+            this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
+
+            //console.log(this.$refs.replaceOptionsQuestion);
+            
+            //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
+            // this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
+        }
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        selectedChipCountValues: {
+            get: function() {
+                return this.selectedChipCount;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedChipCount", newValue);
+            }
+        },
+        selectedReplaceOptionsValues: {
+            get: function() {
+                return this.selectedReplaceOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedReplaceOptions", newValue);
+            }
+        },
+        isWindshieldDamageLocation(){
+            return  this.selectedDamageLocations.some(selectedDamages => 
+                {
+                    const categoryAndGlass = selectedDamages.split('-'); //ie: selectedDamageLocations looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+                });
+        },
+        isRepairOptionSelected(){
+            return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
+        },
+    },
+    components: {
+        windshieldDamageTypeQuestion,
+        windshieldChipCountQuestion,
+        replaceOptionsQuestion
+    },
+})
+</script>

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 02/58] 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 e2bfed2b364309bd49fad845cb8903b8db04d946 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Tue, 15 Feb 2022 16:16:06 -0500
Subject: [PATCH 03/58] csr-269 wip

---
 .../replace-options-question.vue              |   8 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  40 +++----
 .../windshield-options/windshield-options.vue | 106 ++++++++++++------
 3 files changed, 94 insertions(+), 60 deletions(-)

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..1a21573d1 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
@@ -30,6 +30,9 @@ defineRule("replace-options-required", (value) => {
 
 export default ({
     name: "replaceOptionsQuestion",
+    updated() {
+        console.log("ro:modelValue=>" + this.modelValue);
+    },
     data(){
         return {
             questionText: String,
@@ -48,6 +51,7 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
+            console.log("ro:" + this.questionText);
         },
     },
     computed: {
@@ -56,6 +60,7 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
+                console.log("ro:newVal=>" + newValue);
                 this.$emit("update:modelValue", newValue);
             }
         },
@@ -64,7 +69,8 @@ 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 3bc47570c..1b2ce8ce2 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,9 +4,12 @@
         <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" />
+        <windshieldOptions ref="windshieldOptions" 
+          v-model="selectedWindshieldOptions" 
+          :selectedDamageLocations="selectedDamageLocations"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
-        <windshieldOptions ref="windshieldOptions" v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations" :selectedChipCount="selectedChipCount" />
     </div>
 </template>
 
@@ -18,7 +21,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from"@/layouts/vehicle-damage/damage-location-question/damage-location-question";
-import windshieldOptions from"@/layouts/vehicle-damage/windshield-options/windshield-options";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -30,8 +33,12 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
+  updated() {
+    console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
+    console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
+    console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
+  },
   async beforeRouteEnter(to, from, next) {
-    console.log("vd: beforeRoute");
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const damageOptionsPromise =
@@ -52,12 +59,10 @@ export default {
       },
     ];
 
-    console.log("vd: before settle");
     const resultMap = await settleAllPromises(promiseResultMap);
-    console.log("vd: after settle");
+
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
-      console.log("vd: next");
       vm.$refs.funnelHeader.initializeComponent(
         resultMap.cmsContent.FunnelHeaderWidget
       );
@@ -73,13 +78,12 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-      vm.$refs.funnelFooter.initializeComponent(
-        resultMap.cmsContent.FunnelFooterWidget
-      );
-      console.log("vd: initialize wo");
       vm.$refs.windshieldOptions.initializeComponent(
         resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
-        resultMap.cmsContent.WindshieldReplaceOptionsQuestion
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
       );
     });
   },
@@ -87,8 +91,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
-      selectedWindshieldOptions: [],
-      selectedChipCount: []
+      selectedWindshieldOptions: []
     }
   },
   methods: {
@@ -107,15 +110,6 @@ export default {
       );
     },
   },
-  //computed: {
-        // selectedWindshieldDamageType(){
-        //     return  this.modelValue.some(selectedDamages => 
-        //         {
-        //             const categoryAndGlass = selectedDamages.split('-'); //ie: model looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
-        //             return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
-        //         });
-        // },        
-    //},
   components: {
     funnelHeader,
     funnelFooter,
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index f5356b4d5..2f480f7bc 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,38 +1,42 @@
 <template>
     <transition name="fade">
-        <div class="windshield-options">
-            <!-- <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+        <div class="windshield-options" aria-live="polite">
+            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
                 v-if="isWindshieldDamageLocation"
                 :questionText="questionText"
                 :answersFromCms="answersFromCms"
+                :suppressError="suppressError"
                 groupName="WindshieldDamageTypeQuestion"
-                v-model="selectedValues" 
+                v-model="selectedWindshieldDamageTypeValues" 
             />
             <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
                 v-if="isWindshieldDamageLocation && isRepairOptionSelected"
                 :questionText="chipCountQuestionText"
                 :answersFromCms="chipCountAnswersFromCms"
                 groupName="WindshieldChipCountQuestion"
-                v-model="selectedChipCountValues" 
-            /> -->
-            <replaceOptionsQuestion :ref="replaceOptionsQuestion" 
-                v-if="isWindshieldDamageLocation"
+                v-model="selectedWindshieldChipCountValues" 
+            />
+            <replaceOptionsQuestion ref="replaceOptionsQuestion"
                 isAvailable
-                :questionText="replaceOptionsQuestionText"
-                :answersFromCms="replaceOptionsAnswersFromCms"
-                groupName="WindshieldChipCountQuestion"
-                v-model="selectedReplaceOptions" 
+                groupName="WindshieldReplaceOptions"
+                v-model="selectedWindshieldReplaceOptionsValues"
             />
         </div>
     </transition>
 </template>
 
 <script>
-import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
-import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
+    updated() {
+        console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
+        console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
+        // if (this.isReplaceOptionSelected)
+        //     this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
+    },
     data(){
         return {
             questionText: String,
@@ -41,6 +45,14 @@ export default ({
             chipCountAnswersFromCms: Array,
             replaceOptionsQuestionText: String,
             replaceOptionsAnswersFromCms: Array,
+            availableReplacementOptions: Array,
+            // wsrFromCms: Array,
+            // wsrOptions: Array,
+            sro:[],
+
+            selectedWindshieldDamageType: null,
+            selectedWindshieldChipCount: null,
+            selectedWindshieldReplaceOptions: [],
         }
     },
 
@@ -48,16 +60,13 @@ export default ({
         modelValue: Array,
         selectedDamageLocations: Array,
         selectedChipCount: Array,
-        selectedReplaceOptions: Array
+        selectedReplaceOptions: Array,
+        suppressError: Boolean
     },
-    mounted() {
 
-
-console.log(this);
-    },
     methods: {
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
-            windshieldReplaceOptionsQuestionFromCms){
+            windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
             this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
             this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
 
@@ -67,11 +76,19 @@ console.log(this);
             this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
             this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
 
-            //console.log(this.$refs.replaceOptionsQuestion);
-            
+            this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
+            this.wsrOptions = windshieldAvailableReplacementOptions;
+
             //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
-            // this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms.QuestionText, windshieldReplaceOptionsQuestionFromCms.Answers)
-        }
+            this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+        },
+        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
+            return {
+                selectedWindshieldDamageType: selectedWindshieldDamageType,
+                selectedWindshieldChipCount: selectedWindshieldChipCount,
+                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
+            }
+        },
     },
     computed: {
         selectedValues: {
@@ -79,35 +96,54 @@ console.log(this);
                 return this.modelValue;
             },
             set: function(newValue) {
+                //console.log("oldval=>" + this.modelValue);
                 this.$emit("update:modelValue", newValue);
+                // this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
             }
         },
-        selectedChipCountValues: {
+        selectedWindshieldDamageTypeValues:{
             get: function() {
-                return this.selectedChipCount;
+                return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
-                this.$emit("update:selectedChipCount", newValue);
+                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
             }
         },
-        selectedReplaceOptionsValues: {
+        selectedWindshieldChipCountValues: {
             get: function() {
-                return this.selectedReplaceOptions;
+                return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
-                this.$emit("update:selectedReplaceOptions", newValue);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
+                //console.log("here=>" + newValue);
+                //this.$emit("update:selectedChipCount", newValue);
             }
         },
-        isWindshieldDamageLocation(){
+        selectedWindshieldReplaceOptionsValues: {
+            get: function() {
+                return this.selectedValues.selectedWindshieldReplaceOptions;
+            },
+            set: function(newValue) {
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
+            }
+        },
+        isWindshieldDamageLocation() {
             return  this.selectedDamageLocations.some(selectedDamages => 
                 {
-                    const categoryAndGlass = selectedDamages.split('-'); //ie: selectedDamageLocations looks like "Suv-Windshield" so this Splits the answers into [0]"Suv" [1]"Windshield"
+                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
                     return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
                 });
         },
         isRepairOptionSelected(){
-            return this.modelValue.some(val => val.toUpperCase() === "REPAIR");
+            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
         },
+        // isReplaceOptionSelected(){
+        //     if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+
+        //     return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
+        // },
     },
     components: {
         windshieldDamageTypeQuestion,
@@ -115,6 +151,4 @@ console.log(this);
         replaceOptionsQuestion
     },
 })
-</script>
-
-        suppressError: Boolean,
\ No newline at end of file
+</script>
\ No newline at end of file

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 04/58] 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 05/58] 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 06/58] 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 07/58] 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 08/58] 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 09/58] 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 10/58] 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 5d866d0d0471857136eef68aeda9d88a461ce2be Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Thu, 17 Feb 2022 08:05:05 -0500
Subject: [PATCH 11/58] CSR-269

---
 .../button-question/button-question.vue       |  2 +-
 .../replace-options-question.spec.js          |  2 +-
 .../replace-options-question.vue              |  7 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  5 -
 .../windshield-damage-type-question.vue       | 99 -------------------
 .../windshield-chip-count-question.spec.js    | 71 +++++++++++++
 .../windshield-chip-count-question.vue        | 33 ++++---
 .../windshield-damage-type-question.vue       | 52 ++++++----
 .../windshield-options/windshield-options.vue | 51 +++-------
 9 files changed, 137 insertions(+), 185 deletions(-)
 delete mode 100644 src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 417230464..b7188d11a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -121,7 +121,7 @@ export default {
     },
   },
   mounted(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
+    if(Array.isArray(this.answers) && this.answers.length === 1 && this.selectedValues != undefined) {
       const newSelectedValues = this.selectedValues;
       newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
       this.selectedValues = newSelectedValues;
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..6098fc972 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});
   
       //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 1a21573d1..558ced3f1 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
@@ -2,7 +2,7 @@
     <transition name="fade">
         <div class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable && answersToDisplay.length > 0"
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
@@ -30,9 +30,6 @@ defineRule("replace-options-required", (value) => {
 
 export default ({
     name: "replaceOptionsQuestion",
-    updated() {
-        console.log("ro:modelValue=>" + this.modelValue);
-    },
     data(){
         return {
             questionText: String,
@@ -51,7 +48,6 @@ export default ({
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
-            console.log("ro:" + this.questionText);
         },
     },
     computed: {
@@ -60,7 +56,6 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
-                console.log("ro:newVal=>" + newValue);
                 this.$emit("update:modelValue", newValue);
             }
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 1b2ce8ce2..0c46b93a9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -33,11 +33,6 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
-  updated() {
-    console.log("vd:selectedWindshieldChipCount=>" + this.selectedWindshieldOptions.selectedWindshieldChipCount);
-    console.log("vd:selectedWindshieldDamageType=>" + this.selectedWindshieldOptions.selectedWindshieldDamageType);
-    console.log("vd:selectedWindshieldReplaceOptions=>" + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
-  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
deleted file mode 100644
index 686f10de9..000000000
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="windshield-damage-type-question">
-        <buttonQuestion
-            v-if="isAvailable && answersToDisplay.length > 1"
-            :questionText="questionText"
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="selectedValues"
-            validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-            :suppressError="suppressError"
-        />
-    </div>
-</template>
-
-<script>
-import buttonQuestion from "@/common-components/button-question/button-question";
-import store from "@/store";
-import { defineRule } from "vee-validate";
-
-// DEFINE VALIDATION RULES
-defineRule("windshield-damage-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
-defineRule("checkForRepairAndReplace", (value, [other]) => {
-    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
-        return "checkForRepairAndReplace error"
-    }
-    return true;
-});
-
-export default ({
-    name: "windshieldDamageTypeQuestion",
-    data(){
-        return {
-            questionText: String,
-            answersFromCms: Array,
-            damageOptions: Object,
-        }
-    },
-    props: {
-        isMultiSelect: Boolean,
-        modelValue: Array,
-        isAvailable: Boolean,
-        name: String,
-        groupName: String,
-        suppressError: Boolean,
-    },
-    methods: {
-        initializeComponent(cmsContent, damageOptions){
-            this.questionText = cmsContent.QuestionText;
-            this.answersFromCms = cmsContent.Answers;
-            this.damageOptions = damageOptions;
-        },
-    },
-    computed: {
-        selectedValues: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
-        damageOptionsMap(){
-            return {
-                Windshield: true,
-                SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
-                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
-            }
-        },
-        answersToDisplay(){
-            // HARD CODED MOCK DATA FOR NOW
-            return [
-                {
-                    "Name": "Windshield-Crack",
-                    "Text": "Crack",
-                    "SubText": "My damage is larger than six inches.",
-                    "ImageId": "2cf13fbb-22d8-4b61-bd3d-3d413ea58c87",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-replace-desktop-ds.png"
-                },
-                {
-                    "Name": "Windshield-Chip",
-                    "Text": "Chip(s)",
-                    "SubText": "I have three or fewer chips smaller than six inches.",
-                    "ImageId": "faaa14d9-3650-4949-a687-7665962337b8",
-                    "AnswerImageUrl": "https://fixmyglass.safelite.com/Shared/images/icon-repair-desktop-ds.png"
-                }
-            ]
-        },
-    },
-    components: {
-        buttonQuestion,
-    },
-})
-</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
new file mode 100644
index 000000000..5811bb1fa
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-chip-count-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: "Two" });
+      const chipCountToSelect = "Two";
+  
+      //Act
+      wrapper.setValue({ modelValue: chipCountToSelect });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
+    });
+  });
+
+  describe("Windshield-chip-count-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
+  
+      //Act
+      windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldChipCountQuestion",
+    cmsQuestionText = "How many chips are we repairing?",
+    cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp
+    };
+   
+    const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index fc3452dcb..41a3b872b 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -1,10 +1,11 @@
 <template>
     <transition name="fade">
-        <div class="windshield-chip-count">
+        <div class="windshield-chip-count-question">
             <buttonQuestion
-                :questionText="buttonQuestionText"
-                :answers="buttonAnswers"
-                :groupName="buttongroupName"
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
                 buttonType="listButtonHorizontal"
                 v-model="selectedChipCountValues"
             />
@@ -17,22 +18,24 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 
 export default ({
     name: "windshieldOptions",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },    
     props: {
         modelValue: Array,
-        questionText: String,
-        answersFromCms: Array,
         groupName: String,
+        isAvailable: Boolean,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        }
     },
     computed: {
-        buttonQuestionText() {
-            return this.questionText;
-        },
-        buttonAnswers() {
-            return this.answersFromCms;
-        },
-        buttongroupName() {
-            return this.groupName;
-        },
         selectedChipCountValues: {
             get: function() {
                 return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 911d3e8ad..bdc3b8cb5 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,12 +1,15 @@
 <template>
     <transition name="fade">
-        <div class="windshield-options">
+        <div class="windshield-damage-type-question">
             <buttonQuestion
-                :questionText="buttonQuestionText"
-                :answers="buttonAnswers"
-                :groupName="buttongroupName"
+                v-if="isAvailable"
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
+                validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+                :suppressError="suppressError"
             />
         </div>
     </transition>
@@ -14,30 +17,43 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
+import { defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("windshield-damage-required", (value) => {
+    if (!value || value.length < 1) {
+        return "Please select windshield damage";
+    }
+    return true;
+});
+defineRule("checkForRepairAndReplace", (value, [other]) => {
+    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+        return "checkForRepairAndReplace error"
+    }
+    return true;
+});
 
 export default ({
-    name: "windshieldOptions",
+    name: "windshieldDamageTypeQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array
+        }
+    },
     props: {
         modelValue: Array,
-        questionText: String,
-        answersFromCms: Array,
         groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
     },
     methods: {
-        initializeComponent(qt, an){
-            alert("hi");
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
         }
     },
     computed: {
-        buttonQuestionText() {
-            return this.questionText;
-        },
-        buttonAnswers() {
-            return this.answersFromCms;
-        },
-        buttongroupName() {
-            return this.groupName;
-        },
         selectedValues: {
             get: function() {
                 return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 2f480f7bc..9db08aa66 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -2,22 +2,18 @@
     <transition name="fade">
         <div class="windshield-options" aria-live="polite">
             <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
-                v-if="isWindshieldDamageLocation"
-                :questionText="questionText"
-                :answersFromCms="answersFromCms"
+                :isAvailable=isWindshieldDamageLocation
                 :suppressError="suppressError"
                 groupName="WindshieldDamageTypeQuestion"
                 v-model="selectedWindshieldDamageTypeValues" 
             />
             <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-                v-if="isWindshieldDamageLocation && isRepairOptionSelected"
-                :questionText="chipCountQuestionText"
-                :answersFromCms="chipCountAnswersFromCms"
+                :isAvailable=isRepairOptionSelected
                 groupName="WindshieldChipCountQuestion"
                 v-model="selectedWindshieldChipCountValues" 
             />
             <replaceOptionsQuestion ref="replaceOptionsQuestion"
-                isAvailable
+                :isAvailable=isReplaceOptionSelected
                 groupName="WindshieldReplaceOptions"
                 v-model="selectedWindshieldReplaceOptionsValues"
             />
@@ -31,24 +27,10 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
-    updated() {
-        console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
-        console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
-        // if (this.isReplaceOptionSelected)
-        //     this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
-    },
     data(){
         return {
-            questionText: String,
-            answersFromCms: Array,
             chipCountQuestionText: String,
             chipCountAnswersFromCms: Array,
-            replaceOptionsQuestionText: String,
-            replaceOptionsAnswersFromCms: Array,
-            availableReplacementOptions: Array,
-            // wsrFromCms: Array,
-            // wsrOptions: Array,
-            sro:[],
 
             selectedWindshieldDamageType: null,
             selectedWindshieldChipCount: null,
@@ -67,20 +49,13 @@ export default ({
     methods: {
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
             windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
-            this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
-            this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;
 
             this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
             this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
 
-            this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
-            this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;
-
-            this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
-            this.wsrOptions = windshieldAvailableReplacementOptions;
-
-            //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
-            this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+            this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
+            this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
+            this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
         },
         getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
             return {
@@ -96,9 +71,7 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
-                //console.log("oldval=>" + this.modelValue);
                 this.$emit("update:modelValue", newValue);
-                // this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
             }
         },
         selectedWindshieldDamageTypeValues:{
@@ -115,8 +88,6 @@ export default ({
             },
             set: function(newValue) {
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
-                //console.log("here=>" + newValue);
-                //this.$emit("update:selectedChipCount", newValue);
             }
         },
         selectedWindshieldReplaceOptionsValues: {
@@ -137,13 +108,13 @@ export default ({
         isRepairOptionSelected(){
             if (this.selectedWindshieldDamageTypeValues === undefined) return false;
 
-            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
         },
-        // isReplaceOptionSelected(){
-        //     if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+        isReplaceOptionSelected(){
+            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
 
-        //     return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
-        // },
+            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
+        },
     },
     components: {
         windshieldDamageTypeQuestion,

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 12/58] 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 13/58] 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 14/58] 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");
   });
+});

From 6526dbbbad91bac5d4aa83ed62ab95c7e7b0171c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 17 Feb 2022 11:21:48 -0500
Subject: [PATCH 15/58] CSR-296: add back glass replace options question

---
 .../button-question/button-question.vue       |  1 +
 .../replace-options-question.vue              |  9 +++---
 src/layouts/vehicle-damage/vehicle-damage.vue | 29 ++++++++++++++++---
 src/ux-components/list-card/list-card.vue     | 16 ++++------
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 417230464..0e17e9de7 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -121,6 +121,7 @@ export default {
     },
   },
   mounted(){
+    // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
     if(Array.isArray(this.answers) && this.answers.length === 1) {
       const newSelectedValues = this.selectedValues;
       newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
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..9a06e3502 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
@@ -2,9 +2,9 @@
     <transition name="fade">
         <div class="replace-options-question">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable && answersToDisplay.length > 0"
                 :questionText="questionText"
-                isMultiSelect
+                :isMultiSelect="isMultiSelect"
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
@@ -42,6 +42,7 @@ export default ({
         filterByVehicleCategory: Boolean,
         groupName: String,
         modelValue: Array,
+        isMultiSelect: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){
@@ -60,11 +61,11 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            return Array.isArray(this.answersFromCms) 
                 ? 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..0d454a754 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,8 +3,25 @@
         <funnelHeader ref="funnelHeader" />
         <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" />
+        <damageLocationQuestion
+          ref="damageLocation"
+          v-model="selectedDamageLocations"
+          groupName="DamageLocationQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="driverSideOptions"
+          isAvailable
+          isMultiSelect
+          filterByVehicleCategory
+          v-model="driverSideOptionsData"
+          groupName="DriverSideReplaceOptionsQuestion"
+        />
+        <replaceOptionsQuestion
+          ref="backGlassOptions"
+          isAvailable
+          v-model="selectedRearReplaceOptions"
+          groupName="BackGlassReplaceOptionsQuestion"
+        />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -62,11 +79,14 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
+      vm.$refs.damageLocation.initializeComponent(
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      );
       vm.$refs.driverSideOptions.initializeComponent(
         resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
       );
-      vm.$refs.damageLocation.initializeComponent(
-        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
@@ -77,6 +97,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      selectedRearReplaceOptions: [],
     }
   },
   methods: {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7550c9ec4..ae1102f12 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -74,16 +74,6 @@ export default {
     validationRules: String,
     selectedButtonIDs: [Array, String],
   },
-  data(){
-    return {
-      checkValue: Boolean,
-    }
-  },
-  created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-    }
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -96,6 +86,12 @@ export default {
         return "flex-column pt-4 pb-2";
       }
     },
+    checkValue() {
+      if(this.selectedButtonIDs){
+        return this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+      }
+      return false;
+    },
   },
   methods: {
     handleCheckChange(newValue, oldValue){

From 9e1273375676868f99ada56b9b84c45c274ce9cd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 17 Feb 2022 13:59:40 -0500
Subject: [PATCH 16/58] CSR-342 WIP & QA fix.

---
 jest.config.js                                |  1 +
 src/layouts/nested-radio-poc/nested-radio.vue | 27 +++++++++++++++++++
 src/router/index.js                           |  6 +++++
 .../list-button-horizontal.vue                |  2 ++
 4 files changed, 36 insertions(+)
 create mode 100644 src/layouts/nested-radio-poc/nested-radio.vue

diff --git a/jest.config.js b/jest.config.js
index b8beb88cc..4a2601c8f 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,6 +16,7 @@ module.exports = {
     "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/address-poc/address-poc.vue",
+    "!src/layouts/nested-radio-poc/nested-radio.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
new file mode 100644
index 000000000..6d05c4009
--- /dev/null
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -0,0 +1,27 @@
+<template>
+<h5>POC</h5>
+
+</template>
+
+<script>
+
+import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
+
+export default {
+  name: "nestedRadio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    screenReaderOnlyText: String,
+    hasError: Boolean,
+  },
+};
+
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 133a4106e..b564b7e94 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ import store from "@/store";
 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";
 
 const routes = [
   {
@@ -33,6 +34,11 @@ const routes = [
     name: "FormTest",
     component: FormTest,
   },
+  {
+    path: "/nested-radio", // This is a temporary route for testing.
+    name: "NestedRadio",
+    component: NestedRadio,
+  },
   {
     path: "/",
     name: "root",
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 cc712e613..52cad7e91 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -133,9 +133,11 @@ export default {
     height: 0;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
+      z-index: 3;
     }
     &:focus + label {
       box-shadow: 0 0 0 2px $blue;
+      z-index: 3;
     }
     &:checked + label {
       background: $blue-100;

From ab23fe5fe7efe0dfc615e56023fed631be70d8d2 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 08:50:45 -0500
Subject: [PATCH 17/58] CSR-341 WIP nested radio demo

---
 src/layouts/nested-radio-poc/nested-radio.vue | 92 +++++++++++++++---
 src/ux-components/list-card/list-card.vue     |  1 +
 src/ux-components/radio/radio.vue             | 94 ++++++++++---------
 3 files changed, 129 insertions(+), 58 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 6d05c4009..b5a317318 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,27 +1,89 @@
 <template>
-<h5>POC</h5>
+
+  <div class="container-fluid nested-radio">
+    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint, Blue Shade"
+        buttonID="radio1"
+        />
+      </div>
+    </div>
+    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+      <div class="col">
+        <p class="mb-0 fw-bold">Ok, select the features</p>
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, solar, 3rd visor band"
+        buttonID="button1"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+        />
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
+        buttonID="button2"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        />
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint"
+        buttonID="radio2"
+        />
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script>
-
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
-  props: {
-    groupName: String,
-    buttonLabel: String,
-    buttonID: String,
-    isRequired: Boolean,
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    screenReaderOnlyText: String,
-    hasError: Boolean,
-  },
+  components: {
+    radio,
+    listCard,
+  }
 };
-
 </script>
+
+<style lang="scss">
+.nested-radio {
+  padding: 20px; // For demo only
+  .ui-radio {
+    margin: .25rem 0;
+  }
+  p {
+    font-size: .875rem;
+  }
+  // For demo only
+  .show-hide {
+    max-height: 0;
+    transition: max-height 0.35s ease-out;
+    overflow: hidden;
+  }
+  .demo-animate {
+    &:hover {
+      + .show-hide {
+        max-height: 100px;
+        transition: max-height 0.35s ease-in;
+      }
+    }
+  }
+  // END for demo only
+}
+</style>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index b3124ccfb..0a2fcc297 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -173,6 +173,7 @@ export default {
     &:checked + label {
       p {
         color: $black;
+        font-weight: 500;
       }
       .sub-copy {
         color: $gray-600;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 83b0976b7..0762c0f6a 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-center radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -81,58 +81,66 @@ export default {
 .ui-radio {
   position: relative;
   input[type="radio"] {
-    position: absolute !important;
+    position: absolute!important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
+    clip: rect(1px,1px,1px,1px);
+    + .radio-label {
+      &:before {
+        content: '';
+        background: $white;
+        border-radius: 100%;
+        border: 1px solid $gray-500;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: .5rem;
+        vertical-align: top;
         cursor: pointer;
+        transition: all 250ms ease;
+        flex-shrink: 0;
       }
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 50%;
+    &:checked {
+      + .radio-label {
+        &:before {
+          background-color: $blue;
+          box-shadow: inset 0 0 0 2px $white;
+        }
+      }
     }
-    &:checked + label::before {
-      background: $white;
-      border: 1px solid $blue;
+    &:hover {
+      + label {
+        cursor: pointer;
+        &:before {
+          box-shadow: 0 0 0 4px #9fcee6;
+        }
+      }
     }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 3px;
-      height: 6px;
-      width: 6px;
-      transform: rotate(-45deg);
-      border: 5px solid $blue;
-      border-radius: 50%;
+    &:focus {
+      + label {
+        &:before {
+          box-shadow: 0 0 0 2px #1574a1;
+        }
+      }
     }
-    &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-300;
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $gray-550;
+          border-color: $gray-550;
+          background: $gray-550;
+        }
+      }
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
+        }
+      }
     }
   }
 }

From 495019b4716c0cca5efde3812657e0f21cb6bac8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 09:15:43 -0500
Subject: [PATCH 18/58] Set radio buttons to align top per Rachel.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 +-
 src/ux-components/checkbox/checkbox.vue       | 1 +
 src/ux-components/radio/radio.vue             | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index b5a317318..0795d8b59 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -79,7 +79,7 @@ export default {
   .demo-animate {
     &:hover {
       + .show-hide {
-        max-height: 100px;
+        max-height: 140px;
         transition: max-height 0.35s ease-in;
       }
     }
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 24c9e830e..d84c5b1c6 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -59,6 +59,7 @@ export default {
       background: white;
       border: 1px solid $gray-500;
       border-radius: 2px;
+      flex-shrink: 0;
     }
     &:checked + label::before {
       background: $blue;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 0762c0f6a..4265958c4 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged"
     />
-    <label class="d-flex align-items-center radio-label" :for="buttonID">
+    <label class="d-flex align-items-start radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -101,6 +101,7 @@ export default {
         cursor: pointer;
         transition: all 250ms ease;
         flex-shrink: 0;
+        top: .25rem;
       }
     }
     &:checked {

From 9b5fe2adf491ef2b4c23f54559cf647b69c4bdba Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 18 Feb 2022 09:48:29 -0500
Subject: [PATCH 19/58] Side Door Options

---
 .../side-door-options/side-door-options.vue   | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/layouts/vehicle-damage/side-door-options/side-door-options.vue

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
new file mode 100644
index 000000000..9f4cd0105
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="side-door-options">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonType="listCard"
+            v-model="selectedValues"
+        />
+        <replaceOptionsQuestion />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+
+export default ({
+    name: "replaceOptionsQuestion",
+    data(){
+        return {
+            questionText: String,
+            answersFromCms: Array,
+        }
+    },
+    props: {
+        groupName: String,
+        modelValue: Array,
+    },
+    methods: {
+        initializeComponent(cmsContent){
+            this.questionText = cmsContent.QuestionText;
+            this.answersFromCms = cmsContent.Answers;
+        },
+    },
+    computed: {
+        selectedValues: {
+            get: function() {
+                return this.modelValue;
+            },
+            set: function(newValue) {
+                this.$emit("update:modelValue", newValue);
+            }
+        },
+        answersToDisplay(){
+            return  Array.isArray(this.answersFromCms) 
+                ? this.answersFromCms.filter(ans => 
+                    {
+                        const name = ans.Name.split('-');
+                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                    }) 
+                : [];
+        },
+    },
+    components: {
+        buttonQuestion,
+        replaceOptionsQuestion,
+    }
+})
+</script>
\ No newline at end of file

From e00cb8d71aefdb83c0887357ed81f8ef648e8d35 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 09:50:27 -0500
Subject: [PATCH 20/58] CSR-269

---
 .../button-question/button-question.vue       |  2 +-
 .../replace-options-question.vue              |  2 +-
 .../vehicle-damage/vehicle-damage.spec.js     | 31 ++++++++
 src/layouts/vehicle-damage/vehicle-damage.vue |  7 +-
 .../windshield-chip-count-question.spec.js    | 12 ++--
 .../windshield-damage-type-question.spec.js   | 71 +++++++++++++++++++
 .../windshield-damage-type-question.vue       |  2 +-
 .../windshield-options/windshield-options.vue |  4 +-
 8 files changed, 118 insertions(+), 13 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 823ce79fd..c14c027b9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -127,7 +127,7 @@ export default {
   },
   methods: {
     handleCheckedChanged(val) {
-      if(this.isMultiSelect) {
+      if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
         val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
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 f47abea5d..28aa0831e 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
@@ -71,7 +71,7 @@ export default ({
         },
     },
     mounted(){
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
             const newSelectedValues = this.selectedValues;
             newSelectedValues.push(this.answersToDisplay[0].Name);
             this.selectedValues = newSelectedValues;
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..247fce2e9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -122,6 +122,37 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+
+
+describe("vehicle-damage.vue", () => {
+  test("Windshield Options ares initailized with api data", async (done) => {
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select Damage";
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
+      done();
+    });
+  });
+});
+
+
+
+
 describe("vehicle-damage.vue", () => {
   test("CarId set, arePagePrerequisitesValid should be true ", async () => {
     //Arrange
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 3c0df2599..b1ebfc6c8 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,12 +4,12 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <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" v-model="windshieldOptionsData" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
-        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -34,6 +34,9 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
+  updated() {
+      console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
+  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
index 5811bb1fa..123051d35 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -8,15 +8,15 @@ jest.mock("@/store", () => { return {}; }, {virtual: true});
 describe("windshield-chip-count-question.vue", () => {
     test("Selected chip count is emitted upon selection.", async () => {
       //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: "Two" });
-      const chipCountToSelect = "Two";
+      const { wrapper } = setupMocks({modelValueProp: ["One"]});
   
       //Act
-      wrapper.setValue({ modelValue: chipCountToSelect });
+      wrapper.setValue({ modelValue: ["Two"] });
       await wrapper.vm.$nextTick();
-  
+        
       //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Two" }]);
+      expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]);
     });
   });
 
@@ -24,7 +24,7 @@ describe("windshield-chip-count-question.vue", () => {
     test("Should display question and answers from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent } = setupMocks({modelValueProp: "One"});
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
   
       //Act
       windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
new file mode 100644
index 000000000..3bb64d695
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-damage-type-question.vue", () => {
+    test("Selected chip count is emitted upon selection.", async () => {
+      //Arrange
+      const { wrapper } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      wrapper.setValue({ modelValue: ["Replace"] });
+      await wrapper.vm.$nextTick();
+        
+      //Assert
+      expect(wrapper.vm.selectedValues).toEqual(["Repair"]);
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]);
+    });
+  });
+
+  describe("windshield-damage-type-question.vue", () => {
+    test("Should display question and answers from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]});
+  
+      //Act
+      windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+  
+      //Assert
+      expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?");
+      expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]);
+    });
+  });
+
+  function setupMocks({
+    modelValueProp = ["Two"],
+    groupName = "WindshieldDamageTypeQuestion",
+    cmsQuestionText = "What's your windshield damage?",
+    cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}],
+    dataFromStoreApi = [],
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp
+    };
+   
+    const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions);
+  
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    const damageOptions = dataFromStoreApi;
+    return { wrapper, cmsContent, damageOptions };
+  }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index bdc3b8cb5..78c72800c 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -19,7 +19,7 @@
 import buttonQuestion from "@/common-components/button-question/button-question";
 import { defineRule } from "vee-validate";
 
-// DEFINE VALIDATION RULES
+//DEFINE VALIDATION RULES
 defineRule("windshield-damage-required", (value) => {
     if (!value || value.length < 1) {
         return "Please select windshield damage";
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 9db08aa66..c917031aa 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -106,12 +106,12 @@ export default ({
                 });
         },
         isRepairOptionSelected(){
-            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+            if (!this.selectedWindshieldDamageTypeValues) return false;
 
             return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR") && this.isWindshieldDamageLocation;
         },
         isReplaceOptionSelected(){
-            if (this.selectedWindshieldDamageTypeValues === undefined) return false;
+            if (!this.selectedWindshieldDamageTypeValues) return false;
 
             return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
         },

From 3aa63cace6dcdba82f3e66b64fb70fa958a21982 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 18 Feb 2022 11:00:05 -0500
Subject: [PATCH 21/58] Updating button change functionality ternary

---
 .../list-button-horizontal/list-button-horizontal.vue           | 2 +-
 src/ux-components/list-button/list-button.vue                   | 2 +-
 src/ux-components/list-card/list-card.vue                       | 2 +-
 src/ux-components/radio/radio.vue                               | 2 +-
 4 files changed, 4 insertions(+), 4 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 52cad7e91..35a01ded9 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -13,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
     <label
       tabindex="-1"
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 3c5c4c27e..04a9c18e7 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -13,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
     <label
       tabindex="-1"
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index b3124ccfb..1fe25c408 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -13,7 +13,7 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange"
+        @change="handleCheckChange()"
       />
       <label
         :for="buttonID"
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 83b0976b7..aedead0eb 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -9,7 +9,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged"
+    @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>

From b96d85199f3040f2b5d3fa6868520177b676cdcb Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 11:26:51 -0500
Subject: [PATCH 22/58] Update checkbox to fix breakage with wordwrap.

---
 src/styles/common-error-styles.scss     |  1 +
 src/ux-components/checkbox/checkbox.vue | 82 +++++++------------------
 2 files changed, 22 insertions(+), 61 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d7d1c019d..2ca852f66 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -22,6 +22,7 @@
   }
   &.ui-radio,
   &.ui-checkbox {
+    input[type=checkbox],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index d84c5b1c6..10022b438 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,15 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
-    <input
-      type="checkbox"
-      aria-checked="false"
-      :name="checkboxName"
-      :id="buttonID"
-      :tabindex="tabIndex"
-      :aria-required="isRequired"
+  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <input class="form-check-input"
+    type="checkbox"
+    aria-checked="false"
+    :name="checkboxName"
+    :id="buttonID"
+    :tabindex="tabIndex"
+    :aria-required="isRequired"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -34,61 +34,21 @@ export default {
 </script>
 
 <style lang="scss">
-.ui-checkbox {
-  position: relative;
-  input[type="checkbox"] {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+    &:checked {
+      background-size: 125%;
+      border: 1px solid $blue;
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-      flex-shrink: 0;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 2px;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 12px;
-      transform: rotate(-45deg);
-    }
-    &:hover + label::before {
+    &:focus {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }

From e3cdbfbe6c624385ce652631b9bb5c652bc1cf6c Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 11:49:40 -0500
Subject: [PATCH 23/58] csr-269

---
 .../vehicle-damage/vehicle-damage.spec.js     | 31 -------------------
 .../windshield-options/windshield-options.vue |  4 +++
 2 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 247fce2e9..0e47eb37f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -122,37 +122,6 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
-
-
-describe("vehicle-damage.vue", () => {
-  test("Windshield Options ares initailized with api data", async (done) => {
-    //Arrange
-    const pageHeaderWidgetHeaderText = "Select Damage";
-    const { wrapper, apiPromise } = setupMocks({
-      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
-    });
-
-    //Act
-    vehicleDamage.beforeRouteEnter.call(
-      wrapper.vm,
-      { query: { fmgPage: "vehicle-damage" } },
-      undefined,
-      (c) => c(wrapper.vm)
-    );
-
-    //Assert
-    apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
-        pageHeaderWidgetHeaderText
-      );
-      done();
-    });
-  });
-});
-
-
-
-
 describe("vehicle-damage.vue", () => {
   test("CarId set, arePagePrerequisitesValid should be true ", async () => {
     //Arrange
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index c917031aa..8f57f61b7 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -79,6 +79,8 @@ export default ({
                 return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
+                this.selectedValues.selectedWindshieldChipCount = null;
+                this.selectedValues.selectedWindshieldReplaceOptions = null;
                 this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
             }
         },
@@ -87,6 +89,7 @@ export default ({
                 return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
+                this.selectedValues.selectedWindshieldReplaceOptions = null;
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
             }
         },
@@ -95,6 +98,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldReplaceOptions;
             },
             set: function(newValue) {
+                this.selectedValues.selectedWindshieldChipCount = null;
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
             }
         },

From 2dda277c752dac3cb0b87f23c46f14f8d08b303c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 12:23:22 -0500
Subject: [PATCH 24/58] Rebuild radio buttons.

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

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 10022b438..73eb562bf 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 5a2353bc4..9ae2ed8bf 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,8 +1,9 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
+    class="form-check-input"
     aria-checked="false"
     :name="groupName"
     :id="buttonID"
@@ -11,7 +12,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged()"
     />
-    <label class="d-flex align-items-start radio-label" :for="buttonID">
+    <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -77,71 +78,25 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.ui-radio {
-  position: relative;
-  input[type="radio"] {
-    position: absolute!important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px,1px,1px,1px);
-    + .radio-label {
-      &:before {
-        content: '';
-        background: $white;
-        border-radius: 100%;
-        border: 1px solid $gray-500;
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: relative;
-        margin-right: .5rem;
-        vertical-align: top;
-        cursor: pointer;
-        transition: all 250ms ease;
-        flex-shrink: 0;
-        top: .25rem;
-      }
-    }
+<style lang="scss" scoped>
+.form-check {
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 100%;
+    margin-right: .5rem;
     &:checked {
-      + .radio-label {
-        &:before {
-          background-color: $blue;
-          box-shadow: inset 0 0 0 2px $white;
-        }
-      }
-    }
-    &:hover {
-      + label {
-        cursor: pointer;
-        &:before {
-          box-shadow: 0 0 0 4px #9fcee6;
-        }
-      }
+      background-color: $white;
+      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");
     }
     &:focus {
-      + label {
-        &:before {
-          box-shadow: 0 0 0 2px #1574a1;
-        }
-      }
+      box-shadow: 0 0 0 4px $blue-300;
     }
-    &:disabled {
-      + .radio-label {
-        &:before {
-          box-shadow: inset 0 0 0 4px $gray-550;
-          border-color: $gray-550;
-          background: $gray-550;
-        }
-      }
-    }
-    + .radio-label {
-      &:empty {
-        &:before {
-          margin-right: 0;
-        }
-      }
+  }
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
     }
   }
 }

From 6372c72f04cd89681e1a95231a72feaac6830734 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 18 Feb 2022 13:31:37 -0500
Subject: [PATCH 25/58] CSS organize and cleanup.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 +-
 src/styles/common-error-styles.scss           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 0795d8b59..6fe3a753c 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -63,7 +63,6 @@ export default {
 
 <style lang="scss">
 .nested-radio {
-  padding: 20px; // For demo only
   .ui-radio {
     margin: .25rem 0;
   }
@@ -71,6 +70,7 @@ export default {
     font-size: .875rem;
   }
   // For demo only
+  padding: 20px;
   .show-hide {
     max-height: 0;
     transition: max-height 0.35s ease-out;
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 2ca852f66..4b9a18114 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -23,6 +23,7 @@
   &.ui-radio,
   &.ui-checkbox {
     input[type=checkbox],
+    input[type=radio],
     input[type=radio]+label:before,
     input[type=checkbox]+label:before {
       border: 1px solid $red;

From 470774f03dc4a15eefeab615c48fc0e413001378 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Fri, 18 Feb 2022 16:03:57 -0500
Subject: [PATCH 26/58] CSR-269

---
 .../vehicle-damage/vehicle-damage.spec.js     | 22 +++++++------
 src/layouts/vehicle-damage/vehicle-damage.vue |  3 --
 .../windshield-damage-type-question.vue       | 31 ++++++++++---------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..4a26b3426 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -6,6 +6,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -177,7 +178,7 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
     });
   });
@@ -198,8 +199,8 @@ function setupMocks({
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
       windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+        availableReplacementOptions: ["Single", "Driver", "Passenger"],
+      },
     },
   };
 
@@ -226,12 +227,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const windshieldOptions = replaceOptionsQuestion
-  windshieldOptions.methods = {
+  damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
-  damageLocationQuestion.methods = {
+  windshieldOptions.methods = {
     initializeComponent: jest.fn(),
   };
 
@@ -262,11 +262,13 @@ function setupMocks({
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
-  const windshieldOptionsWrapper = wrapper.findAllComponents({
-    name: "replaceOptionsQuestion",
-  }).at(1);
+  const windshieldOptionsWrapper = wrapper.findComponent({
+    name: "windshieldOptions",
+  });
+  
   windshieldOptionsWrapper.vm.initializeComponent =
-  replaceOptionsQuestion.methods.initializeComponent;
+  windshieldOptions.methods.initializeComponent;
+
 
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index b1ebfc6c8..998a43892 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -34,9 +34,6 @@ import baseMixin from "@/mixins/base-mixin";
 
 export default {
   name: "vehicle-damage",
-  updated() {
-      console.log(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions);
-  },
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 78c72800c..80656e0a4 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -8,8 +8,6 @@
                 :groupName="groupName"
                 buttonType="listCard"
                 v-model="selectedValues"
-                validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
-                :suppressError="suppressError"
             />
         </div>
     </transition>
@@ -17,21 +15,24 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-import { defineRule } from "vee-validate";
+//import { defineRule } from "vee-validate";
 
 //DEFINE VALIDATION RULES
-defineRule("windshield-damage-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select windshield damage";
-    }
-    return true;
-});
-defineRule("checkForRepairAndReplace", (value, [other]) => {
-    if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
-        return "checkForRepairAndReplace error"
-    }
-    return true;
-});
+// add these to the button component above:
+// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
+// :suppressError="suppressError"
+// defineRule("windshield-damage-required", (value) => {
+//     if (!value || value.length < 1) {
+//         return "Please select windshield damage";
+//     }
+//     return true;
+// });
+// defineRule("checkForRepairAndReplace", (value, [other]) => {
+//     if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
+//         return "checkForRepairAndReplace error"
+//     }
+//     return true;
+// });
 
 export default ({
     name: "windshieldDamageTypeQuestion",

From e16f08598e9b9e99784504894c83380aa5fded5b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 21 Feb 2022 10:32:04 -0500
Subject: [PATCH 27/58] CSR-342 replace radio with button-question.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 54 ++++++++-----------
 src/ux-components/radio/radio.vue             |  2 +-
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 6fe3a753c..d8404e838 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div class="container-fluid nested-radio">
-    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <listCard
         groupName="listcard1"
@@ -12,24 +12,17 @@
         />
       </div>
     </div>
-    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+    <div class="row mb-1">
       <div class="col">
         <p class="mb-0 fw-bold">Ok, select the features</p>
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, solar, 3rd visor band"
-        buttonID="button1"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
-        />
-        <radio ref="radio"
-        groupName="group1"
-        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
-        buttonID="button2"
-        isRequired
-        value="test button"
-        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        <buttonQuestion
+          buttonType="radio"
+          groupName="Demo Group"
+          buttonID="button1"
+          isRequired
+          value="test button"
+          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+          :answers="demoArray"
         />
       </div>
     </div>
@@ -49,14 +42,24 @@
 </template>
 
 <script>
+import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
+    buttonQuestion,
     radio,
     listCard,
+  },
+  data() {
+    return {
+      demoArray: [
+        "rain sensor, solar, 3rd visor band",
+        "rain sensor, heated glass, solar, 3rd visor band",
+      ]
+    }
   }
 };
 </script>
@@ -64,26 +67,11 @@ export default {
 <style lang="scss">
 .nested-radio {
   .ui-radio {
+    flex-direction: column;
     margin: .25rem 0;
   }
   p {
     font-size: .875rem;
   }
-  // For demo only
-  padding: 20px;
-  .show-hide {
-    max-height: 0;
-    transition: max-height 0.35s ease-out;
-    overflow: hidden;
-  }
-  .demo-animate {
-    &:hover {
-      + .show-hide {
-        max-height: 140px;
-        transition: max-height 0.35s ease-in;
-      }
-    }
-  }
-  // END for demo only
 }
 </style>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 9ae2ed8bf..952aefb1d 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 form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
     class="form-check-input"

From a76f3f75a28d796939629e7f4925c71bc91e2b6d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 21 Feb 2022 12:32:10 -0500
Subject: [PATCH 28/58] Remove unused component.

---
 src/layouts/nested-radio-poc/nested-radio.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index d8404e838..3bdeba866 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -44,13 +44,11 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 import listCard from "@/ux-components/list-card/list-card";
-import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
   components: {
     buttonQuestion,
-    radio,
     listCard,
   },
   data() {

From 8974aa464cbd377d3c3276f1cd24f73275bfa041 Mon Sep 17 00:00:00 2001
From: CarlNation <carl.nation@safelite.com>
Date: Mon, 21 Feb 2022 15:48:23 -0500
Subject: [PATCH 29/58] CSR-269 reset fields and remove unused

---
 .../windshield-options/windshield-options.vue | 23 +++----------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 8f57f61b7..db6569709 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -27,16 +27,6 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 export default ({
     name: "windshieldOptions",
-    data(){
-        return {
-            chipCountQuestionText: String,
-            chipCountAnswersFromCms: Array,
-
-            selectedWindshieldDamageType: null,
-            selectedWindshieldChipCount: null,
-            selectedWindshieldReplaceOptions: [],
-        }
-    },
 
     props: {
         modelValue: Array,
@@ -50,9 +40,6 @@ export default ({
         initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
             windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
 
-            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
-            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;
-
             this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
             this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
             this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
@@ -79,9 +66,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldDamageType;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldChipCount = null;
-                this.selectedValues.selectedWindshieldReplaceOptions = null;
-                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
+                this.selectedValues = this.getWindshieldOptions(newValue, null, null);
             }
         },
         selectedWindshieldChipCountValues: {
@@ -89,8 +74,7 @@ export default ({
                 return this.selectedValues.selectedChipCount;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldReplaceOptions = null;
-                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, null);
             }
         },
         selectedWindshieldReplaceOptionsValues: {
@@ -98,8 +82,7 @@ export default ({
                 return this.selectedValues.selectedWindshieldReplaceOptions;
             },
             set: function(newValue) {
-                this.selectedValues.selectedWindshieldChipCount = null;
-                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
+                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, null, newValue);
             }
         },
         isWindshieldDamageLocation() {

From 1e68d8c293f23b31234374713279cd24c4b65e74 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 09:57:31 -0500
Subject: [PATCH 30/58] CSR-341 Set z-index to fix overlap issue.

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 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 35a01ded9..af7044a04 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -133,7 +133,7 @@ export default {
     height: 0;
     &:focus-visible + label {
       box-shadow: 0 0 0 2px $blue;
-      z-index: 3;
+      z-index: 2;
     }
     &:focus + label {
       box-shadow: 0 0 0 2px $blue;
@@ -159,7 +159,7 @@ export default {
     &:hover {
       box-shadow: 0 0 0 4px $blue-300;
       cursor: pointer;
-      z-index: 3 !important;
+      z-index: 4 !important;
     }
     + p {
       display: none;

From 830c4749555e1029636cc4e1ca308e7ee5a6e147 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:28:02 -0500
Subject: [PATCH 31/58] Adding groupname to buttons buttonIDs to ensure they
 are unique, and adjusting button emits to emit button value

---
 .../button-question/button-question.spec.js        |  4 ++--
 .../button-question/button-question.vue            | 14 ++++++++------
 .../list-button-horizontal.spec.js                 |  6 +++---
 .../list-button-horizontal.vue                     | 10 +++++-----
 src/ux-components/list-button/list-button.spec.js  |  6 +++---
 src/ux-components/list-button/list-button.vue      | 10 +++++-----
 src/ux-components/list-card/list-card.spec.js      |  8 ++++----
 src/ux-components/list-card/list-card.vue          | 10 +++++-----
 src/ux-components/radio/radio.vue                  |  2 +-
 9 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 464fcf245..d36b73012 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -53,7 +53,7 @@ describe("buttonQuestion.vue", () => {
       answers: ["2022", "2021", "2020"],
       isMultiSelect: false
     });
-    const val = {isChecked: true, buttonId: "2021", }
+    const val = {checkValue: true, value: "2021", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
@@ -69,7 +69,7 @@ describe("buttonQuestion.vue", () => {
         isMultiSelect: true,
       }
     });
-    const val = {isChecked: true, buttonId: "2019", }
+    const val = {checkValue: true, value: "2019", }
     wrapper.vm.handleCheckedChanged(val);
     // Assert
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e8cf4a967..71d79b31f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -12,7 +12,7 @@
               v-for="answer in answers"
               :key="answer.Name ? answer.Name : answer"
               @isCheckedChanged="handleCheckedChanged"
-              :buttonID="answer.Name ? answer.Name : answer"
+              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
               :value="answer.Name ? answer.Name : answer"
               :buttonLabel="answer.Text ? answer.Text : answer"
               :buttonLabelSubCopy="answer.SubText"
@@ -29,7 +29,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="getColLength"
-              :selectedButtonIDs="selectedValues"
+              :selectedValues="selectedValues"
               data-test="button"
               :validationRules="validationRules"
             />
@@ -124,11 +124,13 @@ export default {
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit
-        const newSelectedValues = this.selectedValues;
-        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
-        this.selectedValues = newSelectedValues;
+        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.buttonId];
+        this.selectedValues = [val.value];
       }
     },
   },
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 d1175620c..f95b378d7 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
@@ -161,7 +161,7 @@ describe("list-button-horizontal.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -172,7 +172,7 @@ describe("list-button-horizontal.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -189,7 +189,7 @@ describe("list-button-horizontal.vue", () => {
         isWide: false,
         modelValue: ["List Card Checkbox"],
         isMultiSelect: false,
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
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 35a01ded9..b6f33676b 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -9,7 +9,7 @@
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
       :name="groupName"
-      :value="buttonID"
+      :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
@@ -69,7 +69,7 @@ export default {
       type: String,
       default: "",
     },
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -79,8 +79,8 @@ export default {
     };
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   methods: {
@@ -97,7 +97,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 1e900ce62..18707e45f 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -159,7 +159,7 @@ describe("list-button.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -170,7 +170,7 @@ describe("list-button.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -186,7 +186,7 @@ describe("list-button.vue", () => {
         isRequired: true,
         isWide: false,
         modelValue: ["List Card Checkbox"],
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 04a9c18e7..4727f9743 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -9,7 +9,7 @@
       :type="isMultiSelect ? 'checkbox' : 'radio'"
       :id="buttonID"
       :name="groupName"
-      :value="buttonID"
+      :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
@@ -71,7 +71,7 @@ export default {
       type: [String, Number],
       default: "",
     },
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data() {
@@ -81,8 +81,8 @@ export default {
     };
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   methods: {
@@ -99,7 +99,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     },
   },
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 30af40ec3..a345c7b18 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -197,7 +197,7 @@ describe("list-card.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
@@ -208,7 +208,7 @@ describe("list-card.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -217,14 +217,14 @@ describe("list-card.vue", () => {
       propsData: {
         isRadioHorizontal: true,
         buttonLabel: "Windshield",
-        buttonID: "List Card Checkbox",
+        value: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
         modelValue: ["List Card Checkbox"],
-        selectedButtonIDs: ["Car-Front"]
+        selectedValues: ["Car-Front"]
       },
     });
     // Assert
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 1fe25c408..59518deb7 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -8,7 +8,7 @@
         :type="isMultiSelect ? 'checkbox' : 'radio'"
         :id="buttonID"
         :name="groupName"
-        :value="buttonID"
+        :value="value"
         :aria-required="isRequired"
         :data-focus-target="groupName"
         @click="handleChange(value)"
@@ -70,7 +70,7 @@ export default {
     },
     colLength: String,
     validationRules: String,
-    selectedButtonIDs: [Array, String],
+    selectedValues: [Array, String],
     hasError: Boolean,
   },
   data(){
@@ -79,8 +79,8 @@ export default {
     }
   },
   created(){
-    if(this.selectedButtonIDs){
-      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    if(Array.isArray(this.selectedValues)){
+      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
     }
   },
   computed: {
@@ -100,7 +100,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index aedead0eb..209b7ddab 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -54,7 +54,7 @@ export default {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
       }
     }
   },

From 1dfee19cfd02515b2e24c9f06c22ef87b6c1b198 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:29:16 -0500
Subject: [PATCH 32/58] Creating side-door-options component

---
 .../damage-location-question.spec.js          |   2 +-
 .../damage-location-question.vue              |   7 +-
 .../replace-options-question.spec.js          |   2 +-
 .../replace-options-question.vue              |  17 ++-
 .../side-door-options.spec.js                 | 124 ++++++++++++++++++
 .../side-door-options/side-door-options.vue   |  77 ++++++++++-
 .../vehicle-damage/vehicle-damage.spec.js     |  44 ++-----
 src/layouts/vehicle-damage/vehicle-damage.vue |  20 +--
 8 files changed, 233 insertions(+), 60 deletions(-)
 create mode 100644 src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js

diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index 01f063eef..92feec9b8 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
       damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
     });
   });
 
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 58a74a31c..89b3244e3 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
@@ -67,13 +67,18 @@ export default ({
             }
         },
         answersToDisplay(){
-            return Array.isArray(this.answersFromCms) 
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
                     }) 
                 : [];
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
     },
     components: {
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 df8a16f90..8a5ad8a50 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
@@ -30,7 +30,7 @@ describe("replace-options-question.vue", () => {
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
   
       //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
     });
   });
 
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 f47abea5d..081df53a8 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,7 @@
 <template>
-    <transition name="fade">
-        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
+    <transition name="fade" mode="out-in">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable"
                 isWide
                 :questionText="questionText"
                 isMultiSelect
@@ -61,17 +60,23 @@ export default ({
             }
         },
         answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
                         return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
     },
     mounted(){
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
             const newSelectedValues = this.selectedValues;
             newSelectedValues.push(this.answersToDisplay[0].Name);
             this.selectedValues = newSelectedValues;
@@ -86,7 +91,7 @@ export default ({
 <style lang="scss" scoped>
     .fade-enter-active,
     .fade-leave-active {
-        transition: opacity 0.5s ease;
+        transition: opacity 0.3s ease;
     }
 
     .fade-enter-from,
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
new file mode 100644
index 000000000..32e6cf7f7
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -0,0 +1,124 @@
+import { shallowMount } from "@vue/test-utils";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+    test("Selected side door option is emitted upon selection.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+      const sideDoorOptions = ["Backseat"];
+  
+      //Act
+      wrapper.setValue({ modelValue: sideDoorOptions });
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected door side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected driver side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
+    });
+  });
+
+  describe("replace-options-question.vue", () => {
+    test("Selected passenger side option is updated when selection made.", async () => {
+  
+      //Arrange
+      const { wrapper } = setupMocks({});
+  
+      //Act
+      wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]
+      await wrapper.vm.$nextTick();
+  
+      //Assert
+      expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
+    });
+  });
+
+
+  describe("replace-options-question.vue", () => {
+    test("Answers to display filtered by data from api.", async () => {
+  
+      //Arrange
+      const { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions } = setupMocks({});
+  
+      //Act
+      sideDoorOptions.methods.initializeComponent.call(wrapper.vm, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions, "car-group");
+  
+      //Assert
+      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'DriverSide' }, { Name: 'PassengerSide' } ])
+    });
+  });
+  
+
+  function setupMocks({
+    modelValueProp = ["DriverSide"],
+    groupName = "sideDoorOptions",
+    cmsQuestionText = "CMS text goes here",
+    cmsAnswers = [{Name: "Car-DriverSide"}, {Name: "Car-PassengerSide"}],
+    driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
+    passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
+    driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
+    passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"]
+  }) {
+    
+    //Mock store
+    store.dispatch = jest.fn(() => dataFromStoreApi);
+    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+    const mountOptions = getMountOptions({
+      store: {
+        dispatch: store.dispatch,
+        getters: store.getters,
+      },
+    });
+  
+    //Mock props
+    mountOptions.propsData = {
+      modelValue: modelValueProp,
+      groupName: groupName,
+    };
+   
+    const wrapper = shallowMount(sideDoorOptions, mountOptions);
+  
+    const OptionsWrapper = wrapper.findAllComponents({name: "replaceOptionsQuestion"});
+    OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+    OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+    //Mock CMS content
+    const cmsContent = {
+      groupName: groupName,
+      QuestionText: cmsQuestionText,
+      Answers: cmsAnswers,
+    };
+    return { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions };
+  }
\ No newline at end of file
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 9f4cd0105..63aedf580 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
@@ -6,9 +6,12 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="selectedValues"
+            v-model="selectedDoorSidesValues"
         />
-        <replaceOptionsQuestion />
+        
+        <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
+
+        <replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
     </div>
 </template>
 
@@ -18,11 +21,15 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 import store from "@/store";
 
 export default ({
-    name: "replaceOptionsQuestion",
+    name: "sideDoorOptions",
     data(){
         return {
             questionText: String,
             answersFromCms: Array,
+            selectedDoorSides: [],
+            // Child component data
+            selectedDriverSideReplacOptions: [],
+            selectedPassengerSideReplaceOptions: [],
         }
     },
     props: {
@@ -30,9 +37,19 @@ export default ({
         modelValue: Array,
     },
     methods: {
-        initializeComponent(cmsContent){
+        initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
+            // Child Components intialize
+            this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
+            this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
+        },
+        getSideDoorReplacementOptions(){
+            return {
+                selectedDoorSides: this.selectedDoorSides,
+                selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
+                selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
+            }
         },
     },
     computed: {
@@ -44,15 +61,61 @@ export default ({
                 this.$emit("update:modelValue", newValue);
             }
         },
-        answersToDisplay(){
-            return  Array.isArray(this.answersFromCms) 
+        selectedDoorSidesValues: {
+            get: function() {
+                return this.selectedDoorSides;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedDoorSides", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+        selectedDriverSideReplacOptionsValues: {
+            get: function() {
+                return this.selectedDriverSideReplacOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedDriverSideReplacOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+        selectedPassengerSideReplaceOptionsValues: {
+            get: function() {
+                return this.selectedPassengerSideReplaceOptions;
+            },
+            set: function(newValue) {
+                this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
+                this.selectedValues = this.getSideDoorReplacementOptions();
+            }
+        },
+         answersToDisplay(){
+            const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]);
+                        return name[0].toUpperCase() === store.getters.vehicle.category;
                     }) 
                 : [];
+
+            return filteredAnswers.map(ans => {
+                const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+                ans.Name = newName;
+                return ans;
+            });
         },
+        isDriverSideReplaceOptionsQuestionAvailable(){
+            return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide");
+        },
+        isPassengerSideReplaceOptionsQuestionAvailable(){
+            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,
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..c7d994b89 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -4,7 +4,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 
 // Supporting Files
@@ -171,16 +171,6 @@ function setupMocks({
 }) {
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-    return Promise.resolve({
-      driverSideOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-      windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-    });
-  });
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -197,7 +187,7 @@ function setupMocks({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
       },
-      windshieldOptions: {
+      passengerSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
@@ -221,20 +211,14 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
-  const driverSideOptions = replaceOptionsQuestion
-  driverSideOptions.methods = {
-    initializeComponent: jest.fn(),
-  };
-
-  const windshieldOptions = replaceOptionsQuestion
-  windshieldOptions.methods = {
-    initializeComponent: jest.fn(),
-  };
-
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
 
+  sideDoorOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   funnelFooter.methods = {
     initializeComponent: jest.fn(),
   }
@@ -250,24 +234,16 @@ function setupMocks({
   vehicleBannerWrapper.vm.initializeComponent =
     vehicleBanner.methods.initializeComponent;
 
+  const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
+  sideDoorOptionsWrapper.vm.initializeComponent =
+  sideDoorOptions.methods.initializeComponent;
+
   const funnelSubHeaderWrapper = wrapper.findComponent({
     name: "funnelSubHeader",
   });
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  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",
   });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8a85de6b5..cbcdfe0f5 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,8 +4,7 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <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" v-model="windshieldOptionsData" />
+        <sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -16,7 +15,7 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 
 // Supporting files
@@ -63,14 +62,11 @@ export default {
       vm.$refs.funnelSubHeader.initializeComponent(
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
-      vm.$refs.driverSideOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
-      );
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-      vm.$refs.windshieldOptions.initializeComponent(
-        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
       );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
@@ -80,7 +76,11 @@ export default {
   data(){
     return {
       selectedDamageLocations: [],
-      driverSideOptionsData: [],
+      sideDoorOptionsData: {
+        selectedDoorSides: [],
+        selectedDriverSideReplacOptions: [],
+        selectedPassengerSideReplaceOptions: []
+      },
       windshieldOptionsData: [],
     }
   },
@@ -105,7 +105,7 @@ export default {
     funnelFooter,
     vehicleBanner,
     funnelSubHeader,
-    replaceOptionsQuestion,
+    sideDoorOptions,
     damageLocationQuestion,
   },
 };

From 85378bbec5b97425b952db4d7cd4d22a5ff580c1 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 10:53:22 -0500
Subject: [PATCH 33/58] Move stripping vehicle category off from values logic
 into damage locations widget

---
 .../vehicle-damage/windshield-options/windshield-options.vue   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index db6569709..e407b33a9 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -88,8 +88,7 @@ export default ({
         isWindshieldDamageLocation() {
             return  this.selectedDamageLocations.some(selectedDamages => 
                 {
-                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
-                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
+                    return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                 });
         },
         isRepairOptionSelected(){

From a4065160698f11896155f4d927b855ceb167c24c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 12:44:56 -0500
Subject: [PATCH 34/58] Fixing unit test for merged changes

---
 src/layouts/vehicle-damage/vehicle-damage.spec.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index a25c3eb4c..60590ba84 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -190,7 +190,7 @@ function setupMocks({
       },
       passengerSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
       windshieldOptions: {
         availableReplacementOptions: ["Single", "Driver", "Passenger"],
       },
@@ -246,6 +246,13 @@ function setupMocks({
   sideDoorOptionsWrapper.vm.initializeComponent =
   sideDoorOptions.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findComponent({
+    name: "windshieldOptions",
+  });
+  
+  windshieldOptionsWrapper.vm.initializeComponent =
+  windshieldOptions.methods.initializeComponent;
+
   const funnelSubHeaderWrapper = wrapper.findComponent({
     name: "funnelSubHeader",
   });

From b14f2c7359fdec33fd740eb219abcfc71fb14663 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 22 Feb 2022 13:11:46 -0500
Subject: [PATCH 35/58] CSR-296: create/clean up unit tests

---
 .../replace-options-question.spec.js          | 180 +++++++++++-------
 .../replace-options-question.vue              |  22 ++-
 .../vehicle-damage/vehicle-damage.spec.js     |  72 +++++--
 src/layouts/vehicle-damage/vehicle-damage.vue |  16 +-
 src/ux-components/list-card/list-card.vue     |  16 +-
 5 files changed, 216 insertions(+), 90 deletions(-)

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 df8a16f90..4d18fbd1c 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
@@ -1,76 +1,128 @@
 import { shallowMount } from "@vue/test-utils";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
 import store from "@/store";
 jest.mock("@/store", () => { return {}; }, {virtual: true});
 
 describe("replace-options-question.vue", () => {
-    test("Selected damage option is emitted upon selection.", async () => {
-  
-      //Arrange
-      const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
-      const damageToSelect = ["Backseat"];
-  
-      //Act
-      wrapper.setValue({ modelValue: damageToSelect });
-      await wrapper.vm.$nextTick();
-  
-      //Assert
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
-    });
-  });
+  test("Selected damage option is emitted upon selection.", async () => {
 
-  describe("replace-options-question.vue", () => {
-    test("Answers to display filtered by data from api.", async () => {
-  
-      //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
-  
-      //Act
-      replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
-  
-      //Assert
-      expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
-    });
-  });
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+    const damageToSelect = ["Backseat"];
 
-  function setupMocks({
-    modelValueProp = ["Windshield"],
-    isAvailale = true,
-    isMultiSelect = false,
-    filterByVehicleCategory = false,
-    groupName = "damageQuestion",
-    cmsQuestionText = "CMS text goes here",
-    cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
-    dataFromStoreApi = [],
-  }) {
-    
-    //Mock store
-    store.dispatch = jest.fn(() => dataFromStoreApi);
-    store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
-    const mountOptions = getMountOptions({
-      store: {
-        dispatch: store.dispatch,
-        getters: store.getters,
+    //Act
+    wrapper.setValue({ modelValue: damageToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("Answers to display filtered by data from api.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
+
+    //Act
+    replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+
+    //Assert
+    expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("when updateSelectedValues method is called with a single answerToDisplay it will update this.selectedValues", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions
+     } = setupMocks({ 
+      modelValueProp: [],
+     });
+    wrapper.setData({answersFromCms: [
+      {
+          "Name": "Stationary",
       },
-    });
+      {
+          "Name": "Slider",
+      }
+    ]});
+    wrapper.setData({replaceOptions: ["Stationary"]});
+
+    //Act
+    wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
+
+    //Assert
+    expect(wrapper.vm.selectedValues).toStrictEqual(['Stationary']);
+    
+  });
+});
+
+describe("replace-options-question.vue", () => {
+  test("when isAvailable is true, will run updateSelectedValues method", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent, replaceOptions } = setupMocks({ isAvailable: false, methodsToMock: ["updateSelectedValues"] });
+
+    //Act
+    wrapper.vm.$options.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+    wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true);
+
+    //Assert
+    expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+});
+
+
+
+function setupMocks({
+  modelValueProp = ["Windshield"],
+  isAvailable = true,
+  isMultiSelect = false,
+  filterByVehicleCategory = false,
+  groupName = "damageQuestion",
+  cmsQuestionText = "CMS text goes here",
+  cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+  dataFromStoreApi = [],
+  methodsToMock = [],
+}) {
   
-    //Mock props
-    mountOptions.propsData = {
-      modelValue: modelValueProp,
-      isAvailable: isAvailale,
-      isMultiSelect: isMultiSelect,
-      filterByVehicleCategory: filterByVehicleCategory
-    };
-   
-    const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+    isAvailable: isAvailable,
+    isMultiSelect: isMultiSelect,
+    filterByVehicleCategory: filterByVehicleCategory
+  };
+
+  //Mock methods
+  methodsToMock.forEach((methodName) => {
+    replaceOptionsQuestion.methods[methodName] = jest.fn();
+  });
   
-    //Mock CMS content
-    const cmsContent = {
-      groupName: groupName,
-      QuestionText: cmsQuestionText,
-      Answers: cmsAnswers,
-    };
-    const replaceOptions = dataFromStoreApi;
-    return { wrapper, cmsContent, replaceOptions };
-  }
\ No newline at end of file
+  const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    groupName: groupName,
+    QuestionText: cmsQuestionText,
+    Answers: cmsAnswers,
+  };
+  const replaceOptions = dataFromStoreApi;
+  return { wrapper, cmsContent, replaceOptions };
+}
\ No newline at end of file
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 20cd1ba57..419b15f7f 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,6 +1,6 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXX' : ''">
+        <div class="replace-options-question">
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 0"
                 isWide
@@ -51,6 +51,15 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+                const newSelectedValues = this.selectedValues;
+                newSelectedValues.push(this.answersToDisplay[0].Name);
+                console.log('YES, ONLY ONE, newSelectedValues: ', newSelectedValues)
+                this.selectedValues = newSelectedValues;
+            }
+        },
     },
     computed: {
         selectedValues: {
@@ -71,12 +80,11 @@ export default ({
                 : [];
         },
     },
-    mounted(){
-        // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-            const newSelectedValues = this.selectedValues;
-            newSelectedValues.push(this.answersToDisplay[0].Name);
-            this.selectedValues = newSelectedValues;
+    watch: {
+        isAvailable(val) {
+            console.log('CHANGE DETECTED in isAvailable, val: ', val)
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
         }
     },
     components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 0e47eb37f..0103aa866 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -165,22 +165,61 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.backButtonAction();
+
+    //Assert
+    expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+  });
+});
+
+describe("vehicle-damage.vue", () => {
+  test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({});
+
+    //Act
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
+
+    wrapper.vm.selectedDamageLocations = ["Car-RearWindow"];
+
+    //Assert
+    expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
+
+  });
+});
+
 function setupMocks({
   pageHeaderWidgetHeaderText = {},
-  mountOptionsMockData = {},
+  mountOptionsMockData = {
+    router: {
+      navigate: jest.fn(),
+    },
+  },
 }) {
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
-  baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-    return Promise.resolve({
-      driverSideOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-      windshieldOptions: {
-        availableReplacementOptions: ["Front", "Back", "Side"],
-      },
-    });
-  });
+
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -199,7 +238,10 @@ function setupMocks({
       },
       windshieldOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      backGlassOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     },
   };
 
@@ -268,6 +310,12 @@ function setupMocks({
   windshieldOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const backGlassOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(2);
+  backGlassOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9cd4cec24..810df1417 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -23,7 +23,7 @@
         />
         <replaceOptionsQuestion
           ref="backGlassOptions"
-          isAvailable
+          :isAvailable="isRearWindowDamageLocation"
           v-model="selectedRearReplaceOptions"
           groupName="BackGlassReplaceOptionsQuestion"
         />
@@ -101,6 +101,20 @@ export default {
       );
     });
   },
+  computed: {
+    isRearWindowDamageLocation() {
+      if (this.selectedDamageLocations) {
+        const myTest = this.selectedDamageLocations.some(selectedDamages => 
+          {
+              const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
+              return Boolean(categoryAndGlass[1].toUpperCase() === "REARWINDOW");
+          });
+        return myTest;
+      } else {
+        return false;
+      }
+    },
+  },
   data(){
     return {
       selectedDamageLocations: [],
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index e42e1b7cb..45de35317 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -85,12 +85,16 @@ export default {
         return "flex-column pt-4 pb-2";
       }
     },
-    checkValue() {
-      if(this.selectedButtonIDs){
-        return this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
-      }
-      return false;
-    },
+  },
+  data(){
+    return {
+      checkValue: Boolean,
+    }
+  },
+  created(){
+    if(this.selectedButtonIDs){
+      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    }
   },
   methods: {
     handleCheckChange(newValue, oldValue){

From 2e26ddba39043378f114782690b5150093ea3f5c Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 15:06:35 -0500
Subject: [PATCH 36/58] Creating fade animation

---
 src/App.vue                                   |  1 +
 .../replace-options-question.vue              | 12 ------
 .../side-door-options/side-door-options.vue   | 21 ++++++----
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../windshield-chip-count-question.vue        |  7 ++--
 .../windshield-damage-type-question.vue       |  7 ++--
 .../windshield-options/windshield-options.vue | 38 +++++++++----------
 src/styles/common-animations.scss             |  9 +++++
 8 files changed, 48 insertions(+), 49 deletions(-)
 create mode 100644 src/styles/common-animations.scss

diff --git a/src/App.vue b/src/App.vue
index 76a01d29c..603bd2cb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
+  @import "@/styles/common-animations.scss";
 </style>
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 081df53a8..79827cfad 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
@@ -87,15 +87,3 @@ export default ({
     }
 })
 </script>
-
-<style lang="scss" scoped>
-    .fade-enter-active,
-    .fade-leave-active {
-        transition: opacity 0.3s ease;
-    }
-
-    .fade-enter-from,
-    .fade-leave-to {
-        opacity: 0;
-    }
-</style>
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 63aedf580..1372f23f6 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
@@ -1,13 +1,17 @@
 <template>
     <div class="side-door-options">
-        <buttonQuestion
-            :questionText="questionText"
-            isMultiSelect
-            :answers="answersToDisplay"
-            :groupName="groupName"
-            buttonType="listCard"
-            v-model="selectedDoorSidesValues"
-        />
+        <transition name="fade" mode="out-in">
+            <div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
+                <buttonQuestion
+                    :questionText="questionText"
+                    isMultiSelect
+                    :answers="answersToDisplay"
+                    :groupName="groupName"
+                    buttonType="listCard"
+                    v-model="selectedDoorSidesValues"
+                />
+            </div>
+        </transition>
         
         <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
 
@@ -35,6 +39,7 @@ export default ({
     props: {
         groupName: String,
         modelValue: Array,
+        selectedDamageLocations: Array,
     },
     methods: {
         initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index a7d3e4f33..bce74b92f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,11 +4,11 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
+        <sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index 41a3b872b..347ee2fdf 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-chip-count-question">
+    <transition name="fade" mode="out-in">
+        <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -49,4 +48,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 80656e0a4..8031db546 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-damage-type-question">
+    <transition name="fade" mode="out-in">
+        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -68,4 +67,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index e407b33a9..694103d8a 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,24 +1,22 @@
 <template>
-    <transition name="fade">
-        <div class="windshield-options" aria-live="polite">
-            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
-                :isAvailable=isWindshieldDamageLocation
-                :suppressError="suppressError"
-                groupName="WindshieldDamageTypeQuestion"
-                v-model="selectedWindshieldDamageTypeValues" 
-            />
-            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-                :isAvailable=isRepairOptionSelected
-                groupName="WindshieldChipCountQuestion"
-                v-model="selectedWindshieldChipCountValues" 
-            />
-            <replaceOptionsQuestion ref="replaceOptionsQuestion"
-                :isAvailable=isReplaceOptionSelected
-                groupName="WindshieldReplaceOptions"
-                v-model="selectedWindshieldReplaceOptionsValues"
-            />
-        </div>
-    </transition>
+    <div class="windshield-options">
+        <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+            :isAvailable=isWindshieldDamageLocation
+            :suppressError="suppressError"
+            groupName="WindshieldDamageTypeQuestion"
+            v-model="selectedWindshieldDamageTypeValues" 
+        />
+        <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+            :isAvailable=isRepairOptionSelected
+            groupName="WindshieldChipCountQuestion"
+            v-model="selectedWindshieldChipCountValues" 
+        />
+        <replaceOptionsQuestion ref="replaceOptionsQuestion"
+            :isAvailable=isReplaceOptionSelected
+            groupName="WindshieldReplaceOptions"
+            v-model="selectedWindshieldReplaceOptionsValues"
+        />
+    </div>
 </template>
 
 <script>
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
new file mode 100644
index 000000000..91eea7db6
--- /dev/null
+++ b/src/styles/common-animations.scss
@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
\ No newline at end of file

From 01d446d1f2562a3373ed2583ddf26d6c2883b7fc Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 15:07:44 -0500
Subject: [PATCH 37/58] WIP Don't merge.

---
 .../textbox-question/textbox-question.spec.js | 95 +++++++++++++++++++
 .../textbox-question/textbox-question.vue     | 53 +++++++++++
 src/layouts/component-test/component-test.vue | 40 +++++++-
 src/styles/common-error-styles.scss           | 11 +++
 4 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 src/common-components/textbox-question/textbox-question.spec.js
 create mode 100644 src/common-components/textbox-question/textbox-question.vue

diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
new file mode 100644
index 000000000..954df5fa4
--- /dev/null
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("textboxQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        labelText: "label text",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.text()).toEqual("label text");
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return placeholder text", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
new file mode 100644
index 000000000..35d8d69f2
--- /dev/null
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="textbox-question">
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "textboxQuestion",
+  props: {
+    isEnabled: Boolean,
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    placeholderText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.textbox-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-control {
+    border: 1px solid $gray-500;
+    border-radius: .5rem;
+    min-height: 3rem;
+    &::placeholder {
+      color: $gray-500;
+    }
+    &:focus {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      &:hover {
+        box-shadow: 0 0 0 4px transparent;
+        border: 1px solid $gray-500;
+      }
+    }
+    &:hover {
+      border: 1px solid transparent;
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index e18664bec..12e9f75b8 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,5 +1,41 @@
   <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">Textbox Input</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            inputID="test-text-input"
+            class="has-error"
+          />
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
@@ -1040,6 +1076,7 @@
   import checkbox from "@/ux-components/checkbox/checkbox";
   import radio from "@/ux-components/radio/radio";
   import textLink from "@/ux-components/text-link/text-link";
+  import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   export default {
     name: "App",
     components: {
@@ -1051,7 +1088,8 @@
       listButtonHorizontal,
       checkbox,
       radio,
-      textLink
+      textLink,
+      textboxQuestion,
     },
     data() {
       return {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 4b9a18114..14b201e05 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -32,6 +32,17 @@
       border: 1px solid $blue;
     }
   }
+  &.textbox-question {
+    p {
+      color: $red;
+    }
+    input {
+      border: 1px solid $red;
+      &:focus {
+        border: 1px solid transparent;
+      }
+    }
+  }
 }
 
 .form-test-error {

From f6b754b1b96042e04972e5c93c5f5d56f3b4a18d Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 15:28:20 -0500
Subject: [PATCH 38/58] Changing funnel-header component styling from height to
 padding to avoid jumping on animations

---
 src/common-components/funnel-header/funnel-header.vue | 2 +-
 src/styles/common-animations.scss                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 86cb76197..382640219 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -60,7 +60,7 @@ export default {
 
 <style lang="scss" scoped>
 .funnel-header {
-  height: 56px;
+  padding: 0.97rem 0;
 }
 
 .logo-image {
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index 91eea7db6..5af3326b8 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,6 +1,6 @@
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 0.3s 2s ease;
+    transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,

From a6f1d8de26784c4de3579b07137c8738b5e596d5 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 15:35:44 -0500
Subject: [PATCH 39/58] unit test fix

---
 .../side-door-options/side-door-options.spec.js               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 32e6cf7f7..239a54fd4 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
@@ -90,7 +90,8 @@ describe("replace-options-question.vue", () => {
     driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
     passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
     driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
-    passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"]
+    passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
+    selectedDamageLocations = ["SideDoor"]
   }) {
     
     //Mock store
@@ -107,6 +108,7 @@ describe("replace-options-question.vue", () => {
     mountOptions.propsData = {
       modelValue: modelValueProp,
       groupName: groupName,
+      selectedDamageLocations: selectedDamageLocations,
     };
    
     const wrapper = shallowMount(sideDoorOptions, mountOptions);

From 20d570b33fa89c7a42f17dfc8baa04c2ec2688b1 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 22 Feb 2022 15:42:34 -0500
Subject: [PATCH 40/58] Adding aria-live to replace options

---
 .../replace-options-question/replace-options-question.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 79827cfad..1de360f7b 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,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"

From 45f61fc2f169e78375a6c2a98eb1cf6a475d5172 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 22 Feb 2022 16:57:03 -0500
Subject: [PATCH 41/58] WIP don't merge.

---
 .../dropdown-question.spec.js                 | 95 +++++++++++++++++++
 .../dropdown-question/dropdown-question.vue   | 60 ++++++++++++
 .../textbox-question/textbox-question.vue     |  1 -
 src/layouts/component-test/component-test.vue | 37 +++++++-
 src/styles/common-error-styles.scss           |  6 +-
 5 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js
 create mode 100644 src/common-components/dropdown-question/dropdown-question.vue

diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
new file mode 100644
index 000000000..c38a445ef
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("dropdownQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        labelText: "label text",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.text()).toEqual("label text");
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return placeholder text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
new file mode 100644
index 000000000..7481d43f1
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="dropdown-question">
+    <label :for="inputId" class="form-label">{{labelText}}</label>
+    <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <p class="mt-1 mb-0">There has been an error!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dropdownQuestion",
+  props: {
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-select {
+    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 {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      filter: grayscale(100%);
+      opacity: .65;
+      &:hover {
+        box-shadow: 0 0 0 4px transparent;
+        border: 1px solid $gray-500;
+      }
+    }
+    &:hover {
+      border: 1px solid transparent;
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+}
+</style>
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 35d8d69f2..9df4c19e7 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -10,7 +10,6 @@
 export default {
   name: "textboxQuestion",
   props: {
-    isEnabled: Boolean,
     isDisabled: Boolean,
     modelValue: String,
     labelText: String,
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 12e9f75b8..4a8547a26 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,7 +2,7 @@
     <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">Textbox Input</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
         </div>
       </div>
       <div class="row">
@@ -36,6 +36,39 @@
           />
         </div>
       </div>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            class="has-error"
+          />
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
@@ -1077,6 +1110,7 @@
   import radio from "@/ux-components/radio/radio";
   import textLink from "@/ux-components/text-link/text-link";
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+  import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   export default {
     name: "App",
     components: {
@@ -1090,6 +1124,7 @@
       radio,
       textLink,
       textboxQuestion,
+      dropdownQuestion,
     },
     data() {
       return {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 14b201e05..670591d11 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -32,11 +32,13 @@
       border: 1px solid $blue;
     }
   }
-  &.textbox-question {
+  &.textbox-question,
+  &.dropdown-question {
     p {
       color: $red;
     }
-    input {
+    input,
+    select {
       border: 1px solid $red;
       &:focus {
         border: 1px solid transparent;

From 9ef19e889e3e322444f07c66239dc948043647ad Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 22 Feb 2022 17:45:20 -0500
Subject: [PATCH 42/58] CSR-296: fix accessibility issue with fieldset

---
 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 e96f15df5..c828f9ff9 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -4,7 +4,7 @@
       <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
             <component

From c114e4b00449e079774566b8ee4964a603643b9c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 08:12:31 -0500
Subject: [PATCH 43/58] CSR-365 text input and select input components.

---
 .../dropdown-question/dropdown-question.vue   |  3 ++-
 src/layouts/component-test/component-test.vue | 20 +++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 7481d43f1..7793a01ad 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -38,7 +38,8 @@ export default {
       color: $gray-500;
       background-color: red;
     }
-    &:focus {
+    &:focus,
+    &:focus-visible {
       box-shadow: 0 0 0 2px $blue;
     }
     &:disabled,
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 4a8547a26..d75266010 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -8,7 +8,7 @@
       <div class="row">
         <div class="col">
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
           />
@@ -18,7 +18,7 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Disabled"
             inputID="test-text-input"
             isDisabled
@@ -29,7 +29,7 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <textboxQuestion
-            labelText="Text Input"
+            labelText="Text Input Label"
             placeholderText="Placeholder"
             inputID="test-text-input"
             class="has-error"
@@ -38,14 +38,14 @@
       </div>
       <div class="row my-4">
         <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (Select)</h4>
         </div>
       </div>
       <div class="row">
         <div class="col">
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-1"
           />
         </div>
       </div>
@@ -53,8 +53,8 @@
         <div class="col">
           <h6 class="my-4">Disabled</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-2"
             isDisabled
           />
         </div>
@@ -63,8 +63,8 @@
         <div class="col">
           <h6 class="my-4">With Error (class="has-error"):</h6>
           <dropdownQuestion
-            labelText="Text Input"
-            inputID="test-text-input"
+            labelText="Dropdown Label"
+            inputID="test-dropdown-input-3"
             class="has-error"
           />
         </div>

From 413bb0352ab5b104b5e1de3b1311555764028473 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 08:19:08 -0500
Subject: [PATCH 44/58] Update unit tests.

---
 .../dropdown-question.spec.js                 | 24 ++++---------------
 .../textbox-question/textbox-question.spec.js | 14 -----------
 2 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
index c38a445ef..0d1095c94 100644
--- a/src/common-components/dropdown-question/dropdown-question.spec.js
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from "@vue/test-utils";
-import textboxQuestion from "./textbox-question";
+import dropdownQuestion from "./dropdown-question";
 import { nextTick } from "vue";
 
 describe("dropdownQuestion.vue", () => {
@@ -13,7 +13,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes()["aria-disabled"]).toEqual("true");
@@ -29,7 +29,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     expect(input.exists()).toBe(true);
   });
@@ -43,7 +43,7 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes().id).toEqual("input ID");
@@ -72,24 +72,10 @@ describe("dropdownQuestion.vue", () => {
     });
 
     // Assert
-    const input = wrapper.find("input");
+    const input = wrapper.find("select");
 
     // Expect
     expect(input.attributes().id).toEqual("input ID");
   });
 
-  it("Should return placeholder text", async () => {
-    // Act
-    const wrapper = shallowMount(dropdownQuestion, {
-      propsData: {
-        placeholderText: "placeholder text",
-      },
-    });
-
-    // Assert
-    const placeholder = wrapper.find("input");
-
-    expect(placeholder.text()).toEqual("placeholder text");
-  });
-
 });
diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
index 954df5fa4..721fba9d5 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -78,18 +78,4 @@ describe("textboxQuestion.vue", () => {
     expect(input.attributes().id).toEqual("input ID");
   });
 
-  it("Should return placeholder text", async () => {
-    // Act
-    const wrapper = shallowMount(textboxQuestion, {
-      propsData: {
-        placeholderText: "placeholder text",
-      },
-    });
-
-    // Assert
-    const placeholder = wrapper.find("input");
-
-    expect(placeholder.text()).toEqual("placeholder text");
-  });
-
 });

From 0848dafe4880e34117876518bf6c7c5093d2e9e0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 23 Feb 2022 09:15:50 -0500
Subject: [PATCH 45/58] CSR-296: remove test var

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 5c976591c..b6b3e17a4 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -104,15 +104,11 @@ export default {
   },
   computed: {
     isRearWindowDamageLocation() {
-      if (this.selectedDamageLocations) {
-        const myTest = this.selectedDamageLocations.some(selectedDamages => 
-          {
-              return Boolean(selectedDamages.toUpperCase() === "REARWINDOW");
-          });
-        return myTest;
-      } else {
-        return false;
-      }
+      return Boolean(this.selectedDamageLocations.some(selectedDamages => 
+        {
+          return selectedDamages.toUpperCase() === "REARWINDOW";
+        })
+      );
     },
   },
   data(){

From d661e6b262584f2c860df2086edc95449388b90f Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 09:23:04 -0500
Subject: [PATCH 46/58] Adjusting animation for fade in

---
 src/styles/common-animations.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index 5af3326b8..92f5407ed 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,6 +1,9 @@
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.3s ease;
+.fade-enter-active{
+    transition: opacity 0.6s ease;
+}
+
+.fade-leave-active  {
+    transition: opacity 0.3s ease; 
 }
 
 .fade-enter-from,

From 02213cf24d463b09ba50715e2f189d2a3540d6a4 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 23 Feb 2022 09:55:59 -0500
Subject: [PATCH 47/58] CSR-296: remove boolean

---
 src/layouts/vehicle-damage/vehicle-damage.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index b6b3e17a4..edbaf3a0c 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -104,11 +104,10 @@ export default {
   },
   computed: {
     isRearWindowDamageLocation() {
-      return Boolean(this.selectedDamageLocations.some(selectedDamages => 
+      return this.selectedDamageLocations.some(selectedDamages => 
         {
           return selectedDamages.toUpperCase() === "REARWINDOW";
-        })
-      );
+        });
     },
   },
   data(){

From a6ae6b7aa4d6b6239f12651f0e504295963bd91b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 23 Feb 2022 10:28:51 -0500
Subject: [PATCH 48/58] Update option copy. Update color.

---
 src/common-components/dropdown-question/dropdown-question.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 7793a01ad..bef238272 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -2,7 +2,7 @@
   <div class="dropdown-question">
     <label :for="inputId" class="form-label">{{labelText}}</label>
     <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
-      <option selected>Open this select menu</option>
+      <option selected>Placeholder</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -30,6 +30,7 @@ export default {
     margin-bottom: .25rem;
   }
   .form-select {
+    color: $gray-500;
     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;
@@ -46,7 +47,6 @@ export default {
     &.disabled {
       background-color: $gray-100;
       filter: grayscale(100%);
-      opacity: .65;
       &:hover {
         box-shadow: 0 0 0 4px transparent;
         border: 1px solid $gray-500;

From 1333024b5369a5e6d8fc5c7062ca5c3574398b14 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 23 Feb 2022 12:50:24 -0500
Subject: [PATCH 49/58] Fixing Css animation glitch

---
 src/styles/common-error-styles.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 670591d11..b5017fc60 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,10 +1,10 @@
 .has-error {
   &.list-button,
   &.list-card {
-    border: 1px solid transparent;
+    border: 1px solid $red;
     color: $red;
     label {
-      border: 1px solid $red;
+      box-shadow: 0 0 1px $red;
       border-radius: .5rem;
     }
   }

From 45c666c30a0de9a761944b27f556b5f3925e405b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 23 Feb 2022 14:03:27 -0500
Subject: [PATCH 50/58] CSR-296: restore d-none class to hide single answers

---
 .../replace-options-question/replace-options-question.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 abe43e429..978cf6b41 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,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"

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 51/58] 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 52/58] 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 53/58] 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 54/58] 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 55/58] 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 7a836041037a40e2de543e58e3e2bdc7ad63eb61 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 24 Feb 2022 09:12:18 -0500
Subject: [PATCH 56/58] CSR-341 fix colors and font sizes per qa.

---
 .../list-button-horizontal.vue                   |  3 +++
 src/ux-components/list-button/list-button.vue    | 16 ++++++++++++++--
 src/ux-components/list-card/list-card.vue        | 12 ++++++++++++
 3 files changed, 29 insertions(+), 2 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 f58522662..5c328bc4c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -164,6 +164,9 @@ export default {
     + p {
       display: none;
     }
+    span {
+      font-size: .875rem;
+    }
   }
   &:first-of-type {
     label {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 4727f9743..d523ee06f 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -126,7 +126,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .list-group {
   &.list-button {
     input[type="radio"],
@@ -147,9 +147,14 @@ export default {
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
-      &:checked + label p:first-child {
+      &:checked + label p,
+      &:checked + label span {
         font-weight: 500;
       }
+      &:checked + label span:nth-child(2) {
+        font-weight: 400;
+        color: $gray-600;
+      }
     }
   }
   label {
@@ -161,6 +166,13 @@ export default {
     border: 1px solid $gray-500;
     width: 100%;
 
+    span {
+      &.small {
+        font-size: .75rem;
+        color: $gray-550;
+      }
+    }
+
     &:hover {
       @include media-breakpoint-up(sm) {
         box-shadow: 0 0 0 4px $blue-300;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 791a37039..869099dfd 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -177,6 +177,7 @@ export default {
       }
       .sub-copy {
         color: $gray-600;
+        font-weight: 400;
       }
     }
     + label::before {
@@ -247,6 +248,16 @@ export default {
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
+      &:checked + label {
+        p {
+          color: $black;
+          font-weight: 500;
+        }
+        .sub-copy {
+          color: $gray-600;
+          font-weight: 400;
+        }
+      }
       + label {
         min-height: 48px;
         color: $gray-600;
@@ -254,6 +265,7 @@ export default {
           margin-bottom: 0;
         }
         p {
+          color: $gray-600;
           text-align: left;
           &.sub-copy {
             color: $gray-550;

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 57/58] 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 58/58] 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: {