From db8be5e8c9dc1d68c38eb8605216803928522d3a Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 31 Jan 2022 16:21:02 -0500
Subject: [PATCH] Conflict fixes and update to logic for taking in multiple
 modelvalue items

---
 .../button-question/button-question.spec.js   | 15 +-----
 .../button-question/button-question.vue       | 21 +++-----
 src/layouts/vehicle-damage/vehicle-damage.vue |  2 +-
 .../list-button-horizontal.vue                | 48 +++++++++++++++---
 src/ux-components/list-button/list-button.vue | 49 +++++++++++++++----
 src/ux-components/list-card/list-card.vue     | 40 ++++++++++++---
 6 files changed, 122 insertions(+), 53 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 808e5c4ba..e59b6da39 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -62,20 +62,7 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change with one string value on select if checked is true and only one option is selected", async () => {
-    // Act
-    const wrapper = shallowMount(buttonQuestion);
-    await wrapper.setData({
-      chosenAnswer: "Windshield"
-    });
-    wrapper.vm.isItemChecked(true);
-    // Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Windshield"]);
-  });
-});
-
-describe("buttonQuestion.vue", () => {
-  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple optiopns are chosen", async () => {
+  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({
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 28fd2258f..857e3e621 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -7,7 +7,10 @@
       <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
           <div :class="getComponentWrapperClasses">
-            <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
+            <component 
+              :is="buttonType" 
+              v-for="answer in answers" 
+              :key="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
               @isChecked="isItemChecked"
@@ -116,20 +119,8 @@ export default {
     isItemChecked(val) {
       // Add or remove item to array of data to emit
       val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
-      // Determine what data to emit
-      let dataToEmit;
-      switch(this.modelValueAnswers.length){
-        case 0:
-          dataToEmit = undefined
-          break;
-        case 1:
-          dataToEmit = this.chosenAnswer
-          break;
-        default:
-          dataToEmit = this.modelValueAnswers
-          break; 
-      }
-      this.$emit("update:modelValue", dataToEmit);
+
+      this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
     },
   },
   components: {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 766a0697f..fb08ce910 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-0 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
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 01c7b2fa8..aa574c559 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,11 +1,45 @@
 <template>
-  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
+  <div 
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" 
+    @mouseup="handleClick(value)" 
+    @keyup.space="handleClick(value)"
+  >
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue" 
+    />
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
+      <span 
+        class="m-0" 
+        :class="textPosition"
+      >
+        {{buttonLabel}}
+      </span>
+      <span 
+        v-if="buttonLabelSubCopy" 
+        class="m-0 small" 
+        :class="textPosition"
+      >
+        {{buttonLabelSubCopy}}
+      </span>
+      <span v-if="screenReaderOnlyText" class="sr-only">
+        {{screenReaderOnlyText}}
+      </span>
+      <loader 
+        v-if="isLoaderDisplayed && !isMultiSelect" 
+        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" 
+        :class="[loaderColor, loaderPosition]" 
+      />
     </label>
   </div>
 </template>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 8263fa10f..17a1e7a8b 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,14 +1,43 @@
 <template>
-  <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue">
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{
-        buttonLabelSubCopy
-      }}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{
-        screenReaderOnlyText
-      }}</span>
+  <div 
+    class="list-group list-button d-flex flex-column w-100 mb-2" 
+    @mouseup="handleClick(value)" 
+    @keyup.space="handleClick(value)"
+  >
+    <input 
+      :type="isMultiSelect ? 'checkbox' : 'radio'" 
+      :id="buttonID" 
+      :name="groupName" 
+      :value="buttonID" 
+      :aria-required="isRequired" 
+      :data-focus-target="groupName" 
+      v-model="modelValue"
+    >
+    <label 
+      tabindex="-1" 
+      :for="buttonID" 
+      :aria-labelledby="buttonID" 
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
+      <span 
+        class="m-0" 
+        :class="textPosition"
+      >
+        {{ buttonLabel }}
+      </span>
+      <span 
+        v-if="buttonLabelSubCopy" 
+        class="m-0 small" 
+        :class="textPosition"
+      >
+        {{ buttonLabelSubCopy }}
+      </span>
+      <span 
+        v-if="screenReaderOnlyText" 
+        class="sr-only"
+      >
+        {{ screenReaderOnlyText }}
+      </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
         :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 1dac474fa..b93bbe3f0 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,12 +1,40 @@
 <template>
   <!-- Heavily documented below -->
   <div :class="'col' + colLength">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" v-model="modelValue" />
-      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" :src="buttonImage" :alt="altText" />
-        <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" 
+    :class="isWide ? 'horizontal' : ''" 
+    @mouseup="handleChange(value)" 
+    @keyup.space="handleChange(value)">
+      <input 
+        :type="isMultiSelect ? 'checkbox' : 'radio'" 
+        :id="buttonID" 
+        :name="groupName" 
+        :value="buttonID" 
+        :aria-required="isRequired" 
+        :data-focus-target="groupName" 
+        v-model="modelValue"
+       />
+      <label 
+        :for="buttonID" 
+        class="d-flex w-100 align-items-center px-2 h-100" 
+        :class="getLabelClasses" tabindex="-1"
+      >
+        <img 
+          :id="buttonImageId" 
+          :class="!isWide ? 'order-1' : 'ms-auto order-3'" 
+          :src="buttonImage" 
+          :alt="altText"
+         />
+        <p 
+          v-if="!isWide" 
+          class="small order-3" 
+          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+        >
+          {{buttonLabel}}
+        </p>
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+          {{buttonLabelSubCopy}}
+        </p>
         <div v-if="isWide" class="order-2">
           <p class="m-0 small">{{ buttonLabel }}</p>
           <p v-if="buttonLabelSubCopy" class="m-0 fs-7">