Merge branch 'develop' into feature/CSR-254

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

@@ -31,7 +31,7 @@
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
               :colLength="this.answers.length < 3 ? '' : '-4'"
-              v-model="selectedValues"
+              :selectedButtonIDs="selectedValues"
               data-test="button"
               :validationRules="validationRules"
             />
@@ -116,15 +116,11 @@ export default {
       }
     },
   },
-  data(){
-    return {
-      modelValueAnswers: [],
-    }
-  },
   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: {
@@ -133,13 +129,14 @@ export default {
       this.$emit("update:modelValue", answer);
     },
     handleCheckedChanged(val) {
-
+      if(this.isMultiSelect) {
-      console.log('meta is now ', this.meta)
+        // Add or remove item to array of data to emit
-
+        const newSelectedValues = this.selectedValues;
-      // Add or remove item to array of data to emit
+        val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
-      val.isChecked ? this.modelValueAnswers.push(val.buttonId) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(val.buttonId), 1);
+        this.selectedValues = newSelectedValues;
-      const answersToEmit = this.modelValueAnswers.length ? this.modelValueAnswers : undefined;
+      } else {
-      this.$emit("update:modelValue", answersToEmit);
+        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,17 +26,18 @@
     </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
           :class="isDisabled && 'form-test-invalid'"
           :aria-disabled="isDisabled"
         />
+      </div>
+      <div class="col">
         <textLink
           navigation=true
           text="back"
@@ -73,6 +74,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);
@@ -80,7 +82,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"

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

@@ -5,7 +5,7 @@
         <buttonQuestion
             v-if="answersToDisplay.length > 1"
             :questionText="questionText"
-            :isMultiSelect="isMultiSelect"
+            isMultiSelect
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
@@ -28,7 +28,6 @@ export default ({
             questionText: String,
             answersFromCms: Array,
             damageOptions: Object,
-            groupName: String,
         }
     },
     props: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
@@ -38,13 +37,12 @@ export default ({
         filterByVehicleCategory: Boolean,
         validationRules: Array,
         name: String,
+        groupName: String,
     },
     methods: {
-        initializeComponent(cmsContent, damageOptions, groupName){
+        initializeComponent(cmsContent, damageOptions){
             console.log('cmsContent: ', cmsContent)
             console.log('damageOptions: ', damageOptions)
-
-            this.groupName = groupName;
             this.questionText = cmsContent.QuestionText;
             this.answersFromCms = cmsContent.Answers;
             this.damageOptions = damageOptions;
@@ -82,7 +80,7 @@ export default ({
             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(){

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

@@ -6,7 +6,7 @@
             <buttonQuestion
                 v-if="isAvailable && answersToDisplay.length > 1"
                 :questionText="questionText"
-                :isMultiSelect="isMultiSelect"
+                isMultiSelect
                 :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonType="listCard"
@@ -28,18 +28,16 @@ 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;

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

@@ -15,14 +15,14 @@
           <damageLocationQuestion
             ref="damageLocation"
             name="test"
-            isMultiSelect
+            v-model="selectedDamageLocations"
-            v-model="damageLocationQuestionData"
+            groupName="DamageLocationQuestion"
           />
           <replaceOptionsQuestion
             ref="driverSideOptions"
             isAvailable
-            isMultiSelect
             v-model="driverSideOptionsData"
+            groupName="DriverSideReplaceOptionsQuestion"
           />
           <funnel-footer
             :isDisabled="!meta.valid"
@@ -98,19 +98,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

@@ -33,7 +33,7 @@ export default {
   computed: {
     selectedValueAsArray: {
       get: function() {
-        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {

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

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

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

@@ -33,7 +33,7 @@ export default {
   computed: {
     selectedValueAsArray: {
       get: function() {
-        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {

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

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

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

@@ -33,7 +33,7 @@ export default {
   computed: {
     selectedValueAsArray: {
       get: function() {
-        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {

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

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

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

@@ -28,7 +28,7 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      selectedYear: String,
+      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

@@ -35,7 +35,7 @@ export default {
   computed: {
     selectedValueAsArray: {
       get: function() {
-        const modelValueAsArray = this.modelValue ? [this.modelValue] : null;
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
         return modelValueAsArray;
       },
       set: function(newValue) {

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

@@ -56,7 +56,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,12 +93,10 @@ export default {
       }
       this.handleChange(value);
     },
-  },
+    handleCheckChange(newValue, oldValue){
-  watch: {
+      const isInitialization = typeof(oldValue) === 'function';
-    checkValue(newValue, oldValue){
+      if (!isInitialization) {
-      const isInitialization = typeof(oldValue) !== 'function';
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
-      if (isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
       }
     }
   },

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,12 +95,10 @@ export default {
       }
       this.handleChange(value);
     },
-  },
+    handleCheckChange(newValue, oldValue){
-  watch: {
+      const isInitialization = typeof(oldValue) === 'function';
-    checkValue(newValue, oldValue){
+      if (!isInitialization) {
-      const isInitialization = typeof(oldValue) !== 'function';
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
-      if (isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
       }
     }
   },

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

@@ -15,6 +15,7 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
+        @change="handleCheckChange"
        />
       <label
         :for="buttonID"
@@ -73,8 +74,8 @@ export default {
       default: "",
     },
     colLength: String,
-    modelValue: [Array, String],
     validationRules: Array,
+    selectedButtonIDs: [Array, String],
   },
   data(){
     return {
@@ -82,7 +83,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() {
@@ -97,11 +100,11 @@ export default {
       }
     },
   },
-  watch: {
+  methods: {
-    checkValue(newValue, oldValue){
+    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) !== 'function';
+      const isInitialization = typeof(oldValue) === 'function';
-      if (isInitialization) {
+      if (!isInitialization) {
-        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID + '' });
+        this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
       }
     }
   },

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;
     }
   }
 }