From 80560902f08b38673f7f1b7adaa6c5bfbd026983 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 20 Jan 2022 09:13:49 -0500
Subject: [PATCH] Reworking button question widget to work with 3 different
 button components

---
 .../button-question/button-question.vue       |  53 ++---
 src/layouts/component-test/component-test.vue | 182 ++++++++++++++----
 .../list-button-horizontal.vue                |   5 +-
 src/ux-components/list-button/list-button.vue |   3 +-
 src/ux-components/list-card/list-card.vue     |  25 +--
 5 files changed, 197 insertions(+), 71 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 9ab1e68b4..3a2442c61 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -6,29 +6,33 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : isHorizontal ? horizontalClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+      <fieldset class="w-100" :class="isVehicleQuestion ? vehicleQuestionClasses : ''" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only">{{groupName}}</legend>
-          <component :is="buttonType" v-for="answer in answers" :key="answer"
-            :buttonID="answer"
-            @mouseup="chooseAnswer(answer)"
-            @keyup.space="chooseAnswer(answer)"
-            :loaderEnabled="loaderEnabled"
-            :loaderColor="loaderColor"
-            :loaderPosition="loaderPosition"
-            :sizeInRem="sizeInRem"
-            data-test="button"
-            :groupName="groupName"
-            :textPosition="textPosition"
-            :value="modelValue"
-            screenReaderOnlyText="(opens new window)"
-            :isMultiSelect="isMultiSelect"
-            :ariaLabelBy="ariaLabelBy"
-            :isRequired="isRequired"
-            :buttonImage="buttonImage"
-            :buttonLabel="buttonLabel"
-            :altText="altText"
-            :buttonLabelSubCopy="buttonLabelSubCopy"
-          />
+          <div :class="isRow ? 'row g-2' : isColumn ? columnClasses : 'w-100'">
+            <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)"
+              :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"
+              :isRequired="isRequired"
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :altText="altText"
+              :buttonLabelSubCopy="answer.SubText"
+              :value="modelValue"
+            />
+          </div>
       </fieldset>
     </div>
   </div>
