From 3361e6818a5d5c962bf3cf338f7028cd7a4a729f Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 22 Feb 2022 17:00:09 -0500
Subject: [PATCH] Updates to account for dev changes

---
 src/layouts/nested-radio-poc/nested-radio.vue |  62 ++-
 .../part-question/part-question.vue           |  14 +-
 src/ux-components/list-card/list-card.vue     | 375 ++++++++----------
 src/ux-components/radio/radio.vue             |  94 +++--
 4 files changed, 272 insertions(+), 273 deletions(-)

diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
index 0064deb06..d0a78d085 100644
--- a/src/layouts/nested-radio-poc/nested-radio.vue
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -1,21 +1,42 @@
 <template>
-<div class="container-fluid nested-radio">
+  <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" />
-        </div>
+      <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"
+        />
+      </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" />
-        </div>
+      <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"
+        />
+      </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" />
-        </div>
+      <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"
+        />
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -33,20 +54,21 @@ export default {
       demoArray: [
         "rain sensor, solar, 3rd visor band",
         "rain sensor, heated glass, solar, 3rd visor band",
-      ]
-    }
+      ],
+    };
+  },
 };
 </script>
 
 <style lang="scss">
 .nested-radio {
-    .ui-radio {
-        flex-direction: column;
-        margin: .25rem 0;
-    }
+  .ui-radio {
+    flex-direction: column;
+    margin: 0.25rem 0;
+  }
 
-    p {
-        font-size: .875rem;
-    }
+  p {
+    font-size: 0.875rem;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue
index 3d10bdfe1..10d5a8392 100644
--- a/src/layouts/vehicle-parts/part-question/part-question.vue
+++ b/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>
-    <div v-if="
+
+    <transition name="fade" mode="out-in">
+        <div v-if="
         selectedTint[name] != undefined &&
         selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
-      " class="row my-2">
-        <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)" />
+      " 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>
-    </div>
+    </transition>
 </div>
 </template>
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index da89bc55a..5f7ace3d4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -44,36 +44,28 @@
         </div>
       </label>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import {
-    useField
-} from "vee-validate";
-
+import { useField } from "vee-validate";
 export default {
-    name: "listCard",
-    props: {
-        isMultiSelect: Boolean, //Defines use as checkbox
-        isWide: Boolean,
-        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.
-        buttonID: String, //Required: Unique
-        groupName: String, //Rquired: Unique
-        buttonLabelSubCopy: String, //Optional: sub text
-        value: {
-            // Field initial value
-            type: String,
-            default: "",
-        },
-        colLength: String,
-        validationRules: String,
-        selectedButtonIDs: [Array, String],
-        hasError: Boolean,
+  name: "listCard",
+  props: {
+    isMultiSelect: Boolean, //Defines use as checkbox
+    isWide: Boolean,
+    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.
+    buttonID: String, //Required: Unique
+    groupName: String, //Rquired: Unique
+    buttonLabelSubCopy: String, //Optional: sub text
+    value: {
+      // Field initial value
+      type: String,
+      default: "",
     },
     colLength: String,
     validationRules: String,
@@ -97,211 +89,178 @@ 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() };
+        this.$emit('isCheckedChanged', emitEvent);
+        this.$emit('update:modelValue', emitEvent);
       }
     }
   },
   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, {
-            type: inputType,
-            checkedValue: props.value,
-        });
-        return {
-            handleChange,
-            errors,
-        };
-    },
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
+      type: inputType,
+      checkedValue: props.value,
+    });
+    return {
+      handleChange,
+      errors,
+    };
+  },
 };
 </script>
 
 <style lang="scss">
 .list-card {
-    border: 1px solid $gray-500;
-
-    &.invalid {
-        //Red border if invalid
-        border: 1px solid $red;
+  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;
+    width: 6.5rem;
+    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;
+      display: flex;
+      margin: 0 auto;
+      width: 1rem;
+      height: 1rem;
+      margin: 3rem 0 0 0;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+      order: 2;
+      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;
+      margin: 3.2rem 0 0 0;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 11px;
+      transform: rotate(-45deg);
+    }
+  }
+  input[type="radio"] {
+    + label::before {
+      content: "";
+      display: none;
+    }
+    + label::after {
+      content: "";
+      display: none;
+    }
+    + label {
+      img {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &.horizontal {
     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;
-        width: 6.5rem;
-        margin-bottom: 3rem;
-        max-width: 100%;
+      margin-bottom: 0;
+      width: 5.5rem;
     }
-
-    &: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;
-            display: flex;
-            margin: 0 auto;
-            width: 1rem;
-            height: 1rem;
-            margin: 3rem 0 0 0;
-            background: white;
-            border: 1px solid $gray-500;
-            border-radius: 2px;
-            order: 2;
-            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;
-            margin: 3.2rem 0 0 0;
-            border-left: 2px solid $white;
-            border-bottom: 2px solid $white;
-            height: 6px;
-            width: 11px;
-            transform: rotate(-45deg);
-        }
-    }
-
-    input[type="radio"] {
-        +label::before {
-            content: "";
-            display: none;
-        }
-
-        +label::after {
-            content: "";
-            display: none;
-        }
-
-        +label {
-            img {
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    &.horizontal {
+      + label::before {
+        content: "";
+        position: relative;
+        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;
-            width: 5.5rem;
+          margin-bottom: 0;
         }
-
-        input[type="checkbox"],
-        input[type="radio"] {
-            +label::before {
-                content: "";
-                position: relative;
-                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;
-                    }
-                }
-            }
+        p {
+          text-align: left;
+          &.sub-copy {
+            color: $gray-550;
+          }
         }
+      }
     }
+  }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 1b4d71d9e..d7620df94 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -2,15 +2,15 @@
   <!-- 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' : '']">
     <input
-    type="radio"
-    class="form-check-input"
-    aria-checked="false"
-    :name="groupName"
-    :id="buttonID"
-    :aria-required="isRequired"
-    :value="value"
-    :v-model="checkValue"
-    @change="handleCheckChanged"
+      type="radio"
+      class="form-check-input"
+      aria-checked="false"
+      :name="groupName"
+      :id="buttonID"
+      :aria-required="isRequired"
+      :value="value"
+      :v-model="checkValue"
+      @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -18,42 +18,55 @@
         screenReaderOnlyText
       }}</span>
     </label>
-</div>
+  </div>
 </template>
 
 <script>
-import {
-    toRefs
-} from "vue";
-import {
-    useField
-} from "vee-validate";
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 export default {
-    name: "radio",
-    props: {
-        groupName: String,
-        buttonLabel: String,
-        buttonID: String,
-        isRequired: Boolean,
-        hasError: Boolean,
-        value: {
-            type: [String, Number],
-            default: "",
-        },
-        screenReaderOnlyText: String,
+  name: "radio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
     },
-    data() {
-        return {
-            checkValue: Boolean,
-        };
-    },
-    handleCheckChange(newValue, oldValue){
-      const isInitialization = typeof(oldValue) === 'function';
-      if (!isInitialization) {
-        this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
-      }
+    screenReaderOnlyText: String,
+    hasError: Boolean,
+  },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created() {
+    if (this.selectedButtonIDs) {
+      this.checkValue = this.selectedButtonIDs[0];
     }
   },
+  methods: {
+    handleClick(value) {
+      this.handleChange(value);
+    },
+    handleCheckChanged(newValue, oldValue) {
+      const isInitialization = typeof oldValue === "function";
+      if (!isInitialization) {
+
+        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%;
@@ -94,4 +108,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>