CSR-343 Finish validation

src/common-components/button-question/button-question.vue

@@ -130,6 +130,7 @@ export default {
         return this.modelValue;
       },
       set: function(newValue) {
+        console.log(newValue)
         this.$emit("update:modelValue", newValue);
       }
     },
@@ -143,15 +144,20 @@ export default {
       return answer.Name ? answer.Name : answer;
     },
     handleCheckedChanged(val) {
+      console.log(val)
+      console.log("A")
       if(this.selectingInitiatesLoad) {
+        console.log("B")
         this.selectedValues = [val.value];
       } else {
         if(Array.isArray(this.selectedValues)) {
+          console.log("C")
           const newSelectedValues = this.selectedValues;
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;
         }
         else {
+          console.log("D")
           this.selectedValues = val.value;
         }
       }

src/common-components/funnel-footer/funnel-footer.vue

@@ -85,6 +85,7 @@ export default {
       };
     },
     buttonClick() {
+      console.log("HI")
       //prevent keyboard input after button click
       document.onkeydown = function (e) {
         return false;

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -4,11 +4,6 @@
             <p class="mb-0 color-question-text">{{ colorQuestionText }}</p>
         </div>
     </div>
-    {{ featureListData }}
-    <br />
-    {{ tintSelectionOptions }}
-    <br />
-    {{ selectedTint }}
     {{ selectedPart }}
 
     <div class="container nested-radio">
@@ -34,6 +29,7 @@
                                     class="radioQuestion"
                                     :questionText="glassFeatureQuestion"
                                     :answers="featureListData[selectedTint]"
+                                    :selectedValues="selectedPart"
                                     textPosition="text-start"
                                     :loaderEnabled="false"
                                     isRequired
@@ -123,7 +119,7 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-              console.log("modelValue: " + newValue)
+                console.log(newValue)
                 this.$emit("update:modelValue", newValue);
             },
         },

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -27,7 +27,7 @@
         <div class="container-fluid">
           <hr v-if="i > 0" />
         </div>
-
+{{ glassParts }}
         <glassPartQuestion
           :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
           v-model="glassParts[item.glassLocation + '-' + item.glassName]"
@@ -112,7 +112,6 @@ components: {
 },
 computed: {
   isForwardActionDisabled() {
-    console.log(this.glassParts)
     return !this.glassParts || Object.values(this.glassParts).filter(value => value).length === 0;
   },
   PartsForQuestions() {

src/styles/common-error-styles.scss

@@ -46,6 +46,7 @@ html {
       input[type=radio]+label:before,
       input[type=checkbox]+label:before {
         border: 1px solid $red;
+        background-color: initial;
       }
       input[type=checkbox]:checked + label:before {
         border: 1px solid $blue;

src/ux-components/radio/radio.vue

@@ -1,18 +1,19 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
+  <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
     <input
-    type="radio"
-    class="form-check-input"
-    aria-checked="false"
-    :name="groupName"
-    :id="buttonID"
-    :aria-required="isRequired"
-    :value="value"
-    :v-model="checkValue"
-    @change="handleCheckChange()"
-    :checked="checkValue"
-    />
+      type="radio"
+      class="form-check-input"
+      aria-checked="false"
+      :name="groupName"
+      :id="buttonID"
+      :aria-required="isRequired"
+      :value="value"
+      :v-model="checkValue"
+      @change="handleCheckChange"
+      :checked="checkValue"
+      :validationRules="validationRules"
+      />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
@@ -39,6 +40,7 @@ export default {
     screenReaderOnlyText: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    validationRules: String
   },
   data() {
     return {
@@ -53,10 +55,8 @@ export default {
     }
   },
   methods: {
-    handleClick(value) {
-      this.handleChange(value);
-    },
     handleCheckChange() {
+      this.handleChange(this.value);
       const emitEvent = {
         checkValue: this.checkValue,
         value: this.value.toString(),