@@ -72,7 +76,10 @@ export default {
     isRequired: Boolean,
     isVehicleQuestion: Boolean,
     isHorizontal: Boolean,
+    isColumn: Boolean,
+    isRow: Boolean,
     buttonImage: String,
+    buttonImageId: String,
     buttonLabel: String,
     altText: String,
     buttonLabelSubCopy: String,
@@ -80,7 +87,7 @@ export default {
   data() {
     return {
       vehicleQuestionClasses: 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0',
-      horizontalClasses: 'd-flex flex-row p-0'
+      columnClasses: 'd-flex flex-row p-0'
     };
   },
   methods: {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 0d2c2f65f..94c3b68e9 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -53,39 +53,33 @@
     <fieldset>
       <legend class="sr-only">Functioning as Checkbox</legend>
       <div class="row g-2">
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 1"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
-          />
-        </div>
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="side-window-damage-right-all.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 2"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description with more than one line"
-          />
-        </div>
-        <div class="col-4">
-          <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox 3"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy=""
-          />
-        </div>
+        <listCard
+        isMultiSelect
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 1"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy="Description"
+        />
+        <listCard
+        isMultiSelect
+        buttonImage="side-window-damage-right-all.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 2"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy="Description with more than one line"
+        />
+        <listCard
+        isMultiSelect
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Windshield"
+        altText=""
+        buttonID="List Card Checkbox 3"
+        groupID="checkbox-demo-1"
+        buttonLabelSubCopy=""
+        />
       </div>
     </fieldset>
     <div class="row my-4">
@@ -778,7 +772,7 @@
     :answers="horizontalCheckboxAnswers"
     buttonType="listButtonHorizontal"
     :isMultiSelect="true"
-    :isHorizontal="true"
+    isColumn
     ariaLabelBy="checkbox"
     groupName="checkbox-list-horizontal"
     questionText="List Button Horizontal as checkbox"
@@ -786,12 +780,70 @@
    <buttonQuestion
     :answers="horizontalRadioAnswers"
     buttonType="listButtonHorizontal"
-    :isHorizontal="true"
+    isColumn
     ariaLabelBy="radio"
     groupName="radio-list-horizontal"
     questionText="List Button Horizontal as radio"
     sizeInRem="1"
    />
+   <buttonQuestion
+    :answers="listCardCheckBox"
+    buttonType="listCard"
+    isMultiSelect
+    ariaLabelBy="check_card"
+    groupName="check-list-card"
+    questionText="List Card as checkbox"
+   />
+   <buttonQuestion
+    :answers="listCardRadio"
+    buttonType="listCard"
+    ariaLabelBy="radio_card"
+    groupName="radio-card"
+    questionText="List Card as radio"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card"
+    groupName="horizontal_check-card"
+    questionText="List Card Horizontal as checkbox"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isHorizontal
+    :answers="listCardCheckBoxHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_check_card-st"
+    groupName="horizontal_check-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontal"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card"
+    groupName="horizontal_cradio-card"
+    questionText="List Card Horizontal as radio"
+   />
+   <buttonQuestion
+    isHorizontal
+    :answers="listRadioHorizontalSubText"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-st"
+    groupName="horizontal_cradio-card-st"
+    questionText="With Subtext"
+   />
+   <buttonQuestion
+    isMultiSelect
+    isRow
+    :answers="listCardGroup"
+    buttonType="listCard"
+    ariaLabelBy="horizontal_radio_card-group"
+    groupName="horizontal_cradio-card-group"
+    questionText="In column layout"
+   />
   </div>
 </template>
 
@@ -829,6 +881,66 @@ export default {
       radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'],
       horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'],
       horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'],
+      listCardCheckBox: [{
+        Name: 'List-Card-CB',
+        Text: "List Card CB",
+        SubText: "checkbox",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardRadio: [{
+        Name: 'List-Card-R',
+        Text: "List Card R",
+        SubText: "Radio",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontalSubText: [{
+        Name: 'List-Card-CBHst',
+        Text: "List Card CBHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardCheckBoxHorizontal: [{
+        Name: 'List-Card-CBH',
+        Text: "List Card CBH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontalSubText: [{
+        Name: 'List-Card-RHst',
+        Text: "List Card RHst",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listRadioHorizontal: [{
+        Name: 'List-Card-RH',
+        Text: "List Card RH",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
+      listCardGroup: [{
+        Name: 'Side-Window-1',
+        Text: "Side Window",
+        SubText: "With Subtext",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-2',
+        Text: "Side Window",
+        SubText: "With Subtext that is more than one line",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      },
+      {
+        Name: 'Side-Window-3',
+        Text: "Side Window",
+        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
+        AnswerImageUrl: "side-window-damage-right-all.svg"
+      }],
     };
   },
 };
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 9a0703d0a..9bdeee4b8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,8 @@
   <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName" />
     <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">{{buttonID}}</span>
+      <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>
@@ -20,6 +21,8 @@ export default {
     isMultiSelect: Boolean,
     groupName: String,
     buttonID: String,
+    buttonLabel: String,
+    buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
     loaderEnabled: Boolean,
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index f90525413..24ffd4b58 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <div class="list-group list-button d-flex flex-column w-100 mb-2">
     <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(value)" :data-focus-target="groupName">
     <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">{{ buttonID }}</span>
+      <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="[this.loaderColor, this.loaderPosition]" />
@@ -19,6 +19,7 @@ export default {
   props: {
     isMultiSelect: Boolean,
     groupName: String,
+    buttonLabel: [Number,String],
     buttonID: [Number,String],
     isRequired: Boolean,
     textPosition: String,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 3048812fb..77d48e206 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,16 +1,18 @@
 <template>
   <!-- Heavily documented below -->
-  <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(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 :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">
-        <p class="m-0 small">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
-      </div>
-    </label>
+  <div class="col">
+    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isHorizontal ? 'horizontal' : ''">
+      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @click="handleClick(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">
+          <p class="m-0 small">{{buttonLabel}}</p>
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        </div>
+      </label>
+    </div>
   </div>
 </template>
 
@@ -26,6 +28,7 @@ export default {
     isHorizontal: Boolean,
     //end must choose
     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.