Merge pull request #57 from Safelite/feature/CSR-121_radio-implementation

integrating updated radio buttons

src/common-components/radio-question/radio-question.spec.js

@@ -19,8 +19,7 @@ describe("radioQuestion.vue", () => {
       "Question Text"
     );
     const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-    expect(radioButtons[0].attributes("text")).toEqual("2023");
-    expect(radioButtons[2].attributes("text")).toEqual("2021");
+    expect(radioButtons.length).toBe(3);
     expect(typeof wrapper.props().chooseAnswer).toBe("function");
   });
 });

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>

src/ux-components/radio/radio.spec.js

@@ -2,22 +2,21 @@ import { shallowMount } from "@vue/test-utils";
 import radio from "./radio";
 
 describe("radio.vue", () => {
-  it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => {
+  it("Should render the 'radioID' prop value as a span value for the radio button label.", () => {
     // Act
     const wrapper = shallowMount(radio, {
       propsData: {
-        value: "2023",
-        text: "12",
+        radioID: "2023",
+        groupName: "TestGroup"
       },
     });
 
     // Assert
-    expect(wrapper.find("span").text()).toEqual("12");
     expect(wrapper.find("input").attributes()).toEqual({
-      class: "position-absolute opacity-0",
       id: "2023",
       type: "radio",
       value: "2023",
-    });
+      name: "TestGroup",
+    })
   });
 });

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>