From 8e1c5fef34616554e765cb5b73e5955af34b4e24 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Wed, 23 Feb 2022 15:56:03 -0500
Subject: [PATCH] revert  maxes changes

---
 .../button-question/button-question.vue       | 253 +++++++++---------
 src/ux-components/radio/radio.vue             |   2 +-
 2 files changed, 130 insertions(+), 125 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 946c6e4dd..3ea8fd52e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,153 +1,158 @@
 <template>
-<div :class="isOverflowScrollable ? 'button_question' : ''">
+  <div :class="isOverflowScrollable ? 'button_question' : ''">
     <div v-if="questionText" class="d-flex">
-        <span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', 'text-center'], 'fs-6 fw-bold w-100' ]">{{ questionText }}</span>
+      <span :class="[buttonType === 'radio' ? ['mb-0', 'text-left', 'mt-2' ] : ['mb-4', 'mt-6', '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="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
-            <legend class="sr-only">{{groupName}}</legend>
-            <div :class="getComponentWrapperClasses">
-                <component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer" @isCheckedChanged="handleCheckedChanged" :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer" :value="answer.Name ? answer.Name : answer" :buttonLabel="answer.Text ? answer.Text : answer" :buttonLabelSubCopy="answer.SubText" :textPosition="textPosition" :isMultiSelect="isMultiSelect" :groupName="groupName" :selectingInitiatesLoad="selectingInitiatesLoad" :loaderColor="loaderColor" :loaderPosition="loaderPosition" :isWide=isWide :isRequired=isRequired :buttonImage="answer.AnswerImageUrl" :buttonImageId="answer.ImageId" :altText="answer.Name ? answer.Name : answer" screenReaderOnlyText="(opens new window)" :colLength="getColLength" :selectedValues="selectedValues" data-test="button" :validationRules="validationRules" />
-            </div>
-        </fieldset>
+      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
+        <legend class="sr-only">{{groupName}}</legend>
+          <div :class="getComponentWrapperClasses">
+            <component
+              :is="buttonType"
+              v-for="answer in answers"
+              :key="answer.Name ? answer.Name : answer"
+              @isCheckedChanged="handleCheckedChanged"
+              :buttonID="answer.Name ? groupName + '-' + answer.Name : groupName + '-' + answer"
+              :value="answer.Name ? answer.Name : answer"
+              :buttonLabel="answer.Text ? answer.Text : answer"
+              :buttonLabelSubCopy="answer.SubText"
+              :textPosition="textPosition"
+              :isMultiSelect="isMultiSelect"
+              :groupName="groupName"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
+              :loaderColor="loaderColor"
+              :loaderPosition="loaderPosition"
+              :isWide=isWide
+              :isRequired=isRequired
+              :buttonImage="answer.AnswerImageUrl"
+              :buttonImageId="answer.ImageId"
+              :altText="answer.Name ? answer.Name : answer"
+              screenReaderOnlyText="(opens new window)"
+              :colLength="getColLength"
+              :selectedValues="selectedValues"
+              data-test="button"
+              :validationRules="validationRules"
+            />
+          </div>
+      </fieldset>
     </div>
     <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 import listCard from "@/ux-components/list-card/list-card";
-import {
-    ErrorMessage
-} from 'vee-validate';
+import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
 
 export default {
-    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,
-        modelValue: Array,
-        validationRules: String,
-        suppressError: Boolean,
+  name: "buttonQuestion",
+  props: {
+    buttonType: {
+      type: String,
+      default: "listButton",
     },
-    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 justify-content-center g-2'
-                    break;
-                case 'radio':
-                    classes = 'ui-radio d-flex'
-                    break;
-            }
-            return classes;
-        },
-        getColLength() {
-            if (this.isWide) {
-                return "12"
-            } else {
-                return this.answers.length < 3 ? '' : '-4';
-            }
-        },
-        selectedValues: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
+    isMultiSelect: Boolean,
+    groupName: String,
+    questionText: String,
+    answers: Array,
+    textPosition: {
+      type: String,
+      default: "text-center",
     },
-    methods: {
-        handleCheckedChanged(val) {
-            const newSelectedValues = this.selectedValues;
-            if (this.isMultiSelect && this.selectedValues) {
-                // Add or remove item to array of data to emit
-                if (Array.isArray(this.selectedValues)) {
-                    val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
-                    this.selectedValues = newSelectedValues;
-                }
-
-            } else {
-                if (Array.isArray(this.selectedValues)) {
-                    newSelectedValues.splice(0, newSelectedValues.length);
-                    newSelectedValues.push(val.value);
-                    this.selectedValues = newSelectedValues;
-                }
-            }
-
-    // handleCheckedChanged(val) {
-    //   if(this.isMultiSelect && this.selectedValues) {
-    //     // Add or remove item to array of data to emit
-    //     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];
-    //   }
-    // },
-        },
+    selectingInitiatesLoad: Boolean,
+    loaderColor: {
+      type: String,
+      default: "blue",
     },
-    components: {
-        listButton,
-        listButtonHorizontal,
-        listCard,
-        ErrorMessage,
-        radio,
+    loaderPosition: {
+      type: String,
+      default: "right",
     },
+    isRequired: Boolean,
+    isOverflowScrollable: Boolean,
+    isWide: Boolean,
+    modelValue: Array,
+    validationRules: String,
+    suppressError: Boolean,
+  },
+  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 justify-content-center g-2'
+          break;
+        case 'radio':
+          classes = 'ui-radio d-flex'
+          break;
+      }
+      return classes;
+    },
+    getColLength(){
+      if(this.isWide) {
+        return "12"
+      } else {
+        return this.answers.length < 3 ? '' : '-4';
+      }
+    },
+    selectedValues: {
+      get: function() {
+        return this.modelValue;
+      },
+      set: function(newValue) {
+        this.$emit("update:modelValue", newValue);
+      }
+    },
+  },
+  methods: {
+    handleCheckedChanged(val) {
+      if(this.isMultiSelect && this.selectedValues) {
+        // Add or remove item to array of data to emit
+        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];
+      }
+    },
+  },
+  components: {
+    listButton,
+    listButtonHorizontal,
+    listCard,
+    ErrorMessage,
+    radio,
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .button_question {
-    color: $black;
-    height: calc(100vh - 280px);
+  color: $black;
+  height: calc(100vh - 280px);
 
-    .overflow-scroll {
-        // Height will be determined by overall height of content above list
-        height: calc(100% - 320px);
-        -webkit-overflow-scrolling: touch;
-    }
+  .overflow-scroll {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
+    -webkit-overflow-scrolling: touch;
+  }
 }
 </style>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 46c3b7c76..d7620df94 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -63,7 +63,7 @@ export default {
         };
 
         this.$emit("isCheckedChanged", emitEvent);
-        //this.$emit("update:modelValue", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
       }
     },
   },