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 1/7] 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>

From 3b3af03d8f336b062cf431d4bd8d2e2978197440 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 23 Nov 2021 16:54:34 -0500
Subject: [PATCH 2/7] Adjusting unit test for new radio

---
 src/ux-components/radio/radio.spec.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index 35ddfdab7..0fcb8e701 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/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",
+    })
   });
 });

From c92112e07faa636d807f733b8c5a06c9f2302a63 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 23 Nov 2021 17:13:09 -0500
Subject: [PATCH 3/7] Updating testing for radioTest with new radio buttons

---
 src/common-components/radio-question/radio-question.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js
index da58ea8d1..eac0843e5 100644
--- a/src/common-components/radio-question/radio-question.spec.js
+++ b/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");
   });
 });

From f3ecb534b29084f0531c772fa4440a42222e5cd0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 24 Nov 2021 09:26:16 -0500
Subject: [PATCH 4/7] CSR-185 alert qa updates.

---
 src/ux-components/alert/alert.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 811dcb133..84c139916 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -2,8 +2,8 @@
   <div class="alert fade show text-center mb-0" role="alert"
     :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
     >
-    <p class="m-0 fw-bold alert-heading">{{alertHeadline}}</p>
-    <p class="m-0 text-body">{{alertCopy}}</p>
+    <p class="m-0 fw-bold small alert-heading">{{alertHeadline}}</p>
+    <p class="m-0 text-body small">{{alertCopy}}</p>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
         <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
@@ -46,6 +46,7 @@ export default {
     }
   }
   &.alert-info {
+    background-color: $blue-100;
     .alert-heading {
       color: $blue-700;
     }
@@ -56,26 +57,29 @@ export default {
     }
   }
   &.alert-danger {
+    background-color: $red-100;
     .alert-heading {
-      color: $red-700;
+      color: $red-600;
     }
     svg {
-      fill: $red-700;
+      fill: $red-600;
       width: 1rem;
       height: 1rem;
     }
   }
   &.alert-warning {
+    background-color: $yellow-100;
     .alert-heading {
-      color: $yellow-700;
+      color: $yellow-600;
     }
     svg {
-      fill: $yellow-700;
+      fill: $yellow-600;
       width: 1rem;
       height: 1rem;
     }
   }
   &.alert-success {
+    background-color: $green-100;
     .alert-heading {
       color: $green-700;
     }

From 7287062c428940c195797eabd1721050b12b0ba0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 24 Nov 2021 13:19:49 -0500
Subject: [PATCH 5/7] Move loader css to component.

---
 src/styles/common-radio-styles.scss |  2 +-
 src/styles/mixins/customMixins.scss | 63 -----------------------------
 src/ux-components/loader/loader.vue | 59 ++++++++++++++++++++++++++-
 3 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index fccad8420..d902f1606 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -38,7 +38,7 @@
         }
       }
       //Add spinner. Specify width and height
-      @include loader();
+      //@include loader();
     }
   }
 }
diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss
index ab4ba18a5..267abb64b 100644
--- a/src/styles/mixins/customMixins.scss
+++ b/src/styles/mixins/customMixins.scss
@@ -4,66 +4,3 @@
 @mixin blue-gradient {
   background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
 }
