From abc5889b0ce313c4418ec17ed277b126a8ec4d70 Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Mon, 23 Jan 2023 12:50:14 -0500
Subject: [PATCH] SSR-237

---
 .../button-question/button-question.vue       | 481 +++++++++---------
 1 file changed, 241 insertions(+), 240 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 82f402e0..9b610437 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -1,76 +1,79 @@
 <!-- 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>
+    <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)">
-              <legend
-                  class="sr-only"
-                  :data-focus-target="formatString(groupName)"
-                  tabindex="-1"
-                  :id="formatString(groupName)">
-                  {{ 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.value ? answer.value : answer">
-                      <component
-                          :is="buttonTypeString"
-                          :buttonLabel="answer.buttonLabel"
-                          :buttonLabelSubCopy="answer.buttonLabelSubCopy"
-                          :buttonBodyCopy="answer.buttonBodyCopy"
-                          :buttonAuxillaryCopy="answer.buttonAuxillaryCopy"
-                          :buttonFooterCopy="answer.buttonFooterCopy"
-                          :buttonImage="answer.buttonImage"
-                          :buttonImageId="answer.buttonImageId"
-                          :groupName="answer.groupName"
-                          :isMultiSelect="isMultiSelect"
-                          :value="answer.value"
-                          :selectingInitiatesLoad="selectingInitiatesLoad"
-                          :isWide="isWide"
-                          :validationRules="validationRules"
-                          :textPosition="textPosition"
-                          :additionalButtonStyling="additionalButtonStyling"
-                          :lastValuePushedToGa="lastValuePushedToGa"
-                          :setLastValuePushedToGa="setLastValuePushedToGa"
-                          :suppressError="suppressError"
-                          v-model="selectedValues" />
-                      <!-- For nested questions -->
-                      <transition name="fade" mode="out-in">
-                          <div
-                              v-if="
-                                  typeof selectedValues == 'string' &&
-                                  selectedValues == answer.value
-                              ">
-                              <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>
-  </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)">
+                <legend
+                    class="sr-only"
+                    :data-focus-target="formatString(groupName)"
+                    tabindex="-1"
+                    :id="formatString(groupName)">
+                    {{ 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.value ? answer.value : answer">
+                        <component
+                            :is="buttonTypeString"
+                            :buttonLabel="answer.buttonLabel"
+                            :buttonLabelSubCopy="answer.buttonLabelSubCopy"
+                            :buttonBodyCopy="answer.buttonBodyCopy"
+                            :buttonAuxillaryCopy="answer.buttonAuxillaryCopy"
+                            :buttonFooterCopy="answer.buttonFooterCopy"
+                            :buttonImage="answer.buttonImage"
+                            :buttonImageId="answer.buttonImageId"
+                            :groupName="answer.groupName"
+                            :isMultiSelect="isMultiSelect"
+                            :value="answer.value"
+                            :selectingInitiatesLoad="selectingInitiatesLoad"
+                            :isWide="isWide"
+                            :validationRules="validationRules"
+                            :textPosition="textPosition"
+                            :additionalButtonStyling="additionalButtonStyling"
+                            :lastValuePushedToGa="lastValuePushedToGa"
+                            :setLastValuePushedToGa="setLastValuePushedToGa"
+                            :suppressError="suppressError"
+                            v-model="selectedValues" />
+                        <!-- For nested questions -->
+                        <transition name="fade" mode="out-in">
+                            <div
+                                v-if="
+                                    typeof selectedValues == 'string' &&
+                                    selectedValues == answer.value
+                                ">
+                                <slot></slot>
+                            </div>
+                        </transition>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+        <div class="row form-test-error mt-1">
+            <error-message
+                class="small"
+                :name="formatString(groupName)"
+                v-if="!suppressError"></error-message>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -81,195 +84,193 @@ import radio from "@/ux-components/radio/radio";
 import { ErrorMessage } from "vee-validate";
 
 export default {
-  name: "buttonQuestion",
-  props: {
-      buttonTypeString: {
-          type: String,
-          default: "listButton",
-      },
-      buttonTypeObject: {
-          type: Object,
-          default: null,
-      },
-      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,
-      additionalButtonStyling: String,
-  },
-  beforeMount() {
-      if (this.buttonTypeObject) {
-          this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
-      }
-  },
-  data() {
-      return {
-          lastValuePushedToGa: null,
-      };
-  },
-  computed: {
-      getFieldSetClasses() {
-        if (this.isOverflowScrollable) {
-          return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+    name: "buttonQuestion",
+    props: {
+        buttonTypeString: {
+            type: String,
+            default: "listButton",
+        },
+        buttonTypeObject: {
+            type: Object,
+            default: null,
+        },
+        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,
+        additionalButtonStyling: String,
+    },
+    beforeMount() {
+        if (this.buttonTypeObject) {
+            this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
         }
-        else if (this.buttonTypeString === "listCard") {
-          return "w-100";
-        }
-        else {
-          return "";
-        }
-      },
-      getComponentLoopWrapperClasses() {
-          let classes;
-          switch (this.buttonTypeString) {
-              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;
-              case "servicePackageRadio":
-                  classes = "package-main";
-                  break;
-          }
-          return classes;
-      },
-      getComponentWrapperClasses() {
-          let classes = "";
+    },
+    data() {
+        return {
+            lastValuePushedToGa: null,
+        };
+    },
+    computed: {
+        getFieldSetClasses() {
+            if (this.isOverflowScrollable) {
+                return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+            } else if (this.buttonTypeString == "listCard") {
+                return "w-100";
+            } else {
+                return "";
+            }
+        },
+        getComponentLoopWrapperClasses() {
+            let classes;
+            switch (this.buttonTypeString) {
+                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;
+                case "servicePackageRadio":
+                    classes = "package-main";
+                    break;
+            }
+            return classes;
+        },
+        getComponentWrapperClasses() {
+            let classes = "";
 
-          classes += this.isWide ? "col-12" : "col";
+            classes += this.isWide ? "col-12" : "col";
 
-          if (this.buttonTypeString == "radio") {
-              classes += " radio-button-container";
-          } else if (this.buttonTypeString == "servicePackageRadio") {
-              classes = "package-wrapper";
-          }
+            if (this.buttonTypeString == "radio") {
+                classes += " radio-button-container";
+            } else if (this.buttonTypeString == "servicePackageRadio") {
+                classes = "package-wrapper";
+            }
 
-          return classes;
-      },
-      buttonsInfo() {
-          return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
-              buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
-              altText: answer.altText ?? (answer.Name ? answer.Name : answer),
-              buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
-              buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
-              buttonAuxillaryCopy: answer.buttonAuxillaryCopy ?? answer.buttonAuxillaryCopy,
-              buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
-              buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
-              buttonImageId: answer.buttonImageId ?? answer.ImageId,
-              groupName: this.formatString(this.groupName),
-              value:
-                  answer.value ??
-                  (this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
-                  (typeof answer !== "object" ? answer : null),
-          }));
-      },
-      selectedValues: {
-          get() {
-              return this.modelValue;
-          },
-          set(selectedAnswers) {
-              this.$emit("update:modelValue", selectedAnswers);
-          },
-      },
-  },
-  methods: {
-      formatString(str) {
-          return String(str).replaceAll(" ", "-");
-      },
-      setLastValuePushedToGa(lastValuePushedToGa) {
-          this.lastValuePushedToGa = lastValuePushedToGa;
-      },
-  },
-  components: {
-      listButton,
-      listButtonHorizontal,
-      listCard,
-      ErrorMessage,
-      radio,
-  },
+            return classes;
+        },
+        buttonsInfo() {
+            return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
+                buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
+                altText: answer.altText ?? (answer.Name ? answer.Name : answer),
+                buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
+                buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
+                buttonAuxillaryCopy: answer.buttonAuxillaryCopy ?? answer.buttonAuxillaryCopy,
+                buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
+                buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
+                buttonImageId: answer.buttonImageId ?? answer.ImageId,
+                groupName: this.formatString(this.groupName),
+                value:
+                    answer.value ??
+                    (this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
+                    (typeof answer !== "object" ? answer : null),
+            }));
+        },
+        selectedValues: {
+            get() {
+                return this.modelValue;
+            },
+            set(selectedAnswers) {
+                this.$emit("update:modelValue", selectedAnswers);
+            },
+        },
+    },
+    methods: {
+        formatString(str) {
+            return str?.replaceAll(" ", "-");
+        },
+        setLastValuePushedToGa(lastValuePushedToGa) {
+            this.lastValuePushedToGa = lastValuePushedToGa;
+        },
+    },
+    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 {
-      margin: 0;
-  }
-  fieldset {
-      .ui-radio {
-          margin: 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;
+        }
+    }
 }
 
 .welcome {