WIP updating component names and unit tests.

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

@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import radioQuestion from "@/common-components/radio-question/radio-question";
+import buttonQuestion from "@/common-components/button-question/button-question";
 
-describe("radioQuestion.vue", () => {
+describe("buttonQuestion.vue", () => {
   it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", async () => {
     // Act
-    const wrapper = shallowMount(radioQuestion);
+    const wrapper = shallowMount(buttonQuestion);
     await wrapper.setProps({
       questionText: "Question Text",
       answers: ["2023", "2022", "2021"],

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="radio_question">
+  <div class="button_question">
     <div class="needed_car_info mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
@@ -8,7 +8,7 @@
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
         <legend class="sr-only">{{groupName}}</legend>
-          <radio v-for="answer in answers" :key="answer"
+          <listButton v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
             loaderColor="blue"
@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import radio from "@/ux-components/radio/radio";
+import listButton from "@/ux-components/list-button/list-button";
 export default {
-  name: "radio-question",
+  name: "buttonQuestion",
   props: {
     questionText: String,
     answers: Array,
@@ -42,7 +42,7 @@ export default {
     },
   },
   components: {
-    radio,
+    listButton,
   },
 };
 </script>

src/layouts/component-test/component-test.vue

@@ -55,22 +55,6 @@
         <buttonBack/>
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton
-          buttonText="List Button"
-          errorText="Test error message"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
-        />
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
@@ -87,7 +71,7 @@
         <h3 class="sr-only" id="demo-1-radio-group">
           Select Vehicle Year
         </h3>
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
@@ -98,7 +82,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
@@ -109,7 +93,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
@@ -138,7 +122,7 @@
         <h3 class="sr-only" id="demo-2-radio-group">
           Select Vehicle Year
         </h3>
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Chevrolet"
@@ -149,7 +133,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Dodge"
@@ -160,7 +144,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Ford"
@@ -189,7 +173,7 @@
         <h3 class="sr-only" id="demo-3-radio-group">
           Multi-Line Centered
         </h3>
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Corvette"
@@ -200,7 +184,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Testarosa"
@@ -211,7 +195,7 @@
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radio
+        <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="S600"
@@ -440,7 +424,6 @@ import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/ux-components/button-back/button-back";
 import radioCard from "@/ux-components/radio-card/radio-card";
 import listButton from "@/ux-components/list-button/list-button";
-import radio from "@/ux-components/radio/radio";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import siteHeader from "@/common-components/site-header/site-header";
@@ -453,7 +436,6 @@ export default {
     buttonBack,
     radioCard,
     listButton,
-    radio,
     alert,
     vehicleBanner,
     radioHorizontal,

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -14,7 +14,7 @@ describe("year-question.vue", () => {
 
     // Assert
     const radioQuestion = await wrapper.findComponent({
-      name: "radioQuestion",
+      name: "buttonQuestion",
     });
     expect(radioQuestion.attributes("questiontext")).toBe(
       "What year is your vehicle?"

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

@@ -1,5 +1,5 @@
 <template>
-<radioQuestion class="radioQuestion"
+<buttonQuestion class="radioQuestion"
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import radioQuestion from "@/common-components/radio-question/radio-question";
+import buttonQuestion from "@/common-components/button-question/button-question";
 
 export default {
   name: "year-question",
@@ -23,7 +23,7 @@ export default {
     modelValue: String,
   },
   components: {
-    radioQuestion,
+    buttonQuestion,
   },
   watch: {
     selectedYear(val) {

src/styles/common-button-styles.scss

@@ -53,33 +53,4 @@
       border-radius: $border-radius-lg;
     }
   }
-  &.list-button {
-    position: relative;
-    background: $white;
-    transition: all 150ms linear;
-    border-radius: $border-radius-lg;
-    border: 1px solid $gray-500;
-    width: 100%;
-    &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
-    }
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:active {
-      background: $blue-100;
-      border: 1px solid $blue;
-    }
-    + label {
-      display: none;
-    }
-    &.error {
-      border: 1px solid $danger;
-      ~ label {
-        display: flex;
-        color: $danger;
-      }
-    }
-  }
 }

src/ux-components/list-button/list-button.spec.js

@@ -1 +1,47 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listButton from "./list-button";
+
+describe("list-button.vue", () => {
+  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(listButton, {
+      propsData: {
+        radioID: "2023",
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+        errorMessage: "null",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("span");
+
+    await label.trigger("click");
+
+    expect(input.attributes()).toEqual({
+      id: "2023",
+      type: "radio",
+      value: "2023",
+      name: "TestGroup",
+      "aria-required": "false",
+    });
+
+    expect(label.attributes()).toEqual({
+      role: "radio",
+      tabindex: "-1",
+      for: "2023",
+      class: "d-flex flex-column justify-content-center py-3 px-4",
+      "aria-checked": "false",
+    });
+
+    expect(label.text()).toEqual("2023");
+
+    expect(paragraph.text()).toEqual("2023");
+
+    expect(wrapper.vm.display).toBe(true);
+  });
+});

src/ux-components/list-button/list-button.vue

@@ -1,27 +1,15 @@
 <template>
-  <div class="d-flex flex-column w-100">
+  <!-- See the component-test.vue page for example implementation -->
-    <button
+  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-      class="
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
-        btn
+    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
-        list-button
+      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-        d-flex
+      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-        align-items-center
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-        justify-content-between
+    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-        py-3
+  </label>
-        px-4
+  <p class="small">{{errorMessage}}</p>
-      "
+</div>
-      @click="displayComponent"
-      v-bind:class="[this.isError ? 'error' : '']"
-    >
-      <span class="m-0">{{ this.buttonText }}</span>
-      <loader
-        v-if="display"
-        v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
-        v-bind:class="[this.loaderColor, this.loaderPosition]"
-      />
-    </button>
-    <label class="small mt-1">{{ this.errorText }}</label>
-  </div>
 </template>
 
 <script>
@@ -29,16 +17,21 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    buttonText: String,
+    groupName: String, /* Required, unique for each radio button GROUP */
-    errorText: String,
+    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    loaderColor: String,
+    isRequired: Boolean, /* Optional, default is false */
-    loaderPosition: String,
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    sizeInRem: [Number, String],
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    errorMessage: String, /* Optional, if there is an error message to be displayed */
+    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
   },
   data() {
     return {
-      display: false,
       isError: false,
+      display: false,
     };
   },
   methods: {
@@ -48,6 +41,6 @@ export default {
   },
   components: {
     loader,
-  },
+  }
 };
 </script>

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

@@ -1,47 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import radio from "./radio";
-
-describe("radio.vue", () => {
-  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",
-        loaderColor: "blue",
-        loaderPosition: "right",
-        sizeInRem: "1.5",
-        errorMessage: "null",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-    const label = wrapper.find("label");
-    const paragraph = wrapper.find("span");
-
-    await label.trigger("click");
-
-    expect(input.attributes()).toEqual({
-      id: "2023",
-      type: "radio",
-      value: "2023",
-      name: "TestGroup",
-      "aria-required": "false",
-    });
-
-    expect(label.attributes()).toEqual({
-      role: "radio",
-      tabindex: "-1",
-      for: "2023",
-      class: "d-flex flex-column justify-content-center py-3 px-4",
-      "aria-checked": "false",
-    });
-
-    expect(label.text()).toEqual("2023");
-
-    expect(paragraph.text()).toEqual("2023");
-
-    expect(wrapper.vm.display).toBe(true);
-  });
-});

src/ux-components/radio/radio.vue

@@ -1,46 +0,0 @@
-<template>
-  <!-- See the component-test.vue page for example implementation -->
-  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
-  <p class="small">{{errorMessage}}</p>
-</div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "radioList",
-  props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    isRequired: Boolean, /* Optional, default is false */
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    errorMessage: String, /* Optional, if there is an error message to be displayed */
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-  },
-  data() {
-    return {
-      isError: false,
-      display: false,
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  }
-};
-</script>