Updates to account for dev changes

src/layouts/nested-radio-poc/nested-radio.vue

@@ -2,17 +2,38 @@
   <div class="container-fluid nested-radio">
     <div class="row mb-1">
       <div class="col">
-            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint, Blue Shade" buttonID="radio1" />
+        <listCard
+          groupName="listcard1"
+          isWide="true"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+          buttonLabel="Green Tint, Blue Shade"
+          buttonID="radio1"
+        />
       </div>
     </div>
     <div class="row mb-1">
       <div class="col">
-            <buttonQuestion buttonType="radio" groupName="Demo Group" buttonID="button1" isRequired value="test button" screenReaderOnlyText="rain sensor, solar, 3rd visor band" :answers="demoArray" questionText="ok now select your features" />
+        <buttonQuestion
+          buttonType="radio"
+          groupName="Demo Group"
+          buttonID="button1"
+          isRequired
+          value="test button"
+          screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+          :answers="demoArray"
+          questionText="ok now select your features"
+        />
       </div>
     </div>
     <div class="row mb-2">
       <div class="col">
-            <listCard groupName="listcard1" isWide="true" buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3" buttonLabel="Green Tint" buttonID="radio2" />
+        <listCard
+          groupName="listcard1"
+          isWide="true"
+          buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+          buttonLabel="Green Tint"
+          buttonID="radio2"
+        />
       </div>
     </div>
   </div>
@@ -33,8 +54,9 @@ export default {
       demoArray: [
         "rain sensor, solar, 3rd visor band",
         "rain sensor, heated glass, solar, 3rd visor band",
-      ]
+      ],
-    }
+    };
+  },
 };
 </script>
 
@@ -42,11 +64,11 @@ export default {
 .nested-radio {
   .ui-radio {
     flex-direction: column;
-        margin: .25rem 0;
+    margin: 0.25rem 0;
   }
 
   p {
-        font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 </style>

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

@@ -8,6 +8,7 @@
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
     <div class="row my-2">
         <div class="col">
+
             <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
@@ -16,14 +17,17 @@
           " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
         </div>
     </div>
+
+    <transition name="fade" mode="out-in">
         <div v-if="
         selectedTint[name] != undefined &&
         selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
-      " class="row my-2">
+      " class="row my-2" aria-live="polite">
             <div class="col">
                 <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" v-on:update:modelValue="EmitPartSelection($event)" />
             </div>
         </div>
+    </transition>
 </div>
 </template>
 

src/ux-components/list-card/list-card.vue

@@ -48,10 +48,7 @@
 </template>
 
 <script>
-import {
+import { useField } from "vee-validate";
-    useField
-} from "vee-validate";
-
 export default {
   name: "listCard",
   props: {
@@ -72,11 +69,6 @@ export default {
     },
     colLength: String,
     validationRules: String,
-        selectedButtonIDs: [Array, String],
-        hasError: Boolean,
-    },
-    colLength: String,
-    validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
   },
@@ -97,36 +89,30 @@ export default {
         if (this.buttonLabelSubCopy) {
           classes += " checkboxTop";
         }
+        return classes;
+      } else {
+        return "flex-column pt-4 pb-2";
+      }
     },
   },
   methods: {
     handleCheckChange(newValue, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
+        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
-      }
-    }
-  },
-  setup(props) {
-    const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
-            const emitEvent = {
-                isChecked: this.checkValue,
-                buttonId: this.buttonID.toString()
-            };
-
         this.$emit('isCheckedChanged', emitEvent);
         this.$emit('update:modelValue', emitEvent);
       }
