From ba2aec00d62b430e8fd2842daf33cd37de0a2f52 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 23 Nov 2021 16:14:39 -0500
Subject: [PATCH] integrating updated radio buttons

---
 .../radio-question/radio-question.vue         | 20 ++++---
 src/ux-components/radio/radio.vue             | 56 ++++++++++++-------
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index d17020dfc..b6428233a 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -5,14 +5,18 @@
         questionText
       }}</span>
     </div>
-    <div class="car_list overflow-scroll position-absolute">
-      <div v-for="answer in answers" :key="answer" class="mb-2">
-        <radio
-          :text="answer"
-          :value="answer"
-          @click="chooseAnswer(answer)"
-          data-test="radio"
-        />
+    <div class="w-100 d-flex justify-content-center">
+      <div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
+        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
+          <radio v-for="answer in answers" :key="answer" class="mb-2"
+            :radioID="answer"
+            @click="chooseAnswer(answer)"
+            loaderColor="blue"
+            loaderPosition="right"
+            sizeInRem="1.5"
+            data-test="radio"
+            groupName="radio-list"
+          />
       </div>
     </div>
   </div>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index ac005bca4..3da9c6ea5 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,35 +1,51 @@
 <template>
-  <div>
-    <input
-      type="radio"
-      :id="this.value"
-      :value="this.value"
-      class="position-absolute opacity-0"
-      v-on:click="showLoader()"
+  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+    <input type="radio"
+    :id="radioID"
+    :name="groupName"
+    :value="radioID">
+    <label role="radio" tabindex="0" aria-checked="false"
+    :for="radioID"
+    class="d-flex align-items-center justify-content-between p-2"
+    @click='displayComponent'
+    >{{radioID}}
+    <loader
+    v-if="display"
+    :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    :class="[this.loaderColor, this.loaderPosition]"
     />
-    <label
-      :for="this.value"
-      class="btn list-button d-flex align-items-center"
-      v-bind:class="[this.isLoading ? 'button-loader' : '']"
-    >
-      <span>{{ text }}</span>
-    </label>
-  </div>
+  </label>
+  <p class="small">{{errorMessage}}</p>
+</div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
-  name: "radio",
-  props: ["value", "text"],
+  name: "radioList",
+  props: [
+    "groupName",
+    "ariaLabelBy",
+    "radioID",
+    "errorMessage",
+    "loaderColor",
+    "loaderPosition",
+    "sizeInRem"
+
+  ],
   data() {
     return {
-      isLoading: false,
+      isError: false,
+      display: false
     };
   },
   methods: {
-    showLoader() {
-      this.isLoading = true;
+    displayComponent() {
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>