From 1f7525abdc1c9da58ce3f44c83c78b2e9ac2e1fd Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 8 Dec 2021 14:42:36 -0500
Subject: [PATCH 01/22] CSR-186 WIP radio button updates.

---
 src/common-components/radio-question/radio-question.vue | 4 +++-
 src/layouts/component-test/component-test.vue           | 3 +++
 src/ux-components/radio/radio.vue                       | 7 +++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 8e44d965c..1abf5bb0f 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="w-100 d-flex justify-content-center">
       <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
+        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
@@ -17,7 +17,9 @@
             data-test="radio"
             groupName="radio-list"
             textPosition="text-start"
+            isRequired=true
             :value="modelValue"
+            screenReaderOnlyText="(opens new window)"
           />
       </div>
     </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 61614606a..d1b96ff23 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -81,6 +81,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -90,6 +91,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -99,6 +101,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 2af1d9e38..2b4933ec1 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,10 +7,11 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <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="true" @keyup.space="displayComponent">
+    <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 class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
@@ -24,6 +25,8 @@ export default {
   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 */

From 0e0321b30e67f5a2f094318382e7d169b954f122 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 9 Dec 2021 16:26:28 -0500
Subject: [PATCH 02/22] CSR-186
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Indicate that clicking a radio-button takes the user somewhere
Add a fieldset around the radio button group
Update the loader to indicate that it’s loading
Update the page-header component to use a new color: Gray 550 (#727676)
---
 .../radio-question/radio-question.vue         | 11 +++---
 src/layouts/component-test/component-test.vue | 12 +++++++
 src/layouts/vehicle-year/vehicle-year.vue     | 36 +++++++++----------
 .../year-question/year-question.vue           |  7 ++--
 src/styles/ux-variables.scss                  |  1 +
 src/ux-components/header/header.vue           |  8 ++++-
 src/ux-components/loader/loader.vue           |  2 ++
 .../radio-horizontal/radio-horizontal.vue     |  2 ++
 src/ux-components/radio/radio.vue             |  6 ++--
 9 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 1abf5bb0f..0a04f49cf 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -6,8 +6,8 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
+      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+        <legend class="visually-hidden">{{groupName}}</legend>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
@@ -15,13 +15,13 @@
             loaderPosition="right"
             sizeInRem="1.5"
             data-test="radio"
-            groupName="radio-list"
+            :groupName="groupName"
             textPosition="text-start"
             isRequired=true
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
           />
-      </div>
+      </fieldset>
     </div>
   </div>
 </template>
@@ -33,7 +33,8 @@ export default {
   props: {
     questionText: String,
     answers: Array,
-    modelValue: String
+    modelValue: String,
+    groupName: String
   },
   methods: {
     chooseAnswer(answer) {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d1b96ff23..38391ac59 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -86,6 +86,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-1"
@@ -96,6 +97,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-1"
@@ -106,6 +108,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -128,6 +131,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-2"
@@ -138,6 +142,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-2"
@@ -148,6 +153,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -170,6 +176,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-3"
@@ -180,6 +187,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radio
         groupName="demo-3"
@@ -190,6 +198,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
@@ -214,6 +223,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
+        screenReaderOnlyText="(opens new window)"
         />
         <radioHorizontal
         groupName="demo-4"
@@ -226,6 +236,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
+        screenReaderOnlyText="(opens new window)"
         />
         <radioHorizontal
         groupName="demo-4"
@@ -238,6 +249,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
+        screenReaderOnlyText="(opens new window)"
         />
       </div>
     </div>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4da235fcc..470acc446 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,10 +1,12 @@
 <template v-if="isCmsContentReady">
-  <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
-  <div class="select-car">
-    <div class="select-car-form rounded text-center">
-      <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-      <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+  <div class="container-fluid shadow rounded-3 p-0">
+    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+      </div>
     </div>
   </div>
 </template>
@@ -66,8 +68,8 @@ export default {
 
   watch: {
     selectedYear(year) {
-        this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-        this.$router.push('?fmgPage=vehicle-make');
+      this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+      this.$router.push('?fmgPage=vehicle-make');
     }
   },
 
@@ -81,15 +83,13 @@ export default {
 </script>
 
 <style lang="scss">
-    .select-car {
-        height: calc(100vh - 56px);
-        padding: 0 1.5rem;
+.select-car {
+  height: calc(100vh - 56px);
 
-        .car_list {
-            // Height will be determined by overall height of content above list
-            height: calc(100% - 300px);
-            padding: 0 1.5rem;
-            -webkit-overflow-scrolling: touch;
-        }
-    }
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 300px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
 </style>
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 4c5bb8d30..b6af42a07 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,7 +1,8 @@
 <template>
-<radioQuestion class="radioQuestion" 
-    :questionText="questionText" 
+<radioQuestion class="radioQuestion"
+    :questionText="questionText"
     :answers="years"
+    groupName="Choose Vehicle Year"
     v-model="selectedYear"
  />
 </template>
@@ -18,7 +19,7 @@ export default {
     },
     props: {
         questionText: String,
-        years: Array, 
+        years: Array,
         modelValue: String
     },
     components: {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index a6e84d369..a9857c420 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -54,6 +54,7 @@ $gray-200:   #E3E4E4;// Used in theme
 $gray-300:   #D2D4D4;
 $gray:       #B0B3B3;// Default Gray
 $gray-500:   #8E9292;// Used in theme
+$gray-550:   #727676;// Used in theme
 $gray-600:   #4D5151;// Used in theme
 $gray-700:   #303333;// Used in theme
 $gray-800:   #222424;// Used in theme
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
index 0749c0462..3395a7e93 100644
--- a/src/ux-components/header/header.vue
+++ b/src/ux-components/header/header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
     </div>
   </div>
 </template>
@@ -14,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+</style>
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 66ac9bc85..0170fe468 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="loader"
+  role="alert"
+  aria-label="Loading new page"
   v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
   v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index aeed345d6..5cd533e2a 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -12,6 +12,7 @@
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
       <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
     <p class="small">{{errorMessage}}</p>
@@ -26,6 +27,7 @@ export default {
     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> */
     radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     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 */
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 2b4933ec1..516a51585 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,8 +7,8 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <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'>
+    <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="visually-hidden">{{screenReaderOnlyText}}</span>
@@ -47,6 +47,6 @@ export default {
   },
   components: {
     loader,
-  },
+  }
 };
 </script>

From 59955e7edcd87c90930dae322a672dbab8b14c35 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 9 Dec 2021 17:19:07 -0500
Subject: [PATCH 03/22] Remove unnecessary comments.

---
 src/ux-components/radio-horizontal/radio-horizontal.vue | 6 ------
 src/ux-components/radio/radio.vue                       | 6 ------
 2 files changed, 12 deletions(-)

diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index 5cd533e2a..2034ab1dd 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -1,10 +1,4 @@
 <!-- See the component-test.vue page for example implementation -->
-<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-<!-- Example: -->
-<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-<!-- Example -->
-<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
   <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 516a51585..c7dbaf1e6 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,11 +1,5 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-  <!-- Example: -->
-  <!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-  <!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-  <!-- Example -->
-  <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <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()'>

From e31592e885e41b998e497d62360a6cfc390a5266 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 10 Dec 2021 09:36:06 -0500
Subject: [PATCH 04/22] Fix syntax error.

---
 .../vehicle-year/year-question/year-question.vue   | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 2dbe4c805..3b7811713 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -28,19 +28,7 @@ export default {
   watch: {
     selectedYear(val) {
       this.$emit("update:modelValue", val);
-    },
-    props: {
-        questionText: String,
-        years: Array,
-        modelValue: String
-    },
-    components: {
-        radioQuestion,
-    },
-    watch: {
-        selectedYear(val) {
-            this.$emit('update:modelValue', val)
-        }
     }
+  },
 };
 </script>

From ebbe6d28decf99805860af60fbd0e14fbbef2cae Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 10 Dec 2021 09:37:53 -0500
Subject: [PATCH 05/22] Fix unit test error.

---
 src/ux-components/radio/radio.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index c1b726dca..c24f6a2a1 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -27,7 +27,7 @@ describe("radio.vue", () => {
       type: "radio",
       value: "2023",
       name: "TestGroup",
-      "aria-required": "true",
+      "aria-required": "false",
     });
 
     expect(label.attributes()).toEqual({

From 8ed6a6ff71e472afe167a14d1c308e09ec08bca4 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 10:10:09 -0500
Subject: [PATCH 06/22] Accounting for blue highlight in iphone view

---
 src/styles/common-radio-styles.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 2bee198bf..4ea1da553 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -4,6 +4,7 @@
       opacity: 0;
       position: fixed;
       width: 0;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
       &:focus-visible + label {
         box-shadow: 0 0 0 2px $blue;
       }

From a5e89a81f902c457c4580bd4700e8e8a4df0a2d8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 10:54:24 -0500
Subject: [PATCH 07/22] Adding new class for sr-only and adjusting spacing on
 radio question

---
 src/common-components/radio-question/radio-question.vue | 4 ++--
 src/layouts/component-test/component-test.vue           | 8 ++++----
 src/styles/common-radio-styles.scss                     | 1 -
 src/styles/common-styles.scss                           | 9 +++++++++
 src/ux-components/radio-horizontal/radio-horizontal.vue | 2 +-
 src/ux-components/radio/radio.vue                       | 2 +-
 6 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 3621c636b..bdb15c7d5 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-5 mb-2 d-flex">
+    <div class="needed_car_info mt-5 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
     </div>
     <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="visually-hidden">{{groupName}}</legend>
+        <legend class="sr-only">{{groupName}}</legend>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8babdf75..f8d5006ef 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -76,7 +76,7 @@
         class="col my-3 d-flex align-items-center flex-column"
       >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-1-radio-group">
+        <h3 class="sr-only" id="demo-1-radio-group">
           Select Vehicle Year
         </h3>
         <radio
@@ -127,7 +127,7 @@
         class="col my-3 d-flex align-items-center flex-column"
       >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-2-radio-group">
+        <h3 class="sr-only" id="demo-2-radio-group">
           Select Vehicle Year
         </h3>
         <radio
@@ -178,7 +178,7 @@
         class="col my-3 d-flex align-items-center flex-column"
       >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-3-radio-group">
+        <h3 class="sr-only" id="demo-3-radio-group">
           Multi-Line Centered
         </h3>
         <radio
@@ -229,7 +229,7 @@
         class="d-flex flex-row p-0"
       >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="demo-4-radio-group">
+        <h3 class="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
         <radioHorizontal
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 4ea1da553..2bee198bf 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-radio-styles.scss
@@ -4,7 +4,6 @@
       opacity: 0;
       position: fixed;
       width: 0;
-      -webkit-tap-highlight-color: rgba(0,0,0,0);
       &:focus-visible + label {
         box-shadow: 0 0 0 2px $blue;
       }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 768dd8d6f..5e1993716 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -25,5 +25,14 @@ body {
   .container-fluid {
     overflow-x: hidden;
   }
+
+  .sr-only {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
 }
 // Hide horizontal scrollbar
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index d52678ac0..9f04efe04 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -6,7 +6,7 @@
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</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>
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index d38dcab37..1275eb8b1 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -5,7 +5,7 @@
     <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="visually-hidden">{{screenReaderOnlyText}}</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>

From 5f14238eacb8b580183dfb5a550626fe4047e52e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 10:59:24 -0500
Subject: [PATCH 08/22] Adjusting margin between radio question and page title

---
 src/common-components/radio-question/radio-question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index bdb15c7d5..36f130e9f 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-5 mb-4 d-flex">
+    <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
       }}</span>

From 856b14241f7997f2a4d31870270c4da8d2801f7d Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 13:59:10 -0500
Subject: [PATCH 09/22] Adjusting line height for header to account for spacing

---
 src/ux-components/header/header.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
index 3395a7e93..b19247f50 100644
--- a/src/ux-components/header/header.vue
+++ b/src/ux-components/header/header.vue
@@ -18,5 +18,6 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
+    line-height: 0 !important;
   }
 </style>

From 396b885643def47f48f53a0c57551fe22ca449b1 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 10 Dec 2021 14:47:13 -0500
Subject: [PATCH 10/22] Fixing spacing

---
 src/common-components/vehicle-banner/vehicle-banner.vue | 2 +-
 src/ux-components/header/header.vue                     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 32caa82f8..51e8d8aa3 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-3 text-center">
+  <div class="vehicle_banner mb-4 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
       :src="vehicleImageSrc"
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
index b19247f50..3395a7e93 100644
--- a/src/ux-components/header/header.vue
+++ b/src/ux-components/header/header.vue
@@ -18,6 +18,5 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
-    line-height: 0 !important;
   }
 </style>

From e4b67979e127417db1c9efceae14d762049e0e4e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 08:38:13 -0500
Subject: [PATCH 11/22] Add back button component.

---
 src/layouts/component-test/component-test.vue | 12 +++-
 src/styles/ux-variables.scss                  |  1 +
 .../button-back/button-back.spec.js           |  1 +
 src/ux-components/button-back/button-back.vue | 59 +++++++++++++++++++
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/ux-components/button-back/button-back.spec.js
 create mode 100644 src/ux-components/button-back/button-back.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8d5006ef..4a5d91bd2 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -35,7 +35,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
+        <buttonPrimary
+        buttonText="Primary"
+        loaderColor="white"
+        sizeInRem="1" />
       </div>
     </div>
     <div class="row">
@@ -47,6 +50,11 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonBack/>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
@@ -429,6 +437,7 @@
 <script>
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 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";
@@ -441,6 +450,7 @@ export default {
   components: {
     buttonPrimary,
     buttonSecondary,
+    buttonBack,
     radioCard,
     listButton,
     radio,
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index a9857c420..285b0c037 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -131,6 +131,7 @@ $h5-font-size:                $font-size-base * 1.25;
 $h6-font-size:                $font-size-base * .875;
 
 //Border Radius
+// Helper classes are rounded, rounded-1, rounded-2, rounded-3
 $border-radius:               .25rem;
 $border-radius-sm:            .2rem;
 $border-radius-lg:            .5rem;//Used for buttons. Can be used for other things, of course.
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
new file mode 100644
index 000000000..90301c42a
--- /dev/null
+++ b/src/ux-components/button-back/button-back.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="button-back">
+    <div class="arrow-left"></div>
+    <div class="box"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "buttonBack"
+};
+</script>
+
+<style lang="scss">
+.button-back {
+  display: inline-flex;
+  position: relative;
+  height: 18px;
+  width: 23px;
+  overflow: hidden;
+  .arrow-left {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 4px;
+    background-color: $gray-550;
+    transform: rotate(45deg);
+    border-radius: 4px;
+  }
+  .box {
+    content: "";
+    position: absolute;
+    background: $gray-550;
+    height: 100%;
+    width: 11px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 12px;
+    border-radius: 5px;
+    &:before, &:after {
+      position: absolute;
+      left: 1px;
+      top: 3px;
+      content: " ";
+      height: 12px;
+      width: 2px;
+      background-color: $white;
+      border-radius: 2px;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+</style>

From e5ff6206c4720025b867325856bbe5e805382c64 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 09:07:55 -0500
Subject: [PATCH 12/22] Add button wrapper for back button.

---
 src/ux-components/button-back/button-back.vue | 88 ++++++++++---------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 90301c42a..94364f6a6 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="button-back">
-    <div class="arrow-left"></div>
-    <div class="box"></div>
-  </div>
+  <button class="back-button-wrapper d-flex p-0">
+    <div class="button-back">
+      <div class="arrow-left"></div>
+      <div class="box"></div>
+    </div>
+</button>
 </template>
 
 <script>
@@ -12,47 +14,51 @@ export default {
 </script>
 
 <style lang="scss">
-.button-back {
-  display: inline-flex;
-  position: relative;
-  height: 18px;
-  width: 23px;
-  overflow: hidden;
-  .arrow-left {
-    position: absolute;
-    width: 18px;
+.back-button-wrapper {
+  border: none;
+  background: transparent;
+  .button-back {
+    display: inline-flex;
+    position: relative;
     height: 18px;
-    left: 4px;
-    background-color: $gray-550;
-    transform: rotate(45deg);
-    border-radius: 4px;
-  }
-  .box {
-    content: "";
-    position: absolute;
-    background: $gray-550;
-    height: 100%;
-    width: 11px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 12px;
-    border-radius: 5px;
-    &:before, &:after {
+    width: 23px;
+    overflow: hidden;
+    .arrow-left {
       position: absolute;
-      left: 1px;
-      top: 3px;
-      content: " ";
-      height: 12px;
-      width: 2px;
-      background-color: $white;
-      border-radius: 2px;
-    }
-    &:before {
+      width: 18px;
+      height: 18px;
+      left: 4px;
+      background-color: $gray-550;
       transform: rotate(45deg);
+      border-radius: 4px;
     }
-    &:after {
-      transform: rotate(-45deg);
+    .box {
+      content: "";
+      position: absolute;
+      background: $gray-550;
+      height: 100%;
+      width: 11px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 12px;
+      border-radius: 5px;
+      &:before, &:after {
+        position: absolute;
+        left: 1px;
+        top: 3px;
+        content: " ";
+        height: 12px;
+        width: 2px;
+        background-color: $white;
+        border-radius: 2px;
+      }
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
     }
   }
 }

From c2d2224015792b379910ff356717e84d6a87f77f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 09:08:54 -0500
Subject: [PATCH 13/22] Fix indentation.

---
 src/ux-components/button-back/button-back.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 94364f6a6..aa462accc 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -4,7 +4,7 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-</button>
+  </button>
 </template>
 
 <script>

From 4aeef51834ca62680f5392131d662567e29ba57f Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Mon, 13 Dec 2021 12:27:33 -0500
Subject: [PATCH 14/22] renamed some variables

---
 src/layouts/vehicle-year/vehicle-year.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4da235fcc..7e2bad0c4 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -37,14 +37,14 @@ export default {
   beforeRouteEnter(to, from, next) {
 
     // Call APIs
-    const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
     const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: "getPageContent",
-        promise: contentPromise,
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
       },
       {
         resultKey: "getVehicleYear",
@@ -55,10 +55,10 @@ export default {
 
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
-        vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
-        vm.vehicleBannerWidget = resultMap.getPageContent.VehicleBannerWidget[0];
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.radioQuestionWidgets = resultMap.cmsContent.RadioQuestionWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
         vm.vehicleYears = resultMap.getVehicleYear;
       });
     });

From 8b48ec6d11a41f1ff549b5a75e73515faa906273 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Mon, 13 Dec 2021 12:30:01 -0500
Subject: [PATCH 15/22] renamed some variables

---
 src/layouts/vehicle-year/vehicle-year.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 7e2bad0c4..8cf5e9c04 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -38,7 +38,7 @@ export default {
 
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+    const yearQuestionInitialDataPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -47,8 +47,8 @@ export default {
         promise: cmsContentPromise,
       },
       {
-        resultKey: "getVehicleYear",
-        promise: getVehicleYearPromise,
+        resultKey: "yearQuestionInitialData",
+        promise: yearQuestionInitialDataPromise,
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
@@ -59,7 +59,7 @@ export default {
         vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
         vm.radioQuestionWidgets = resultMap.cmsContent.RadioQuestionWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
-        vm.vehicleYears = resultMap.getVehicleYear;
+        vm.vehicleYears = resultMap.yearQuestionInitialData;
       });
     });
   },

From 06dbf642c909cb486e24b4f94f1c0c37603995a4 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Mon, 13 Dec 2021 12:33:50 -0500
Subject: [PATCH 16/22] encapsulated api, widget parsing into component

---
 src/layouts/vehicle-year/vehicle-year.vue       | 11 +++--------
 .../year-question/year-question.vue             | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 8cf5e9c04..13bf9f9fe 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -4,7 +4,7 @@
     <div class="select-car-form rounded text-center">
       <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+      <yearQuestion v-model="selectedYear" ref="yearQuestion" />
     </div>
   </div>
 </template>
@@ -18,15 +18,11 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import store from "@/store";
-import { storeActions } from "@/constants/store-actions.js";
 export default {
   name: "vehicle-year",
   data() {
     return {
       pageHeaderWidgets: {},
-      radioQuestionWidgets: {},
-      vehicleYears: [],
       siteHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedYear: null
@@ -38,7 +34,7 @@ export default {
 
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const yearQuestionInitialDataPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+    const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -57,9 +53,8 @@ export default {
       next((vm) => {
         vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
         vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
-        vm.radioQuestionWidgets = resultMap.cmsContent.RadioQuestionWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
-        vm.vehicleYears = resultMap.yearQuestionInitialData;
+        vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
       });
     });
   },
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 4c5bb8d30..ceb6ea9a3 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -8,22 +8,33 @@
 
 <script>
 import radioQuestion from "@/common-components/radio-question/radio-question";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
 
 export default {
     name: "year-question",
     data(){
         return {
-            selectedYear: null
+            questionText: null,
+            selectedYear: null,
+            years: Array,
         }
     },
     props: {
-        questionText: String,
-        years: Array, 
         modelValue: String
     },
     components: {
         radioQuestion,
     },
+    methods: {
+        loadInitialData() {
+            return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+        },
+        initializeComponent(cmsContent, initialData) {
+            this.questionText = cmsContent.QuestionText;
+            this.years = initialData;
+        }
+    },
     watch: {
         selectedYear(val) {
             this.$emit('update:modelValue', val)

From db33f316482ab86e6411e18c00cf6f55fb70cbc7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 17:11:47 -0500
Subject: [PATCH 17/22] WIP updating component names and unit tests.

---
 .../button-question.spec.js}                  |  6 +--
 .../button-question.vue}                      | 10 ++--
 src/layouts/component-test/component-test.vue | 36 ++++---------
 .../year-question/year-question.spec.js       |  2 +-
 .../year-question/year-question.vue           |  6 +--
 src/styles/common-button-styles.scss          | 29 ----------
 .../list-button/list-button.spec.js           | 48 ++++++++++++++++-
 src/ux-components/list-button/list-button.vue | 53 ++++++++-----------
 src/ux-components/radio/radio.spec.js         | 47 ----------------
 src/ux-components/radio/radio.vue             | 46 ----------------
 10 files changed, 91 insertions(+), 192 deletions(-)
 rename src/common-components/{radio-question/radio-question.spec.js => button-question/button-question.spec.js} (80%)
 rename src/common-components/{radio-question/radio-question.vue => button-question/button-question.vue} (84%)
 delete mode 100644 src/ux-components/radio/radio.spec.js
 delete mode 100644 src/ux-components/radio/radio.vue

diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/button-question/button-question.spec.js
similarity index 80%
rename from src/common-components/radio-question/radio-question.spec.js
rename to src/common-components/button-question/button-question.spec.js
index de6458122..4f7d3d342 100644
--- a/src/common-components/radio-question/radio-question.spec.js
+++ b/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"],
diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/button-question/button-question.vue
similarity index 84%
rename from src/common-components/radio-question/radio-question.vue
rename to src/common-components/button-question/button-question.vue
index 36f130e9f..78b75f3ea 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/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>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 4a5d91bd2..9729477d1 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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,
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index a51d25810..32ec182f1 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/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?"
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 3b7811713..57c84aeac 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/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) {
diff --git a/src/styles/common-button-styles.scss b/src/styles/common-button-styles.scss
index 1e41dd830..abaf94879 100644
--- a/src/styles/common-button-styles.scss
+++ b/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;
-      }
-    }
-  }
 }
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 3d0843e10..0cd011c4c 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/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);
+  });
+});
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 52997d5d6..0dd49926f 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,27 +1,15 @@
 <template>
-  <div class="d-flex flex-column w-100">
-    <button
-      class="
-        btn
-        list-button
-        d-flex
-        align-items-center
-        justify-content-between
-        py-3
-        px-4
-      "
-      @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>
+  <!-- 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>
@@ -29,16 +17,21 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    buttonText: String,
-    errorText: String,
-    loaderColor: String,
-    loaderPosition: String,
-    sizeInRem: [Number, String],
+    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 {
-      display: false,
       isError: false,
+      display: false,
     };
   },
   methods: {
@@ -48,6 +41,6 @@ export default {
   },
   components: {
     loader,
-  },
+  }
 };
 </script>
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
deleted file mode 100644
index c24f6a2a1..000000000
--- a/src/ux-components/radio/radio.spec.js
+++ /dev/null
@@ -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);
-  });
-});
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
deleted file mode 100644
index 1275eb8b1..000000000
--- a/src/ux-components/radio/radio.vue
+++ /dev/null
@@ -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>

