Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

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.length).toBe(3);
-    expect(radioButtons[2].attributes("text")).toEqual("2021");
     expect(typeof wrapper.props().chooseAnswer).toBe("function");
   });
 });

src/common-components/radio-question/radio-question.vue

@@ -1,18 +1,22 @@
 <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>
     </div>
-    <div class="car_list overflow-scroll position-absolute">
+    <div class="w-100 d-flex justify-content-center">
-      <div v-for="answer in answers" :key="answer" class="mb-2">
+      <div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <radio
+        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
-          :text="answer"
+          <radio v-for="answer in answers" :key="answer" class="mb-2"
-          :value="answer"
+            :radioID="answer"
-          @click="chooseAnswer(answer)"
+            @click="chooseAnswer(answer)"
-          data-test="radio"
+            loaderColor="blue"
-        />
+            loaderPosition="right"
+            sizeInRem="1.5"
+            data-test="radio"
+            groupName="radio-list"
+          />
       </div>
     </div>
   </div>

src/layouts/vehicle-year/vehicle-year.vue

@@ -48,7 +48,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);
         }
     }

src/styles/common-radio-styles.scss

@@ -37,8 +37,6 @@
           color: $danger;
         }
       }
-      //Add spinner. Specify width and height
-      @include loader();
     }
   }
 }

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;
-    }
-  }
-}

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 fw-bold small alert-heading">{{alertHeadline}}</p>
-    <p class="m-0 text-body">{{alertCopy}}</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;
     }

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>

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

@@ -2,22 +2,46 @@ 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 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: {
-        value: "2023",
+        radioID: "2023",
-        text: "12",
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: 'null'
       },
     });
 
     // Assert
-    expect(wrapper.find("span").text()).toEqual("12");
+    const input = wrapper.find("input");
-    expect(wrapper.find("input").attributes()).toEqual({
+    const label = wrapper.find("label");
-      class: "position-absolute opacity-0",
+    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);
+
   });
 });

src/ux-components/radio/radio.vue

@@ -1,35 +1,49 @@
 <template>
-  <div>
+  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input
+    <input type="radio"
-      type="radio"
+    :id="radioID"
-      :id="this.value"
+    :name="groupName"
-      :value="this.value"
+    :value="radioID">
-      class="position-absolute opacity-0"
+    <label role="radio" tabindex="0" aria-checked="false"
-      v-on:click="showLoader()"
+    :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
+  </label>
-      :for="this.value"
+  <p class="small">{{errorMessage}}</p>
-      class="btn list-button d-flex align-items-center"
+</div>
-      v-bind:class="[this.isLoading ? 'button-loader' : '']"
-    >
-      <span>{{ text }}</span>
-    </label>
-  </div>
 </template>
 
 <script>
+import loader from "@/ux-components/loader/loader";
 export default {
-  name: "radio",
+  name: "radioList",
-  props: ["value", "text"],
+  props: [
+    "groupName",
+    "radioID",
+    "errorMessage",
+    "loaderColor",
+    "loaderPosition",
+    "sizeInRem"
+  ],
   data() {
     return {
-      isLoading: false,
+      isError: false,
+      display: false
     };
   },
   methods: {
-    showLoader() {
+    displayComponent() {
-      this.isLoading = true;
+      this.display = true;
     },
   },
+  components: {
+    loader,
+  },
 };
 </script>