Merge branch 'develop' into feature/CSR-78

src/common-components/button-question/button-question.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 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 () => {
@@ -41,44 +42,32 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change on select", async () => {
+  it("Should trigger event modelValue change to new value on when radio button selected", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setData({
+    await wrapper.setProps({
-      modelValueAnswers: ["Windshield"],
+      answers: ["2022", "2021", "2020"],
-      chosenAnswer: "Windshield"
+      isMultiSelect: false
     });
-    wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
+    const val = {isChecked: true, buttonId: "2021", }
-    await wrapper.vm.$nextTick();
-    // Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
-  });
-});
-
-describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setData({
-      modelValueAnswers: ["Windshield", "BackDoor"]
-    });
-    wrapper.vm.handleCheckedChanged(true);
-    // Assert
-    expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
-  });
-});
-
-describe("buttonQuestion.vue", () => {
-  it("Should not trigger event modelValue change on select if checked is false", async () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion);
-    wrapper.setData({
-      modelValueAnswers: ["Front-door"]
-    })
-    const val = {isChecked : false, buttonId: "Front-door"}
     wrapper.vm.handleCheckedChanged(val);
     // Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
+  });
+});
+
+describe("buttonQuestion.vue", () => {
+  it("Should add values to array on checkbox click", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      modelValue: ["2022", "2021", "2020"],
+      isMultiSelect: true
+    });
+    const val = {isChecked: true, buttonId: "2019", }
+    wrapper.vm.handleCheckedChanged(val);
+    // Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
   });
 });
 

src/common-components/button-question/button-question.vue

@@ -30,7 +30,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
-              v-model="modelValue"
+              :selectedButtonIDs="selectedValues"
               data-test="button"
             />
           </div>
@@ -98,24 +98,32 @@ export default {
       }
       return classes;
     },