From e7e0f234d44c0157815b9d9c6327ec9f0b83debe Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 14 Dec 2021 08:49:46 -0500
Subject: [PATCH 18/22] Renam radio components, css naming.

---
 src/layouts/component-test/component-test.vue | 30 +++++++++----------
 ...io-styles.scss => common-list-styles.scss} |  4 +--
 .../list-button-horizontal.spec.js}           |  0
 .../list-button-horizontal.vue}               |  6 ++--
 src/ux-components/list-button/list-button.vue |  2 +-
 .../list-card.spec.js}                        |  0
 .../list-card.vue}                            |  6 ++--
 src/ux-components/loader/loader.vue           |  1 +
 vue.config.js                                 |  2 +-
 vue.release.config.js                         |  2 +-
 10 files changed, 27 insertions(+), 26 deletions(-)
 rename src/styles/{common-radio-styles.scss => common-list-styles.scss} (95%)
 rename src/ux-components/{radio-horizontal/radio-horizontal.spec.js => list-button-horizontal/list-button-horizontal.spec.js} (100%)
 rename src/ux-components/{radio-horizontal/radio-horizontal.vue => list-button-horizontal/list-button-horizontal.vue} (96%)
 rename src/ux-components/{radio-card/radio-card.spec.js => list-card/list-card.spec.js} (100%)
 rename src/ux-components/{radio-card/radio-card.vue => list-card/list-card.vue} (95%)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 9729477d1..5ce2f5590 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,25 +2,25 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
       </div>
     </div>
     <div class="row g-2">
