From 04f4a9369b6db9e6626891d112c9161471117ec2 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Wed, 21 Sep 2022 08:56:41 -0400
Subject: [PATCH] CSR-762 Finish vehicle-damage

---
 .prettierrc                                   |   4 +
 .../button-question/button-question.vue       | 525 +++++++------
 .../input-button-wrapper.vue                  | 606 ++++++++-------
 .../replace-options-question.vue              |  15 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |  22 +-
 .../windshield-options/windshield-options.vue |   2 -
 .../make-question/make-question.vue           |   2 +-
 .../model-question/model-question.vue         |   2 +-
 .../style-question/style-question.vue         |   2 +-
 .../year-question/year-question.vue           |   2 +-
 .../list-button-horizontal.vue                |   5 +-
 src/ux-components/list-card/list-card.vue     | 715 +++++++++---------
 12 files changed, 964 insertions(+), 938 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..21209f49e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "bracketSameLine": true
+}
\ No newline at end of file
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 54ed76e88..5b0808a9c 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,66 +1,59 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
-  <div
-    :class="
-      isOverflowScrollable
-        ? 'button-question button-question-overflow'
-        : 'button-question'
-    "
-  >
     <div
-      v-if="questionText && answers && answers.length > 0"
-      class="question-text d-flex"
-    >
-      <span class="fw-bold w-100">{{ questionText }}</span>
-    </div>
+        :class="
+            isOverflowScrollable
+                ? 'button-question button-question-overflow'
+                : 'button-question'
+        ">
+        <div
+            v-if="questionText && answers && answers.length > 0"
+            class="question-text d-flex">
+            <span class="fw-bold w-100">{{ questionText }}</span>
+        </div>
 
-    <div class="w-100 d-flex justify-content-center">
-      <fieldset
-        class="w-100"
-        :aria-required="isRequired"
-        :class="getFieldSetClasses"
-        :role="isMultiSelect ? 'group' : 'radiogroup'"
-        :aria-labelledby="formatString(groupName)"
-      >
-      BQ selectOnKeypress: {{selectOnKeypress}}
-        <legend
-          class="sr-only"
-          :data-focus-target="formatString(groupName)"
-          :id="formatString(groupName)"
-          tabindex="-1"
-        >
-          {{ questionText }}
-          {{
-            isMultiSelect && answers && answers.length > 1
-              ? "Select one or more options below."
-              : "Select an option below."
-          }}
-        </legend>
-        <div :class="getComponentLoopWrapperClasses">
-          <div
-            :class="getComponentWrapperClasses"
-            v-for="answer in buttonsInfo"
-            :key="answer.Name ? answer.Name : answer"
-          >
-          <component
-              :is="buttonType"
-              :buttonLabel="answer.buttonLabel"
-              :buttonLabelSubCopy="answer.buttonLabelSubCopy"
-              :buttonImage="answer.buttonImage"
-              :buttonImageId="answer.buttonImageId"
-              :isMultiSelect="isMultiSelect"
-              :groupName="groupName"
-              :value="answer.value"
-              :modelValue="modelValue"
-              :selectingInitiatesLoad="selectingInitiatesLoad"
-              :isWide="isWide"
-              :validationRules="validationRules"
-              :textPosition="textPosition"
-              :selectOnKeypress="selectOnKeypress"
-              @change="handleAnswerChange"
-            />
-            
-            <!-- <component
+        <div class="w-100 d-flex justify-content-center">
+            <fieldset
+                class="w-100"
+                :aria-required="isRequired"
+                :class="getFieldSetClasses"
+                :role="isMultiSelect ? 'group' : 'radiogroup'"
+                :aria-labelledby="formatString(groupName)">
+                <legend
+                    class="sr-only"
+                    :data-focus-target="formatString(groupName)"
+                    :id="formatString(groupName)"
+                    tabindex="-1">
+                    {{ questionText }}
+                    {{
+                        isMultiSelect && answers && answers.length > 1
+                            ? "Select one or more options below."
+                            : "Select an option below."
+                    }}
+                </legend>
+                <div :class="getComponentLoopWrapperClasses">
+                    <div
+                        :class="getComponentWrapperClasses"
+                        v-for="answer in buttonsInfo"
+                        :key="answer.Name ? answer.Name : answer">
+                        <component
+                            :is="buttonType"
+                            :buttonLabel="answer.buttonLabel"
+                            :buttonLabelSubCopy="answer.buttonLabelSubCopy"
+                            :buttonImage="answer.buttonImage"
+                            :buttonImageId="answer.buttonImageId"
+                            :isMultiSelect="isMultiSelect"
+                            :groupName="groupName"
+                            :value="answer.value"
+                            :modelValue="modelValue"
+                            :selectingInitiatesLoad="selectingInitiatesLoad"
+                            :isWide="isWide"
+                            :validationRules="validationRules"
+                            :textPosition="textPosition"
+                            :selectOnKeypress="selectOnKeypress"
+                            @change="handleAnswerChange" />
+
+                        <!-- <component
               :is="buttonType"
               @isCheckedChanged="handleCheckedChanged"
               :buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
@@ -87,28 +80,26 @@
               :class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
               :valueToLogType="valueToLogType"
             /> -->
-            <!-- For nested questions -->
-            <transition name="fade" mode="out-in">
-              <div
-                v-if="
-                  typeof selectedValues == 'string' &&
-                  selectedValues == answer.Name
-                "
-              >
-                <slot></slot>
-              </div>
-            </transition>
-          </div>
+                        <!-- For nested questions -->
+                        <transition name="fade" mode="out-in">
+                            <div
+                                v-if="
+                                    typeof selectedValues == 'string' &&
+                                    selectedValues == answer.Name
+                                ">
+                                <slot></slot>
+                            </div>
+                        </transition>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+        <div class="row form-test-error mt-1">
+            <error-message
+                :name="formatString(groupName)"
+                v-if="!suppressError"></error-message>
         </div>
-      </fieldset>
     </div>
-    <div class="row form-test-error mt-1">
-      <error-message
-        :name="formatString(groupName)"
-        v-if="!suppressError"
-      ></error-message>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -117,219 +108,221 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from "vee-validate";
 import radio from "@/ux-components/radio/radio";