-  },
+    selectedValues: {
-  data(){
+      get: function() {
-    return {
+        return this.modelValue;
-      modelValueAnswers: [],
+      },
-    }
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    },
   },
   mounted(){
     if(Array.isArray(this.answers) && this.answers.length === 1) {
-      this.modelValueAnswers.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
+      const newSelectedValues = this.selectedValues;
-      this.$emit("update:modelValue", this.modelValueAnswers);
+      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
+      this.selectedValues = newSelectedValues;
     }
   },
   methods: {
     handleCheckedChanged(val) {
-      // Add or remove item to array of data to emit
+      if(this.isMultiSelect) {
-      val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
+        // Add or remove item to array of data to emit
-      const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
+        const newSelectedValues = this.selectedValues;
-      this.$emit("update:modelValue", answersToEmit);
+        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
+        this.selectedValues = newSelectedValues;
+      } else {
+        this.selectedValues = [val.buttonId]
+      }
     },
   },
   components: {

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -5,9 +5,17 @@ describe("funnel-footer.vue", () => {
 
   it("Should return footer-link class", async () => {
     // Act
-    try {
+
+      const r = {
+        test:"testing",
+        clientHeight: 10,
+        classList: {
+          add: jest.fn(() => ''),
+          remove: jest.fn()
+        },
+      };
       global.document.getElementById = jest.fn().mockImplementation(()=> {
-        return {}
+        return r;
       });
 
       const wrapper = mount(funnelFooter, {
@@ -22,9 +30,8 @@ describe("funnel-footer.vue", () => {
       // Expect
       expect(link.attributes('class')).toContain("footer-link");
       expect(global.document.getElementById).toBeCalled();
-    } catch(error) {
+      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      console.log(error);
+      expect(r.classList.remove).toBeCalledWith("justify-content-start");
-    }
 
   });
 
@@ -57,4 +64,32 @@ describe("funnel-footer.vue", () => {
     expect(input.attributes("class")).toContain("btn-primary");
   });
 
+  it("Should return class justify-content-end if paddingHeight < 80px", async () => {
+
+    global.document.getElementById = jest.fn().mockImplementation(()=> {
+      return {
+        test:"testing",
+        clientHeight: 10,
+        classList: {
+          add: jest.fn(),
+          remove: jest.fn()
+        }
+      }
+    });
+
+    // Act
+      const wrapper = mount(funnelFooter, {
+        propsData: {
+          footer: true
+        },
+      });
+      const infoBox = document.getElementById('infoBox');
+      // Assert
+      const stacked = wrapper.find("#stacked");
+      wrapper.vm.paddingHeight = 100;
+
+      // Expect
+      expect(stacked.attributes('class')).toContain("justify-content-end");
+  });
+
 });

src/common-components/funnel-footer/funnel-footer.vue

@@ -26,15 +26,16 @@
     </div>
   </div>
   <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-    <div class="row">
+    <div class="row d-flex flex-row-reverse align-items-center">
-      <div class="col">
+      <div class="col d-flex justify-content-end" id="stacked">
         <buttonMain
         isPrimary
-        buttonText="Review Appointment Details"
+        buttonText="Button test"
         loaderColor="white"
         sizeInRem="1"
-        isFloat
         />
+      </div>
+      <div class="col">
         <textLink
         navigation=true
         text="back"
@@ -68,6 +69,7 @@ export default {
     setTimeout(function(){ // Give it a moment to set the date
       document.getElementById('years').innerHTML += new Date().getFullYear();
     }, 100);
+    this.checkHeight();
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.onResize);
@@ -75,7 +77,28 @@ export default {
   methods: {
     onResize() {
       this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+      this.checkHeight();
+    },
+    checkHeight() {
+      const parentHeight = document.getElementById('infoBox').clientHeight;
+      const wrapper2 = document.getElementById('stacked');
+      console.log(parentHeight);
+      console.log(wrapper2);
+      if (parentHeight > 80) {
+        wrapper2.classList.add("justify-content-start");
+        wrapper2.classList.remove("justify-content-end");
+      } else {
+        wrapper2.classList.add("justify-content-end");
+        wrapper2.classList.remove("justify-content-start");
+      }
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+  button {
+    min-width: 200px;
+    width: 100%;
+  }
+</style>

src/layouts/component-test/component-test.vue

@@ -76,7 +76,7 @@
       <div class="row g-2">
         <listCard
           isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
           buttonLabel="Windshield"
           altText=""
           buttonID="List Card Checkbox 1"
@@ -94,7 +94,7 @@
         />
         <listCard
           isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
           buttonLabel="Windshield"
           altText=""
           buttonID="List Card Checkbox 3"
@@ -115,7 +115,7 @@
           <legend class="sr-only">Functioning as Checkbox</legend>
           <listCard
             isMultiSelect
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Checkbox"
@@ -132,7 +132,7 @@
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
             isMultiSelect
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Checkbox b"
@@ -149,7 +149,7 @@
           <legend class="sr-only">Functioning as Radio Button</legend>
           <listCard
             isRadio
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button"
@@ -166,7 +166,7 @@
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
             isRadio
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Radio Button b"
@@ -184,7 +184,7 @@
           <listCard
             isMultiSelect
             isWide
-            buttonImage="windshield-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Windshield"
             altText=""
             buttonID="List Card Horizontal Checkbox"
@@ -219,7 +219,7 @@
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
             isWide
-            buttonImage="back-glass-damage.svg"
+            buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
             buttonLabel="Rear Window"
             altText=""
             buttonID="List Card Horizontal Radio Button"
@@ -236,7 +236,7 @@
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
             isWide
-            buttonImage="windshield-damage.svg"
+            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 b"
@@ -948,7 +948,6 @@ 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 buttonQuestion from "@/common-components/button-question/button-question";
 import textLink from "@/ux-components/text-link/text-link";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 export default {
@@ -963,7 +962,6 @@ export default {
     listButtonHorizontal,
     checkbox,
     funnelHeader,
-    buttonQuestion,
     textLink,
     funnelFooter
   },

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: 'car-Windshield' }, { Name: 'car-SideDoor' }, {Name: "car-RearWindow"} ])
     });
   });
 

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -3,11 +3,11 @@
         <buttonQuestion
             v-if="answersToDisplay.length > 1"
             :questionText="questionText"
-            :isMultiSelect="isMultiSelect"
+            isMultiSelect
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
-            v-model="modelValue"
+            v-model="selectedValues"
         />
     </div>
 </template>
@@ -23,27 +23,33 @@ export default ({
             questionText: String,
             answersFromCms: Array,
             damageOptions: Object,
-            groupName: String,
         }
     },
     props: {
-        isMultiSelect: Boolean,
         modelValue: Array,
+        groupName: String,
     },
     methods: {
-        initializeComponent(cmsContent, damageOptions, groupName){
+        initializeComponent(cmsContent, damageOptions){
-            this.groupName = groupName;
             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.availableReplacementOption ? true : false,
+                RearWindow: this.damageOptions.backGlassOptions.availableReplacementOptions ? true : false,
             }
         },
         answersToDisplay(){
@@ -56,11 +62,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -4,11 +4,11 @@
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 1"
                 :questionText="questionText"
-                :isMultiSelect="isMultiSelect"
+                isMultiSelect
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
-                v-model="modelValue"
+                v-model="selectedValues"
             />
         </div>
     </transition>
@@ -25,24 +25,30 @@ export default ({
             questionText: String,
             answersFromCms: Array,
             replaceOptions: Array,
-            groupName: String,
         }
     },
     props: {
-        isMultiSelect: Boolean,
         isAvailable: Boolean,
         filterByVehicleCategory: Boolean,
+        groupName: String,
         modelValue: Array,
     },
     methods: {
-        initializeComponent(cmsContent, replaceOptions, groupName){
+        initializeComponent(cmsContent, replaceOptions){
-            this.groupName = groupName;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         }
     },
     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 => 
@@ -53,11 +59,6 @@ export default ({
                 : [];
         },
     },
-    watch: {
-        modelValue(val) {
-        this.$emit("update:modelValue", val);
-        }
-    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -3,8 +3,8 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" :hasSubText=true />
-        <damageLocationQuestion ref="damageLocation" isMultiSelect v-model="damageLocationQuestionData" />
+        <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect v-model="driverSideOptionsData" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
     </div>
 </template>
 
@@ -60,19 +60,16 @@ export default {
         resultMap.cmsContent.FunnelSubHeaderWidget
       );
       vm.$refs.driverSideOptions.initializeComponent(
-        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
+        resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
       );
       vm.$refs.damageLocation.initializeComponent(
-        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions, 'DamageLocationQuestion'
+        resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
-
-      // for damageOptions and cms content data
-      //console.log(resultMap)
     });
   },
   data(){
     return {
-      damageLocationQuestionData: [],
+      selectedDamageLocations: [],
       driverSideOptionsData: [],
     }
   },

src/layouts/vehicle-make/make-question/make-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Make"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.makes = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      selectedMake: [],
+      selectedMake: null,
     };
   },
   computed: {},

src/layouts/vehicle-model/model-question/model-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Model"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -45,10 +57,5 @@ export default {
       this.models = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-model/vehicle-model.vue

@@ -33,7 +33,7 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      selectedModel: [],
+      selectedModel: null,
     };
   },
   computed: {},