-      <radioCard
+      <listCard
         radioLabel="Windshield"
         radioImage="windshield-damage.svg"
         altText="Windshield"
         groupName="damageKey"
         radioID="windshield"
       />
-      <radioCard
+      <listCard
         radioLabel="Side Window"
         radioImage="side-window-damage.svg"
         altText="Side Window"
         groupName="damageKey"
         radioID="sidewindow"
       />
-      <radioCard
+      <listCard
         radioLabel="Back Glass"
         radioImage="back-glass-damage.svg"
         altText="Back Glass"
@@ -57,7 +57,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -108,7 +108,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -159,7 +159,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
       </div>
     </div>
     <div class="row">
@@ -210,7 +210,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
       </div>
     </div>
     <div class="row px-3">
@@ -224,7 +224,7 @@
         <h3 class="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="1"
@@ -237,7 +237,7 @@
         v-bind:positionInGroup="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="2"
@@ -250,7 +250,7 @@
         v-bind:positionInGroup="2"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="3"
@@ -422,23 +422,23 @@
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 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 listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 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";
-import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     buttonSecondary,
     buttonBack,
-    radioCard,
+    listCard,
     listButton,
     alert,
     vehicleBanner,
-    radioHorizontal,
+    listButtonHorizontal,
     siteHeader,
   },
   data() {
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-list-styles.scss
similarity index 95%
rename from src/styles/common-radio-styles.scss
rename to src/styles/common-list-styles.scss
index 2bee198bf..4eb174a02 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -1,5 +1,5 @@
-.radiogroup {
-  &.radio-list-button {
+.list-group {
+  &.list-button {
     input[type="radio"] {
       opacity: 0;
       position: fixed;
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
similarity index 100%
rename from src/ux-components/radio-horizontal/radio-horizontal.spec.js
rename to src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
similarity index 96%
rename from src/ux-components/radio-horizontal/radio-horizontal.vue
rename to src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9f04efe04..960a7b0e9 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,7 +1,7 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
-  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
+  <div class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @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" :class="isFirstOrLastButton" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
@@ -16,7 +16,7 @@
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
-  name: "radioHorizontal",
+  name: "listButtonHorizontal",
   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> */
@@ -58,7 +58,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-horizontal {
+.list-button-horizontal {
   input[type="radio"] {
     opacity: 0;
     position: fixed;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0dd49926f..70ee0528c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
+  <div class="list-group 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>
diff --git a/src/ux-components/radio-card/radio-card.spec.js b/src/ux-components/list-card/list-card.spec.js
similarity index 100%
rename from src/ux-components/radio-card/radio-card.spec.js
rename to src/ux-components/list-card/list-card.spec.js
diff --git a/src/ux-components/radio-card/radio-card.vue b/src/ux-components/list-card/list-card.vue
similarity index 95%
rename from src/ux-components/radio-card/radio-card.vue
rename to src/ux-components/list-card/list-card.vue
index 0789827ef..d0ecb74b6 100644
--- a/src/ux-components/radio-card/radio-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col mb-3 d-flex radio-card">
+  <div class="col mb-3 d-flex list-card">
     <input
       type="radio"
       class="position-absolute opacity-0"
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "radioCard",
+  name: "listCard",
   props: [
     "groupName",
     "radioLabel",
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-card {
+.list-card {
   input[type="radio"] {
     &:focus + label {
       background-color: $white;
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 68dba4974..37477d83a 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -62,6 +62,7 @@ export default {
   &.center {
     position: absolute;
     right: 50%;
+    transform: translateX(50%);
   }
   &.right {
     position: absolute;
diff --git a/vue.config.js b/vue.config.js
index aba5fd140..9d9b2401b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -17,7 +17,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },
diff --git a/vue.release.config.js b/vue.release.config.js
index 6cf78123c..c4b18d5dd 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -16,7 +16,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },

From eedea3b4ca7c3217d78415c99adcba6210156faf Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 14 Dec 2021 09:07:01 -0500
Subject: [PATCH 19/22] Update list-button-horizontal.spec.js

---
 .../list-button-horizontal/list-button-horizontal.spec.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index c12eedefa..c058099ee 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import radioHorizontal from "./radio-horizontal";
+import listButtonHorizontal from "./list-button-horizontal";
 
 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(radioHorizontal, {
+    const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         radioID: "2023",
         groupName: "TestGroup",

From a475434395a83bf03e4929e6dfd4b45d41b4fe9b Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 14 Dec 2021 11:24:17 -0500
Subject: [PATCH 20/22] Update references to "radio" where possible/necessary.

---
 .../button-question/button-question.spec.js   |  6 +-
 .../button-question/button-question.vue       |  4 +-
 src/layouts/component-test/component-test.vue | 68 +++++++++----------
 .../list-button-horizontal.spec.js            |  6 +-
 .../list-button-horizontal.vue                | 20 +++---
 .../list-button/list-button.spec.js           |  4 +-
 src/ux-components/list-button/list-button.vue | 14 ++--
 src/ux-components/list-card/list-card.vue     | 16 ++---
 8 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 4f7d3d342..df7b834c8 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -2,7 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 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 () => {
+  it("Should render the 'questionText' prop value as a span value for the button question and  the 'answer' values should render as text values for button components.", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
     await wrapper.setProps({
@@ -16,8 +16,8 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.find(".needed_car_info-text").text()).toEqual(
       "Question Text"
     );
-    const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-    expect(radioButtons.length).toBe(3);
+    const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
+    expect(buttonButtons.length).toBe(3);
     expect(wrapper.props().modelValue).toBe("2020");
   });
 });
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 78b75f3ea..97ebf1310 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -9,12 +9,12 @@
       <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>
           <listButton v-for="answer in answers" :key="answer"
-            :radioID="answer"
+            :buttonID="answer"
             @click="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
-            data-test="radio"
+            data-test="button"
             :groupName="groupName"
             textPosition="text-start"
             isRequired=true
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 5ce2f5590..624469e8a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,25 +7,25 @@
     </div>
     <div class="row g-2">
       <listCard
-        radioLabel="Windshield"
-        radioImage="windshield-damage.svg"
+        buttonLabel="Windshield"
+        buttonImage="windshield-damage.svg"
         altText="Windshield"
         groupName="damageKey"
-        radioID="windshield"
+        buttonID="windshield"
       />
       <listCard
-        radioLabel="Side Window"
-        radioImage="side-window-damage.svg"
+        buttonLabel="Side Window"
+        buttonImage="side-window-damage.svg"
         altText="Side Window"
         groupName="damageKey"
-        radioID="sidewindow"
+        buttonID="sidewindow"
       />
       <listCard
-        radioLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
+        buttonLabel="Back Glass"
+        buttonImage="back-glass-damage.svg"
         altText="Back Glass"
         groupName="damageKey"
-        radioID="backglass"
+        buttonID="backglass"
       />
     </div>
     <div class="row my-4">
@@ -61,7 +61,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-1-radio-group"
@@ -74,7 +74,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2021"
+        buttonID="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -85,7 +85,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2020"
+        buttonID="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -96,7 +96,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2019"
+        buttonID="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -112,7 +112,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-2-radio-group"
@@ -125,8 +125,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Chevrolet"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Chevrolet"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -136,8 +136,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Dodge"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Dodge"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -147,8 +147,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Ford"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Ford"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -163,7 +163,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-3-radio-group"
@@ -176,8 +176,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Corvette"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Corvette"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -187,8 +187,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Testarosa"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Testarosa"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -198,8 +198,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="S600"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="S600"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -214,7 +214,7 @@
       </div>
     </div>
     <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-4-radio-group"
@@ -227,8 +227,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="1"
-        radioLabelSubCopy=""
+        buttonID="1"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -240,8 +240,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="2"
-        radioLabelSubCopy=""
+        buttonID="2"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -253,8 +253,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="3"
-        radioLabelSubCopy=""
+        buttonID="3"
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index c058099ee..ac8dc3202 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 
-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 () => {
+describe("list-button.vue", () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the 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(listButtonHorizontal, {
       propsData: {
-        radioID: "2023",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 960a7b0e9..315a18995 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,11 +1,11 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
+  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @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" :class="isFirstOrLastButton" @click='displayComponent'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</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>
@@ -18,17 +18,17 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   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> */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    groupName: String, /* Required, unique for each button GROUP */
+    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     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)) */
-    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
+    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
+    positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
   },
   data() {
     return {
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 0cd011c4c..599d447f4 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -2,11 +2,11 @@ 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 () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the 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",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 70ee0528c..e23a96dfc 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
   <div class="list-group 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>
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayComponent()">
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</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>
@@ -17,11 +17,11 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   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> */
+    groupName: String, /* Required, unique for each button GROUP */
+    buttonID: String, /* Required, unique for each 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 */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line 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 */
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index d0ecb74b6..be7434cc4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -4,22 +4,22 @@
       type="radio"
       class="position-absolute opacity-0"
       :class="className"
-      :id="radioID"
+      :id="buttonID"
       :name="groupName"
-      :value="radioLabel"
+      :value="buttonLabel"
       v-model="picked"
       :tabindex="tabIndex"
     />
     <label
-      v-bind:for="radioID"
+      v-bind:for="buttonID"
       class="rounded-3 d-flex flex-column align-items-center w-100"
     >
       <img
         class="px-3 pt-3 pb-2 mt-auto"
-        v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
+        v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
         v-bind:alt="altText"
       />
-      <span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
     </label>
   </div>
 </template>
@@ -31,10 +31,10 @@ export default {
   name: "listCard",
   props: [
     "groupName",
-    "radioLabel",
-    "radioImage",
+    "buttonLabel",
+    "buttonImage",
     "altText",
-    "radioID",
+    "buttonID",
     "tabIndex",
     "className",
   ],

From f98b7f3f4817d5a59e5e22053fab54464cece76b Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Tue, 14 Dec 2021 17:19:45 -0500
Subject: [PATCH 21/22] Refactored unit tests

---
 src/layouts/vehicle-year/vehicle-year.spec.js | 139 ++++++++++--------
 .../year-question/year-question.spec.js       |  91 +++++++++---
 2 files changed, 149 insertions(+), 81 deletions(-)

diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index 06cc0339b..19028baaf 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -10,72 +11,84 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 }));
 
 describe("vehicle-year.vue", () => {
-  test("vehicle-year.vue should render data from CMS", async () => {
-    // Arrange
+  test("Year question component is initized with api data", async (done) => {
 
-    // Our mock data for our call to settleAllPromises
-    const mockData = {
-      getPageContent: {
-        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
-        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
-        VehicleBannerWidget: [
-          {
-            GenericVehicleImage:
-              "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          },
-        ],
-        SiteHeaderWidget: [
-          {
-            LogoImage:
-              "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-          },
-        ],
-        isCmsContentReady: true,
-      },
-      getVehicleYear: [2023, 2022, 2021],
-      store: {
-        commit: jest.fn(),
-        year: null,
-      },
-      router: {
-        push: jest.fn(),
-      },
-    };
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
+    const yearQuestionInitialData = ["2023", "2022", "2021"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      yearQuestionInitialData: yearQuestionInitialData,
+    } );
 
-    // our router information needed.
-    const to = {
-      query: {
-        fmgPage: "vehicle-year",
-      },
-    };
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
 
-    const mountOptions = getMountOptions(mockData);
-
-    // our mock implementation of settleAllPromises
-    settleAllPromises.mockImplementation(() => {
-      return Promise.resolve(mockData);
+    //Assert
+    apiPromise.finally(() => {
+      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData);
+      done();
     });
-
-    // Act
-    const wrapper = shallowMount(vehicleYear, mountOptions);
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
-
-    // Call our beforeRouteEnter on the component.
-    // This passes (c) => c(wrapper.vm) so that next can be called and our
-    // data can be set.
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
-      c(wrapper.vm)
-    );
-
-    await nextTick(); // Wait for the DOM to update.
-
-    // Assert
-    const header = await wrapper.find(".Header");
-    expect(header.attributes("text")).toEqual("Select a year to get started");
-
-    const yearQuestion = wrapper.findComponent({ name: "year-question" });
-    expect(yearQuestion.attributes("questiontext")).toEqual(
-      "What year is your vehicle?"
-    );
   });
 });
+
+describe("vehicle-year.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a year to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  yearQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      VehicleBannerWidget: [
+        {
+          GenericVehicleImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        },
+      ],
+      SiteHeaderWidget: [
+        {
+          LogoImage:
+            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        },
+      ],
+      isCmsContentReady: true,
+    },
+    yearQuestionInitialData: yearQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock year question methods
+  yearQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleYear, mountOptions);
+  const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
+  yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index a51d25810..744769b6b 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -1,25 +1,80 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
 
 describe("year-question.vue", () => {
-  test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => {
-    // Act
-    const wrapper = shallowMount(yearQuestion);
-    await wrapper.setProps({
-      questionText: "What year is your vehicle?",
-      years: ["2023", "2022", "2021"],
-      modelValue: "2020",
-    });
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
+  test("Selected year is emitted upon selection.", async () => {
 
-    // Assert
-    const radioQuestion = await wrapper.findComponent({
-      name: "radioQuestion",
-    });
-    expect(radioQuestion.attributes("questiontext")).toBe(
-      "What year is your vehicle?"
-    );
-    expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021");
-    expect(wrapper.componentVM.modelValue).toBe("2020");
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2020" });
+    const yearToSelect = "2021";
+
+    //Act
+    wrapper.setData({ selectedYear: yearToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
   });
 });
+
+describe("year-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
+
+    //Act
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" });
+    expect(radioQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
+  });
+});
+
+describe("year-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] });
+
+    //Act
+    const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" });
+    expect(radioQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(yearQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file

From 85d847c480d9ab04e46bbe35b898e8803f6ebe43 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Tue, 14 Dec 2021 17:28:02 -0500
Subject: [PATCH 22/22] merge issues

---
 src/layouts/vehicle-year/year-question/year-question.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index 05df6ed54..3c00dcd9d 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -46,8 +46,8 @@ describe("year-question.vue", () => {
     yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
 
     //Assert
-    const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" });
-    expect(radioQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
   });
 });