+    }
   },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-
     const {
         value: inputValue,
         handleChange,
         errors,
-        } = useField(props.groupName, props.validationRules, {
+    } = useField(props.groupName, props.validationRules,
+    {
       type: inputType,
       checkedValue: props.value,
     });
@@ -141,12 +127,10 @@ export default {
 <style lang="scss">
 .list-card {
   border: 1px solid $gray-500;
-
   &.invalid {
     //Red border if invalid
     border: 1px solid $red;
   }
-
   img {
     // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
     height: auto;
@@ -154,58 +138,47 @@ export default {
     margin-bottom: 3rem;
     max-width: 100%;
   }
-
   &:hover {
     box-shadow: 0px 0px 0px 4px $blue-300;
     border: 1px solid transparent;
   }
-
   input[type="checkbox"],
   input[type="radio"] {
     opacity: 0;
     width: 0;
     height: 0;
-
     + label {
       display: block;
       position: relative;
-
       &:hover {
         cursor: pointer;
       }
-
       p {
         color: $gray-600;
         text-align: center;
-
         &.sub-copy {
           color: $gray-550;
         }
       }
     }
-
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
-
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
-
     &:checked + label {
       p {
         color: $black;
         font-weight: 500;
       }
-
       .sub-copy {
         color: $gray-600;
       }
     }
-
     + label::before {
       content: "";
       position: absolute;
@@ -221,19 +194,15 @@ export default {
       flex-shrink: 0;
       color: $gray-600;
     }
-
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
     }
-
     + label.checkboxTop::after {
       margin: -1.5rem 0.5rem 0 0 !important;
     }
-
     &:checked + label::before {
       background: $blue;
     }
-
     &:checked + label::after {
       content: "";
       position: absolute;
@@ -245,31 +214,26 @@ export default {
       transform: rotate(-45deg);
     }
   }
-
   input[type="radio"] {
     + label::before {
       content: "";
       display: none;
     }
-
     + label::after {
       content: "";
       display: none;
     }
-
     + label {
       img {
         margin-bottom: 0;
       }
     }
   }
-
   &.horizontal {
     img {
       margin-bottom: 0;
       width: 5.5rem;
     }
-
     input[type="checkbox"],
     input[type="radio"] {
       + label::before {
@@ -278,24 +242,19 @@ export default {
         margin: 0 0.5rem 0 0;
         order: 1;
       }
-
       &:checked + label::after {
         content: "";
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
-
       + label {
         min-height: 48px;
         color: $gray-600;
-
         img {
           margin-bottom: 0;
         }
-
         p {
           text-align: left;
-
           &.sub-copy {
             color: $gray-550;
           }

src/ux-components/radio/radio.vue

@@ -10,7 +10,7 @@
       :aria-required="isRequired"
       :value="value"
       :v-model="checkValue"
-    @change="handleCheckChanged"
+      @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -22,12 +22,8 @@
 </template>
 
 <script>
-import {
+import { toRefs } from "vue";
-    toRefs
+import { useField } from "vee-validate";
-} from "vue";
-import {
-    useField
-} from "vee-validate";
 export default {
   name: "radio",
   props: {
@@ -35,25 +31,42 @@ export default {
     buttonLabel: String,
     buttonID: String,
     isRequired: Boolean,
-        hasError: Boolean,
     value: {
       type: [String, Number],
       default: "",
     },
     screenReaderOnlyText: String,
+    hasError: Boolean,
   },
   data() {
     return {
       checkValue: Boolean,
     };
   },
-    handleCheckChange(newValue, oldValue){
+  created() {
-      const isInitialization = typeof(oldValue) === 'function';
+    if (this.selectedButtonIDs) {
+      this.checkValue = this.selectedButtonIDs[0];
+    }
+  },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    handleCheckChanged(newValue, oldValue) {
+      const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
+
-      }
+        const emitEvent = {
+          checkValue: this.checkValue,
+          value: this.value.toString(),
+          buttonID: this.buttonID.toString(),
+        };
+
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
       }
     },
+  },
   setup(props) {
     const { groupName, value } = toRefs(props);
     const { checked, handleChange, errorMessage } = useField(
@@ -72,12 +85,13 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .form-check {
   .form-check-input {
     border: 1px solid $gray-500;
     border-radius: 100%;
-    margin-right: .5rem;
+    margin-right: 0.5rem;
     &:checked {
       background-color: $white;
       background-size: 71%;