src/layouts/vehicle-style/style-question/style-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Style"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -28,7 +28,19 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
+  },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
   },
   components: {
     buttonQuestion,
@@ -49,10 +61,5 @@ export default {
       this.styles = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/layouts/vehicle-style/vehicle-style.vue

@@ -32,7 +32,7 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      selectedStyle: [],
+      selectedStyle: null,
     };
   },
   computed: {},

src/layouts/vehicle-year/vehicle-year.vue

@@ -28,7 +28,7 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      selectedYear: [],
+      selectedYear: null,
     };
   },
   computed: {},

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -72,6 +72,7 @@ describe("year-question.vue", () => {
   });
 });
 
+
 function setupMocks({
   modelValueProp = "1900",
   cmsQuestionText = "CMS text goes here",
@@ -89,6 +90,7 @@ function setupMocks({
   mountOptions.propsData = {
     modelValue: modelValueProp,
   };
+
   const wrapper = shallowMount(yearQuestion, mountOptions);
 
   //Mock CMS content

src/layouts/vehicle-year/year-question/year-question.vue

@@ -7,7 +7,7 @@
     groupName="Choose Vehicle Year"
     textPosition="text-start"
     :loaderEnabled="true"
-    v-model="modelValue"
+    v-model="selectedValueAsArray"
     isRequired=true
   />
 </template>
@@ -26,12 +26,24 @@ export default {
     };
   },
   props: {
-    modelValue: Array,
+    modelValue: String,
   },
   emits: ['update:modelValue'],
   components: {
     buttonQuestion,
   },
+  computed: {
+    selectedValueAsArray: {
+      get: function() {
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return modelValueAsArray;
+      },
+      set: function(newValue) {
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
+      }
+    }
+  },
   methods: {
     loadInitialData() {
       return baseMixin.methods.dispatchNonBlockingStoreAction(
@@ -44,10 +56,5 @@ export default {
       this.years = initialData;
     },
   },
-  watch: {
-    modelValue(val) {
-      this.$emit("update:modelValue", val);
-    },
-  },
 };
 </script>

src/router/index.js

@@ -142,7 +142,7 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
   } else if (matchingScenarioMap.destinationUrl !== undefined) {
     navigateToUrl(matchingScenarioMap.destinationUrl);
   }
-};
+}
 
 // Get navigation map depending on the scenario and the current 'page' you're on.
 function getNavigationMap(scenario, currentRoute) {
@@ -156,7 +156,7 @@ function getNavigationMap(scenario, currentRoute) {
     .map((m) => m.maps.filter((map) => map.scenario === scenario));
 
   return matchedQueryValue[0][0];
-};
+}
 
 //---------------------------------------------------------- Private Functions ----------------------------------------------------------
 

src/ux-components/button-main/button-main.vue

@@ -50,7 +50,7 @@ export default {
     border-radius: $border-radius-lg;
     color: $white;
     transition: all 150ms linear;
-    white-space: nowrap;
+    justify-content: center;
     &:hover {
       background: linear-gradient(
         270deg,

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -173,4 +173,45 @@ describe("list-button-horizontal.vue", () => {
 
     expect(loader.attributes("style")).toContain("1rem");
   });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+        isMultiSelect: false,
+        selectedButtonIDs: ["Car-Front"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+  });
 });

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -12,6 +12,7 @@
       :aria-required="isRequired" 
       :data-focus-target="groupName" 
       v-model="checkValue" 
+      @change="handleCheckChange"
     />
     <label 
       tabindex="-1" 
@@ -69,7 +70,7 @@ export default {
       type: String,
       default: "",
     },
-    modelValue: [Array, String],
+    selectedButtonIDs: [Array, String],
   },
   data() {
     return {
@@ -78,7 +79,9 @@ export default {
     };
   },
   created(){
-    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
+    if(this.selectedButtonIDs){
+      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    }
   },
   methods: {
     displayLoader() {
@@ -90,10 +93,11 @@ export default {
       }
       this.handleChange(value);
     },
-  },
+    handleCheckChange(newValue, oldValue){
-  watch: {
+      const isInitialization = typeof(oldValue) === 'function';
-    checkValue(){
+      if (!isInitialization) {
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
     }
   },
   components: {

src/ux-components/list-button/list-button.spec.js

@@ -173,4 +173,44 @@ describe("list-button.vue", () => {
 
     expect(loader.attributes("style")).toContain("1rem");
   });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "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"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+  });
 });