-
-//Spinner
-//Choose color and position
-@mixin loader() {
-  .loader {
-    display: flex;
-    //Open an overlay to prevent page interaction
-    &:before {
-      content: '';
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-color: transparent;
-      z-index: 9999;
-      cursor: default;
-    }
-    //Spinner basics
-    &:after {
-      content: '';
-      mask: url(../../assets/img/icons/spinner.svg);
-      mask-size: cover;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      animation: rotation 1s infinite linear;
-      @keyframes rotation {
-        100% {
-          transform:rotate(360deg);
-        }
-      }
-    }
-    //Spinner position
-    &.center {
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-    }
-    &.right {
-      margin: 0 0 0 auto;
-    }
-    &.left {
-      margin: 0 auto 0 0;
-    }
-    //Spinner color
-    &:after { //Default spinner color (blue) if no other color is specified from the options below
-      background-color: $blue;
-    }
-    &.red:after {
-      background-color: $red;
-    }
-    &.green:after {
-      background-color: $green;
-    }
-    &.white:after {
-      background-color: $white;
-    }
-    &.black:after {
-      background-color: $black;
-    }
-  }
-}
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index eeabeb604..448e39b78 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -27,5 +27,62 @@ export default {
 </script>
 
 <style lang="scss">
-@include loader();
+.loader {
+  display: flex;
+  //Open an overlay to prevent page interaction
+  &:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: transparent;
+    z-index: 9999;
+    cursor: default;
+  }
+  //Spinner basics
+  &:after {
+    content: '';
+    mask: url(../../assets/img/icons/spinner.svg);
+    mask-size: cover;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    animation: rotation 1s infinite linear;
+    @keyframes rotation {
+      100% {
+        transform:rotate(360deg);
+      }
+    }
+  }
+  //Spinner position
+  &.center {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+  &.right {
+    margin: 0 0 0 auto;
+  }
+  &.left {
+    margin: 0 auto 0 0;
+  }
+  //Spinner color
+  &:after { //Default spinner color (blue) if no other color is specified from the options below
+    background-color: $blue;
+  }
+  &.red:after {
+    background-color: $red;
+  }
+  &.green:after {
+    background-color: $green;
+  }
+  &.white:after {
+    background-color: $white;
+  }
+  &.black:after {
+    background-color: $black;
+  }
+}
 </style>

From 677a4706a6a038141abcc41b01a93f8d2c967c66 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 24 Nov 2021 13:21:11 -0500
Subject: [PATCH 6/7] Remove commented code.

---
 src/styles/common-radio-styles.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index d902f1606..e49361708 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -37,8 +37,6 @@
           color: $danger;
         }
       }
-      //Add spinner. Specify width and height
-      //@include loader();
     }
   }
 }

From 3ffbf80d9bd30ee23e82bb183dcd35678fe63101 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 29 Nov 2021 10:41:24 -0500
Subject: [PATCH 7/7] Updating tests for new radio buttons and adjustment to
 margin for year page.

---
 .../radio-question/radio-question.vue         |  2 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  2 +-
 src/ux-components/radio/radio.spec.js         | 33 ++++++++++++++++---
 src/ux-components/radio/radio.vue             |  2 --
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index b6428233a..7a91aab1e 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-4 mb-3 d-flex">
+    <div class="needed_car_info mt-4 mb-2 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index a16d9c0ff..c506771f7 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -42,7 +42,7 @@ export default {
 
         .car_list {
         // Height will be determined by overall height of content above list
-        height: calc(100% - 260px);
+        height: calc(100% - 255px);
         width: calc(100% - 1rem);
         }
     }
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index 0fcb8e701..ba0dfd496 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -2,21 +2,46 @@ import { shallowMount } from "@vue/test-utils";
 import radio from "./radio";
 
 describe("radio.vue", () => {
-  it("Should render the 'radioID' prop value as a span value for the radio button label.", () => {
+  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
     const wrapper = shallowMount(radio, {
       propsData: {
         radioID: "2023",
-        groupName: "TestGroup"
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: 'null'
       },
     });
 
     // Assert
-    expect(wrapper.find("input").attributes()).toEqual({
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("p");
+
+    await label.trigger('click');
+
+    expect(input.attributes()).toEqual({
       id: "2023",
       type: "radio",
       value: "2023",
       name: "TestGroup",
-    })
+    });
+
+    expect(label.attributes()).toEqual({
+      role: "radio",
+      tabindex: "0",
+      for: "2023",
+      class: "d-flex align-items-center justify-content-between p-2",
+      "aria-checked": "false"
+    });
+
+    expect(label.text()).toEqual('2023');
+
+    expect(paragraph.text()).toEqual('null');
+
+    expect(wrapper.vm.display).toBe(true);
+
   });
 });
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 3da9c6ea5..76913ebbd 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -25,13 +25,11 @@ export default {
   name: "radioList",
   props: [
     "groupName",
-    "ariaLabelBy",
     "radioID",
     "errorMessage",
     "loaderColor",
     "loaderPosition",
     "sizeInRem"
-
   ],
   data() {
     return {