-import { bool } from "yup";
-// import buttonWrap
 
 export default {
-  name: "buttonQuestion",
-  props: {
-    buttonType: {
-      type: String,
-      default: "listButton",
+    name: "buttonQuestion",
+    props: {
+        buttonType: {
+            type: String,
+            default: "listButton",
+        },
+        isMultiSelect: Boolean,
+        groupName: String,
+        questionText: String,
+        answers: Array,
+        textPosition: {
+            type: String,
+            default: "text-center",
+        },
+        selectingInitiatesLoad: Boolean,
+        loaderColor: {
+            type: String,
+            default: "blue",
+        },
+        loaderPosition: {
+            type: String,
+            default: "right",
+        },
+        isRequired: Boolean,
+        isOverflowScrollable: Boolean,
+        isWide: Boolean,
+        isCashOrInsurance: Boolean,
+        modelValue: [Array, Number, String],
+        value: [Number, String],
+        validationRules: String,
+        suppressError: Boolean,
+        useTextForValue: Boolean,
+        valueToLogType: String,
+        selectOnKeypress: {
+            type: Boolean,
+            default: true,
+        },
     },
-    isMultiSelect: Boolean,
-    groupName: String,
-    questionText: String,
-    answers: Array,
-    textPosition: {
-      type: String,
-      default: "text-center",
-    },
-    selectingInitiatesLoad: Boolean,
-    loaderColor: {
-      type: String,
-      default: "blue",
-    },
-    loaderPosition: {
-      type: String,
-      default: "right",
-    },
-    isRequired: Boolean,
-    isOverflowScrollable: Boolean,
-    isWide: Boolean,
-    isCashOrInsurance: Boolean,
-    modelValue: [Array, Number, String],
-    value: [Number, String],
-    validationRules: String,
-    suppressError: Boolean,
-    useTextForValue: Boolean,
-    valueToLogType: String,
-    selectOnKeypress: {
-      type: Boolean,
-      default: true
-    },
-  },
-  computed: {
-    getFieldSetClasses() {
-      if (this.isOverflowScrollable) {
-        return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
-      } else if (this.buttonType == "listCard") {
-        return "w-100";
-      } else {
-        return "";
-      }
-    },
-    getComponentLoopWrapperClasses() {
-      let classes;
-      switch (this.buttonType) {
-        case "listButton":
-          classes = "w-100";
-          break;
-        case "listButtonHorizontal":
-          classes = "d-flex flex-row p-0";
-          break;
-        case "listCard":
-          classes = "row g-2 justify-content-center";
-          if (this.isWide) {
-            classes += " flex-column";
-          }
-          break;
-        case "radio":
-          classes = "ui-radio d-flex";
-          break;
-      }
-      return classes;
-    },
-    getComponentWrapperClasses() {
-      let classes = "";
+    computed: {
+        getFieldSetClasses() {
+            if (this.isOverflowScrollable) {
+                return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+            } else if (this.buttonType == "listCard") {
+                return "w-100";
+            } else {
+                return "";
+            }
+        },
+        getComponentLoopWrapperClasses() {
+            let classes;
+            switch (this.buttonType) {
+                case "listButton":
+                    classes = "w-100";
+                    break;
+                case "listButtonHorizontal":
+                    classes = "d-flex flex-row p-0";
+                    break;
+                case "listCard":
+                    classes = "row g-2 justify-content-center";
+                    if (this.isWide) {
+                        classes += " flex-column";
+                    }
+                    break;
+                case "radio":
+                    classes = "ui-radio d-flex";
+                    break;
+            }
+            return classes;
+        },
+        getComponentWrapperClasses() {
+            let classes = "";
 
-      classes += this.isWid ? "col-12" : "col";
+            classes += this.isWid ? "col-12" : "col";
 
-      if (this.buttonType == "radio") {
-        classes += " radio-button-container";
-      }
+            if (this.buttonType == "radio") {
+                classes += " radio-button-container";
+            }
 
-      return classes;
+            return classes;
+        },
+        getColLength() {
+            if (this.isWide) {
+                return "12";
+            } else {
+                return "";
+            }
+        },
+        // selectedValues: {
+        //   get: function () {
+        //     return this.modelValue;
+        //   },
+        //   set: function (newValue) {
+        //     // this.$emit("update:modelValue", newValue);
+        //   },
+        // },
+        buttonsInfo() {
+            // TODO KO temporary. It should always just be an array
+            return (Array.isArray(this.answers) ? this.answers : [])?.map(
+                (answer) => ({
+                    buttonLabel: answer.Text ?? answer,
+                    altText: answer.Name ? answer.Name : answer,
+                    buttonLabelSubCopy: answer.SubText,
+                    buttonImage: answer.AnswerImageUrl,
+                    buttonImageId: answer.ImageId,
+                    groupName: this.formatString(this.groupName),
+                    value: this.useTextForValue
+                        ? answer.Text
+                        : answer.Name ?? answer,
+                })
+            );
+        },
     },
-    getColLength() {
-      if (this.isWide) {
-        return "12";
-      } else {
-        return "";
-      }
+    methods: {
+        formatString(str) {
+            return str?.replace(" ", "-");
+        },
+        getValue(answer) {
+            if (this.useTextForValue) {
+                return answer.Text;
+            }
+            return answer.Name ? answer.Name : answer;
+        },
+        getAnswerString(answer, prop = "Name") {
+            switch (typeof answer) {
+                case "string":
+                case "number":
+                case "boolean":
+                    return this.formatString(answer.toString());
+                default:
+                    return answer[prop]
+                        ? this.formatString(answer[prop])
+                        : this.formatString(answer.toString());
+            }
+        },
+        // handleCheckedChanged(val) {
+        //   if (this.selectingInitiatesLoad) {
+        //     this.selectedValues = val.value;
+        //   } else {
+        //     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;
+        //     }
+        //   }
+        //   this.$emit("isCheckedChanged", val);
+        // },
+        handleAnswerChange(eventValue) {
+            // console.log({
+            //   bqEvent: eventValue
+            // })
+            this.$emit("update:modelValue", eventValue);
+        },
     },
-    // selectedValues: {
-    //   get: function () {
-    //     return this.modelValue;
-    //   },
-    //   set: function (newValue) {
-    //     // this.$emit("update:modelValue", newValue);
-    //   },
-    // },
-    buttonsInfo() {
-      // TODO KO temporary. It should always just be an array
-      return (Array.isArray(this.answers) ? this.answers : [])?.map(answer => ({
-        buttonLabel: answer.Text ?? answer,
-        altText: answer.Name ? answer.Name : answer,
-        buttonLabelSubCopy: answer.SubText,
-        buttonImage: answer.AnswerImageUrl,
-        buttonImageId: answer.ImageId,
-        groupName: this.formatString(this.groupName),
-        value: this.useTextForValue ? answer.Text : (answer.Name ?? answer)
-      }))
-    }
-  },
-  methods: {
-    formatString(str) {
-      return str?.replace(" ", "-");
+    components: {
+        listButton,
+        listButtonHorizontal,
+        listCard,
+        ErrorMessage,
+        radio,
     },
-    getValue(answer) {
-      if (this.useTextForValue) {
-        return answer.Text;
-      }
-      return answer.Name ? answer.Name : answer;
-    },
-    getAnswerString(answer, prop = "Name") {
-      switch (typeof answer) {
-        case "string":
-        case "number":
-        case "boolean":
-          return this.formatString(answer.toString());
-        default:
-          return answer[prop]
-            ? this.formatString(answer[prop])
-            : this.formatString(answer.toString());
-      }
-    },
-    // handleCheckedChanged(val) {
-    //   if (this.selectingInitiatesLoad) {
-    //     this.selectedValues = val.value;
-    //   } else {
-    //     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;
-    //     }
-    //   }
-    //   this.$emit("isCheckedChanged", val);
-    // },
-    handleAnswerChange(eventValue) {
-      // console.log({
-      //   bqEvent: eventValue
-      // })
-      this.$emit("update:modelValue", eventValue);
-    },
-  },
-  components: {
-    listButton,
-    listButtonHorizontal,
-    listCard,
-    ErrorMessage,
-    radio,
-  },
 };
 </script>
 
 <style lang="scss">
 .button-question-overflow {
-  height: calc(100vh - 274px);
+    height: calc(100vh - 274px);
 
-  .overflow-scroll {
-    // Height will be determined by overall height of content above list
-    height: calc(100% - 314px);
-    overflow-x: hidden !important;
-    -webkit-overflow-scrolling: touch;
-  }
+    .overflow-scroll {
+        // Height will be determined by overall height of content above list
+        height: calc(100% - 314px);
+        overflow-x: hidden !important;
+        -webkit-overflow-scrolling: touch;
+    }
 }
 .button-question {
-  color: $black;
+    color: $black;
 
-  .radio-button-container {
-    &:not(:last-child) {
-      padding-bottom: map-get($spacers, 2);
+    .radio-button-container {
+        &:not(:last-child) {
+            padding-bottom: map-get($spacers, 2);
+        }
     }
-  }
 }
 .question-text {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-  font-size: 1rem;
-  line-height: 1.625rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+    line-height: 1.625rem;
 
-  & > span {
-    text-align: center;
-  }
+    & > span {
+        text-align: center;
+    }
 }
 
 .vehicle-parts {
-  .question-text {
-    span {
-      font-size: 0.875rem;
-      text-align: left;
-      margin: 0 0 0.5rem 0;
+    .question-text {
+        span {
+            font-size: 0.875rem;
+            text-align: left;
+            margin: 0 0 0.5rem 0;
+        }
     }
-  }
-  .question-text {
-    margin: 0;
-  }
-  fieldset {
-    .ui-radio {
-      margin: 0;
+    .question-text {
+        margin: 0;
+    }
+    fieldset {
+        .ui-radio {
+            margin: 0;
+        }
     }
-  }
 }
 </style>
diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue
index 67eaeb145..3fd39fbcf 100644
--- a/src/common-components/input-button-wrapper/input-button-wrapper.vue
+++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue
@@ -1,29 +1,28 @@
 <template>
-  <label
-    :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
-    :for="buttonId"
-    @mousedown.left="handleEventAction('click', $event)"
-  >
-    <!-- IBW modelValue: {{ modelValue }} <br />
+    <label
+        :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
+        :for="buttonId"
+        @mousedown.left="handleEventAction('click', $event)">
+        <!-- IBW modelValue: {{ modelValue }} <br />
     IBW value: {{value}} <br/> -->
-    <!-- classes: {{classes}}<br/>
+        <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
     modelValue: {{modelValue}} <br/>
     buttonId: {{buttonId}} <br/> -->
-    <input
-      :type="inputType"
-      :id="buttonId"
-      :name="groupName"
-      :class="inputClasses"
-      :aria-required="isRequired"
-      :value="value"
-      :checked="isChecked"
-      @keypress.enter="handleEventAction('keypressSubmit', $event)"
-      @change="handleEventAction('change', $event)"
-    />
+        <input
+            :type="inputType"
+            :id="buttonId"
+            :key="buttonId"
+            :name="groupName"
+            :class="inputClasses"
+            :aria-required="isRequired"
+            :value="value"
+            :checked="isChecked"
+            @keypress.enter="handleEventAction('keypressSubmit', $event)"
+            @change="handleEventAction('change', $event)" />
 
-    <slot></slot>
-  </label>
+        <slot></slot>
+    </label>
 </template>
 
 <script>
@@ -32,294 +31,315 @@ import { useField } from "vee-validate";
 import { toRef } from "vue";
 
 export default {
-  name: "input-button-wrapper",
-  emits: ["change"],
-  model: {
-    prop: "modelValue",
-    event: "change",
-  },
-  props: {
-    value: {
-      type: [String, Number],
-      required: true,
+    name: "input-button-wrapper",
+    emits: ["change"],
+    model: {
+        prop: "modelValue",
+        event: "change",
     },
-    modelValue: {
-      type: [Array, String, Number],
-      required: true,
+    props: {
+        value: {
+            type: [String, Number],
+            required: true,
+        },
+        modelValue: {
+            type: [Array, String, Number],
+            required: true,
+        },
+        isMultiSelect: Boolean,
+        isWide: Boolean,
+        buttonImage: String,
+        buttonImageId: String,
+        buttonLabel: {
+            type: String,
+            required: true,
+        },
+        isRequired: {
+            type: Boolean,
+            required: true,
+        },
+        buttonLabelSubCopy: {
+            type: String,
+            required: true,
+        },
+        groupName: {
+            type: String,
+            required: true,
+        },
+        validationRules: {
+            type: String,
+            default: "",
+        },
+        buttonWrapperClasses: [String, Array, Object],
+        inputClasses: [String, Array, Object],
+        valueToLogType: String,
+        selectOnKeypress: {
+            type: Boolean,
+            default: true,
+        },
     },
-    isMultiSelect: Boolean,
-    isWide: Boolean,
-    buttonImage: String,
-    buttonImageId: String,
-    buttonLabel: {
-      type: String,
-      required: true,
+    data() {
+        return {
+            valueToEmit: null,
+            hasFirstEventFired: false,
+        };
     },
-    isRequired: {
-      type: Boolean,
-      required: true,
-    },
-    buttonLabelSubCopy: {
-      type: String,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
-    validationRules: {
-      type: String,
-      default: "",
-    },
-    buttonWrapperClasses: [String, Array, Object],
-    inputClasses: [String, Array, Object],
-    valueToLogType: String,
-    selectOnKeypress: {
-      type: Boolean,
-      default: true
-    },
-  },
-  data() {
-    return {
-      valueToEmit: null,
-      hasFirstEventFired: false,
-    };
-  },
-  mounted() {
-    // console.log({
-    //   isChecked: this.isChecked,
-    //   modelValue: this.modelValue,
-    //   value: this.value,
-    // });
-
-    this.handleChange(this.modelValue);
-  },
-  methods: {
-    handleEventAction(eventType, e) {
-      const eventTypes = {
-        CHANGE: "change",
-        KEYPRESS_SUBMIT: "keypressSubmit",
-        CLICK: "click",
-      };
-
-      console.log({
-        handleKeypress: eventType,
-        // hasFirstEventFired: this.hasFirstEventFired,
-      });
-
-
-      if (this.isMultiSelect) {
-        // if (true) {
-        switch (eventType) {
-          // case eventTypes.CLICK:
-          case eventTypes.KEYPRESS_SUBMIT:
-            console.log("clicking");
-            // this.hasFirstEventFired = true;
-            this.handleClick(e);
-            break;
-          case eventTypes.CHANGE:
-            console.log("selectOnKeypress: ", this.selectOnKeypress);
-            // this.hasFirstEventFired = false;
-            this.selectOnKeypress
-              ? this.handleClick(e)
-              : this.handleSelectionChange(e);
-            break;
-        }
-      } else {
-        switch (eventType) {
-          case eventTypes.CLICK:
-          case eventTypes.KEYPRESS_SUBMIT:
-            console.log("clicking");
-
-            // TODO KO may still need this since GA events, wouldn't want to trigger twice
-            // this.hasFirstEventFired = true;
-            this.handleClick(e);
-            break;
-          case eventTypes.CHANGE:
-            console.log("selectOnKeypress: ", this.selectOnKeypress);
-            // this.hasFirstEventFired = false;
-            this.selectOnKeypress
-              ? this.handleClick(e)
-              : this.handleSelectionChange(e);
-            break;
-        }
-      }
-
-      // if (!this.hasFirstEventFired) {
-
-      // else {
-      //   this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
-      // }
-
-      // else {
-      //   this.hasFirstEventFired = true;
-      //   this.selectOnKeypress
-      //     ? this.handleClick(e)
-      //     : this.handleSelectionChange(e);
-      // }
-
-      // this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
-
-      // this.handleClick(e);
-      // console.log({
-      //   selectOnKeypress: this.selectOnKeypress,
-      //   event: e,
-      //   eventType: eventType,
-      //   isClick: eventType === "click",
-      //   isKeypress: eventType === "keypress",
-      // });
-      // console.log(eventType)
-
-      // click => click, keypress
-      // space => keypressSubmit, keypress
-      // arrow left/right => keypress
-
-      // if selectOnKeypress (YMMS)
-      // if click => emit event
-      // if space/enter => emit event
-      // if arrow => emit event
-      // else (!selectOnKeypress)
-      // if click => emit event
-      // if space/enter => emit event
-      // if arrow => handleSelection
-
-      // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
-      // this.handleClick(e);
-      // }
-      // else {
-      //   this.handleSelectionChange(e);
-      // }
-    },
-    handleSelectionChange(e) {
-      // console.log("HSC");
-      // console.log(e);
-      // console.log(this.value);
-      // console.log(this.modelValue);
-      // let isChecked = event.target.checked;
-      // console.log("BM value: ", this.value);
-      // let valueToEmit;
-      // console.log("isMultiselect")
-      // console.log(this.isMultiSelect)
-      // console.log({
-      //   modelValue: this.modelValue,
-      //   isMultiselect: this.isMultiSelect
-      // })
-      if (
-        this.isMultiSelect &&
-        (this.modelValue instanceof Array || this.modelValue == null)
-      ) {
-        let newValue = this.modelValue ? [...this.modelValue] : [];
-        // console.log("newValue", newValue)
+    mounted() {
         // console.log({
-        //   newValue: newValue,
-        //   // isChecked: isChecked
-        // })
-        if (!newValue.includes(this.value)) {
-          // console.log("isChecked")
-          newValue.push(this.value);
-        } else {
-          // console.log("isn't checked")
-          newValue.splice(newValue.indexOf(this.value), 1);
+        //   isChecked: this.isChecked,
+        //   modelValue: this.modelValue,
+        //   value: this.value,
+        // });
+
+        console.log({
+            meta: this.meta,
+            isMultiSelect: this.isMultiSelect,
+            modelValue: this.modelValue,
+            isChecked: this.isChecked,
+            valid: this.meta.valid,
+        });
+
+        // const isSingleAnswerPreselected = this.modelValue?.length === 1 && this.isChecked;
+
+        if (this.isChecked) {
+            console.log("HI THERE");
+            this.handleChange(this.modelValue);
         }
-
-        this.valueToEmit = newValue;
-      } else {
-        console.log("not multi");
-        this.valueToEmit = this.value;
-      }
-
-      // console.log("handlingChange", this.valueToEmit);
-      this.handleChange(this.valueToEmit);
-      this.pushClickEventToGA();
-      // if (this.selectOnKeypress) {
-      //   this.handleClick(e)
-      // }
     },
-    handleClick(e) {
-      console.log("handleClick");
-      this.handleSelectionChange(e);
-      // console.log("HC");
-      // console.log({
-      //   eventEmitting: e,
-      //   valueToEmit: this.valueToEmit,
-      // });
-      this.$emit("change", this.valueToEmit);
+    methods: {
+        handleEventAction(eventType, e) {
+            const eventTypes = {
+                CHANGE: "change",
+                KEYPRESS_SUBMIT: "keypressSubmit",
+                CLICK: "click",
+            };
+
+            console.log({
+                handleKeypress: eventType,
+                // hasFirstEventFired: this.hasFirstEventFired,
+            });
+
+            if (this.isMultiSelect) {
+                // if (true) {
+                switch (eventType) {
+                    // case eventTypes.CLICK:
+                    case eventTypes.KEYPRESS_SUBMIT:
+                        console.log("clicking");
+                        // this.hasFirstEventFired = true;
+                        this.handleClick(e);
+                        break;
+                    case eventTypes.CHANGE:
+                        console.log(
+                            "selectOnKeypress: ",
+                            this.selectOnKeypress
+                        );
+                        // this.hasFirstEventFired = false;
+                        this.selectOnKeypress
+                            ? this.handleClick(e)
+                            : this.handleSelectionChange(e);
+                        break;
+                }
+            } else {
+                switch (eventType) {
+                    case eventTypes.CLICK:
+                    case eventTypes.KEYPRESS_SUBMIT:
+                        console.log("clicking");
+
+                        // TODO KO may still need this since GA events, wouldn't want to trigger twice
+                        // this.hasFirstEventFired = true;
+                        this.handleClick(e);
+                        break;
+                    case eventTypes.CHANGE:
+                        console.log(
+                            "selectOnKeypress: ",
+                            this.selectOnKeypress
+                        );
+                        // this.hasFirstEventFired = false;
+                        this.selectOnKeypress
+                            ? this.handleClick(e)
+                            : this.handleSelectionChange(e);
+                        break;
+                }
+            }
+
+            // if (!this.hasFirstEventFired) {
+
+            // else {
+            //   this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
+            // }
+
+            // else {
+            //   this.hasFirstEventFired = true;
+            //   this.selectOnKeypress
+            //     ? this.handleClick(e)
+            //     : this.handleSelectionChange(e);
+            // }
+
+            // this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
+
+            // this.handleClick(e);
+            // console.log({
+            //   selectOnKeypress: this.selectOnKeypress,
+            //   event: e,
+            //   eventType: eventType,
+            //   isClick: eventType === "click",
+            //   isKeypress: eventType === "keypress",
+            // });
+            // console.log(eventType)
+
+            // click => click, keypress
+            // space => keypressSubmit, keypress
+            // arrow left/right => keypress
+
+            // if selectOnKeypress (YMMS)
+            // if click => emit event
+            // if space/enter => emit event
+            // if arrow => emit event
+            // else (!selectOnKeypress)
+            // if click => emit event
+            // if space/enter => emit event
+            // if arrow => handleSelection
+
+            // if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
+            // this.handleClick(e);
+            // }
+            // else {
+            //   this.handleSelectionChange(e);
+            // }
+        },
+        handleSelectionChange(e) {
+            // console.log("HSC");
+            // console.log(e);
+            // console.log(this.value);
+            // console.log(this.modelValue);
+            // let isChecked = event.target.checked;
+            // console.log("BM value: ", this.value);
+            // let valueToEmit;
+            // console.log("isMultiselect")
+            // console.log(this.isMultiSelect)
+            // console.log({
+            //   modelValue: this.modelValue,
+            //   isMultiselect: this.isMultiSelect
+            // })
+            if (
+                this.isMultiSelect &&
+                (this.modelValue instanceof Array || this.modelValue == null)
+            ) {
+                let newValue = this.modelValue ? [...this.modelValue] : [];
+                // console.log("newValue", newValue)
+                // console.log({
+                //   newValue: newValue,
+                //   // isChecked: isChecked
+                // })
+                if (!newValue.includes(this.value)) {
+                    // console.log("isChecked")
+                    newValue.push(this.value);
+                } else {
+                    // console.log("isn't checked")
+                    newValue.splice(newValue.indexOf(this.value), 1);
+                }
+
+                this.valueToEmit = newValue;
+            } else {
+                console.log("not multi");
+                this.valueToEmit = this.value;
+            }
+
+            console.log("handlingChange", this.valueToEmit);
+            this.handleChange(this.valueToEmit);
+            this.pushClickEventToGA();
+            // if (this.selectOnKeypress) {
+            //   this.handleClick(e)
+            // }
+        },
+        handleClick(e) {
+            console.log("handleClick");
+            this.handleSelectionChange(e);
+            // console.log("HC");
+            // console.log({
+            //   eventEmitting: e,
+            //   valueToEmit: this.valueToEmit,
+            // });
+            this.$emit("change", this.valueToEmit);
+        },
+        pushClickEventToGA() {
+            this.pushEventToGA(
+                this.$route.query[queryStrings.FMG_PAGE],
+                this.GaActions.CLICKED,
+                this.value.toString(),
+                true,
+                this.valueToLogType
+            );
+        },
     },
-    pushClickEventToGA() {
-      this.pushEventToGA(
-        this.$route.query[queryStrings.FMG_PAGE],
-        this.GaActions.CLICKED,
-        this.value.toString(),
-        true,
-        this.valueToLogType
-      );
+    computed: {
+        isChecked() {
+            if (this.isMultiSelect || this.modelValue instanceof Array) {
+                return this.modelValue.includes(this.value);
+            }
+
+            return this.modelValue == this.value;
+        },
+        inputType() {
+            return this.isMultiSelect ? "checkbox" : "radio";
+        },
+        buttonId() {
+            return `${this.groupName} ${JSON.stringify(this.value)}`;
+        },
     },
-  },
-  computed: {
-    isChecked() {
-      if (this.isMultiSelect || this.modelValue instanceof Array) {
-        return this.modelValue.includes(this.value);
-      }
+    setup(props) {
+        const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-      return this.modelValue == this.value;
+        const fieldOptions = {
+            type: inputType,
+            validateOnValueUpdate: false,
+            validateOnMount: false,
+            // checkedValue: props.value,
+            // potentialInitialValue: props.selectedValues,
+        };
+
+        // Set initialValue for validation setup if pre-selected
+        // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+        // if (
+        //   props.selectedValues &&
+        //   (props.selectedValues.includes(props.value) ||
+        //     props.selectedValues.includes(parseInt(props.value)))
+        // ) {
+        //   fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
+        // }
+
+        // const { handleChange, errors, value } = useField(
+        //   toRef(props, "groupName"),
+        //   toRef(props, "validationRules"),
+        //   fieldOptions
+        // );
+
+        console.log(props.validationRules);
+
+        const { handleChange, meta, errors, value } = useField(
+            toRef(props, "groupName"),
+            toRef(props, "validationRules"),
+            fieldOptions
+        );
+
+        // const validateValue = value;
+
+        return {
+            handleChange,
+            errors,
+            meta,
+            // validateValue,
+            fieldOptions, // only need to expose this for unit test purposes
+        };
     },
-    inputType() {
-      return this.isMultiSelect ? "checkbox" : "radio";
-    },
-    buttonId() {
-      return `${this.groupName} ${JSON.stringify(this.value)}`;
-    },
-  },
-  setup(props) {
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-    const fieldOptions = {
-      type: inputType,
-      checkedValue: props.value,
-      // potentialInitialValue: props.selectedValues,
-    };
-
-    // Set initialValue for validation setup if pre-selected
-    // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-    // if (
-    //   props.selectedValues &&
-    //   (props.selectedValues.includes(props.value) ||
-    //     props.selectedValues.includes(parseInt(props.value)))
-    // ) {
-    //   fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-    // }
-
-    // const { handleChange, errors, value } = useField(
-    //   toRef(props, "groupName"),
-    //   toRef(props, "validationRules"),
-    //   fieldOptions
-    // );
-
-    console.log(props.validationRules);
-
-    const { handleChange, errors, value } = useField(
-      toRef(props, "groupName"),
-      toRef(props, "validationRules"),
-      fieldOptions
-    );
-
-    const validateValue = value;
-
-    return {
-      handleChange,
-      errors,
-      validateValue,
-      fieldOptions, // only need to expose this for unit test purposes
-    };
-  },
 };
 </script>
 
 <!-- TODO KO Scope this? -->
 <style lang="scss">
 input {
-  opacity: 0;
-  height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
-  width: 0;
+    opacity: 0;
+    height: 0.1px; // NOTE: cannot be zero or Safari can't put focus on it
+    width: 0;
 }
 </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 f4c0e5e02..3b8e6d803 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" mode="out-in">
         <div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
-            ROQ selectedValue: {{selectedValue}}<br/>
-            ROQ modelValue: {{modelValue}}
+            ROQ selectedValue: {{selectedValue}}
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -13,7 +12,7 @@
                 v-model="selectedValue"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
-                :isRequired=isRequired
+                :isRequired="isRequired"
             />
         </div>
     </transition>
@@ -44,15 +43,17 @@ export default ({
         isRequired: Boolean,
     },
     methods: {
-        initializeComponent(replaceOptions){
+        initializeComponent(replaceOptions) {
             this.replaceOptions = replaceOptions;
         },
         updateSelectedValues() {
+            console.log("UPDATING FOR ", this.groupName)
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
             // ex: BackGlass stationary
             // console.log(this.answersToDisplay)
             if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-                this.selectedValue = [this.answersToDisplay[0].Name];
+                const selectedAnswer = this.answersToDisplay[0].Name;
+                this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
                 console.log("HIIIIII2", this.selectedValue)
             }
         },
@@ -97,6 +98,10 @@ export default ({
             val && this.updateSelectedValues();
         },
         shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
+            console.log({
+                groupName: this.groupName,
+                shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion
+            })
             if (!shouldDisplayReplaceOptionsQuestion) {
                 this.selectedValue = [];
             }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9a3a4eed5..f05f9a65f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -17,8 +17,6 @@
             alertClass="alert-warning"
             :isDismissible="false"
           />
-          selectedWindshieldOptions: {{selectedWindshieldOptions}} <br/>
-          
           <damageLocationQuestion
             ref="damageLocation"
             cmsWidgetName="DamageLocationQuestion"
@@ -202,7 +200,11 @@ export default {
 
       if (store.getters.damage.isRepair === undefined) return windshieldOptions;
 
-      if (!store.getters.damage.isRepair) {
+      if (store.getters.damage.isRepair) {
+          windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
+          windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
+      }
+      else {
         if (store.getters.damage.glassToReplace?.some(glass =>  { return glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
             glass.glassName === damageLocationsSelected.SINGLE })) {
             windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
@@ -222,11 +224,6 @@ export default {
         }
       }
 
-      if (store.getters.damage.isRepair) {
-          windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
-          windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
-      }
-
       return windShieldOptions;
 
     },
@@ -381,15 +378,18 @@ export default {
     hasSplitSingleConflict() {
       if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
 
-      return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield =>
+      console.log({
+        selectedWindshieldOptions: this.selectedWindshieldOptions
+      })
+      return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield =>
         {
             return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
         }) &&
-        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield =>
+        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedDriverWindshield =>
         {
             return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase();
         }) ||
-        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield =>
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedPassengerWindshield =>
         {
             return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase();
         })
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index ec000cbbb..d02873a63 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="windshield-options">
-        selectedDamageLocations: {{ selectedDamageLocations }}
         <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
             :isAvailable="isWindshieldDamageLocation"
             :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@@ -21,7 +20,6 @@
             v-model="selectedWindshieldChipCountValues"
             validationRules="windshield-chip-count-required"
         />
-        selectedWindshieldReplaceOptionsValues: {{selectedWindshieldReplaceOptionsValues}}
         <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
             :isAvailable="isReplaceOptionSelected"
             isMultiSelect
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index d0bf57943..9477dd08b 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -8,7 +8,7 @@
     groupName="ChooseVehicleMake"
     textPosition="text-start"
     v-model="selectedValue"
-    :selectOnKeypress="true"
+    :selectOnKeypress="false"
     isRequired
   />
 </template>
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index d0c613663..de180b13c 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -8,7 +8,7 @@
     groupName="ChooseVehicleModel"
     textPosition="text-start"
     v-model="selectedValue"
-    :selectOnKeypress="true"
+    :selectOnKeypress="false"
     isRequired
   />
 </template>
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index 04f5c8958..37ae9ecab 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -8,7 +8,7 @@
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
     v-model="selectedValue"
-    :selectOnKeypress="true"
+    :selectOnKeypress="false"
     isRequired
   />
 </template>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index b9f2310ad..34758a85d 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -9,7 +9,7 @@
       groupName="ChooseVehicleYear"
       textPosition="text-start"
       v-model="selectedValue"
-      :selectOnKeypress="true"
+      :selectOnKeypress="false"
       isRequired
     />
   </div>
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 f35a29bd9..5fb41f2f6 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -168,7 +168,6 @@ export default {
 
 <style lang="scss">
 .list-button-horizontal {
-
   input[type="radio"],
   input[type="checkbox"] {
     position: absolute;
@@ -176,6 +175,10 @@ export default {
     opacity: 0;
     width: 0;
 
+    .list-button-horizontal-content {
+      cursor: pointer;
+    }
+
     &:focus-visible+.list-button-horizontal-content {
       box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index d0395343f..edd9dddfd 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,18 +1,18 @@
 <template>
-  <inputButtonWrapper
-    :buttonWrapperClasses="[
-      'list-card w-100 rounded-3 d-flex align-items-center h-100',
-      { 'horizontal': isWide }
-    ]"
-    :isMultiSelect="isMultiSelect"
-    :modelValue="modelValue"
-    :value="value"
-    :groupName="groupName"
-    :validationRules="validationRules"
-    :selectOnKeypress="selectOnKeypress"
-    @change="handleAnswerChange"
-  >
-    <!-- <div :class="{ 'h-100': !isWide }">
+    <inputButtonWrapper
+        :buttonWrapperClasses="[
+            'list-card w-100 rounded-3 d-flex align-items-center h-100',
+            { horizontal: isWide },
+        ]"
+        :isMultiSelect="isMultiSelect"
+        :modelValue="modelValue"
+        :value="value"
+        :groupName="groupName"
+        :validationRules="validationRules"
+        :selectOnKeypress="selectOnKeypress"
+        @change="handleAnswerChange"
+    >
+        <!-- <div :class="{ 'h-100': !isWide }">
       <div
         class="list-card w-100 rounded-3 d-flex align-items-center"
         :class="[
@@ -26,7 +26,7 @@
         @keyup.left="handleKeyupArrow"
         @keyup.right="handleKeyupArrow"
       > -->
-    <!-- <input
+        <!-- <input
           :type="isMultiSelect ? 'checkbox' : 'radio'"
           :id="buttonID"
           :name="groupName"
@@ -37,36 +37,39 @@
           @change="handleInputChange"
         /> -->
 
-    <div
-      class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
-      :class="getLabelClasses"
-    >
-      <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 sub-copy">
-        {{ 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 sub-copy">
-          {{ buttonLabelSubCopy }}
-        </p>
-      </div>
-    </div>
-    <!-- </div>
+        <div
+            class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
+            :class="getLabelClasses"
+        >
+            <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 sub-copy"
+            >
+                {{ 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 sub-copy">
+                    {{ buttonLabelSubCopy }}
+                </p>
+            </div>
+        </div>
+        <!-- </div>
     </div> -->
-  </inputButtonWrapper>
+    </inputButtonWrapper>
 </template>
 
 <script>
@@ -76,350 +79,350 @@ import { queryStrings } from "@/constants/query-strings";
 import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
 
 export default {
-  name: "listCard",
-  components: {
-    inputButtonWrapper
-  },
-  props: {
-    isMultiSelect: Boolean, //Defines use as checkbox
-    isWide: Boolean,
-    buttonImage: String, //Required: File name of image
-    buttonImageId: String,
-    buttonLabel: String, //Required: Label text
-    isRequired: Boolean, //Required: is aria-required required or not?
-    altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    // buttonID: String, // TODO KO We don't use this //Required: Unique
-    groupName: String, //Rquired: Unique
-    buttonLabelSubCopy: String, //Optional: sub text
-    value: {
-      // Field initial value
-      type: String,
-      default: "",
+    name: "listCard",
+    components: {
+        inputButtonWrapper,
     },
-    // colLength: String,
-    validationRules: String,
-    // selectedValues: [Array, String],
-    // hasError: Boolean,
-    valueToLogType: String,
-    selectOnKeypress: Boolean
-  },
-  data() {
-    return {
-      // checkValue: null,
-    };
-  },
-  // mounted() {
-  //   if (Array.isArray(this.validateValue)) {
-  //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-  //     const isSelectedByValidator = this.isValueSelectedByArray(
-  //       this.validateValue
-  //     );
-
-  //     if (this.checkValue != isSelectedByValidator) {
-  //       this.handleChange(this.value);
-  //     }
-  //   } else {
-  //     this.checkValue = this.selectedValues == this.value;
-  //   }
-  // },
-  computed: {
-    getLabelClasses() {
-      if (this.isWide) {
-        let classes = "flex-row py-2 ps-4 pe-4";
-        if (this.buttonLabelSubCopy) {
-          classes += " checkboxTop";
-        }
-        return classes;
-      } else {
-        return "flex-column pt-4 pb-3";
-      }
+    props: {
+        isMultiSelect: Boolean, //Defines use as checkbox
+        isWide: Boolean,
+        buttonImage: String, //Required: File name of image
+        buttonImageId: String,
+        buttonLabel: String, //Required: Label text
+        isRequired: Boolean, //Required: is aria-required required or not?
+        altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
+        // buttonID: String, // TODO KO We don't use this //Required: Unique
+        groupName: String, //Rquired: Unique
+        buttonLabelSubCopy: String, //Optional: sub text
+        value: {
+            // Field initial value
+            type: String,
+            default: "",
+        },
+        // colLength: String,
+        validationRules: String,
+        // selectedValues: [Array, String],
+        // hasError: Boolean,
+        valueToLogType: String,
+        selectOnKeypress: Boolean,
     },
-  },
-  methods: {
-    // isValueSelectedByArray(arr) {
-    //   return this.isMultiSelect ? arr.includes(this.value) : arr[0];
-    // },
-    // handleInputChange() {
-    //   if (!this.selectingInitiatesLoad) {
-    //     this.handleCheckChange();
-    //   }
-    // },
-    // handleKeyupArrow() {
-    //   if (this.isMultiSelect) {
-    //     return; // Prevent arrow keys from doing anything if element is a checkbox
-    //   }
+    data() {
+        return {
+            // checkValue: null,
+        };
+    },
+    // mounted() {
+    //   if (Array.isArray(this.validateValue)) {
+    //     this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+    //     const isSelectedByValidator = this.isValueSelectedByArray(
+    //       this.validateValue
+    //     );
 
-    //   if (!this.selectingInitiatesLoad) {
-    //     this.handleCheckChange();
+    //     if (this.checkValue != isSelectedByValidator) {
+    //       this.handleChange(this.value);
+    //     }
+    //   } else {
+    //     this.checkValue = this.selectedValues == this.value;
     //   }
     // },
-    // triggerButton() {
-    //   if (this.selectingInitiatesLoad) {
-    //     this.displayLoader();
-    //     this.handleCheckChange();
-    //   }
+    computed: {
+        getLabelClasses() {
+            if (this.isWide) {
+                let classes = "flex-row py-2 ps-4 pe-4";
+                if (this.buttonLabelSubCopy) {
+                    classes += " checkboxTop";
+                }
+                return classes;
+            } else {
+                return "flex-column pt-4 pb-3";
+            }
+        },
+    },
+    methods: {
+        // isValueSelectedByArray(arr) {
+        //   return this.isMultiSelect ? arr.includes(this.value) : arr[0];
+        // },
+        // handleInputChange() {
+        //   if (!this.selectingInitiatesLoad) {
+        //     this.handleCheckChange();
+        //   }
+        // },
+        // handleKeyupArrow() {
+        //   if (this.isMultiSelect) {
+        //     return; // Prevent arrow keys from doing anything if element is a checkbox
+        //   }
 
-    //   this.pushEventToGA(
-    //     this.$route.query[queryStrings.FMG_PAGE],
-    //     this.GaActions.CLICKED,
-    //     this.value.toString(),
-    //     true,
-    //     this.valueToLogType
-    //   );
-    // },
-    // handleCheckChange() {
-    //   const emitEvent = {
-    //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
-    //     value: this.value.toString(),
-    //     buttonId: this.buttonID && this.buttonID.toString(),
+        //   if (!this.selectingInitiatesLoad) {
+        //     this.handleCheckChange();
+        //   }
+        // },
+        // triggerButton() {
+        //   if (this.selectingInitiatesLoad) {
+        //     this.displayLoader();
+        //     this.handleCheckChange();
+        //   }
+
+        //   this.pushEventToGA(
+        //     this.$route.query[queryStrings.FMG_PAGE],
+        //     this.GaActions.CLICKED,
+        //     this.value.toString(),
+        //     true,
+        //     this.valueToLogType
+        //   );
+        // },
+        // handleCheckChange() {
+        //   const emitEvent = {
+        //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+        //     value: this.value.toString(),
+        //     buttonId: this.buttonID && this.buttonID.toString(),
+        //   };
+
+        //   this.handleChange(this.value);
+        //   this.$emit("isCheckedChanged", emitEvent);
+        // },
+        handleAnswerChange(e) {
+            // console.log(e)
+            this.$emit("change", e);
+        },
+    },
+    watch: {
+        // Changing this will impact pre-selection data loads on vehicle-parts.
+        // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
+        // selectedValues(newVal) {
+        //   if (typeof newVal === "string") {
+        //     this.checkValue = newVal == this.value;
+        //   } else if (newVal !== undefined) {
+        //     this.checkValue = newVal.value;
+        //   }
+        // },
+    },
+    // setup(props) {
+    //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
+
+    //   const fieldOptions = {
+    //     type: inputType,
+    //     checkedValue: props.value, //  EX: "Single" or "Passenger"
+    //     potentialInitialValue: props.selectedValues,
     //   };
 
-    //   this.handleChange(this.value);
-    //   this.$emit("isCheckedChanged", emitEvent);
-    // },
-    handleAnswerChange(e) {
-      // console.log(e)
-      this.$emit("change", e);
-    },
-  },
-  watch: {
-    // Changing this will impact pre-selection data loads on vehicle-parts.
-    // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
-    // selectedValues(newVal) {
-    //   if (typeof newVal === "string") {
-    //     this.checkValue = newVal == this.value;
-    //   } else if (newVal !== undefined) {
-    //     this.checkValue = newVal.value;
+    //   // Set initialValue for validation setup if pre-selected
+    //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+    //   if (
+    //     props.selectedValues &&
+    //     (props.selectedValues.includes(props.value) ||
+    //       props.selectedValues.includes(parseInt(props.value)))
+    //   ) {
+    //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
     //   }
+
+    //   const { handleChange, errors, value } = useField(
+    //     toRef(props, "groupName"),
+    //     toRef(props, "validationRules"),
+    //     fieldOptions
+    //   );
+
+    //   // First land on the blank, unselected page, no handleChange
+    //   // Land on page with initial values, handleChange
+    //   const validateValue = value;
+    //   return {
+    //     handleChange,
+    //     errors,
+    //     validateValue,
+    //     fieldOptions, // only need to expose this for unit test purposes
+    //   };
     // },
-  },
-  // setup(props) {
-  //   const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-  //   const fieldOptions = {
-  //     type: inputType,
-  //     checkedValue: props.value, //  EX: "Single" or "Passenger"
-  //     potentialInitialValue: props.selectedValues,
-  //   };
-
-  //   // Set initialValue for validation setup if pre-selected
-  //   // NOTE: props.selectedValues could be an array of strings, or an array of integers...
-  //   if (
-  //     props.selectedValues &&
-  //     (props.selectedValues.includes(props.value) ||
-  //       props.selectedValues.includes(parseInt(props.value)))
-  //   ) {
-  //     fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
-  //   }
-
-  //   const { handleChange, errors, value } = useField(
-  //     toRef(props, "groupName"),
-  //     toRef(props, "validationRules"),
-  //     fieldOptions
-  //   );
-
-  //   // First land on the blank, unselected page, no handleChange
-  //   // Land on page with initial values, handleChange
-  //   const validateValue = value;
-  //   return {
-  //     handleChange,
-  //     errors,
-  //     validateValue,
-  //     fieldOptions, // only need to expose this for unit test purposes
-  //   };
-  // },
 };
 </script>
 
 <style lang="scss">
 .list-card {
-  border: 1px solid $gray-500;
+    border: 1px solid $gray-500;
 
-  &.has-error {
-    //Red border if invalid
-    border: 1px solid $red;
-  }
-
-  img {
-    // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-    height: auto;
-    width: 6.5rem;
-    margin-bottom: 2.2rem;
-    max-width: 100%;
-  }
-
-  &:hover {
-    @include media-breakpoint-up(sm) {
-      box-shadow: 0px 0px 0px 4px $blue-300;
-      border: 1px solid transparent;
-    }
-  }
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    // opacity: 0;
-    // width: 0;
-    // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
-    position: absolute;
-
-    + .list-card-content {
-      outline: none;
-      display: block;
-      position: relative;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      p {
-        color: $gray-600;
-        text-align: center;
-
-        &.sub-copy {
-          color: $gray-550;
-        }
-      }
+    &.has-error {
+        //Red border if invalid
+        border: 1px solid $red;
     }
 
-    &:checked + .list-card-content {
-      background: $blue-100;
-      box-shadow: 0 0 0 1px $blue;
-      border-radius: 0.5rem;
-    }
-    &:focus-visible + .list-card-content {
-      box-shadow: 0 0 0 2.5px $blue;
-      border-radius: 0.5rem;
-    }
-    &:focus + .list-card-content {
-      box-shadow: 0 0 0 2.5px $blue;
-      border-radius: 0.5rem;
-    }
-    &:checked:focus + .list-card-content {
-      box-shadow: 0 0 0 2.5px $blue;
-    }
-    &:checked + .list-card-content {
-      p {
-        color: $black;
-        font-weight: 500;
-      }
-
-      .sub-copy {
-        color: $gray-600;
-        font-weight: 400;
-      }
-    }
-
-    + .list-card-content::before {
-      content: "";
-      position: absolute;
-      display: flex;
-      margin: 0 auto;
-      width: 1rem;
-      height: 1rem;
-      margin: 3rem 0 0 0;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-      order: 2;
-      flex-shrink: 0;
-      color: $gray-600;
-    }
-
-    + .list-card-content.checkboxTop::before {
-      margin: -1.25rem 0.5rem 0 0 !important;
-    }
-
-    + .list-card-content.checkboxTop::after {
-      margin: -1.5rem 0.5rem 0 0 !important;
-    }
-
-    &:checked + .list-card-content::before {
-      background: $blue;
-    }
-
-    &:checked + .list-card-content::after {
-      content: "";
-      position: absolute;
-      margin: 3.2rem 0 0 0;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 11px;
-      transform: rotate(-45deg);
-      z-index: 1;
-    }
-  }
-
-  input[type="radio"] {
-    + .list-card-content::before {
-      content: "";
-      display: none;
-    }
-
-    + .list-card-content::after {
-      content: "";
-      display: none;
-    }
-
-    + .list-card-content {
-      img {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &.horizontal {
     img {
-      margin-bottom: 0;
-      width: 5.5rem;
+        // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
+        height: auto;
+        width: 6.5rem;
+        margin-bottom: 2.2rem;
+        max-width: 100%;
+    }
+
+    &:hover {
+        @include media-breakpoint-up(sm) {
+            box-shadow: 0px 0px 0px 4px $blue-300;
+            border: 1px solid transparent;
+        }
     }
 
     input[type="checkbox"],
     input[type="radio"] {
-      + .list-card-content::before {
-        content: "";
-        position: relative;
-        margin: 0 0.5rem 0 0;
-        order: 1;
-      }
+        // opacity: 0;
+        // width: 0;
+        // height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
+        position: absolute;
 
-      &:checked + .list-card-content::after {
-        content: "";
-        margin: -0.15rem 0 0 0;
-        left: 1.175rem;
-      }
+        + .list-card-content {
+            outline: none;
+            display: block;
+            position: relative;
 
-      &:checked + .list-card-content {
-        p {
-          color: $black;
-          font-weight: 500;
+            &:hover {
+                cursor: pointer;
+            }
+
+            p {
+                color: $gray-600;
+                text-align: center;
+
+                &.sub-copy {
+                    color: $gray-550;
+                }
+            }
         }
 
-        .sub-copy {
-          color: $gray-600;
-          font-weight: 400;
+        &:checked + .list-card-content {
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+            border-radius: 0.5rem;
         }
-      }
+        &:focus-visible + .list-card-content {
+            box-shadow: 0 0 0 2.5px $blue;
+            border-radius: 0.5rem;
+        }
+        &:focus + .list-card-content {
+            box-shadow: 0 0 0 2.5px $blue;
+            border-radius: 0.5rem;
+        }
+        &:checked:focus + .list-card-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-card-content {
+            p {
+                color: $black;
+                font-weight: 500;
+            }
 
-      + .list-card-content {
-        outline: none;
-        min-height: 48px;
-        color: $gray-600;
-
-        img {
-          margin-bottom: 0;
+            .sub-copy {
+                color: $gray-600;
+                font-weight: 400;
+            }
         }
 
-        p {
-          color: $gray-600;
-          text-align: left;
-
-          &.sub-copy {
-            color: $gray-550;
-          }
+        + .list-card-content::before {
+            content: "";
+            position: absolute;
+            display: flex;
+            margin: 0 auto;
+            width: 1rem;
+            height: 1rem;
+            margin: 3rem 0 0 0;
+            background: white;
+            border: 1px solid $gray-500;
+            border-radius: 2px;
+            order: 2;
+            flex-shrink: 0;
+            color: $gray-600;
+        }
+
+        + .list-card-content.checkboxTop::before {
+            margin: -1.25rem 0.5rem 0 0 !important;
+        }
+
+        + .list-card-content.checkboxTop::after {
+            margin: -1.5rem 0.5rem 0 0 !important;
+        }
+
+        &:checked + .list-card-content::before {
+            background: $blue;
+        }
+
+        &:checked + .list-card-content::after {
+            content: "";
+            position: absolute;
+            margin: 3.2rem 0 0 0;
+            border-left: 2px solid $white;
+            border-bottom: 2px solid $white;
+            height: 6px;
+            width: 11px;
+            transform: rotate(-45deg);
+            z-index: 1;
+        }
+    }
+
+    input[type="radio"] {
+        + .list-card-content::before {
+            content: "";
+            display: none;
+        }
+
+        + .list-card-content::after {
+            content: "";
+            display: none;
+        }
+
+        + .list-card-content {
+            img {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.horizontal {
+        img {
+            margin-bottom: 0;
+            width: 5.5rem;
+        }
+
+        input[type="checkbox"],
+        input[type="radio"] {
+            + .list-card-content::before {
+                content: "";
+                position: relative;
+                margin: 0 0.5rem 0 0;
+                order: 1;
+            }
+
+            &:checked + .list-card-content::after {
+                content: "";
+                margin: -0.15rem 0 0 0;
+                left: 1.175rem;
+            }
+
+            &:checked + .list-card-content {
+                p {
+                    color: $black;
+                    font-weight: 500;
+                }
+
+                .sub-copy {
+                    color: $gray-600;
+                    font-weight: 400;
+                }
+            }
+
+            + .list-card-content {
+                outline: none;
+                min-height: 48px;
+                color: $gray-600;
+
+                img {
+                    margin-bottom: 0;
+                }
+
+                p {
+                    color: $gray-600;
+                    text-align: left;
+
+                    &.sub-copy {
+                        color: $gray-550;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>