src/ux-components/list-button/list-button.vue

@@ -12,6 +12,7 @@
       :aria-required="isRequired" 
       :data-focus-target="groupName" 
       v-model="checkValue"
+      @change="handleCheckChange"
     >
     <label 
       tabindex="-1" 
@@ -71,7 +72,7 @@ export default {
       type: [String, Number],
       default: "",
     },
-    modelValue: [Array, String],
+    selectedButtonIDs: [Array, String],
   },
   data() {
     return {
@@ -80,7 +81,9 @@ export default {
     };
   },
   created(){
-    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
+    if(this.selectedButtonIDs){
+      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    }
   },
   methods: {
     displayLoader() {
@@ -92,10 +95,11 @@ export default {
       }
       this.handleChange(value);
     },
-  },
+    handleCheckChange(newValue, oldValue){
-  watch: {
+      const isInitialization = typeof(oldValue) === 'function';
-    checkValue(){
+      if (!isInitialization) {
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
     }
   },
   components: {

src/ux-components/list-card/list-card.spec.js

@@ -191,4 +191,45 @@ describe("list-card.vue", () => {
     expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]);
   });
 
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{buttonId: "List Card Checkbox", isChecked: Boolean}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "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"]
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+  });
+
+
 });

src/ux-components/list-card/list-card.vue

@@ -12,6 +12,7 @@
         :aria-required="isRequired"
         :data-focus-target="groupName"
         v-model="checkValue"
+        @change="handleCheckChange"
        />
       <label
         :for="buttonID"
@@ -70,7 +71,7 @@ export default {
       default: "",
     },
     colLength: String,
-    modelValue: [Array, String],
+    selectedButtonIDs: [Array, String],
   },
   data(){
     return {
@@ -78,7 +79,9 @@ export default {
     }
   },
   created(){
-    this.checkValue = this.modelValue ? this.modelValue.includes(this.buttonID) : false;
+    if(this.selectedButtonIDs){
+      this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
+    }
   },
   computed: {
     getLabelClasses() {
@@ -93,9 +96,12 @@ export default {
       }
     },
   },
-  watch: {
+  methods: {
-    checkValue(){
+    handleCheckChange(newValue, oldValue){
-      this.$emit('isCheckedChanged', {isChecked: this.checkValue, buttonId: this.buttonID});
+      const isInitialization = typeof(oldValue) === 'function';
+      if (!isInitialization) {
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
+      }
     }
   },
   setup(props) {

src/ux-components/text-link/text-link.vue

@@ -29,8 +29,7 @@ export default {
 <style lang="scss">
 a {
   color: $blue;
-  text-decoration: none;
+  text-underline-offset: 0.5em;
-  border-bottom: 1px solid $blue;
   line-height: 26px;
   padding: 0 0 4px 0;
   font-weight: 500;
@@ -45,7 +44,6 @@ a {
   }
   &.navigation-link {
     color: $black;
-    border-bottom: 1px solid $black;
     line-height: 26px;
     display: inline-flex;
     text-transform: capitalize;
@@ -54,14 +52,13 @@ a {
   &.footer-link {
     color: $gray-600;
     text-decoration: none;
-    border-bottom: 1px solid transparent;
     line-height: 20px;
     padding: 0 0 2px 0;
     font-weight: 400;
     font-size: 0.75rem;
     &:hover {
-      border-bottom: 1px solid $gray-500;
       padding: 0 0 2px 0;
+      text-decoration: underline;
     }
   }
 }