From 4ca5d09def7af283df34e3bb2c4c5bac640cbaed Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 21 Jan 2022 09:07:18 -0500
Subject: [PATCH] Cleaning up props for radio question component

---
 .../button-question/button-question.vue       | 67 ++++++++++---------
 src/layouts/component-test/component-test.vue | 16 ++---
 .../make-question/make-question.vue           |  2 +-
 .../model-question/model-question.vue         |  2 +-
 .../style-question/style-question.vue         |  2 +-
 .../year-question/year-question.vue           |  2 +-
 src/ux-components/list-card/list-card.vue     | 29 +++++---
 7 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index d96886088..3c818eb8d 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,36 +1,35 @@
 <template>
-  <div :class="isVehicleQuestion ? 'button_question' : ''">
+  <div :class="isOverflowScrollable ? 'button_question' : ''">
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100">{{
         questionText
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
-          <div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
+          <div :class="getComponentWrapperClasses">
             <component :is="buttonType" v-for="answer in answers" :key="answer"
-              :buttonID="answer.Name ? answer.Name : answer"
               @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
               @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+              :buttonID="answer.Name ? answer.Name : answer"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :buttonLabelSubCopy="answer.SubText"
+              :textPosition="textPosition"
+              :isMultiSelect="isMultiSelect"
+              :groupName="groupName"
               :loaderEnabled="loaderEnabled"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
               :sizeInRem="sizeInRem"
-              data-test="button"
-              :groupName="groupName"
-              :textPosition="textPosition"
-              screenReaderOnlyText="(opens new window)"
-              :isMultiSelect="isMultiSelect"
-              :isHorizontal="isHorizontal"
-              :ariaLabelBy="ariaLabelBy"
+              :isWide="isWide"
               :isRequired="isRequired"
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
-              :buttonLabel="answer.Text ? answer.Text : answer"
-              :altText="altText"
-              :buttonLabelSubCopy="answer.SubText"
+              :altText="answer.Name ? answer.Name : answer"
+              screenReaderOnlyText="(opens new window)"
               :value="modelValue"
+              data-test="button"
             />
           </div>
       </fieldset>
@@ -51,6 +50,7 @@ export default {
       default: 'listButton'
     },
     isMultiSelect: Boolean,
+    groupName: String,
     questionText: String,
     answers: Array,
     textPosition: {
@@ -70,25 +70,30 @@ export default {
       type: [String, Number], 
       default: 1.5
     },
-    modelValue: String,
-    groupName: String,
-    ariaLabelBy: String,
     isRequired: Boolean,
-    isVehicleQuestion: Boolean,
-    isHorizontal: Boolean,
-    isColumn: Boolean,
-    isRow: Boolean,
-    buttonImage: String,
-    buttonImageId: String,
-    buttonLabel: String,
-    altText: String,
-    buttonLabelSubCopy: String,
+    isOverflowScrollable: Boolean,
+    isWide: Boolean,
+    modelValue: String,
   },
-  data() {
-    return {
-      vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
-      columnClasses: 'd-flex flex-row p-0'
-    };
+  computed: {
+    getFieldSetClasses(){
+      return this.isOverflowScrollable ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0' : '';
+    },
+    getComponentWrapperClasses() {
+      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'
+          break;
+      }
+      return classes;
+    }
   },
   methods: {
     chooseAnswer(answer) {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 2ac9f56c6..9e7eaca6d 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -162,7 +162,7 @@
           <legend class="sr-only">Horizontal Checkbox</legend>
           <listCard
           isMultiSelect
-          isHorizontal
+          isWide
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -180,7 +180,7 @@
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
           isMultiSelect
-          isHorizontal
+          isWide
           buttonImage="side-window-damage-right-all.svg"
           buttonLabel="Side Window"
           altText=""
@@ -197,7 +197,7 @@
         <fieldset>
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
-          isHorizontal
+          isWide
           buttonImage="back-glass-damage.svg"
           buttonLabel="Rear Window"
           altText=""
@@ -214,7 +214,7 @@
         <fieldset>
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
-          isHorizontal
+          isWide
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -833,7 +833,7 @@
    />
    <buttonQuestion
     isMultiSelect
-    isHorizontal
+    isWide
     :answers="listCardCheckBoxHorizontal"
     buttonType="listCard"
     ariaLabelBy="horizontal_check_card"
@@ -842,7 +842,7 @@
    />
    <buttonQuestion
     isMultiSelect
-    isHorizontal
+    isWide
     :answers="listCardCheckBoxHorizontalSubText"
     buttonType="listCard"
     ariaLabelBy="horizontal_check_card-st"
@@ -850,7 +850,7 @@
     questionText="With Subtext"
    />
    <buttonQuestion
-    isHorizontal
+    isWide
     :answers="listRadioHorizontal"
     buttonType="listCard"
     ariaLabelBy="horizontal_radio_card"
@@ -858,7 +858,7 @@
     questionText="List Card Horizontal as radio"
    />
    <buttonQuestion
-    isHorizontal
+    isWide
     :answers="listRadioHorizontalSubText"
     buttonType="listCard"
     ariaLabelBy="horizontal_radio_card-st"
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index eaa6b7306..0276f1a67 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isOverflowScrollable
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index bb50872d6..a6dee179d 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isOverflowScrollable
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index d14b39599..36c3718e8 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -1,10 +1,10 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isOverflowScrollable
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :isVehicleQuestion="true"
     :loaderEnabled="true"
     v-model="modelValue"
   />
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 523a25bb3..d189bb54a 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,9 +1,9 @@
 <template>
 <buttonQuestion class="radioQuestion"
+    isOverflowScrollable
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
-    :isVehicleQuestion="true"
     textPosition="text-start"
     :loaderEnabled="true"
     v-model="modelValue"
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index c038eef75..4e9988446 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,13 +1,13 @@
 <template>
   <!-- Heavily documented below -->
   <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''">
       <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleChange(value)" :data-focus-target="groupName" />
-      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="[isHorizontal ? rowClasses : columnClasses,isHorizontal && buttonLabelSubCopy ? 'checkboxTop' : '']" tabindex="-1">
-        <img :id="buttonImageId" :class="!isHorizontal ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
-        <p v-if="!isHorizontal" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy && !isHorizontal" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
-        <div v-if="isHorizontal" class="order-2">
+      <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'" v-bind:src="require(`@/assets/img/icons/${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">{{buttonLabelSubCopy}}</p>
         </div>
@@ -25,7 +25,7 @@ export default {
   props: {
     //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
-    isHorizontal: Boolean,
+    isWide: Boolean,
     //end must choose
     buttonImage: String,//Required: File name of image
     buttonImageId: String,
@@ -40,10 +40,17 @@ export default {
       default: ""
     }
   },
-  data(){
-    return {
-      columnClasses: "flex-column pt-4 pb-2",
-      rowClasses: "flex-row py-r ps-3 pe-8"
+  computed: {
+    getLabelClasses(){
+      if(this.isWide) {
+        let classes = "flex-row py-r ps-3 pe-8";
+        if(this.buttonLabelSubCopy) {
+          classes += " checkboxTop"
+        }
+        return classes
+      } else {
+        return "flex-column pt-4 pb-2";
+      }
     }
   },
   setup(props) {