From 12b8c4a2d4aaed67f50efd12ec388ad12ddf3be3 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 16 Jun 2023 14:28:14 -0400
Subject: [PATCH] SSR-532 make label trigger radio button and display pointer
 on hover.

---
 src/ux-components/radio/radio.vue | 251 +++++++++++++++---------------
 1 file changed, 128 insertions(+), 123 deletions(-)

diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 1a0d52d7..af92391e 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,139 +1,144 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
     <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"
-        :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">{{
-          screenReaderOnlyText
-        }}</span>
-      </label>
+        <label class="d-flex align-items-start form-check-label" :for="buttonID">
+            <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"
+            :validationRules="validationRules"
+            />
+            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+            <span v-if="screenReaderOnlyText" class="sr-only">{{
+                screenReaderOnlyText
+            }}</span>
+        </label>
     </div>
-  </template>
-  
-  <script>
-  import { useField } from "vee-validate";
-  
-  export default {
+</template>
+
+<script>
+import { useField } from "vee-validate";
+
+export default {
     name: "radio",
     props: {
-      groupName: String,
-      buttonLabel: String,
-      buttonID: String,
-      isRequired: Boolean,
-      value: {
-        type: [String, Number],
-        default: "",
-      },
-      screenReaderOnlyText: String,
-      selectedValues: String,
-      hasError: Boolean,
-      validationRules: String,
-      valueToLogType: String,
+        groupName: String,
+        buttonLabel: String,
+        buttonID: String,
+        isRequired: Boolean,
+        value: {
+            type: [String, Number],
+            default: "",
+        },
+        screenReaderOnlyText: String,
+        selectedValues: String,
+        hasError: Boolean,
+        validationRules: String,
+        valueToLogType: String,
     },
     data() {
-      return {
-        checkValue: Boolean,
-      };
+        return {
+            checkValue: Boolean,
+        };
     },
     created() {
-      if (this.selectedValues) {
-        this.checkValue = this.selectedValues === this.value;
-        this.handleCheckChange();
-      } else{
-        this.checkValue = false;
-      }
+        if (this.selectedValues) {
+            this.checkValue = this.selectedValues === this.value;
+            this.handleCheckChange();
+        } else{
+            this.checkValue = false;
+        }
     },
     methods: {
-      handleCheckChange() {
-        this.handleChange(this.value);
-        const emitEvent = {
-          checkValue: this.checkValue,
-          value: this.value.toString(),
-          buttonID: this.buttonID && this.buttonID.toString(),
-        };
-  
-        this.$emit("isCheckedChanged", emitEvent);
-        this.$emit("update:modelValue", emitEvent);
-  
-      },
+        handleCheckChange() {
+            this.handleChange(this.value);
+            const emitEvent = {
+                checkValue: this.checkValue,
+                value: this.value.toString(),
+                buttonID: this.buttonID && this.buttonID.toString(),
+            };
+
+            this.$emit("isCheckedChanged", emitEvent);
+            this.$emit("update:modelValue", emitEvent);
+
+        },
     },
     setup(props) {
-      const inputType = "radio";
-      const {
-          value: inputValue,
-          handleChange,
-          errors,
-      } = useField(props.groupName, props.validationRules,
-      {
-        type: inputType,
-        checkedValue: props.value,
-      });
-      return {
-        handleChange,
-        errors,
-      };
-    },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .form-check {
-    position: relative;
-  
-    .form-check-input {
-      border: 1px solid $gray-500;
-      border-radius: 50%;
-      margin-right: 0.5rem;
-  
-      &:checked {
-        background-color: $white;
-        background-size: 71%;
-        background-position: center;
-        border: 1px solid $blue;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
-        + label {
-          p {
-            font-weight: 500;
-            font-size: .875rem;
-            color: $black;
-          }
+        const inputType = "radio";
+        const {
+            value: inputValue,
+            handleChange,
+            errors,
+        } = useField(props.groupName, props.validationRules,
+            {
+                type: inputType,
+                checkedValue: props.value,
+            });
+            return {
+                handleChange,
+                errors,
+            };
+        },
+    };
+    </script>
+
+    <style lang="scss" scoped>
+    .form-check {
+        position: relative;
+
+        label {
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .form-check-input {
+            border: 1px solid $gray-500;
+            border-radius: 50%;
+            margin-right: 0.5rem;
+
+            &:checked {
+                background-color: $white;
+                background-size: 71%;
+                background-position: center;
+                border: 1px solid $blue;
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+                + label {
+                    p {
+                        font-weight: 500;
+                        font-size: .875rem;
+                        color: $black;
+                    }
+                }
+            }
+            &:focus {
+                box-shadow: 0 0 0 2.5px $blue;
+            }
+
+            &, & + label {
+                margin-top: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        &:hover {
+            .form-check-input {
+                box-shadow: 0 0 0 4px $blue-300;
+            }
+        }
+        p {
+            font-weight: 400;
+            font-size: .875rem;
+            color: $gray-600;
         }
-      }
-      &:focus {
-        box-shadow: 0 0 0 2.5px $blue;
-      }
-  
-      &, & + label {
-        margin-top: 0;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-      }
     }
-  
-    &:hover {
-      .form-check-input {
-        box-shadow: 0 0 0 4px $blue-300;
-      }
-    }
-    p {
-      font-weight: 400;
-      font-size: .875rem;
-      color: $gray-600;
-    }
-  }
-  </style>
-  
\ No newline at end of file
+    </style>