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 01/86] 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 02/86] 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 03/86] 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 04/86] 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 05/86] 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 06/86] 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 07/86] 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 08/86] 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 09/86] 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");
   });
 });
 

From db3cd7ea18b65d62af5ef964844a54a9bf4b4e89 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 15 Dec 2021 11:54:46 -0500
Subject: [PATCH 10/86] CSR-186 Add radio/checkbox toggle to existing
 list-buttons.

---
 src/layouts/component-test/component-test.vue | 220 +++++++++++++++---
 src/styles/common-list-styles.scss            |   3 +-
 .../list-button-horizontal.vue                |  27 ++-
 src/ux-components/list-button/list-button.vue |  24 +-
 4 files changed, 232 insertions(+), 42 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 624469e8a..46be34449 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -58,20 +58,18 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       </div>
     </div>
     <div class="row">
       <!-- 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"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
+      <div role="radiogroup" aria-labelledby="demo-1-radio-group" 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="sr-only" id="demo-1-radio-group">
           Select Vehicle Year
         </h3>
         <listButton
+        radioButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -83,6 +81,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -94,6 +93,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -106,23 +106,60 @@
         />
       </div>
     </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
+        <listButton
+        groupName="demo-1-checkbox"
+        ariaLabelBy="vehicle-year"
+        buttonID="2018"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-1-checkbox"
+        ariaLabelBy="vehicle-year"
+        buttonID="2017"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-1-checkbox"
+        ariaLabelBy="vehicle-year"
+        buttonID="2016"
+        isRequired=true
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       </div>
     </div>
     <div class="row">
       <!-- 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"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
+      <div role="radiogroup" aria-labelledby="demo-2-radio-group" 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="sr-only" id="demo-2-radio-group">
-          Select Vehicle Year
-        </h3>
+        <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
+        radioButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -134,6 +171,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -145,6 +183,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -157,23 +196,60 @@
         />
       </div>
     </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <div role="radiogroup" aria-labelledby="demo-2-checkbox-group" 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="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Honda"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Acura"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Infiniti"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       </div>
     </div>
     <div class="row">
       <!-- 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"
-        class="col my-3 d-flex align-items-center flex-column"
-      >
+      <div role="radiogroup" aria-labelledby="demo-3-radio-group" 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="sr-only" id="demo-3-radio-group">
-          Multi-Line Centered
-        </h3>
+        <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
+        radioButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -185,6 +261,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -196,6 +273,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        radioButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -208,23 +286,62 @@
         />
       </div>
     </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <div role="radiogroup" aria-labelledby="demo-3-checkbox-group" 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="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Accord"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Civic"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Ridgeline"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       </div>
     </div>
     <div class="row px-3">
       <!-- 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"
-        class="d-flex flex-row p-0"
-      >
+      <div role="radiogroup" aria-labelledby="demo-4-radio-group" 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="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
         <listButtonHorizontal
+        radioButton
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -238,6 +355,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
+        radioButton
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -251,6 +369,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
+        radioButton
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -265,6 +384,55 @@
         />
       </div>
     </div>
+    <div class="row px-3">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
+      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <div role="radiogroup" aria-labelledby="demo-4-checkbox-group" 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="sr-only" id="demo-4-checkbox-group">
+          Select Vehicle Year
+        </h3>
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="4"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="5"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        screenReaderOnlyText="(opens new window)"
+        />
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="6"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="3"
+        screenReaderOnlyText="(opens new window)"
+        />
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
index 4eb174a02..0d74a4258 100644
--- a/src/styles/common-list-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -1,6 +1,7 @@
 .list-group {
   &.list-button {
-    input[type="radio"] {
+    input[type="radio"],
+    input[type="checkbox"] {
       opacity: 0;
       position: fixed;
       width: 0;
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 315a18995..7b1bc292c 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,16 +1,25 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
   <!-- 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="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'>
+  <div v-if="radioButton" class="col list-group list-button-horizontal d-flex flex-column mb-2">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
+    <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="displayLoader()">
       <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]" />
+      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
     <p class="small">{{ errorMessage }}</p>
   </div>
+  <div v-else class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+      <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>
+  </label>
+  <p class="small">{{errorMessage}}</p>
+  </div>
 </template>
 
 <script>
@@ -18,6 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
+    radioButton: Boolean,
     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 */
@@ -33,12 +43,12 @@ export default {
   data() {
     return {
       isError: false,
-      display: false,
+      isLoaderDisplayed: false,
     };
   },
   methods: {
-    displayComponent() {
-      this.display = true;
+    displayLoader() {
+      this.isLoaderDisplayed = true;
     },
   },
   components: {
@@ -59,7 +69,8 @@ export default {
 </script>
 <style lang="scss">
 .list-button-horizontal {
-  input[type="radio"] {
+  input[type="radio"],
+  input[type="checkbox"] {
     opacity: 0;
     position: fixed;
     width: 0;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index e23a96dfc..a95555b12 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,15 +1,24 @@
 <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="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()'>
+  <div v-if="radioButton" class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <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]" />
+    <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
 </div>
+<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
+  <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+  <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <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>
+</label>
+<p class="small">{{errorMessage}}</p>
+</div>
 </template>
 
 <script>
@@ -17,6 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
+    radioButton: Boolean,
     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 */
@@ -31,12 +41,12 @@ export default {
   data() {
     return {
       isError: false,
-      display: false,
+      isLoaderDisplayed: false,
     };
   },
   methods: {
-    displayComponent() {
-      this.display = true;
+    displayLoader() {
+      this.isLoaderDisplayed = true;
     },
   },
   components: {

From 1e72a7500b61491fa261aedab09b1acc16e38b57 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 15 Dec 2021 12:07:29 -0500
Subject: [PATCH 11/86] Change prop name.

---
 src/layouts/component-test/component-test.vue | 40 +++++++++----------
 .../list-button-horizontal.vue                | 22 +++++-----
 src/ux-components/list-button/list-button.vue | 22 +++++-----
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 46be34449..d33833eb6 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -58,7 +58,7 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row">
@@ -69,7 +69,7 @@
           Select Vehicle Year
         </h3>
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -81,7 +81,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -93,7 +93,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -109,7 +109,7 @@
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
         <listButton
@@ -150,7 +150,7 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row">
@@ -159,7 +159,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -171,7 +171,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -183,7 +183,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -198,7 +198,7 @@
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       <div role="radiogroup" aria-labelledby="demo-2-checkbox-group" 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="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
@@ -240,7 +240,7 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row">
@@ -249,7 +249,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -261,7 +261,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -273,7 +273,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        radioButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -288,7 +288,7 @@
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       <div role="radiogroup" aria-labelledby="demo-3-checkbox-group" 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="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
@@ -330,7 +330,7 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row px-3">
@@ -341,7 +341,7 @@
           Select Vehicle Year
         </h3>
         <listButtonHorizontal
-        radioButton
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -355,7 +355,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        radioButton
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -369,7 +369,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        radioButton
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -386,7 +386,7 @@
     </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
       <div role="radiogroup" aria-labelledby="demo-4-checkbox-group" 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="sr-only" id="demo-4-checkbox-group">
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 7b1bc292c..cee93e31e 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,7 +1,16 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
-  <div v-if="radioButton" class="col list-group list-button-horizontal d-flex flex-column mb-2">
+  <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+      <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>
+  </label>
+  <p class="small">{{errorMessage}}</p>
+  </div>
+  <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
     <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="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -11,15 +20,6 @@
     </label>
     <p class="small">{{ errorMessage }}</p>
   </div>
-  <div v-else class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
-      <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>
-  </label>
-  <p class="small">{{errorMessage}}</p>
-  </div>
 </template>
 
 <script>
@@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    radioButton: Boolean,
+    isCheckbox: Boolean,
     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 */
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index a95555b12..f1768f741 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,6 +1,15 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div v-if="radioButton" class="list-group list-button d-flex flex-column w-100 mb-2">
+  <div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      <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>
+  </label>
+  <p class="small">{{errorMessage}}</p>
+  </div>
+  <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
     <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -10,15 +19,6 @@
   </label>
   <p class="small">{{errorMessage}}</p>
 </div>
-<div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
-  <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-  <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-    <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>
-</label>
-<p class="small">{{errorMessage}}</p>
-</div>
 </template>
 
 <script>
@@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    radioButton: Boolean,
+    isCheckbox: Boolean,
     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 */

From 99b108b25fa97d9aceb0806d4324a9bc6a553e30 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 15 Dec 2021 12:24:17 -0500
Subject: [PATCH 12/86] Update unit tests.

---
 .../list-button-horizontal/list-button-horizontal.spec.js       | 2 +-
 src/ux-components/list-button/list-button.spec.js               | 2 +-
 2 files 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 ac8dc3202..9d056260a 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
@@ -42,6 +42,6 @@ describe("list-button.vue", () => {
 
     expect(paragraph.text()).toEqual("2023");
 
-    expect(wrapper.vm.display).toBe(true);
+    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
   });
 });
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 599d447f4..9efa06f4d 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -42,6 +42,6 @@ describe("list-button.vue", () => {
 
     expect(paragraph.text()).toEqual("2023");
 
-    expect(wrapper.vm.display).toBe(true);
+    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
   });
 });

From 6d7f6fa1abb5e6c05f47d15fc7bffa9eda482c75 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 15 Dec 2021 13:32:10 -0500
Subject: [PATCH 13/86] Remove role from label. Update unit test.

---
 .../list-button-horizontal/list-button-horizontal.spec.js     | 1 -
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.spec.js             | 1 -
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 4 files changed, 4 insertions(+), 6 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 9d056260a..b7ae7ef49 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
@@ -31,7 +31,6 @@ describe("list-button.vue", () => {
     });
 
     expect(label.attributes()).toEqual({
-      role: "radio",
       tabindex: "-1",
       for: "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
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 cee93e31e..b267f2bbb 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <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>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <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="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <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>
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 9efa06f4d..fbb492222 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -31,7 +31,6 @@ describe("list-button.vue", () => {
     });
 
     expect(label.attributes()).toEqual({
-      role: "radio",
       tabindex: "-1",
       for: "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4",
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index f1768f741..a8ad64d8c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label role="checkbox" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <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>
@@ -11,7 +11,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <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>

From 59f92f4af480655171c151b509ef4144f103bd1b Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 15 Dec 2021 13:47:49 -0500
Subject: [PATCH 14/86] Implement routing table

---
 src/layouts/loader-demo/loader-demo.vue       | 24 -----------------
 src/layouts/vehicle-make/vehicle-make.vue     |  3 +++
 src/layouts/vehicle-year/vehicle-year.spec.js |  1 -
 src/layouts/vehicle-year/vehicle-year.vue     |  7 +++--
 src/router/index.js                           |  6 -----
 src/router/router-constants/fmgPage-values.js |  2 ++
 .../router-constants/navigation-scenarios.js  |  3 +++
 src/router/router-constants/routing-table.js  | 26 +++++++++++++++++++
 8 files changed, 39 insertions(+), 33 deletions(-)
 delete mode 100644 src/layouts/loader-demo/loader-demo.vue
 create mode 100644 src/layouts/vehicle-make/vehicle-make.vue

diff --git a/src/layouts/loader-demo/loader-demo.vue b/src/layouts/loader-demo/loader-demo.vue
deleted file mode 100644
index 0407f4fd4..000000000
--- a/src/layouts/loader-demo/loader-demo.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <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">Loader</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "App",
-  components: {
-    loader,
-  },
-};
-</script>
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
new file mode 100644
index 000000000..f04bea0ec
--- /dev/null
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -0,0 +1,3 @@
+<template>
+<p> Vehicle Make Layout - Do Something Cool Here </p>
+</template>
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index 19028baaf..ae3d44a6a 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -73,7 +73,6 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
         },
       ],
-      isCmsContentReady: true,
     },
     yearQuestionInitialData: yearQuestionInitialData,
   };
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index f5ce99324..8dc9b72d9 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,4 +1,4 @@
-<template v-if="isCmsContentReady">
+<template>
   <div class="container-fluid shadow rounded-3 p-0">
     <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
@@ -17,9 +17,12 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import siteHeader from "@/common-components/site-header/site-header";
 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 { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
 export default {
   name: "vehicle-year",
   data() {
@@ -64,7 +67,7 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push('?fmgPage=vehicle-make');
+      this.$router.navigate(navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 
diff --git a/src/router/index.js b/src/router/index.js
index a93fe6e54..c135d60c1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,6 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
-import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -18,11 +17,6 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
-  {
-    path: "/loader-demo", // This is a temporary route for testing.
-    name: "LoaderDemo",
-    component: LoaderDemo,
-  },
   {
     path: "/",
     beforeEnter(to, from, next) {
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index e84d9e9ea..38486e111 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -1,6 +1,8 @@
 const fmgPageValues = {
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
+  VEHICLE_MODEL: "vehicle-model",
+  VEHICLE_STYLE: "vehicle-style",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 3fc642d65..65947744e 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -1,5 +1,8 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MODEL: "SELECTED_MODEL",
+  SELECTED_MAKE: "SELECTED_MAKE",
+  CLICKED_BACK: "CLICKED_BACK",
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7f3f3d0d1..826357f63 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -11,6 +11,32 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MAKE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+      }
+    ],
+  },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MODEL,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MODEL,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+      }
+    ],
+  },
 ];
 
 export { routingTable };

From 46865fe2bcdfd0267c014caee04e72df24f9b4b3 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 15 Dec 2021 18:13:03 -0500
Subject: [PATCH 15/86] CSR-222: update button-back component; rename
 site-header and header components

---
 .../funnel-header.spec.js}                    |  6 +--
 .../funnel-header.vue}                        |  3 +-
 .../funnel-sub-header.spec.js                 | 16 ++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 38 +++++++++++++++++++
 .../vehicle-banner/vehicle-banner.vue         |  1 +
 src/layouts/component-test/component-test.vue | 11 ++++--
 src/layouts/vehicle-year/vehicle-year.vue     | 15 +++++---
 .../button-back/button-back.spec.js           | 21 +++++++++-
 src/ux-components/button-back/button-back.vue | 20 ++++++++--
 src/ux-components/header/header.spec.js       | 16 --------
 src/ux-components/header/header.vue           | 22 -----------
 11 files changed, 113 insertions(+), 56 deletions(-)
 rename src/common-components/{site-header/site-header.spec.js => funnel-header/funnel-header.spec.js} (68%)
 rename src/common-components/{site-header/site-header.vue => funnel-header/funnel-header.vue} (90%)
 create mode 100644 src/common-components/funnel-sub-header/funnel-sub-header.spec.js
 create mode 100644 src/common-components/funnel-sub-header/funnel-sub-header.vue
 delete mode 100644 src/ux-components/header/header.spec.js
 delete mode 100644 src/ux-components/header/header.vue

diff --git a/src/common-components/site-header/site-header.spec.js b/src/common-components/funnel-header/funnel-header.spec.js
similarity index 68%
rename from src/common-components/site-header/site-header.spec.js
rename to src/common-components/funnel-header/funnel-header.spec.js
index 2a471fe26..cae21a179 100644
--- a/src/common-components/site-header/site-header.spec.js
+++ b/src/common-components/funnel-header/funnel-header.spec.js
@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
-import siteHeader from "./site-header";
+import funnelHeader from "./funnel-header";
 
-describe("siteHeader", () => {
+describe("funnelHeader", () => {
   test("renders the logo image", () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(siteHeader, {
+    const wrapper = shallowMount(funnelHeader, {
       propsData: {
         imageSrc: "image_url",
       },
diff --git a/src/common-components/site-header/site-header.vue b/src/common-components/funnel-header/funnel-header.vue
similarity index 90%
rename from src/common-components/site-header/site-header.vue
rename to src/common-components/funnel-header/funnel-header.vue
index 441b188c4..7b6c6efc6 100644
--- a/src/common-components/site-header/site-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -9,11 +9,12 @@
 
 <script>
 export default {
-  name: "site-header",
+  name: "funnel-header",
   props: {
     imageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
new file mode 100644
index 000000000..f90f042dc
--- /dev/null
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -0,0 +1,16 @@
+import { shallowMount } from "@vue/test-utils";
+import FunnelSubHeader from "./funnel-sub-header";
+
+describe("FunnelSubHeader.vue", () => {
+  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+    // Act
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+  });
+});
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
new file mode 100644
index 000000000..5e8b480c3
--- /dev/null
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="current_car_info-text">
+    <div class="d-flex align-items-center justify-content-center">
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <buttonBack 
+        v-if="hasBackButton" 
+        :backButtonUrl="backButtonUrl" 
+        :backButtonAccessibleText="backButtonAccessibleText" 
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import buttonBack from "@/ux-components/button-back/button-back";
+
+export default {
+  name: "FunnelSubHeader",
+  props: {
+    text: String,
+    hasBackButton: Boolean,
+    backButtonUrl: String,
+    backButtonAccessibleText: String,
+  },
+  components: {
+    buttonBack,
+  }
+};
+</script>
+
+<style lang="scss">
+  h2 {
+    color: $gray-550;
+  }
+  .back-button-wrapper {
+    margin-left: .25rem;
+  }
+</style>
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 51e8d8aa3..e369cddb9 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -15,6 +15,7 @@ export default {
     vehicleImageSrc: {
       type: String,
       required: true,
+      default: "",
     },
   },
 };
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 624469e8a..5d2bb02e7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -52,7 +52,10 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack/>
+        <buttonBack 
+          backButtonUrl="#"
+          backButtonAccessibleText="Back button label"
+        />
       </div>
     </div>
     <div class="row my-4">
@@ -398,7 +401,7 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <siteHeader
+        <funnelHeader
           imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
@@ -426,7 +429,7 @@ 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 funnelHeader from "@/common-components/funnel-header/funnel-header";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
@@ -439,7 +442,7 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
+    funnelHeader,
   },
   data() {
     return {
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index f5ce99324..692526cf5 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,10 +1,13 @@
 <template v-if="isCmsContentReady">
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :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" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText" 
+            class="Header" 
+        />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
@@ -14,9 +17,9 @@
 <script>
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -70,9 +73,9 @@ export default {
 
   components: {
     yearQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 3d0843e10..c2676214f 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -1 +1,20 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+  test("renders a link", () => {
+    // Arrange
+
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+      propsData: {
+        backButtonUrl: "#",
+        backButtonAccessibleText: "something",
+      },
+    });
+    
+    // Assert
+    expect(wrapper.find("a").exists()).toBe(true);
+    wrapper.unmount();
+  });
+});
\ No newline at end of file
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index aa462accc..abeb08462 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,15 +1,26 @@
 <template>
-  <button class="back-button-wrapper d-flex p-0">
+  <a v-if="backButtonUrl" :href="backButtonUrl" class="back-button-wrapper d-flex p-0" :aria-label="backButtonAccessibleText">
     <div class="button-back">
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </button>
+  </a>
 </template>
 
 <script>
 export default {
-  name: "buttonBack"
+  name: "buttonBack",
+  props: {
+    backButtonUrl: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
@@ -17,6 +28,9 @@ export default {
 .back-button-wrapper {
   border: none;
   background: transparent;
+  text-decoration: none;
+  border-bottom: none;
+
   .button-back {
     display: inline-flex;
     position: relative;
diff --git a/src/ux-components/header/header.spec.js b/src/ux-components/header/header.spec.js
deleted file mode 100644
index 2c287ac79..000000000
--- a/src/ux-components/header/header.spec.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import Header from "./header";
-
-describe("Header.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
-    // Act
-    const wrapper = shallowMount(Header, {
-      propsData: {
-        text: "Header Content",
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("h2").text()).toContain("Header Content");
-  });
-});
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
deleted file mode 100644
index 3395a7e93..000000000
--- a/src/ux-components/header/header.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  props: {
-    text: String,
-  },
-};
-</script>
-
-<style lang="scss">
-  h2 {
-    color: $gray-550;
-  }
-</style>

From 3cbc071bb48d8e4d94a56f93294f54dafe255e14 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Thu, 16 Dec 2021 14:09:26 -0500
Subject: [PATCH 16/86] Created mapper methods

---
 src/helpers/cms-content-helper.js | 70 +++++++++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e0a12d8fe..0c80b5bd3 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -9,17 +9,79 @@ export function fetchCmsContentForPage(fmgPage) {
       const pageDataFromCms = {};
 
       response.data.Result.forEach((widget) => {
-        if (Object.values(widgetNames).includes(widget.Type)) {
+
+        let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type);
+
+        if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) {
           // If we already have this widget, push it on the collection
-          if (widget.Type in pageDataFromCms) {
-            pageDataFromCms[widget.Type].push(widget.Model);
+          if (widgetWithReplacements.Type in pageDataFromCms) {
+            pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model);
             return;
           }
 
-          pageDataFromCms[widget.Type] = [widget.Model];
+          pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model];
         }
       });
 
       return pageDataFromCms;
     });
 }
+
+function mapStringToState(str) {
+
+  // Pull the state string out of our dynamic string from the CMS
+  const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
+  const matches = [...str.matchAll(regexExp)];
+  const stateString = matches.map(m => m[2]).toString();
+
+  // Convert the state string to a state object
+  let storeState = store.state;
+
+  for (const s of stateString.split('.')) {
+    if (storeState[s] != undefined) {
+      storeState = storeState[s];
+    } else {
+      return false; // If we can't find our state variable, break our loop. Don't break our code.
+    }
+  }
+
+  return storeState;
+}
+
+function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
+
+  const objWithReplacements = {
+    Type: widgetType,
+    Model: {}
+  };
+
+  Object.keys(widgetModel).forEach(key => {
+
+    let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
+
+    objWithReplacements.Model[key] = modelWithReplacements;
+  });
+
+  return objWithReplacements;
+}
+
+function processWidgetItemForReplacement(widgetModel, key) {
+  // If we have a string, and it needs to be replaced.
+  if (typeof widgetModel[key] === 'string') {
+    if (widgetModel[key].includes('{globalState:')) {
+      widgetModel[key] = mapStringToState(widgetModel[key]);
+    }
+    return widgetModel[key];
+  }
+
+  // If we have an object. array, etc
+  if (typeof widgetModel[key] === 'object' && Object.keys(widgetModel[key]).length) {
+    Object.keys(widgetModel[key]).forEach(item => {
+      processWidgetItemForReplacement(widgetModel[key], item);
+    });
+
+    return widgetModel[key];
+  }
+
+  return widgetModel[key];
+}
\ No newline at end of file

From 01fa5ac057db984e3c2d229e1534a9816b2cac08 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Thu, 16 Dec 2021 14:49:40 -0500
Subject: [PATCH 17/86] Some comments

---
 src/helpers/cms-content-helper.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 0c80b5bd3..1d901d27e 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -27,6 +27,7 @@ export function fetchCmsContentForPage(fmgPage) {
     });
 }
 
+// Function to convert a string, into a matching global state item.
 function mapStringToState(str) {
 
   // Pull the state string out of our dynamic string from the CMS
@@ -48,6 +49,8 @@ function mapStringToState(str) {
   return storeState;
 }
 
+// Parent function for processWidgetItemForReplacement. This will loop through the parent
+// object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
 function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
 
   const objWithReplacements = {
@@ -65,6 +68,8 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
   return objWithReplacements;
 }
 
+// This function will process the widget item and replace any global state variables with their values.
+// This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
 function processWidgetItemForReplacement(widgetModel, key) {
   // If we have a string, and it needs to be replaced.
   if (typeof widgetModel[key] === 'string') {

From a298e15f06ae81298a78168f63e3cfeb9df9a471 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Thu, 16 Dec 2021 16:37:35 -0500
Subject: [PATCH 18/86] Creating makes page

---
 .../button-question/button-question.vue       | 14 ++-
 .../vehicle-banner/vehicle-banner.vue         |  2 +-
 src/helpers/cms-content-helper.js             |  2 +-
 .../make-question/make-question.spec.js       | 82 ++++++++++++++++
 .../make-question/make-question.vue           | 47 ++++++++++
 src/layouts/vehicle-make/vehicle-make.spec.js | 94 +++++++++++++++++++
 src/layouts/vehicle-make/vehicle-make.vue     | 77 +++++++++++++++
 src/layouts/vehicle-year/vehicle-year.vue     | 14 +--
 src/mixins/base-mixin.js                      |  4 +
 src/router/router-constants/fmgPage-values.js |  1 +
 .../router-constants/navigation-scenarios.js  |  1 +
 src/router/router-constants/routing-table.js  |  9 ++
 src/store/index.js                            |  3 +
 src/ux-components/list-button/list-button.vue |  2 +-
 14 files changed, 335 insertions(+), 17 deletions(-)
 create mode 100644 src/layouts/vehicle-make/make-question/make-question.spec.js
 create mode 100644 src/layouts/vehicle-make/make-question/make-question.vue
 create mode 100644 src/layouts/vehicle-make/vehicle-make.spec.js
 create mode 100644 src/layouts/vehicle-make/vehicle-make.vue

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 97ebf1310..e1fee1e40 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -17,7 +17,7 @@
             data-test="button"
             :groupName="groupName"
             textPosition="text-start"
-            isRequired=true
+            :isRequired="true"
             :value="modelValue"
             screenReaderOnlyText="(opens new window)"
           />
@@ -46,3 +46,15 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.button_question {
+  height: calc(100vh - 280px);
+
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 51e8d8aa3..32caa82f8 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-4 text-center">
+  <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
       :src="vehicleImageSrc"
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e0a12d8fe..c12820fe0 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -22,4 +22,4 @@ export function fetchCmsContentForPage(fmgPage) {
 
       return pageDataFromCms;
     });
-}
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.spec.js b/src/layouts/vehicle-make/make-question/make-question.spec.js
new file mode 100644
index 000000000..84dd4f7e8
--- /dev/null
+++ b/src/layouts/vehicle-make/make-question/make-question.spec.js
@@ -0,0 +1,82 @@
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-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("make-question.vue", () => {
+  test("Selected make is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "honda" });
+    const makeToSelect = "ford";
+
+    //Act
+    wrapper.setData({ selectedMake: makeToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["ford"]);
+  });
+});
+
+describe("make-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
+
+    //Act
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
+  });
+});
+
+describe("make-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
+
+    //Act
+    const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(makeQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
new file mode 100644
index 000000000..8edb13152
--- /dev/null
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -0,0 +1,47 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="makes"
+    groupName="Choose Vehicle Make"
+    v-model="selectedMake"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "make-question",
+  data() {
+    return {
+      questionText: null,
+      selectedMake: null,
+      makes: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      console.log(store);
+      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.makes = initialData;
+    }
+  },
+  watch: {
+    selectedMake(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
new file mode 100644
index 000000000..0f46067e4
--- /dev/null
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -0,0 +1,94 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-make.vue", () => {
+  test("Make question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
+    const makeQuestionInitialData = ["2023", "2022", "2021"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      makeQuestionInitialData: makeQuestionInitialData,
+    } );
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a make to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  makeQuestionInitialData = {},
+  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,
+    },
+    makeQuestionInitialData: makeQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock make question methods
+  makeQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleMake, mountOptions);
+  const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
+  makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
new file mode 100644
index 000000000..a9cedabbf
--- /dev/null
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -0,0 +1,77 @@
+<template v-if="isCmsContentReady">
+  <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" />
+        <makeQuestion v-model="selectedMake" ref="makeQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-make",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedMake: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "makeQuestionInitialData",
+        promise: makeQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
+      });
+    });
+  },
+
+  watch: {
+    selectedMake(make) {
+      this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route);
+    }
+  },
+
+  components: {
+    makeQuestion,
+    pageHeader,
+    siteHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index f5ce99324..842cb68ba 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -64,7 +64,7 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push('?fmgPage=vehicle-make');
+      this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 
@@ -76,15 +76,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-.select-car {
-  height: calc(100vh - 56px);
-
-  .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/mixins/base-mixin.js b/src/mixins/base-mixin.js
index afe618125..14da7a16b 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -31,6 +32,9 @@ export default {
     storeMutations() {
       return storeMutations;
     },
+    navigationScenarios() {
+      return navigationScenarios;
+    },
     widgetNames() {
       return widgetNames;
     },
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index e84d9e9ea..53e8272d8 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -1,6 +1,7 @@
 const fmgPageValues = {
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
+  VEHICLE_MODEL: "vehicle-model",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 3fc642d65..72703ef58 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -1,5 +1,6 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MAKE: "SELECTED_MAKE",
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7f3f3d0d1..243baeb80 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -9,6 +9,15 @@ const routingTable = [
         scenario: navigationScenarios.SELECTED_YEAR,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
       },
+      {
+        fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+        maps: [
+          {
+            scenario: navigationScenarios.SELECTED_MAKE,
+            destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/src/store/index.js b/src/store/index.js
index 036694868..1bf7243b7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -65,6 +65,9 @@ export default createStore({
       state.order.vehicle.year = year;
     },
   },
+  getters: {
+    vehicle: state => state.order.vehicle
+  },
   actions: {
     // Vehicle API Actions
     getVehicleYears(context) {
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index e23a96dfc..c20f1c6cb 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -18,7 +18,7 @@ export default {
   name: "listButton",
   props: {
     groupName: String, /* Required, unique for each button GROUP */
-    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonID: [Number,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 */
     buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */

From 137ccd5328f6dbd4aaba1ea30e8590708b1eb28c Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 16 Dec 2021 17:05:43 -0500
Subject: [PATCH 19/86] CSR-222: changes to navigation method of back button

---
 .../funnel-sub-header.spec.js                 |  1 +
 .../funnel-sub-header/funnel-sub-header.vue   |  9 +++----
 .../button-back/button-back.spec.js           | 24 ++++++++++++++++++-
 src/ux-components/button-back/button-back.vue | 21 ++++++++++++++--
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index f90f042dc..e2b5c4d28 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -12,5 +12,6 @@ describe("FunnelSubHeader.vue", () => {
 
     // Assert
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
   });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e8b480c3..5e3bcc7e3 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -2,10 +2,10 @@
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
-      <buttonBack 
-        v-if="hasBackButton" 
-        :backButtonUrl="backButtonUrl" 
-        :backButtonAccessibleText="backButtonAccessibleText" 
+      <buttonBack
+        v-if="hasBackButton"
+        :backButtonAccessibleText="backButtonAccessibleText"
+        :backButtonAction="backButtonAction"
       />
     </div>
   </div>
@@ -21,6 +21,7 @@ export default {
     hasBackButton: Boolean,
     backButtonUrl: String,
     backButtonAccessibleText: String,
+    backButtonAction: Function,
   },
   components: {
     buttonBack,
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index c2676214f..b753f4376 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import buttonBack from "./button-back";
 
 describe("back button", () => {
+
   test("renders a link", () => {
     // Arrange
 
@@ -17,4 +18,25 @@ describe("back button", () => {
     expect(wrapper.find("a").exists()).toBe(true);
     wrapper.unmount();
   });
-});
\ No newline at end of file
+
+  test("should execute handleClick function if it is clicked on", async () => {
+    // Arrange
+    const myFunction = () => {};
+    
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+        propsData: {
+            backButtonAction: myFunction,
+            backButtonAccessibleText: "something",
+        },
+    });
+    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
+
+    await wrapper.find("a").trigger("click");
+    
+    // Assert
+    expect(handleClickMethod).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+});
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index abeb08462..808c1f6cc 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,5 +1,11 @@
 <template>
-  <a v-if="backButtonUrl" :href="backButtonUrl" class="back-button-wrapper d-flex p-0" :aria-label="backButtonAccessibleText">
+  <a 
+    v-if="backButtonUrl || backButtonAction" 
+    :href="backButtonUrl || '#'" 
+    @click="handleClick($event)" 
+    class="back-button-wrapper d-flex p-0" 
+    :aria-label="backButtonAccessibleText"
+  >
     <div class="button-back">
       <div class="arrow-left"></div>
       <div class="box"></div>
@@ -13,13 +19,24 @@ export default {
   props: {
     backButtonUrl: {
       type: String,
-      required: true,
       default: "",
     },
     backButtonAccessibleText: {
       type: String,
       required: true,
     },
+    backButtonAction: {
+      type: Function,
+      default: null,
+    }
+  },
+  methods: {
+    handleClick: function (event) {
+      if (this.backButtonAction) {
+        event.preventDefault();
+        this.backButtonAction();
+      }
+    },
   },
 };
 </script>

From b5f17a41c8c3c976cba19ddec84e236a0d5e9d93 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 16 Dec 2021 17:17:50 -0500
Subject: [PATCH 20/86] CSR-241 WIP Checkbox component.

---
 src/layouts/component-test/component-test.vue |  85 ++++++++------
 src/ux-components/checkbox/checkbox.spec.js   |   1 +
 src/ux-components/checkbox/checkbox.vue       |  79 +++++++++++++
 .../list-button-horizontal.vue                |   4 +-
 src/ux-components/list-button/list-button.vue |   4 +-
 src/ux-components/list-card/list-card.vue     | 110 +++++++++++++-----
 6 files changed, 215 insertions(+), 68 deletions(-)
 create mode 100644 src/ux-components/checkbox/checkbox.spec.js
 create mode 100644 src/ux-components/checkbox/checkbox.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d33833eb6..af019d944 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,31 +2,13 @@
   <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">List Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
       </div>
     </div>
-    <div class="row g-2">
-      <listCard
-        buttonLabel="Windshield"
-        buttonImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        buttonID="windshield"
-      />
-      <listCard
-        buttonLabel="Side Window"
-        buttonImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        buttonID="sidewindow"
-      />
-      <listCard
-        buttonLabel="Back Glass"
-        buttonImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        buttonID="backglass"
-      />
+    <div class="row">
+      <div class="col">
+        <checkbox/>
+      </div>
     </div>
     <div class="row my-4">
       <div class="col">
@@ -55,6 +37,37 @@
         <buttonBack/>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+      </div>
+    </div>
+    <div class="row g-2">
+      <listCard
+        isMultiSelect
+        buttonLabel="Windshield"
+        buttonImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        buttonID="windshield"
+      />
+      <listCard
+        isMultiSelect
+        buttonLabel="Side Window"
+        buttonImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        buttonID="sidewindow"
+      />
+      <listCard
+        isMultiSelect
+        buttonLabel="Back Glass"
+        buttonImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        buttonID="backglass"
+      />
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -69,7 +82,7 @@
           Select Vehicle Year
         </h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -81,7 +94,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -93,7 +106,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -159,7 +172,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -171,7 +184,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -183,7 +196,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -249,7 +262,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -261,7 +274,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -273,7 +286,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -341,7 +354,7 @@
           Select Vehicle Year
         </h3>
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -355,7 +368,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -369,7 +382,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -596,6 +609,7 @@ 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 listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import checkbox from "@/ux-components/checkbox/checkbox";
 export default {
   name: "App",
   components: {
@@ -608,6 +622,7 @@ export default {
     vehicleBanner,
     listButtonHorizontal,
     siteHeader,
+    checkbox
   },
   data() {
     return {
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
new file mode 100644
index 000000000..2c145a1ad
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="ui-checkbox d-flex">
+    <input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
+    <label class="d-flex align-items-center" for="check_1">
+      <p class="m-0 lh-1">Checkbox</p>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "checkbox"
+};
+</script>
+
+<style lang="scss">
+.ui-checkbox {
+  position: relative;
+  input[type='checkbox'] {
+    position: absolute;
+  }
+
+  input[type='checkbox'] + label {
+    display: block;
+    position: relative;
+  }
+  input[type='checkbox'] + label::before {
+    content: '';
+    position: relative;
+    display: inline-block;
+    margin-right: 10px;
+    width: 16px;
+    height: 16px;
+    background: white;
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+  }
+  input[type='checkbox']:checked + label::before {
+    background: $blue;
+  }
+  input[type='checkbox']:checked + label::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    border-left: 2px solid $white;
+    border-bottom: 2px solid $white;
+    height: 6px;
+    width: 12px;
+    transform: rotate(-45deg);
+  }
+  input[type='checkbox']:hover + label::before {
+    //outline: #5d9dd5 solid 1px;
+    box-shadow: 0 0 0 4px $blue-100;
+  }
+  input[type='checkbox']:focus + label::before {
+    //outline: #5d9dd5 solid 1px;
+    box-shadow: 0 0 0 2px $blue;
+  }
+  input[type='checkbox']:focus:checked + label::before {
+    box-shadow: 0 0 0 2px transparent;
+  }
+  input[type='checkbox'] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+  input[type='checkbox']:disabled + label {
+    color: #575757;
+  }
+
+  input[type='checkbox']:disabled + label::before {
+    background: #ddd;
+  }
+}
+</style>
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 b267f2bbb..5df8261ec 100644
--- a/src/ux-components/list-button-horizontal/list-button-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 buttons on desktop, 3 on mobile. -->
-  <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     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 */
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index a8ad64d8c..89de52e64 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 v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     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 */
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index be7434cc4..14cba0486 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,24 +1,16 @@
 <template>
-  <div class="col mb-3 d-flex list-card">
-    <input
-      type="radio"
-      class="position-absolute opacity-0"
-      :class="className"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      v-model="picked"
-      :tabindex="tabIndex"
-    />
-    <label
-      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/${buttonImage}`)"
-        v-bind:alt="altText"
-      />
+  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
+    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
+      <img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+      <span class="checkmark"></span>
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+    </label>
+  </div>
+  <div v-else class="col mb-3 d-flex list-card">
+    <input type="radio" class="position-absolute opacity-0" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+    <label 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/${buttonImage}`)" v-bind:alt="altText" />
       <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
     </label>
   </div>
@@ -29,15 +21,16 @@
 <script>
 export default {
   name: "listCard",
-  props: [
-    "groupName",
-    "buttonLabel",
-    "buttonImage",
-    "altText",
-    "buttonID",
-    "tabIndex",
-    "className",
-  ],
+  props: {
+    isMultiSelect: Boolean,
+    groupName: String,
+    buttonLabel: String,
+    buttonImage: String,
+    altText: String,
+    buttonID: String,
+    tabIndex: String,
+    className: String,
+  },
   data() {
     return {
       picked: "picked",
@@ -47,6 +40,9 @@ export default {
 </script>
 <style lang="scss">
 .list-card {
+  img {
+    width: 46px;
+  }
   input[type="radio"] {
     &:focus + label {
       background-color: $white;
@@ -73,5 +69,61 @@ export default {
       box-shadow: 0px 0px 0px 6px $blue-100;
     }
   }
+
+  /* Hide the browser's default checkbox */
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  /* Create a custom checkbox */
+  .checkmark {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 16px;
+    width: 16px;
+    background-color: $white;
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+  }
+
+  /* On mouse-over, add a grey background color */
+  // .checkbox:hover input ~ .checkmark {
+  //   background-color: $white;
+  //   border: 1px solid $gray-300;
+  //   box-shadow: 0px 0px 0px 4px $blue-200;
+  // }
+
+  /* When the checkbox is checked, add a blue background */
+  .checkbox input:checked ~ .checkmark {
+    background-color: $blue;
+  }
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  /* Show the checkmark when checked */
+  .checkbox input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  /* Style the checkmark/indicator */
+  .checkbox .checkmark:after {
+    left: 5px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
 }
 </style>

From 8abe40c7047cb073a2c4e4ef17ac946833c13dcf Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 16 Dec 2021 17:29:44 -0500
Subject: [PATCH 21/86] CSR-241 WIP checkbox props update.

---
 src/layouts/component-test/component-test.vue |  7 ++++++-
 src/ux-components/checkbox/checkbox.vue       | 14 ++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index af019d944..15aeef9f6 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,7 +7,12 @@
     </div>
     <div class="row">
       <div class="col">
-        <checkbox/>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-1"
+          tabIndex="1"
+          checkboxLabel="I'm a checkbox"
+        />
       </div>
     </div>
     <div class="row my-4">
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 2c145a1ad..22d6a6784 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
-    <label class="d-flex align-items-center" for="check_1">
-      <p class="m-0 lh-1">Checkbox</p>
+    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p class="m-0 lh-1">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
 
 <script>
 export default {
-  name: "checkbox"
+  name: "checkbox",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String
+  }
 };
 </script>
 

From f26ab03cdbde3c48b9036fd7985973fafd1fa22e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 06:35:43 -0500
Subject: [PATCH 22/86] CSR-241 WIP css cleanup.

---
 src/ux-components/checkbox/checkbox.vue | 98 ++++++++++++-------------
 1 file changed, 45 insertions(+), 53 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 22d6a6784..9639f93e8 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -2,7 +2,7 @@
   <div class="ui-checkbox d-flex">
     <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p class="m-0 lh-1">{{checkboxLabel}}</p>
+      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
@@ -22,64 +22,56 @@ export default {
 <style lang="scss">
 .ui-checkbox {
   position: relative;
-  input[type='checkbox'] {
-    position: absolute;
-  }
-
-  input[type='checkbox'] + label {
-    display: block;
-    position: relative;
-  }
-  input[type='checkbox'] + label::before {
-    content: '';
-    position: relative;
-    display: inline-block;
-    margin-right: 10px;
-    width: 16px;
-    height: 16px;
-    background: white;
-    border: 1px solid $gray-500;
-    border-radius: 2px;
-  }
-  input[type='checkbox']:checked + label::before {
-    background: $blue;
-  }
-  input[type='checkbox']:checked + label::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 2px;
-    border-left: 2px solid $white;
-    border-bottom: 2px solid $white;
-    height: 6px;
-    width: 12px;
-    transform: rotate(-45deg);
-  }
-  input[type='checkbox']:hover + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 4px $blue-100;
-  }
-  input[type='checkbox']:focus + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 2px $blue;
-  }
-  input[type='checkbox']:focus:checked + label::before {
-    box-shadow: 0 0 0 2px transparent;
-  }
   input[type='checkbox'] {
     position: absolute !important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
-  }
-  input[type='checkbox']:disabled + label {
-    color: #575757;
-  }
-
-  input[type='checkbox']:disabled + label::before {
-    background: #ddd;
+    + label {
+      display: block;
+      position: relative;
+    }
+    + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: 2px;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 12px;
+      transform: rotate(-45deg);
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
   }
 }
 </style>

From 3fe95f55a9e26691eebea129c7714b25fd55dc40 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 08:59:27 -0500
Subject: [PATCH 23/86] CSR-241 WIP checkbox updates.

---
 src/ux-components/checkbox/checkbox.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 9639f93e8..1b6254d29 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,8 +1,10 @@
 <template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     </label>
   </div>
 </template>
@@ -14,7 +16,9 @@ export default {
     checkboxName: String,
     buttonID: String,
     tabIndex: Number,
-    checkboxLabel: String
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean
   }
 };
 </script>

From 6050f346f6cf7d9134f6f456143717e23353d670 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:07:19 -0500
Subject: [PATCH 24/86] Cleaning up unit tests

---
 src/layouts/vehicle-make/make-question/make-question.vue | 1 -
 src/layouts/vehicle-make/vehicle-make.spec.js            | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 8edb13152..765c7a542 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -30,7 +30,6 @@ export default {
   },
   methods: {
     loadInitialData() {
-      console.log(store);
       return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
     },
     initializeComponent(cmsContent, initialData) {
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 0f46067e4..c184595f1 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -15,7 +15,7 @@ describe("vehicle-make.vue", () => {
 
     //Arange
     const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
-    const makeQuestionInitialData = ["2023", "2022", "2021"];
+    const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks( { 
       radioQuestionCmsContent: radioQuestionCmsContent, 
       makeQuestionInitialData: makeQuestionInitialData,

From f9432fb24e6738fca88a00692851ac2a556b96da Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:13:31 -0500
Subject: [PATCH 25/86] removing unnecessary if statement

---
 src/layouts/vehicle-make/vehicle-make.spec.js | 1 -
 src/layouts/vehicle-make/vehicle-make.vue     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index c184595f1..87df24e38 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -73,7 +73,6 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
         },
       ],
-      isCmsContentReady: true,
     },
     makeQuestionInitialData: makeQuestionInitialData,
   };
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index a9cedabbf..a5abd776b 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,4 +1,4 @@
-<template v-if="isCmsContentReady">
+<template>
   <div class="container-fluid shadow rounded-3 p-0">
     <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">

From 695842cf84f3ad2ecdf3bbaaf773b5ce5d80881a Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 09:20:14 -0500
Subject: [PATCH 26/86] Fixing routing-table

---
 src/router/router-constants/routing-table.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 14b5e24bc..34f4c5579 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -9,15 +9,6 @@ const routingTable = [
         scenario: navigationScenarios.SELECTED_YEAR,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
       },
-      {
-        fmgPageValue: fmgPageValues.VEHICLE_MAKE,
-        maps: [
-          {
-            scenario: navigationScenarios.SELECTED_MAKE,
-            destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
-          },
-        ],
-      },
     ],
   },
   {
@@ -48,4 +39,4 @@ const routingTable = [
   },
 ];
 
-export { routingTable };
+export { routingTable };
\ No newline at end of file

From a4fa2e04246db89c4ab85297b2eb128c08e027ab Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 11:33:21 -0500
Subject: [PATCH 27/86] CSR-222: update vehicle-make layout with new naming of
 header components

---
 src/layouts/vehicle-make/vehicle-make.vue | 12 ++++++------
 src/layouts/vehicle-year/vehicle-year.vue |  1 -
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index a5abd776b..f4e5bc587 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :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" />
+        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -14,9 +14,9 @@
 <script>
 // Components
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -69,9 +69,9 @@ export default {
 
   components: {
     makeQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 55591052f..48508adc2 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -23,7 +23,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 export default {
   name: "vehicle-year",

From 8958dfe0bb6070df6a44e0f7fd6f2b0f86304bd3 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Fri, 17 Dec 2021 13:11:59 -0500
Subject: [PATCH 28/86] Unit tests updates

---
 jest.config.js                 |   2 +-
 src/helpers/cms-helper.spec.js | 170 +++++++++++++++++++++++++--------
 2 files changed, 130 insertions(+), 42 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index e36f1a70d..fd7713966 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 80,
     },
   },
 };
diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index e9bd66653..0f03ab604 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -3,50 +3,138 @@ import { dispatch } from "@/store";
 
 jest.mock("@/store", () => ({
   dispatch: jest.fn(),
+  state: {
+    order: { vehicle: { year: "2019", make: "Acura" } }
+  }
 }));
 
-it("cms-content-helper: Should return data from CMS", () => {
-  // Arrange
-  const cmsMockData = {
-    Result: [
-      {
-        Type: "VehicleBannerWidget",
-        Model: {
-          ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          GenericVehicleImageFilePath:
-            "images/default-source/default-album/blurred-image.jpg",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a year to get started",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a model",
-        },
-      },
-      {
-        Type: "RadioQuestionWidget",
-        Model: {
-          QuestionText: "What year is your vehicle?",
-        },
-      },
-    ],
-  };
 
-  dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+describe("cms-content-helper.js", () => { 
+  it("Should return data from CMS", () => {
+    // Arrange
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "Select a year to get started",
+          },
+        },
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "Select a model",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            QuestionText: "What year is your vehicle?",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    // Act
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+        "Select a year to get started"
+      );
+    });
+  });
 
-  // Act
-  fetchCmsContentForPage("testPage").then((response) => {
-    // Assert
-    expect(response.PageHeaderWidget[0].HeaderText).toEqual(
-      "Select a year to get started"
-    );
+});
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state", () => {
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+        "2019"
+      );
+    });
   });
 });
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state, and leave others the same", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            ExampleText: "My widget value!",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!");
+  
+    });
+  });
+});
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state in nested objects", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "PageHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            OtherObjectInside: {
+              ExampleText: "{globalState:order.vehicle.make}",
+            }
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+  
+      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura");
+  
+    });
+  });
+});
+
+test.todo("String cannot be mapped to global state");
\ No newline at end of file

From 69108f2c8e5d8728cee798832791a8def5843d12 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 14:35:29 -0500
Subject: [PATCH 29/86] Creating models page

---
 src/constants/store-mutations.js              |  2 +
 .../model-question/model-question.spec.js     | 82 ++++++++++++++++
 .../model-question/model-question.vue         | 46 +++++++++
 .../vehicle-model/vehicle-model.spec.js       | 93 +++++++++++++++++++
 src/layouts/vehicle-model/vehicle-model.vue   | 77 +++++++++++++++
 src/store/index.js                            |  6 ++
 6 files changed, 306 insertions(+)
 create mode 100644 src/layouts/vehicle-model/model-question/model-question.spec.js
 create mode 100644 src/layouts/vehicle-model/model-question/model-question.vue
 create mode 100644 src/layouts/vehicle-model/vehicle-model.spec.js
 create mode 100644 src/layouts/vehicle-model/vehicle-model.vue

diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index d9292b5f8..c6d8484da 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -1,5 +1,7 @@
 const storeMutations = {
   UPDATE_YEAR: "updateYear",
+  UPDATE_MAKE: "updateMake",
+  UPDATE_MODEL: "updateModel",
 };
 
 export { storeMutations };
diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js
new file mode 100644
index 000000000..d6259eb72
--- /dev/null
+++ b/src/layouts/vehicle-model/model-question/model-question.spec.js
@@ -0,0 +1,82 @@
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-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("model-question.vue", () => {
+  test("Selected model is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
+    const modelToSelect = "Civic";
+
+    //Act
+    wrapper.setData({ selectedModel: modelToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Civic"]);
+  });
+});
+
+describe("model-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
+
+    //Act
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
+  });
+});
+
+describe("model-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
+
+    //Act
+    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(modelQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
new file mode 100644
index 000000000..32b5b72b4
--- /dev/null
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="models"
+    groupName="Choose Vehicle Model"
+    v-model="selectedModel"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "model-question",
+  data() {
+    return {
+      questionText: null,
+      selectedModel: null,
+      models: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.models = initialData;
+    }
+  },
+  watch: {
+    selectedModel(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
new file mode 100644
index 000000000..8ee3885de
--- /dev/null
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -0,0 +1,93 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-model.vue", () => {
+  test("Model question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
+    const modelQuestionInitialData = ["accord", "civic", "insight"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      modelQuestionInitialData: modelQuestionInitialData,
+    } );
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a model to get started");
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  modelQuestionInitialData = {},
+  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",
+        },
+      ],
+    },
+    modelQuestionInitialData: modelQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock model question methods
+  modelQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions({ });
+  const wrapper = shallowMount(vehicleModel, mountOptions);
+  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
+  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
new file mode 100644
index 000000000..5c69104ff
--- /dev/null
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -0,0 +1,77 @@
+<template>
+  <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" />
+        <modelQuestion v-model="selectedModel" ref="modelQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import pageHeader from "@/ux-components/header/header";
+import siteHeader from "@/common-components/site-header/site-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-model",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedModel: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "modelQuestionInitialData",
+        promise: modelQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
+      });
+    });
+  },
+
+  watch: {
+    selectedModel(model) {
+      this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route);
+    }
+  },
+
+  components: {
+    modelQuestion,
+    pageHeader,
+    siteHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/store/index.js b/src/store/index.js
index 1bf7243b7..5e21f7ce4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -64,6 +64,12 @@ export default createStore({
     updateYear(state, year) {
       state.order.vehicle.year = year;
     },
+    updateMake(state, make) {
+      state.order.vehicle.make = make;
+    },
+    updateModel(state, model) {
+      state.order.vehicle.model = model;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle

From b7ab69fb38bb7124cbd180b810016f5561fca76f Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Fri, 17 Dec 2021 15:49:51 -0500
Subject: [PATCH 30/86] Handle multiple variables in one string

---
 src/helpers/cms-content-helper.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 1d901d27e..da08d30ba 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -30,23 +30,31 @@ export function fetchCmsContentForPage(fmgPage) {
 // Function to convert a string, into a matching global state item.
 function mapStringToState(str) {
 
-  // Pull the state string out of our dynamic string from the CMS
+  // Pull all matches out of the string.
   const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
   const matches = [...str.matchAll(regexExp)];
-  const stateString = matches.map(m => m[2]).toString();
 
-  // Convert the state string to a state object
-  let storeState = store.state;
+  // Our final string value that will be built from the matches.
+  let stringBuilder = '';
 
-  for (const s of stateString.split('.')) {
-    if (storeState[s] != undefined) {
-      storeState = storeState[s];
-    } else {
-      return false; // If we can't find our state variable, break our loop. Don't break our code.
+  for (const match of matches) {
+
+    // Reset store state for each match.
+    let storeState = store.state;
+
+    for (const s of match[2].split('.')) {
+      if (storeState[s] != undefined) {
+        storeState = storeState[s];
+      } else {
+        return false;
+      }
     }
+
+    // Concatenate the string.
+    stringBuilder = `${stringBuilder} ${storeState}`;
   }
 
-  return storeState;
+  return stringBuilder.trimStart();
 }
 
 // Parent function for processWidgetItemForReplacement. This will loop through the parent

From 4902614467f78df0e611b2a6656b49a8236c2220 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 17 Dec 2021 15:58:18 -0500
Subject: [PATCH 31/86] changing heading names to new names for model page

---
 src/layouts/vehicle-model/vehicle-model.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 5c69104ff..88f72cdf0 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :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" />
+        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
       </div>
     </div>
@@ -14,8 +14,8 @@
 <script>
 // Components
 import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-import pageHeader from "@/ux-components/header/header";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -69,8 +69,8 @@ export default {
 
   components: {
     modelQuestion,
-    pageHeader,
-    siteHeader,
+    funnelHeader,
+    funnelSubHeader,
     vehicleBanner,
   },
 };

From ed621ae2bb97a27d18abb1663964392ca6352cd0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 16:56:08 -0500
Subject: [PATCH 32/86] CSR-241 WIP

---
 src/layouts/component-test/component-test.vue | 54 ++++++-----
 src/ux-components/list-card/list-card.vue     | 95 +++++--------------
 2 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 15aeef9f6..849bb1cd7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -48,30 +48,36 @@
       </div>
     </div>
     <div class="row g-2">
-      <listCard
-        isMultiSelect
-        buttonLabel="Windshield"
-        buttonImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        buttonID="windshield"
-      />
-      <listCard
-        isMultiSelect
-        buttonLabel="Side Window"
-        buttonImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        buttonID="sidewindow"
-      />
-      <listCard
-        isMultiSelect
-        buttonLabel="Back Glass"
-        buttonImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        buttonID="backglass"
-      />
+      <fieldset class="d-flex flex-row">
+        <legend class="sr-only">List Card Demo</legend>
+        <listCard
+          isMultiSelect
+          buttonLabel="Windshield"
+          buttonImage="windshield-damage.svg"
+          altText="Windshield"
+          groupName="damageKey"
+          buttonID="windshield"
+          tabIndex="1"
+        />
+        <listCard
+          isMultiSelect
+          buttonLabel="Side Window"
+          buttonImage="side-window-damage.svg"
+          altText="Side Window"
+          groupName="damageKey"
+          buttonID="sidewindow"
+          tabIndex="1"
+        />
+        <listCard
+          isMultiSelect
+          buttonLabel="Back Glass"
+          buttonImage="back-glass-damage.svg"
+          altText="Back Glass"
+          groupName="damageKey"
+          buttonID="backglass"
+          tabIndex="1"
+        />
+      </fieldset>
     </div>
     <div class="row my-4">
       <div class="col">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 14cba0486..8afdac8da 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,23 +1,22 @@
 <template>
-  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
-    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
-      <img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
-      <span class="checkmark"></span>
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
-    </label>
-  </div>
-  <div v-else class="col mb-3 d-flex list-card">
-    <input type="radio" class="position-absolute opacity-0" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+  <div class="list-card w-100">
     <label 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/${buttonImage}`)" v-bind:alt="altText" />
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+      <div class="item-container d-flex flex-column align-items-center">
+        <div class="d-flex align-items-center">
+          <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+        </div>
+        <div>
+          <input type="checkbox" class="d-flex align-self-center" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+          <span class="checkmark"></span>
+        </div>
+        <div>
+          <span class="mt-auto mb-2 text-center">{{ buttonLabel }}</span>
+        </div>
+      </div>
     </label>
   </div>
 </template>
 
-<!-- tabIndex="x" is available on this component if needed -->
-
 <script>
 export default {
   name: "listCard",
@@ -38,10 +37,12 @@ export default {
   },
 };
 </script>
+
 <style lang="scss">
 .list-card {
   img {
-    width: 46px;
+    height: 26px;
+    width: auto;
   }
   input[type="radio"] {
     &:focus + label {
@@ -64,66 +65,20 @@ export default {
   label {
     background: $white;
     border: 1px solid $gray;
+    padding: 1rem 0 .75rem 0;
     &:hover {
       cursor: pointer;
       box-shadow: 0px 0px 0px 6px $blue-100;
     }
+
   }
-
-  /* Hide the browser's default checkbox */
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  /* Create a custom checkbox */
-  .checkmark {
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 16px;
-    width: 16px;
-    background-color: $white;
-    border: 1px solid $gray-500;
-    border-radius: 2px;
-  }
-
-  /* On mouse-over, add a grey background color */
-  // .checkbox:hover input ~ .checkmark {
-  //   background-color: $white;
-  //   border: 1px solid $gray-300;
-  //   box-shadow: 0px 0px 0px 4px $blue-200;
-  // }
-
-  /* When the checkbox is checked, add a blue background */
-  .checkbox input:checked ~ .checkmark {
-    background-color: $blue;
-  }
-
-  /* Create the checkmark/indicator (hidden when not checked) */
-  .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-
-  /* Show the checkmark when checked */
-  .checkbox input:checked ~ .checkmark:after {
-    display: block;
-  }
-
-  /* Style the checkmark/indicator */
-  .checkbox .checkmark:after {
-    left: 5px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
+  .item-container {
+    div {
+      &:nth-child(2) {
+        padding: 18px 0 12px 0;
+      }
+    }
   }
 }
+
 </style>

From 42b1bbe031e3060bf14cbd4d734ebf1dbc81fe9d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:52:21 -0500
Subject: [PATCH 33/86] CSR-222: add back button to vehicle-make layout

---
 src/layouts/vehicle-make/vehicle-make.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f4e5bc587..be5e925ea 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -4,7 +4,13 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+            :text="pageHeaderWidgets.HeaderText"
+            :hasBackButton="true"
+            backButtonAccessibleText="Change Vehicle Year"
+            :backButtonAction="backButtonAction"
+            class="Header" 
+        />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
     </div>
@@ -60,6 +66,13 @@ export default {
     });
   },
 
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
   watch: {
     selectedMake(make) {
       this.$store.commit(this.storeMutations.UPDATE_MAKE, make);

From 9c44e3505825be5d068294f15c6a53c49f889fdf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 18:56:14 -0500
Subject: [PATCH 34/86] CSR-222: updates to unit tests and helper

---
 src/helpers/unit-test-helper.js               |  2 ++
 src/layouts/vehicle-make/vehicle-make.spec.js | 34 +++++++++++++++++--
 src/layouts/vehicle-year/vehicle-year.spec.js |  7 ++--
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js
index 5b5deb521..268a8e524 100644
--- a/src/helpers/unit-test-helper.js
+++ b/src/helpers/unit-test-helper.js
@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -21,6 +22,7 @@ export function getMountOptions(mockData) {
   // Mock const files
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
+  mocks.navigationScenarios = navigationScenarios;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 87df24e38..961345820 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
     const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-make.vue", () => {
 describe("vehicle-make.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
 
     //Act
@@ -50,10 +50,38 @@ describe("vehicle-make.vue", () => {
   });
 });
 
+describe("vehicle-make.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a make to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
+    
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +112,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index ae3d44a6a..594630ba4 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -13,7 +13,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 describe("vehicle-year.vue", () => {
   test("Year question component is initized with api data", async (done) => {
 
-    //Arange
+    //Arrange
     const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
     const yearQuestionInitialData = ["2023", "2022", "2021"];
     const { wrapper, apiPromise } = setupMocks( { 
@@ -35,7 +35,7 @@ describe("vehicle-year.vue", () => {
 describe("vehicle-year.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
-    //Arange
+    //Arrange
     const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
 
     //Act
@@ -54,6 +54,7 @@ function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
@@ -84,7 +85,7 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;

From 875df38dd910039fbc92b11260ccb5fd21f1283a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 17 Dec 2021 19:00:16 -0500
Subject: [PATCH 35/86] CSR-222: removed unneeded spy method

---
 src/layouts/vehicle-make/vehicle-make.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 961345820..120f8de4f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -62,7 +62,6 @@ describe("vehicle-make.vue", () => {
         },
       },
     });
-    const backButtonActionMethod = jest.spyOn(wrapper.vm, "backButtonAction");
     
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));

From 8de2948bcf429ea54c562646e66ed70a516caddf Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 12:25:16 -0500
Subject: [PATCH 36/86] CSR-222: revised button to be button markup, not link

---
 src/ux-components/button-back/button-back.spec.js |  9 +++++----
 src/ux-components/button-back/button-back.vue     | 15 +++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index b753f4376..7f6ff19e6 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -3,19 +3,20 @@ import buttonBack from "./button-back";
 
 describe("back button", () => {
 
-  test("renders a link", () => {
+  test("renders a button", () => {
     // Arrange
+    const myFunction = () => {};
 
     // Act
     const wrapper = shallowMount(buttonBack, {
       propsData: {
-        backButtonUrl: "#",
+        backButtonAction: myFunction,
         backButtonAccessibleText: "something",
       },
     });
     
     // Assert
-    expect(wrapper.find("a").exists()).toBe(true);
+    expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
 
@@ -32,7 +33,7 @@ describe("back button", () => {
     });
     const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
 
-    await wrapper.find("a").trigger("click");
+    await wrapper.find("button").trigger("click");
     
     // Assert
     expect(handleClickMethod).toHaveBeenCalled();
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 808c1f6cc..922ec29f8 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,6 @@
 <template>
-  <a 
-    v-if="backButtonUrl || backButtonAction" 
-    :href="backButtonUrl || '#'" 
+  <button 
+    v-if="backButtonAction" 
     @click="handleClick($event)" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
@@ -10,17 +9,13 @@
       <div class="arrow-left"></div>
       <div class="box"></div>
     </div>
-  </a>
+  </button>
 </template>
 
 <script>
 export default {
   name: "buttonBack",
   props: {
-    backButtonUrl: {
-      type: String,
-      default: "",
-    },
     backButtonAccessibleText: {
       type: String,
       required: true,
@@ -28,12 +23,12 @@ export default {
     backButtonAction: {
       type: Function,
       default: null,
+      required: true,
     }
   },
   methods: {
-    handleClick: function (event) {
+    handleClick: function () {
       if (this.backButtonAction) {
-        event.preventDefault();
         this.backButtonAction();
       }
     },

From d393d12bec58708239dd6fb92bf9c66f20fcbac2 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 20 Dec 2021 14:58:04 -0500
Subject: [PATCH 37/86] CSR-222: include header as link; updates

---
 .../funnel-sub-header.spec.js                 | 15 ++++++++++++++
 .../funnel-sub-header/funnel-sub-header.vue   | 15 +++++++++++++-
 .../button-back/button-back.spec.js           | 20 -------------------
 src/ux-components/button-back/button-back.vue | 11 ++--------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index e2b5c4d28..417081350 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -14,4 +14,19 @@ describe("FunnelSubHeader.vue", () => {
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
+  it("Should render the button inside of header if backButtonAction provided", () => {
+    // Act
+    const testFn = () => {}
+    const wrapper = shallowMount(FunnelSubHeader, {
+      propsData: {
+        text: "FunnelSubHeader Content",
+        hasBackButton: true,
+        backButtonAction: testFn,
+      },
+    });
+
+    // Assert
+    expect(wrapper.find("h2").find("button").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e3bcc7e3..d05a9ea4d 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center fs-5 d-block fw-normal mb-0">
+        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+          {{ text }}
+        </button>
+        <span v-else>
+          {{ text }}
+        </span>
+      </h2>
       <buttonBack
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
@@ -32,6 +39,12 @@ export default {
 <style lang="scss">
   h2 {
     color: $gray-550;
+
+    button {
+      border: none;
+      background: none;
+      color: inherit;
+    }
   }
   .back-button-wrapper {
     margin-left: .25rem;
diff --git a/src/ux-components/button-back/button-back.spec.js b/src/ux-components/button-back/button-back.spec.js
index 7f6ff19e6..b8bc3256d 100644
--- a/src/ux-components/button-back/button-back.spec.js
+++ b/src/ux-components/button-back/button-back.spec.js
@@ -20,24 +20,4 @@ describe("back button", () => {
     wrapper.unmount();
   });
 
-  test("should execute handleClick function if it is clicked on", async () => {
-    // Arrange
-    const myFunction = () => {};
-    
-    // Act
-    const wrapper = shallowMount(buttonBack, {
-        propsData: {
-            backButtonAction: myFunction,
-            backButtonAccessibleText: "something",
-        },
-    });
-    const handleClickMethod = jest.spyOn(wrapper.vm, "handleClick");
-
-    await wrapper.find("button").trigger("click");
-    
-    // Assert
-    expect(handleClickMethod).toHaveBeenCalled();
-    wrapper.unmount();
-  });
-
 });
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 922ec29f8..92145ac87 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,7 @@
 <template>
   <button 
     v-if="backButtonAction" 
-    @click="handleClick($event)" 
+    @click="backButtonAction" 
     class="back-button-wrapper d-flex p-0" 
     :aria-label="backButtonAccessibleText"
   >
@@ -19,20 +19,13 @@ export default {
     backButtonAccessibleText: {
       type: String,
       required: true,
+      default: "",
     },
     backButtonAction: {
       type: Function,
       default: null,
-      required: true,
     }
   },
-  methods: {
-    handleClick: function () {
-      if (this.backButtonAction) {
-        this.backButtonAction();
-      }
-    },
-  },
 };
 </script>
 

From 44658ec2297eeaf601084a85d5fccb24dea091bb Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 20 Dec 2021 16:44:34 -0500
Subject: [PATCH 38/86] updates for mock page

---
 src/common-components/button-question/button-question.vue     | 3 ++-
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 +
 src/layouts/vehicle-make/vehicle-make.spec.js                 | 1 +
 src/layouts/vehicle-model/model-question/model-question.vue   | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index e1fee1e40..d86dcd2ce 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -10,7 +10,8 @@
         <legend class="sr-only">{{groupName}}</legend>
           <listButton v-for="answer in answers" :key="answer"
             :buttonID="answer"
-            @click="chooseAnswer(answer)"
+            @mouseup="chooseAnswer(answer)"
+            @keyup.space="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 5e3bcc7e3..3f1414e56 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -6,6 +6,7 @@
         v-if="hasBackButton"
         :backButtonAccessibleText="backButtonAccessibleText"
         :backButtonAction="backButtonAction"
+        :backButtonUrl="backButtonUrl"
       />
     </div>
   </div>
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 87df24e38..9cae9966f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -44,6 +44,7 @@ describe("vehicle-make.vue", () => {
     //Assert
     const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
+      console.log(header)
       expect(header.attributes("text")).toEqual("Select a make to get started");
       done();
     });
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 32b5b72b4..95b72909b 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
+      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;

From 75ae56d18bdf12470bd5717ddd287a10658462cf Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Mon, 20 Dec 2021 16:52:25 -0500
Subject: [PATCH 39/86] Adding back button to model page

---
 src/layouts/vehicle-model/vehicle-model.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 88f72cdf0..1d86c99b4 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -4,7 +4,13 @@
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
-        <funnelSubHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Make"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
       </div>
     </div>
@@ -60,6 +66,13 @@ export default {
     });
   },
 
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
   watch: {
     selectedModel(model) {
       this.$store.commit(this.storeMutations.UPDATE_MODEL, model);

From ecb3f189cfda1573180064080bbbf714e15e1e9b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 10:53:27 -0500
Subject: [PATCH 40/86] Creating vehicle styles

---
 src/constants/store-mutations.js              |  1 +
 .../style-question/style-question.spec.js     |  0
 .../style-question/style-question.vue         | 46 ++++++++++
 .../vehicle-style/vehicle-style.spec.js       |  0
 src/layouts/vehicle-style/vehicle-style.vue   | 90 +++++++++++++++++++
 .../router-constants/navigation-scenarios.js  |  1 +
 src/router/router-constants/routing-table.js  | 13 +++
 src/store/index.js                            |  3 +
 8 files changed, 154 insertions(+)
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.spec.js
 create mode 100644 src/layouts/vehicle-style/style-question/style-question.vue
 create mode 100644 src/layouts/vehicle-style/vehicle-style.spec.js
 create mode 100644 src/layouts/vehicle-style/vehicle-style.vue

diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index c6d8484da..d2ccd28f4 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -2,6 +2,7 @@ const storeMutations = {
   UPDATE_YEAR: "updateYear",
   UPDATE_MAKE: "updateMake",
   UPDATE_MODEL: "updateModel",
+  UPDATE_STYLE: "updateStyle",
 };
 
 export { storeMutations };
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
new file mode 100644
index 000000000..17a008473
--- /dev/null
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -0,0 +1,46 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="styles"
+    groupName="Choose Vehicle Style"
+    v-model="selectedStyle"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
+export default {
+  name: "style-question",
+  data() {
+    return {
+      questionText: null,
+      selectedStyle: null,
+      styles: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.styles = initialData;
+    }
+  },
+  watch: {
+    selectedStyle(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
new file mode 100644
index 000000000..6b5d4bf86
--- /dev/null
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <funnelSubHeader 
+          :text="pageHeaderWidgets.HeaderText"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Model"
+          :backButtonAction="backButtonAction"
+          class="Header"
+        />
+        <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-style",
+  data() {
+    return {
+      pageHeaderWidgets: {},
+      siteHeaderWidget: {},
+      vehicleBannerWidget: {},
+      selectedStyle: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "styleQuestionInitialData",
+        promise: styleQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
+        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction: function () {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedStyle(style) {
+      this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
+      this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
+    }
+  },
+
+  components: {
+    styleQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 65947744e..48e36996b 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -2,6 +2,7 @@ const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
   SELECTED_MODEL: "SELECTED_MODEL",
   SELECTED_MAKE: "SELECTED_MAKE",
+  SELECTED_STYLE: "SELECTED_STYLE",
   CLICKED_BACK: "CLICKED_BACK",
 };
 
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 34f4c5579..21dc6ca65 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -37,6 +37,19 @@ const routingTable = [
       }
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_STYLE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_STYLE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      }
+    ],
+  },
 ];
 
 export { routingTable };
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 5e21f7ce4..daf34e38c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -70,6 +70,9 @@ export default createStore({
     updateModel(state, model) {
       state.order.vehicle.model = model;
     },
+    updateStyle(state, style) {
+      state.order.vehicle.style = style;
+    },
   },
   getters: {
     vehicle: state => state.order.vehicle

From 9af6a0320ed7a5a541462aeef261be1700588aa8 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 11:54:22 -0500
Subject: [PATCH 41/86] Unit tests for vehicle styles page

---
 src/layouts/vehicle-make/vehicle-make.spec.js |   1 -
 .../style-question/style-question.spec.js     |  82 ++++++++++++
 .../vehicle-style/vehicle-style.spec.js       | 120 ++++++++++++++++++
 src/store/store.spec.js                       |  97 ++++++++++++++
 4 files changed, 299 insertions(+), 1 deletion(-)

diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index cc2325dfc..120f8de4f 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -44,7 +44,6 @@ describe("vehicle-make.vue", () => {
     //Assert
     const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      console.log(header)
       expect(header.attributes("text")).toEqual("Select a make to get started");
       done();
     });
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
index e69de29bb..f03ce5e96 100644
--- a/src/layouts/vehicle-style/style-question/style-question.spec.js
+++ b/src/layouts/vehicle-style/style-question/style-question.spec.js
@@ -0,0 +1,82 @@
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-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("style-question.vue", () => {
+  test("Selected style is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
+    const styleToSelect = "4 Door";
+
+    //Act
+    wrapper.setData({ selectedStyle: styleToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["4 Door"]);
+  });
+});
+
+describe("style-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What style is your vehicle?" });
+
+    //Act
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What style is your vehicle?");
+  });
+});
+
+describe("style-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2 Door", "4 Door"] });
+
+    //Act
+    const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(styleQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index e69de29bb..90dd6e926 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -0,0 +1,120 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-style.vue", () => {
+  test("Style question component is initized with api data", async (done) => {
+
+    //Arrange
+    const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
+    const styleQuestionInitialData = ["2 Door", "4 Door"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      styleQuestionInitialData: styleQuestionInitialData,
+    } );
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page header is passed data from CMS", async (done) => {
+
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a style to get started" });
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    const header = await wrapper.find(".Header");
+    apiPromise.finally(() => {
+      expect(header.attributes("text")).toEqual("Select a style to get started");
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a style to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  styleQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //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",
+        },
+      ],
+    },
+    styleQuestionInitialData: styleQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock style question methods
+  styleQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleStyle, mountOptions);
+  const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
+  styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}
\ No newline at end of file
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 76acc0dbf..fcfca4576 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -118,6 +118,73 @@ describe("Actions", () => {
     // Assert
     expect(pageData).toBe("Page Info Data");
   });
+
+  it("Should return data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2018 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByYmms", { year: "2018", make:  "Honda", model: "Civic", style: "2 Door"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2018 Honda Civic");
+  });
+
+  it("Should return vehicle data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2021 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByVin", { vin: "12345678"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2021 Honda Civic");
+  });
+
+  it("Should return vehicle image data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callMockHttpClient = jest.fn();
+    globalMethods.callMockHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2008_honda_civic.jpg",
+        },
+      });
+    });
+    await store
+      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2008_honda_civic.jpg");
+  });
 });
 
 describe("Mutations", () => {
@@ -128,4 +195,34 @@ describe("Mutations", () => {
     // Assert
     expect(store.state.order.vehicle.year).toBe(2020);
   });
+
+  it("Should update the make property in the store", () => {
+    // Act
+    store.commit("updateMake", "Honda");
+
+    // Assert
+    expect(store.state.order.vehicle.make).toBe("Honda");
+  });
+
+  it("Should update the model property in the store", () => {
+    // Act
+    store.commit("updateModel", "Civic");
+
+    // Assert
+    expect(store.state.order.vehicle.model).toBe("Civic");
+  });
+
+  it("Should update the style property in the store", () => {
+    // Act
+    store.commit("updateStyle", "2 Door");
+
+    // Assert
+    expect(store.state.order.vehicle.style).toBe("2 Door");
+  });
+});
+
+describe("Getters", () => {
+  const vehicle = store.getters.vehicle;
+
+  expect(typeof vehicle).toBe('object');
 });

From f568a930fdb642a4902cb74e58add59d4e158440 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 21 Dec 2021 12:00:45 -0500
Subject: [PATCH 42/86] CSR-241 commit initial list-button functionality.

---
 src/layouts/component-test/component-test.vue |  39 ++----
 src/ux-components/list-card/list-card.vue     | 132 ++++++++++--------
 2 files changed, 83 insertions(+), 88 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 849bb1cd7..b2452d700 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -45,39 +45,22 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
       </div>
     </div>
     <div class="row g-2">
-      <fieldset class="d-flex flex-row">
-        <legend class="sr-only">List Card Demo</legend>
-        <listCard
-          isMultiSelect
-          buttonLabel="Windshield"
+      <div class="col">
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
           buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
           altText="Windshield"
-          groupName="damageKey"
-          buttonID="windshield"
-          tabIndex="1"
-        />
-        <listCard
-          isMultiSelect
-          buttonLabel="Side Window"
-          buttonImage="side-window-damage.svg"
-          altText="Side Window"
-          groupName="damageKey"
-          buttonID="sidewindow"
-          tabIndex="1"
-        />
-        <listCard
-          isMultiSelect
-          buttonLabel="Back Glass"
-          buttonImage="back-glass-damage.svg"
-          altText="Back Glass"
-          groupName="damageKey"
-          buttonID="backglass"
-          tabIndex="1"
-        />
-      </fieldset>
+          buttonID="Damage Location"
+          groupID="checkbox-demo-1"
+          />
+        </fieldset>
+      </div>
     </div>
     <div class="row my-4">
       <div class="col">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 8afdac8da..157c15de3 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,18 +1,9 @@
 <template>
-  <div class="list-card w-100">
-    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100">
-      <div class="item-container d-flex flex-column align-items-center">
-        <div class="d-flex align-items-center">
-          <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-        </div>
-        <div>
-          <input type="checkbox" class="d-flex align-self-center" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
-          <span class="checkmark"></span>
-        </div>
-        <div>
-          <span class="mt-auto mb-2 text-center">{{ buttonLabel }}</span>
-        </div>
-      </div>
+  <div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="m-0 order-3">{{buttonLabel}}</p>
     </label>
   </div>
 </template>
@@ -21,64 +12,85 @@
 export default {
   name: "listCard",
   props: {
-    isMultiSelect: Boolean,
-    groupName: String,
-    buttonLabel: String,
     buttonImage: String,
+    buttonLabel: String,
     altText: String,
     buttonID: String,
-    tabIndex: String,
-    className: String,
-  },
-  data() {
-    return {
-      picked: "picked",
-    };
-  },
+    groupName: String
+  }
 };
 </script>
 
 <style lang="scss">
 .list-card {
+  border: 1px solid $gray-500;
+  &.invalid { //Red border if invalid
+    border: 1px solid $red;
+  }
   img {
-    height: 26px;
+    height: 46px;
     width: auto;
+    order: 1;
+    margin-bottom: 3rem;
   }
-  input[type="radio"] {
-    &:focus + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:focus-visible + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:checked + label {
-      background-color: $blue-100;
-      border: 1px solid $blue;
-    }
-    &.invalid + label {
-      background-color: $white;
-      border: 1px solid $red;
-    }
+  &:hover {
+    box-shadow: 0px 0px 0px 6px $blue-100;
+    border: 1px solid transparent;
   }
-  label {
-    background: $white;
-    border: 1px solid $gray;
-    padding: 1rem 0 .75rem 0;
-    &:hover {
-      cursor: pointer;
-      box-shadow: 0px 0px 0px 6px $blue-100;
-    }
-
-  }
-  .item-container {
-    div {
-      &:nth-child(2) {
-        padding: 18px 0 12px 0;
-      }
-    }
+  input[type='checkbox'] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    + label {
+     display: block;
+     position: relative;
+     &:hover {
+       cursor: pointer;
+     }
+   }
+   &:focus + label {
+     box-shadow: 0 0 0 2.5px $blue;
+     border-radius: .5rem;
+   }
+   &:checked + label {
+     background: $blue-100;
+     box-shadow: 0 0 0 1px $blue;
+     border-radius: .5rem;
+   }
+   + label::before {
+     content: "";
+      position: absolute;
+      display: flex;
+      margin: 0 auto;
+      width: 1rem;
+      height: 1rem;
+      margin: 4rem 0 0 0;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+      order: 2;
+   }
+   &:checked + label::before {
+     background: $blue;
+   }
+   &:checked + label::after {
+     content: '';
+     position: absolute;
+     margin: 4.2rem 0 0 0;
+     border-left: 2px solid $white;
+     border-bottom: 2px solid $white;
+     height: 6px;
+     width: 11px;
+     transform: rotate(-45deg);
+   }
+   &:disabled + label {
+     color: #575757;
+   }
+   &:disabled + label::before {
+     background: #ddd;
+   }
   }
 }
-
 </style>

From b1e81a608ee138aabf989e4487d5a03a869f5f90 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 12:09:11 -0500
Subject: [PATCH 43/86] Changing jest.config coverage to 85

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index fd7713966..720237d10 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,7 +16,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 80,
+      statements: 85,
     },
   },
 };

From 4050f7faa1ae18043ca6673de78e1ad80bd6855d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 21 Dec 2021 12:58:47 -0500
Subject: [PATCH 44/86] Update back button to remove text as link.

Add padding around back button.
---
 .../funnel-sub-header/funnel-sub-header.vue               | 6 +++---
 src/layouts/component-test/component-test.vue             | 3 +--
 src/ux-components/button-back/button-back.vue             | 8 ++++----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 65b4f07de..4f18a8416 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -2,9 +2,9 @@
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">
-        <button v-if="hasBackButton && backButtonAction" @click="backButtonAction">
+        <p class="m-0" v-if="hasBackButton">
           {{ text }}
-        </button>
+        </p>
         <span v-else>
           {{ text }}
         </span>
@@ -48,6 +48,6 @@ export default {
     }
   }
   .back-button-wrapper {
-    margin-left: .25rem;
+    margin-left: 0;
   }
 </style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 35a8c2a2d..3ca8a3eda 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -39,7 +39,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack 
+        <buttonBack
           backButtonUrl="#"
           backButtonAccessibleText="Back button label"
         />
@@ -618,7 +618,6 @@ export default {
     alert,
     vehicleBanner,
     listButtonHorizontal,
-    siteHeader,
     checkbox,
     funnelHeader,
   },
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 92145ac87..6a75ac02e 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,8 +1,8 @@
 <template>
-  <button 
-    v-if="backButtonAction" 
-    @click="backButtonAction" 
-    class="back-button-wrapper d-flex p-0" 
+  <button
+    v-if="backButtonAction"
+    @click="backButtonAction"
+    class="back-button-wrapper d-flex p-3" 
     :aria-label="backButtonAccessibleText"
   >
     <div class="button-back">

From 05b4042f3670ba56570f0cf48c18da1d54d2b364 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 21 Dec 2021 13:08:44 -0500
Subject: [PATCH 45/86] Remove backButtonAction from unit test.

---
 .../funnel-sub-header/funnel-sub-header.spec.js   | 15 ---------------
 .../funnel-sub-header/funnel-sub-header.vue       |  2 --
 2 files changed, 17 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index 417081350..e2b5c4d28 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -14,19 +14,4 @@ describe("FunnelSubHeader.vue", () => {
     expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
-  it("Should render the button inside of header if backButtonAction provided", () => {
-    // Act
-    const testFn = () => {}
-    const wrapper = shallowMount(FunnelSubHeader, {
-      propsData: {
-        text: "FunnelSubHeader Content",
-        hasBackButton: true,
-        backButtonAction: testFn,
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("h2").find("button").text()).toContain("FunnelSubHeader Content");
-    wrapper.unmount();
-  });
 });
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 4f18a8416..946de7c54 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -11,9 +11,7 @@
       </h2>
       <buttonBack
         v-if="hasBackButton"
-        :backButtonAccessibleText="backButtonAccessibleText"
         :backButtonAction="backButtonAction"
-        :backButtonUrl="backButtonUrl"
       />
     </div>
   </div>

From 47af82ee10687538bae0c725d381f18f5b154c8b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 14:57:23 -0500
Subject: [PATCH 46/86] Updating back button and funnel header to align when
 text wraps to more than one line

---
 .../funnel-sub-header/funnel-sub-header.vue           | 11 ++++-------
 src/ux-components/button-back/button-back.vue         |  7 ++++++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 946de7c54..a5d23a2e7 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center">
+    <div class="d-flex align-items-center justify-content-center container-fluid">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">
-        <p class="m-0" v-if="hasBackButton">
-          {{ text }}
-        </p>
-        <span v-else>
+        <span>
           {{ text }}
         </span>
-      </h2>
-      <buttonBack
+        <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
       />
+      </h2>
     </div>
   </div>
 </template>
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 6a75ac02e..d24a29a76 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -2,7 +2,7 @@
   <button
     v-if="backButtonAction"
     @click="backButtonAction"
-    class="back-button-wrapper d-flex p-3" 
+    class="back-button-wrapper p-3" 
     :aria-label="backButtonAccessibleText"
   >
     <div class="button-back">
@@ -35,6 +35,9 @@ export default {
   background: transparent;
   text-decoration: none;
   border-bottom: none;
+  // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+  margin-bottom: -6px;
+  margin-top: -6px;
 
   .button-back {
     display: inline-flex;
@@ -42,6 +45,8 @@ export default {
     height: 18px;
     width: 23px;
     overflow: hidden;
+     // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+    margin-bottom: -2px;
     .arrow-left {
       position: absolute;
       width: 18px;

From 421b544e7fe4ee884f67ecee9414034f730d652e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 21 Dec 2021 19:00:53 -0500
Subject: [PATCH 47/86] CSR-241 add radio button functionality. WIP

---
 src/layouts/component-test/component-test.vue | 18 +++++++-
 src/ux-components/list-card/list-card.vue     | 43 +++++++++++++++----
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 3ca8a3eda..6c3af4720 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -56,15 +56,31 @@
         <fieldset>
           <legend class="sr-only">List Card Demo</legend>
           <listCard
+          isMultiSelect
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
-          altText="Windshield"
+          altText=""
           buttonID="Damage Location"
           groupID="checkbox-demo-1"
           />
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="Damage Location Radio Button"
+          groupID="checkbox-demo-2"
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 157c15de3..806efffe5 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,11 +1,18 @@
 <template>
-  <div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="m-0 order-3">{{buttonLabel}}</p>
     </label>
   </div>
+  <div v-else class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="m-0 order-3">{{buttonLabel}}</p>
+    </label>
+  </div>
 </template>
 
 <script>
@@ -14,9 +21,10 @@ export default {
   props: {
     buttonImage: String,
     buttonLabel: String,
-    altText: String,
+    altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,
-    groupName: String
+    groupName: String,
+    isMultiSelect: Boolean
   }
 };
 </script>
@@ -37,12 +45,11 @@ export default {
     box-shadow: 0px 0px 0px 6px $blue-100;
     border: 1px solid transparent;
   }
-  input[type='checkbox'] {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
+  input[type='checkbox'],
+  input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
     + label {
      display: block;
      position: relative;
@@ -92,5 +99,23 @@ export default {
      background: #ddd;
    }
   }
+  input[type="radio"] {
+    + label::before {
+      content: "";
+       display: none;
+    }
+    + label::after {
+      content: "";
+       display: none;
+    }
+    + label {
+      img {
+        height: 46px;
+        width: auto;
+        order: 1;
+        margin-bottom: 1rem;
+      }
+    }
+  }
 }
 </style>

From 41b9aaf3e18f46f35bb7356a3a166f12b353cdb4 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 22 Dec 2021 09:23:21 -0500
Subject: [PATCH 48/86] Handle non-matched string to state

---
 src/helpers/cms-content-helper.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index da08d30ba..babc83c25 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -46,7 +46,7 @@ function mapStringToState(str) {
       if (storeState[s] != undefined) {
         storeState = storeState[s];
       } else {
-        return false;
+        return ''; // if we can't map our string to state data, return an empty string.
       }
     }
 
@@ -96,5 +96,7 @@ function processWidgetItemForReplacement(widgetModel, key) {
     return widgetModel[key];
   }
 
+  // If we have something else like a number, boolean, etc. just return it
   return widgetModel[key];
+
 }
\ No newline at end of file

From 3dc2e6bcaa9f5db09684d2051ff2693200fae74e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 22 Dec 2021 09:47:21 -0500
Subject: [PATCH 49/86] fixing overflow issue

---
 .../funnel-sub-header/funnel-sub-header.vue              | 2 +-
 src/ux-components/list-button/list-button.vue            | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index a5d23a2e7..444674440 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center container-fluid">
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">
         <span>
           {{ text }}
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 49109fb28..b6dbb4375 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,15 +1,16 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+  <div class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <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="!isMultiSelect && isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
   </div>
-  <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
+  <!-- <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -18,7 +19,7 @@
     <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
-</div>
+</div> -->
 </template>
 
 <script>

From 82eb126015200b0d3a19928d5012c3563b406387 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 22 Dec 2021 09:48:14 -0500
Subject: [PATCH 50/86] overflow fix

---
 src/ux-components/list-button/list-button.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index b6dbb4375..49109fb28 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,16 +1,15 @@
 <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="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <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="!isMultiSelect && isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
   </div>
-  <!-- <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
+  <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -19,7 +18,7 @@
     <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
-</div> -->
+</div>
 </template>
 
 <script>

From f2fa4d0c8d1f271a9be03e1b3f389fb430e0d3e2 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 22 Dec 2021 10:56:55 -0500
Subject: [PATCH 51/86] Adjusting negative margins to better reflect spacing

---
 src/ux-components/button-back/button-back.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index d24a29a76..87fa1df0b 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -36,8 +36,8 @@ export default {
   text-decoration: none;
   border-bottom: none;
   // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
-  margin-bottom: -6px;
-  margin-top: -6px;
+  margin-bottom: -12px;
+  margin-top: -12px;
 
   .button-back {
     display: inline-flex;

From 743410689eecaed228252e470d3afab917facb17 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 22 Dec 2021 10:59:33 -0500
Subject: [PATCH 52/86] Keep static strings and replace dynamic ones

---
 src/helpers/cms-content-helper.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index babc83c25..b0aa9bed2 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -50,8 +50,15 @@ function mapStringToState(str) {
       }
     }
 
+    const stringWithReplacement = str.replace(match[0], storeState);
+
+    // If we still have values we need to substitute, call this function again.
+    if(stringWithReplacement.includes('{globalState:')) {
+      return mapStringToState(stringWithReplacement);
+    }
+
     // Concatenate the string.
-    stringBuilder = `${stringBuilder} ${storeState}`;
+    stringBuilder = `${stringBuilder} ${stringWithReplacement}`;
   }
 
   return stringBuilder.trimStart();

From c2d170f80b74e6ff1ff2b13c78bae2374661f01e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Wed, 22 Dec 2021 11:03:13 -0500
Subject: [PATCH 53/86] Switching from px to rem

---
 src/ux-components/button-back/button-back.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 87fa1df0b..55dee6f8f 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -36,8 +36,8 @@ export default {
   text-decoration: none;
   border-bottom: none;
   // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
-  margin-bottom: -12px;
-  margin-top: -12px;
+  margin-bottom: -.75rem;
+  margin-top: -.75rem;
 
   .button-back {
     display: inline-flex;

From c8c179373c22425865808ba6e89ffdd119fcecca Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 22 Dec 2021 11:36:41 -0500
Subject: [PATCH 54/86] Added CF invalidation

---
 azure-pipelines.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index a9f0e705d..a358168d4 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -76,4 +76,5 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
\ No newline at end of file
+                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                    cfDistributionId: $(cfDistributionId)
\ No newline at end of file

From c127589a6f59f9100fd8a9280cda14aa0a3ba5d7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 22 Dec 2021 14:00:31 -0500
Subject: [PATCH 55/86] CSR-241 WIP

Horizontal card updates.
---
 src/layouts/component-test/component-test.vue | 22 ++++++-
 src/styles/ux-variables.scss                  |  6 ++
 src/ux-components/list-card/list-card.vue     | 58 ++++++++++++++-----
 3 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 6c3af4720..a94d6b321 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -60,8 +60,9 @@
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location"
+          buttonID="Damage Location Checkbox"
           groupID="checkbox-demo-1"
+          buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
@@ -72,11 +73,30 @@
         <fieldset>
           <legend class="sr-only">List Card Demo</legend>
           <listCard
+          isRadio
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
           buttonID="Damage Location Radio Button"
           groupID="checkbox-demo-2"
+          buttonLabelSubCopy="Description"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
+          isHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="Damage Location Horizontal Checkbox"
+          groupID="checkbox-demo-3"
+          buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 285b0c037..83dadd34a 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -115,6 +115,12 @@ $font-family-base:            $font-family-sans-serif;
 $font-family-code:            $font-family-monospace;
 $font-size-base:              1rem; // Assumes the browser default, typically `16px`
 
+//Custom Font size (extra small)
+$font-size-xsm:                $font-size-base * .75;
+$font-sizes: (
+  7: $font-size-xsm
+);
+
 //Font weight
 $font-weight-lighter:         lighter;
 $font-weight-light:           300;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 806efffe5..f39ab2a83 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -2,15 +2,27 @@
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
-      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="m-0 order-3">{{buttonLabel}}</p>
+      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="small m-0 order-3">{{buttonLabel}}</p>
+      <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
-      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="m-0 order-3">{{buttonLabel}}</p>
+      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="small m-0 order-2">{{buttonLabel}}</p>
+      <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
+    </label>
+  </div>
+  <div v-else class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1">
+      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <div class="order-2">
+        <p class="m-0 small">{{buttonLabel}}</p>
+        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+      </div>
     </label>
   </div>
 </template>
@@ -24,7 +36,10 @@ export default {
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,
     groupName: String,
-    isMultiSelect: Boolean
+    isMultiSelect: Boolean,
+    isRadio: Boolean,
+    isHorizontal: Boolean,
+    buttonLabelSubCopy: String
   }
 };
 </script>
@@ -36,9 +51,8 @@ export default {
     border: 1px solid $red;
   }
   img {
-    height: 46px;
-    width: auto;
-    order: 1;
+    height: auto;
+    width: 2.875rem;
     margin-bottom: 3rem;
   }
   &:hover {
@@ -73,7 +87,7 @@ export default {
       margin: 0 auto;
       width: 1rem;
       height: 1rem;
-      margin: 4rem 0 0 0;
+      margin: 3rem 0 0 0;
       background: white;
       border: 1px solid $gray-500;
       border-radius: 2px;
@@ -85,7 +99,7 @@ export default {
    &:checked + label::after {
      content: '';
      position: absolute;
-     margin: 4.2rem 0 0 0;
+     margin: 3.2rem 0 0 0;
      border-left: 2px solid $white;
      border-bottom: 2px solid $white;
      height: 6px;
@@ -110,12 +124,28 @@ export default {
     }
     + label {
       img {
-        height: 46px;
-        width: auto;
-        order: 1;
         margin-bottom: 1rem;
       }
     }
   }
+  &.horizontal {
+    img {
+      margin-bottom: 0;
+    }
+    input[type='checkbox'],
+    input[type="radio"] {
+      + label::before {
+        content: "";
+         position: relative;
+         margin: 0 .5rem 0 0;
+         order: 1;
+      }
+      &:checked + label::after {
+        content: '';
+        margin: -0.25rem 0 0 0;
+        left: .875rem;
+      }
+    }
+  }
 }
 </style>

From 4029935d61b3201695e3f3ca044cae8410299e13 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 22 Dec 2021 16:01:50 -0500
Subject: [PATCH 56/86] CSR-241 WIP horizontal card updates.

---
 src/ux-components/list-card/list-card.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f39ab2a83..b31ce3d38 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -17,7 +17,7 @@
   </div>
   <div v-else class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1">
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -93,6 +93,12 @@ export default {
       border-radius: 2px;
       order: 2;
    }
+   + label.checkboxTop::before {
+     margin: -1.25rem 0.5rem 0 0 !important;
+   }
+   + label.checkboxTop::after {
+     margin: -1.5rem 0.5rem 0 0 !important;
+   }
    &:checked + label::before {
      background: $blue;
    }

From 82924a69b977b3a5096807131526bd250d2a769d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 22 Dec 2021 16:48:39 -0500
Subject: [PATCH 57/86] CSR-174: restore aria-label prop to back button

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

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 444674440..630dd9cbe 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -8,6 +8,7 @@
         <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
+        :backButtonAccessibleText="backButtonAccessibleText"
       />
       </h2>
     </div>

From 776ad91843563cf23863b1f902f9a0f8d7130c27 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 23 Dec 2021 08:53:11 -0500
Subject: [PATCH 58/86] CSR-241 Add horizontal radio card.

---
 src/layouts/component-test/component-test.vue |  19 ++-
 src/ux-components/list-card/list-card.vue     | 124 ++++++++++--------
 2 files changed, 87 insertions(+), 56 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index a94d6b321..73d068cd3 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -90,7 +90,7 @@
         <fieldset>
           <legend class="sr-only">List Card Demo</legend>
           <listCard
-          isHorizontal
+          isMultiSelectHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
@@ -101,6 +101,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="Damage Location Horizontal Radio Button"
+          groupID="checkbox-demo-4"
+          buttonLabelSubCopy="Description"
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index b31ce3d38..6ce2d5561 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -7,15 +7,15 @@
       <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <p class="small m-0 order-2">{{buttonLabel}}</p>
+      <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
       <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -25,6 +25,16 @@
       </div>
     </label>
   </div>
+  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <div class="order-2">
+        <p class="m-0 small">{{buttonLabel}}</p>
+        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+      </div>
+    </label>
+  </div>
 </template>
 
 <script>
@@ -38,8 +48,10 @@ export default {
     groupName: String,
     isMultiSelect: Boolean,
     isRadio: Boolean,
-    isHorizontal: Boolean,
-    buttonLabelSubCopy: String
+    isMultiSelectHorizontal: Boolean,
+    isRadioHorizontal: Boolean,
+    buttonLabelSubCopy: String,
+    isError: Boolean
   }
 };
 </script>
@@ -65,23 +77,23 @@ export default {
     position: fixed;
     width: 0;
     + label {
-     display: block;
-     position: relative;
-     &:hover {
-       cursor: pointer;
-     }
-   }
-   &:focus + label {
-     box-shadow: 0 0 0 2.5px $blue;
-     border-radius: .5rem;
-   }
-   &:checked + label {
-     background: $blue-100;
-     box-shadow: 0 0 0 1px $blue;
-     border-radius: .5rem;
-   }
-   + label::before {
-     content: "";
+      display: block;
+      position: relative;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2.5px $blue;
+      border-radius: .5rem;
+    }
+    &:checked + label {
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+      border-radius: .5rem;
+    }
+    + label::before {
+      content: "";
       position: absolute;
       display: flex;
       margin: 0 auto;
@@ -92,45 +104,39 @@ export default {
       border: 1px solid $gray-500;
       border-radius: 2px;
       order: 2;
-   }
-   + label.checkboxTop::before {
-     margin: -1.25rem 0.5rem 0 0 !important;
-   }
-   + label.checkboxTop::after {
-     margin: -1.5rem 0.5rem 0 0 !important;
-   }
-   &:checked + label::before {
-     background: $blue;
-   }
-   &:checked + label::after {
-     content: '';
-     position: absolute;
-     margin: 3.2rem 0 0 0;
-     border-left: 2px solid $white;
-     border-bottom: 2px solid $white;
-     height: 6px;
-     width: 11px;
-     transform: rotate(-45deg);
-   }
-   &:disabled + label {
-     color: #575757;
-   }
-   &:disabled + label::before {
-     background: #ddd;
-   }
+    }
+    + label.checkboxTop::before {
+      margin: -1.25rem 0.5rem 0 0 !important;
+    }
+    + label.checkboxTop::after {
+      margin: -1.5rem 0.5rem 0 0 !important;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      margin: 3.2rem 0 0 0;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 11px;
+      transform: rotate(-45deg);
+    }
   }
   input[type="radio"] {
     + label::before {
       content: "";
-       display: none;
+      display: none;
     }
     + label::after {
       content: "";
-       display: none;
+      display: none;
     }
     + label {
       img {
-        margin-bottom: 1rem;
+        margin-bottom: 0;
       }
     }
   }
@@ -142,16 +148,24 @@ export default {
     input[type="radio"] {
       + label::before {
         content: "";
-         position: relative;
-         margin: 0 .5rem 0 0;
-         order: 1;
+        position: relative;
+        margin: 0 .5rem 0 0;
+        order: 1;
       }
       &:checked + label::after {
         content: '';
         margin: -0.25rem 0 0 0;
         left: .875rem;
       }
+      + label {
+        img {
+          margin-bottom: 0;
+        }
+      }
     }
   }
+  &.error {
+    border: 1px solid $red !important;
+  }
 }
 </style>

From 2b1249108a9b85a0b68a413ef13f96ff5cb17399 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 23 Dec 2021 09:55:23 -0500
Subject: [PATCH 59/86] CSR-241 add error state.

---
 src/layouts/component-test/component-test.vue | 20 +++++++++++++++++++
 src/styles/common-list-styles.scss            |  7 -------
 src/ux-components/list-button/list-button.vue |  3 ---
 src/ux-components/list-card/list-card.vue     | 16 +++++++--------
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 73d068cd3..285e3b8ef 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -118,6 +118,24 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">With error</h6>
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="Damage Location Horizontal Radio Button Error State"
+          groupID="checkbox-demo-5"
+          buttonLabelSubCopy="Description"
+          hasError
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -142,6 +160,8 @@
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText="(opens new window)"
+        hasError
+        errorMessage="Error"
         />
         <listButton
         isMultiSelect
diff --git a/src/styles/common-list-styles.scss b/src/styles/common-list-styles.scss
index 0d74a4258..375b560b0 100644
--- a/src/styles/common-list-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -33,13 +33,6 @@
       + p {
         display: none;
       }
-      &.error {
-        border: 1px solid $danger;
-        + p {
-          display: flex;
-          color: $danger;
-        }
-      }
     }
   }
 }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 49109fb28..6d97cd236 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -7,7 +7,6 @@
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
   </label>
-  <p class="small">{{errorMessage}}</p>
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
@@ -17,7 +16,6 @@
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
-  <p class="small">{{errorMessage}}</p>
 </div>
 </template>
 
@@ -40,7 +38,6 @@ export default {
   },
   data() {
     return {
-      isError: false,
       isLoaderDisplayed: false,
     };
   },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 6ce2d5561..7594a44ea 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -7,7 +7,7 @@
       <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -15,7 +15,7 @@
       <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
+  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -25,7 +25,7 @@
       </div>
     </label>
   </div>
-  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="[this.isError]">
+  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -51,13 +51,16 @@ export default {
     isMultiSelectHorizontal: Boolean,
     isRadioHorizontal: Boolean,
     buttonLabelSubCopy: String,
-    isError: Boolean
+    hasError: Boolean
   }
 };
 </script>
 
 <style lang="scss">
 .list-card {
+  &.error {
+    border: 1px solid $red !important;
+  }
   border: 1px solid $gray-500;
   &.invalid { //Red border if invalid
     border: 1px solid $red;
@@ -164,8 +167,5 @@ export default {
       }
     }
   }
-  &.error {
-    border: 1px solid $red !important;
-  }
 }
 </style>

From 5a3ad93aada95d94b140e5317aa7d2dc0758ddb0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 23 Dec 2021 10:13:57 -0500
Subject: [PATCH 60/86] CSR-241 update group and button names.

---
 src/layouts/component-test/component-test.vue | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 285e3b8ef..a63fc9610 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -54,13 +54,13 @@
     <div class="row g-2">
       <div class="col">
         <fieldset>
-          <legend class="sr-only">List Card Demo</legend>
+          <legend class="sr-only">Functioning as Checkbox</legend>
           <listCard
           isMultiSelect
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location Checkbox"
+          buttonID="List Card Checkbox"
           groupID="checkbox-demo-1"
           buttonLabelSubCopy="Description"
           />
@@ -71,14 +71,14 @@
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
         <fieldset>
-          <legend class="sr-only">List Card Demo</legend>
+          <legend class="sr-only">Functioning as Radio Button</legend>
           <listCard
           isRadio
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location Radio Button"
-          groupID="checkbox-demo-2"
+          buttonID="List Card Radio Button"
+          groupID="radio-demo-2"
           buttonLabelSubCopy="Description"
           />
         </fieldset>
@@ -88,13 +88,13 @@
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
         <fieldset>
-          <legend class="sr-only">List Card Demo</legend>
+          <legend class="sr-only">Horizontal Checkbox</legend>
           <listCard
           isMultiSelectHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location Horizontal Checkbox"
+          buttonID="List Card Horizontal Checkbox"
           groupID="checkbox-demo-3"
           buttonLabelSubCopy="Description"
           />
@@ -105,14 +105,14 @@
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
         <fieldset>
-          <legend class="sr-only">List Card Demo</legend>
+          <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
           isRadioHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location Horizontal Radio Button"
-          groupID="checkbox-demo-4"
+          buttonID="List Card Horizontal Radio Button"
+          groupID="radio-demo-4"
           buttonLabelSubCopy="Description"
           />
         </fieldset>
@@ -122,16 +122,15 @@
       <div class="col">
         <h6 class="mx-2 my-4">With error</h6>
         <fieldset>
-          <legend class="sr-only">List Card Demo</legend>
+          <legend class="sr-only">Radio button with error state</legend>
           <listCard
           isRadioHorizontal
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
           altText=""
-          buttonID="Damage Location Horizontal Radio Button Error State"
-          groupID="checkbox-demo-5"
+          buttonID="Horizontal Radio Button Error State"
+          groupID="radio-demo-5"
           buttonLabelSubCopy="Description"
-          hasError
           />
         </fieldset>
       </div>

From 760b15f8771c71614773fe59f92986d493000456 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 23 Dec 2021 10:23:45 -0500
Subject: [PATCH 61/86] Add hasError

---
 src/layouts/component-test/component-test.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index a63fc9610..6fe75fb00 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -131,6 +131,7 @@
           buttonID="Horizontal Radio Button Error State"
           groupID="radio-demo-5"
           buttonLabelSubCopy="Description"
+          hasError
           />
         </fieldset>
       </div>

From 6d579ee907c6f39eea4977137df6478c72f8455d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 23 Dec 2021 13:40:07 -0500
Subject: [PATCH 62/86] CSR-241 add component variations to test page.

---
 src/layouts/component-test/component-test.vue | 68 +++++++++++++++++++
 src/ux-components/list-card/list-card.vue     | 23 ++++---
 2 files changed, 81 insertions(+), 10 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 6fe75fb00..0fabbddf1 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -67,6 +67,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox No Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox b"
+          groupID="checkbox-demo-1a"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@@ -84,6 +101,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadio
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Radio Button b"
+          groupID="radio-demo-2b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@@ -101,6 +135,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Checkbox b"
+          groupID="checkbox-demo-3b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@@ -118,6 +169,23 @@
         </fieldset>
       </div>
     </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Radio Button b"
+          groupID="radio-demo-4b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
     <div class="row g-2">
       <div class="col">
         <h6 class="mx-2 my-4">With error</h6>
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7594a44ea..71bf0a83e 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
@@ -41,17 +42,19 @@
 export default {
   name: "listCard",
   props: {
-    buttonImage: String,
-    buttonLabel: String,
+    //Must choose one of the following four options
+    isMultiSelect: Boolean,//Defines use as checkbox
+    isRadio: Boolean,//Defines use as radio button
+    isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
+    isRadioHorizontal: Boolean,//Defines use as horizontal radio button
+    //end must choose
+    buttonImage: String,//Optional: File name of image
+    buttonLabel: String,//Required: Label text
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String,
-    groupName: String,
-    isMultiSelect: Boolean,
-    isRadio: Boolean,
-    isMultiSelectHorizontal: Boolean,
-    isRadioHorizontal: Boolean,
-    buttonLabelSubCopy: String,
-    hasError: Boolean
+    buttonID: String,//Required: Unique
+    groupName: String,//Rquired: Unique
+    buttonLabelSubCopy: String,//Optional: sub text
+    hasError: Boolean//Used to show error state
   }
 };
 </script>

From c5ceb36cfd040c342cc94c61b4dbaf5dc70b3aef Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 28 Dec 2021 09:50:58 -0500
Subject: [PATCH 63/86] CSR-174: remove no longer needed prop

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 -
 src/layouts/component-test/component-test.vue                 | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 630dd9cbe..81c741647 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -23,7 +23,6 @@ export default {
   props: {
     text: String,
     hasBackButton: Boolean,
-    backButtonUrl: String,
     backButtonAccessibleText: String,
     backButtonAction: Function,
   },
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 6c3af4720..e0ef3ecca 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -40,7 +40,6 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonBack
-          backButtonUrl="#"
           backButtonAccessibleText="Back button label"
         />
       </div>

From acb3481e01c559fa0e2af541882936a79491b650 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 13:22:56 -0500
Subject: [PATCH 64/86] CSR-174: add aria-hidden=true to list-button label
 elements to fix jaws bug

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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 5df8261ec..88fbf491e 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <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>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <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>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 6d97cd236..5e8931c61 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <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>
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <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>

From 6f27196c471a41664b8e3a84cafdd04a10f59a68 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 13:25:35 -0500
Subject: [PATCH 65/86] CSR-174: remove unneeded parentheses in sr-only
 list-button text

---
 .../button-question/button-question.vue       |  2 +-
 src/layouts/component-test/component-test.vue | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index d86dcd2ce..9afd36c1f 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -20,7 +20,7 @@
             textPosition="text-start"
             :isRequired="true"
             :value="modelValue"
-            screenReaderOnlyText="(opens new window)"
+            screenReaderOnlyText=" opens new window"
           />
       </fieldset>
     </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f8871f161..bbbf589f7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -226,7 +226,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         hasError
         errorMessage="Error"
         />
@@ -240,7 +240,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -252,7 +252,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -271,7 +271,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-1-checkbox"
@@ -282,7 +282,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-1-checkbox"
@@ -293,7 +293,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -318,7 +318,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -330,7 +330,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -342,7 +342,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -361,7 +361,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-2-checkbox"
@@ -372,7 +372,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-2-checkbox"
@@ -383,7 +383,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -408,7 +408,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -420,7 +420,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         isMultiSelect
@@ -432,7 +432,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -451,7 +451,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-3-checkbox"
@@ -462,7 +462,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButton
         groupName="demo-3-checkbox"
@@ -473,7 +473,7 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -502,7 +502,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         isMultiSelect
@@ -516,7 +516,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         isMultiSelect
@@ -530,7 +530,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -553,7 +553,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         groupName="demo-4-checkbox"
@@ -566,7 +566,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
         groupName="demo-4-checkbox"
@@ -579,7 +579,7 @@
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>

From 4b3d8ba33140d1ada766d62e34b84083159c049d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 16:32:51 -0500
Subject: [PATCH 66/86] CSR-174: remove aria-hidden / add additional
 aria-describedby instead

---
 .../list-button-horizontal/list-button-horizontal.vue         | 4 ++--
 src/ux-components/list-button/list-button.vue                 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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 88fbf491e..7721917c2 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <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>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <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>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 5e8931c61..7697c0042 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -2,7 +2,7 @@
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <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>
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" aria-checked="false" aria-hidden="true" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <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>

From 04fd2d574563389fd6553489e1bb83d2b9ca371d Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 30 Dec 2021 16:38:52 -0500
Subject: [PATCH 67/86] CSR-174: fix unit tests

---
 .../list-button-horizontal/list-button-horizontal.spec.js       | 1 +
 src/ux-components/list-button/list-button.spec.js               | 1 +
 src/ux-components/list-button/list-button.vue                   | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

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 b7ae7ef49..8d5f3d8b7 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
@@ -33,6 +33,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index fbb492222..61f1e7ed9 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -33,6 +33,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4",
       "aria-checked": "false",
     });
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 7697c0042..0547f0787 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -10,7 +10,7 @@
   </div>
   <div v-else class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
       <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>

From 4374dfdb12f190b5f1c2032b1b70e066a30b3aa0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 3 Jan 2022 08:57:21 -0500
Subject: [PATCH 68/86] CSR-227 update header font size.

---
 .../funnel-sub-header/funnel-sub-header.vue                 | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 444674440..f510e167a 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">
+      <h5 class="text-center fw-normal mb-0">
         <span>
           {{ text }}
         </span>
@@ -9,7 +9,7 @@
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
       />
-      </h2>
+    </h5>
     </div>
   </div>
 </template>
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <style lang="scss">
-  h2 {
+  h5 {
     color: $gray-550;
 
     button {

From 982db0115c63eeff4a065c69c8f6e8adbd0e9dfe Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 3 Jan 2022 09:02:51 -0500
Subject: [PATCH 69/86] CSR-227 update unit test.

---
 .../funnel-sub-header/funnel-sub-header.spec.js                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index e2b5c4d28..40b50186b 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -11,7 +11,7 @@ describe("FunnelSubHeader.vue", () => {
     });
 
     // Assert
-    expect(wrapper.find("h2").text()).toContain("FunnelSubHeader Content");
+    expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
 });

From 2c0dd25316a0fdc23f0f72d2224490ae7d688a39 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 3 Jan 2022 12:16:57 -0500
Subject: [PATCH 70/86] CSR-222: update CMS API object names

---
 src/constants/widget-names.js                  |  4 ++--
 src/helpers/cms-helper.spec.js                 | 18 +++++++++---------
 src/layouts/vehicle-make/vehicle-make.spec.js  | 10 +++++-----
 src/layouts/vehicle-make/vehicle-make.vue      | 12 ++++++------
 .../vehicle-model/vehicle-model.spec.js        |  8 ++++----
 src/layouts/vehicle-model/vehicle-model.vue    | 12 ++++++------
 .../vehicle-style/vehicle-style.spec.js        | 10 +++++-----
 src/layouts/vehicle-style/vehicle-style.vue    | 12 ++++++------
 src/layouts/vehicle-year/vehicle-year.spec.js  |  8 ++++----
 src/layouts/vehicle-year/vehicle-year.vue      | 12 ++++++------
 10 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/constants/widget-names.js b/src/constants/widget-names.js
index 9fe78f2ba..d9782f90b 100644
--- a/src/constants/widget-names.js
+++ b/src/constants/widget-names.js
@@ -1,8 +1,8 @@
 const widgetNames = {
-  PAGE_HEADER_WIDGET: "PageHeaderWidget",
+  FUNNEL_SUB_HEADER_WIDGET: "FunnelSubHeaderWidget",
   RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
   VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
-  SITE_HEADER_WIDGET: "SiteHeaderWidget",
+  FUNNEL_HEADER_WIDGET: "FunnelHeaderWidget",
 };
 
 export { widgetNames };
diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index 0f03ab604..4aa25710b 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -15,13 +15,13 @@ describe("cms-content-helper.js", () => {
     const cmsMockData = {
       Result: [
         {
-          Type: "PageHeaderWidget",
+          Type: "FunnelSubHeaderWidget",
           Model: {
             HeaderText: "Select a year to get started",
           },
         },
         {
-          Type: "PageHeaderWidget",
+          Type: "FunnelSubHeaderWidget",
           Model: {
             HeaderText: "Select a model",
           },
@@ -40,7 +40,7 @@ describe("cms-content-helper.js", () => {
     // Act
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
-      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
         "Select a year to get started"
       );
     });
@@ -53,7 +53,7 @@ describe("cms-content-helper.js", () => {
     const cmsMockData = {
       Result: [
         {
-          Type: "PageHeaderWidget",
+          Type: "FunnelSubHeaderWidget",
           Model: {
             HeaderText: "{globalState:order.vehicle.year}",
           },
@@ -65,7 +65,7 @@ describe("cms-content-helper.js", () => {
   
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
-      expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
         "2019"
       );
     });
@@ -78,7 +78,7 @@ describe("cms-content-helper.js", () => {
     const cmsMockData = {
       Result: [
         {
-          Type: "PageHeaderWidget",
+          Type: "FunnelSubHeaderWidget",
           Model: {
             HeaderText: "{globalState:order.vehicle.year}",
           },
@@ -96,7 +96,7 @@ describe("cms-content-helper.js", () => {
   
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
-      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
       expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!");
   
     });
@@ -109,7 +109,7 @@ describe("cms-content-helper.js", () => {
     const cmsMockData = {
       Result: [
         {
-          Type: "PageHeaderWidget",
+          Type: "FunnelSubHeaderWidget",
           Model: {
             HeaderText: "{globalState:order.vehicle.year}",
           },
@@ -130,7 +130,7 @@ describe("cms-content-helper.js", () => {
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
   
-      expect(response.PageHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
       expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura");
   
     });
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 120f8de4f..f8d841bea 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -36,7 +36,7 @@ describe("vehicle-make.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a make to get started" });
+    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a make to get started" });
 
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
@@ -55,7 +55,7 @@ describe("vehicle-make.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      pageHeaderWidgetHeaderText: "Select a make to get started",
+      funnelSubHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +79,14 @@ describe("vehicle-make.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
-  pageHeaderWidgetHeaderText = {},
+  funnelSubHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -94,7 +94,7 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
         },
       ],
-      SiteHeaderWidget: [
+      FunnelHeaderWidget: [
         {
           LogoImage:
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index be5e925ea..f158b754a 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
         <funnelSubHeader 
-            :text="pageHeaderWidgets.HeaderText"
+            :text="funnelSubHeaderWidget.HeaderText"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
             :backButtonAction="backButtonAction"
@@ -30,8 +30,8 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      pageHeaderWidgets: {},
-      siteHeaderWidget: {},
+      funnelSubHeaderWidget: {},
+      funnelHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedMake: null,
     };
@@ -58,8 +58,8 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
+        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
         vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
       });
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index 8ee3885de..b8931ec39 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -36,7 +36,7 @@ describe("vehicle-model.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
     //Arange
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started" });
+    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a model to get started" });
 
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
@@ -53,13 +53,13 @@ describe("vehicle-model.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   modelQuestionInitialData = {},
-  pageHeaderWidgetHeaderText = {},
+  funnelSubHeaderWidgetHeaderText = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -67,7 +67,7 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
         },
       ],
-      SiteHeaderWidget: [
+      FunnelHeaderWidget: [
         {
           LogoImage:
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 1d86c99b4..bac05f3bc 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
         <funnelSubHeader 
-          :text="pageHeaderWidgets.HeaderText"
+          :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Make"
           :backButtonAction="backButtonAction"
@@ -30,8 +30,8 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      pageHeaderWidgets: {},
-      siteHeaderWidget: {},
+      funnelSubHeaderWidget: {},
+      funnelHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedModel: null,
     };
@@ -58,8 +58,8 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
+        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
         vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
       });
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index 90dd6e926..babcb4fe4 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -36,7 +36,7 @@ describe("vehicle-style.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a style to get started" });
+    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a style to get started" });
 
     //Act
     vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
@@ -55,7 +55,7 @@ describe("vehicle-style.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      pageHeaderWidgetHeaderText: "Select a style to get started",
+      funnelSubHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +79,14 @@ describe("vehicle-style.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   styleQuestionInitialData = {},
-  pageHeaderWidgetHeaderText = {},
+  funnelSubHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -94,7 +94,7 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
         },
       ],
-      SiteHeaderWidget: [
+      FunnelHeaderWidget: [
         {
           LogoImage:
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 6b5d4bf86..22b8b29b1 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
         <funnelSubHeader 
-          :text="pageHeaderWidgets.HeaderText"
+          :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Model"
           :backButtonAction="backButtonAction"
@@ -30,8 +30,8 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      pageHeaderWidgets: {},
-      siteHeaderWidget: {},
+      funnelSubHeaderWidget: {},
+      funnelHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedStyle: null,
     };
@@ -58,8 +58,8 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
+        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
         vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
       });
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index 594630ba4..d5fdde8a9 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -36,7 +36,7 @@ describe("vehicle-year.vue", () => {
   test("Page header is passed data from CMS", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" });
+    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a year to get started" });
 
     //Act
     vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
@@ -53,14 +53,14 @@ describe("vehicle-year.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
-  pageHeaderWidgetHeaderText = {},
+  funnelSubHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -68,7 +68,7 @@ function setupMocks({
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
         },
       ],
-      SiteHeaderWidget: [
+      FunnelHeaderWidget: [
         {
           LogoImage:
             "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 48508adc2..d195bf72a 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
         <funnelSubHeader 
-            :text="pageHeaderWidgets.HeaderText" 
+            :text="funnelSubHeaderWidget.HeaderText" 
             class="Header" 
         />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
@@ -28,8 +28,8 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      pageHeaderWidgets: {},
-      siteHeaderWidget: {},
+      funnelSubHeaderWidget: {},
+      funnelHeaderWidget: {},
       vehicleBannerWidget: {},
       selectedYear: null,
     };
@@ -57,8 +57,8 @@ export default {
 
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.cmsContent.PageHeaderWidget[0];
-        vm.siteHeaderWidget = resultMap.cmsContent.SiteHeaderWidget[0];
+        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
+        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
         vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
         vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
       });

From dfb3ff38b9e579c8cc6e3fa73a0ef0854350c7f4 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 3 Jan 2022 13:18:37 -0500
Subject: [PATCH 71/86] CSR-241 Remove errorMessage, isError, hasError
 references.

---
 src/layouts/component-test/component-test.vue | 20 -------------------
 .../list-button-horizontal.spec.js            |  1 -
 .../list-button-horizontal.vue                | 11 ----------
 .../list-button/list-button.spec.js           |  1 -
 src/ux-components/list-button/list-button.vue |  1 -
 src/ux-components/list-card/list-card.vue     | 12 ++++-------
 6 files changed, 4 insertions(+), 42 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index bbbf589f7..e0fb3d70d 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -185,24 +185,6 @@
         </fieldset>
       </div>
     </div>
-    <div class="row g-2">
-      <div class="col">
-        <h6 class="mx-2 my-4">With error</h6>
-        <fieldset>
-          <legend class="sr-only">Radio button with error state</legend>
-          <listCard
-          isRadioHorizontal
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="Horizontal Radio Button Error State"
-          groupID="radio-demo-5"
-          buttonLabelSubCopy="Description"
-          hasError
-          />
-        </fieldset>
-      </div>
-    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -227,8 +209,6 @@
         loaderPosition="right"
         sizeInRem="1"
         screenReaderOnlyText=" opens new window"
-        hasError
-        errorMessage="Error"
         />
         <listButton
         isMultiSelect
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 8d5f3d8b7..5afcff1ad 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
@@ -11,7 +11,6 @@ describe("list-button.vue", () => {
         loaderColor: "blue",
         loaderPosition: "right",
         sizeInRem: "1.5",
-        errorMessage: "null",
       },
     });
 
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 7721917c2..7b32d1e75 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -8,7 +8,6 @@
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
   </label>
-  <p class="small">{{errorMessage}}</p>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
@@ -18,7 +17,6 @@
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
       <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
-    <p class="small">{{ errorMessage }}</p>
   </div>
 </template>
 
@@ -33,7 +31,6 @@ export default {
     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)) */
@@ -42,7 +39,6 @@ export default {
   },
   data() {
     return {
-      isError: false,
       isLoaderDisplayed: false,
     };
   },
@@ -102,13 +98,6 @@ export default {
     + p {
       display: none;
     }
-    &.error {
-      border: 1px solid $danger;
-      + p {
-        display: flex;
-        color: $danger;
-      }
-    }
     &.first-item {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index 61f1e7ed9..06c96d1a3 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -11,7 +11,6 @@ describe("list-button.vue", () => {
         loaderColor: "blue",
         loaderPosition: "right",
         sizeInRem: "1.5",
-        errorMessage: "null",
       },
     });
 
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0547f0787..f1848e8d1 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -31,7 +31,6 @@ export default {
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     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 */
     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)) */
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 71bf0a83e..177d43e90 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Heavily documented below -->
-  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -8,7 +8,7 @@
       <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -16,7 +16,7 @@
       <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
-  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
+  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -26,7 +26,7 @@
       </div>
     </label>
   </div>
-  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
+  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -54,16 +54,12 @@ export default {
     buttonID: String,//Required: Unique
     groupName: String,//Rquired: Unique
     buttonLabelSubCopy: String,//Optional: sub text
-    hasError: Boolean//Used to show error state
   }
 };
 </script>
 
 <style lang="scss">
 .list-card {
-  &.error {
-    border: 1px solid $red !important;
-  }
   border: 1px solid $gray-500;
   &.invalid { //Red border if invalid
     border: 1px solid $red;

From a57b44489e6e2e227cf2e12c626d5439ec3d397c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 3 Jan 2022 13:50:57 -0500
Subject: [PATCH 72/86] CSR-241 Update props

---
 src/common-components/button-question/button-question.vue      | 3 ++-
 .../list-button-horizontal/list-button-horizontal.vue          | 2 +-
 src/ux-components/list-button/list-button.vue                  | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 9afd36c1f..fdd113e4d 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -32,6 +32,7 @@ import listButton from "@/ux-components/list-button/list-button";
 export default {
   name: "buttonQuestion",
   props: {
+    isMultiSelect: Boolean,
     questionText: String,
     answers: Array,
     modelValue: String,
@@ -58,4 +59,4 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 }
-</style>
\ No newline at end of file
+</style>
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 7b32d1e75..d2bb90a8a 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -25,7 +25,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    isMultiSelect: Boolean,
+    isMultiSelect: Boolean, /* Defines use as checkbox */
     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 */
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index f1848e8d1..a65833396 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -24,7 +24,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    isMultiSelect: Boolean,
+    isMultiSelect: Boolean, /* Defines use as checkbox */
     groupName: String, /* Required, unique for each button GROUP */
     buttonID: [Number,String], /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */

From 605109b1fb3b4e9a88ba5cbae03617aee5b01e59 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 4 Jan 2022 10:44:46 -0500
Subject: [PATCH 73/86] Changes requested via jira

---
 .../button-question/button-question.vue       |   6 +-
 .../funnel-header/funnel-header.spec.js       |   8 +-
 .../funnel-header/funnel-header.vue           |  15 ++-
 .../funnel-sub-header.spec.js                 |  15 ++-
 .../funnel-sub-header/funnel-sub-header.vue   |  19 +++-
 .../vehicle-banner/vehicle-banner.spec.js     |  15 ++-
 .../vehicle-banner/vehicle-banner.vue         |  15 ++-
 .../make-question/make-question.vue           |   3 +-
 src/layouts/vehicle-make/vehicle-make.spec.js |  74 +++++++++++--
 src/layouts/vehicle-make/vehicle-make.vue     |  15 +--
 .../model-question/model-question.vue         |   4 +-
 .../vehicle-model/vehicle-model.spec.js       | 103 ++++++++++++++++--
 src/layouts/vehicle-model/vehicle-model.vue   |  15 +--
 .../style-question/style-question.vue         |   3 +-
 .../vehicle-style/vehicle-style.spec.js       |  74 +++++++++++--
 src/layouts/vehicle-style/vehicle-style.vue   |  15 +--
 src/layouts/vehicle-year/vehicle-year.spec.js |  54 ++++++++-
 src/layouts/vehicle-year/vehicle-year.vue     |  16 +--
 .../year-question/year-question.vue           |   4 +-
 src/mixins/base-mixin.js                      |  12 +-
 src/mixins/base-mixin.spec.js                 |  19 ++--
 .../list-button-horizontal.spec.js            |   1 -
 .../list-button-horizontal.vue                |   5 +-
 23 files changed, 386 insertions(+), 124 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 9afd36c1f..ac96683f1 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -6,7 +6,7 @@
       }}</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">
+      <fieldset class="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"
             :buttonID="answer"
@@ -20,7 +20,7 @@
             textPosition="text-start"
             :isRequired="true"
             :value="modelValue"
-            screenReaderOnlyText=" opens new window"
+            screenReaderOnlyText="(opens new window)"
           />
       </fieldset>
     </div>
@@ -52,7 +52,7 @@ export default {
 .button_question {
   height: calc(100vh - 280px);
 
-  .car_list {
+  .overflow-scroll {
     // Height will be determined by overall height of content above list
     height: calc(100% - 320px);
     -webkit-overflow-scrolling: touch;
diff --git a/src/common-components/funnel-header/funnel-header.spec.js b/src/common-components/funnel-header/funnel-header.spec.js
index cae21a179..ebb4a549c 100644
--- a/src/common-components/funnel-header/funnel-header.spec.js
+++ b/src/common-components/funnel-header/funnel-header.spec.js
@@ -7,13 +7,19 @@ describe("funnelHeader", () => {
 
     // Act
     const wrapper = shallowMount(funnelHeader, {
-      propsData: {
+      setData: {
         imageSrc: "image_url",
       },
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("img")).toBeTruthy();
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  imageSrc: 'image_url'
+};  
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 7b6c6efc6..f2934cb37 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -10,12 +10,15 @@
 <script>
 export default {
   name: "funnel-header",
-  props: {
-    imageSrc: {
-      type: String,
-      required: true,
-      default: "",
-    },
+  data() {
+    return {
+      imageSrc: '',
+    }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.imageSrc = cmsContent.LogoImage;
+    }
   },
 };
 </script>
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index 40b50186b..c6d30a71b 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -2,16 +2,21 @@ import { shallowMount } from "@vue/test-utils";
 import FunnelSubHeader from "./funnel-sub-header";
 
 describe("FunnelSubHeader.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
+  it("Should render the 'text' data value as a span value for the header span text value.", async () => {
     // Act
-    const wrapper = shallowMount(FunnelSubHeader, {
-      propsData: {
-        text: "FunnelSubHeader Content",
-      },
+    const wrapper = shallowMount(FunnelSubHeader);
+    await wrapper.setData ({
+      text: "FunnelSubHeader Content",
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content");
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  HeaderText: 'FunnelSubHeader Content'
+};  
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 3fd7ebc15..30021c8e6 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -8,9 +8,8 @@
         <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
-        :backButtonAccessibleText="backButtonAccessibleText"
       />
-    </h5>
+      </h5>
     </div>
   </div>
 </template>
@@ -20,20 +19,30 @@ import buttonBack from "@/ux-components/button-back/button-back";
 
 export default {
   name: "FunnelSubHeader",
+  data() {
+    return {
+      text: '',
+    }
+  },
   props: {
-    text: String,
     hasBackButton: Boolean,
+    backButtonUrl: String,
     backButtonAccessibleText: String,
     backButtonAction: Function,
   },
   components: {
     buttonBack,
-  }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.text = cmsContent.HeaderText;
+    }
+  },
 };
 </script>
 
 <style lang="scss">
-  h5 {
+  h2 {
     color: $gray-550;
 
     button {
diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index 98bf90a5a..df471038e 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -2,18 +2,23 @@ import { shallowMount } from "@vue/test-utils";
 import vehicleBanner from "./vehicle-banner";
 
 describe("vehicleBanner", () => {
-  test("renders the blurrycar image", () => {
+  test("renders the blurrycar image", async () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(vehicleBanner, {
-      propsData: {
-        vehicleImageSrc: "image_url",
-      },
+    const wrapper = shallowMount(vehicleBanner);
+    await wrapper.setData ({
+      vehicleImageSrc: "image_url",
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  GenericVehicleImage: 'image_url'
+};  
\ No newline at end of file
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 984657a47..652fbdae7 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -11,12 +11,15 @@
 <script>
 export default {
   name: "vehicle-banner",
-  props: {
-    vehicleImageSrc: {
-      type: String,
-      required: true,
-      default: "",
-    },
+  data() {
+    return {
+      vehicleImageSrc: '',
+    }
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.vehicleImageSrc = cmsContent.GenericVehicleImage;
+    }
   },
 };
 </script>
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 765c7a542..1e5ac38c7 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -12,6 +12,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "make-question",
@@ -30,7 +31,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index f8d841bea..f1625dd6e 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
 import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,60 @@ describe("vehicle-make.vue", () => {
 });
 
 describe("vehicle-make.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a make to get started" });
+    const pageHeaderWidgetHeaderText = "Select a make to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a make to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -55,7 +100,7 @@ describe("vehicle-make.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      funnelSubHeaderWidgetHeaderText: "Select a make to get started",
+      pageHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +124,14 @@ describe("vehicle-make.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   makeQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -111,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
   makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }
\ No newline at end of file
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f158b754a..10e6ff953 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-            :text="funnelSubHeaderWidget.HeaderText"
+            ref="funnelSubHeader"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
             :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-make",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedMake: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
       });
     });
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 95b72909b..52a67342a 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -12,9 +12,11 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "model-question",
+  mixins: [baseMixin],
   data() {
     return {
       questionText: null,
@@ -30,7 +32,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make)});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index b8931ec39..b3aab50b4 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -2,6 +2,9 @@ import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
 import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,86 @@ describe("vehicle-model.vue", () => {
 });
 
 describe("vehicle-model.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
-    //Arange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a model to get started" });
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select a model to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a model to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a model to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       done();
     });
   });
@@ -53,13 +124,14 @@ describe("vehicle-model.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   modelQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -84,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
-  const mountOptions = getMountOptions({ });
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleModel, mountOptions);
   const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
   modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }
\ No newline at end of file
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index bac05f3bc..a467ce1f8 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-          :text="funnelSubHeaderWidget.HeaderText"
+          ref="funnelSubHeader"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Make"
           :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-model",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedModel: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
       });
     });
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index 17a008473..6d1e1cd46 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -12,6 +12,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 // Supporting files
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "style-question",
@@ -30,7 +31,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: encodeURIComponent(store.getters.vehicle.make), model: encodeURIComponent(store.getters.vehicle.model)});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: store.getters.vehicle.make, model: store.getters.vehicle.model});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index babcb4fe4..15264e53e 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -1,6 +1,9 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
@@ -33,18 +36,60 @@ describe("vehicle-style.vue", () => {
 });
 
 describe("vehicle-style.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page header is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a style to get started" });
+    const pageHeaderWidgetHeaderText = "Select a style to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
 
     //Act
     vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
 
     //Assert
-    const header = await wrapper.find(".Header");
     apiPromise.finally(() => {
-      expect(header.attributes("text")).toEqual("Select a style to get started");
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -55,7 +100,7 @@ describe("vehicle-style.vue", () => {
     
     //Arrange
     const { wrapper, apiPromise } = setupMocks( { 
-      funnelSubHeaderWidgetHeaderText: "Select a style to get started",
+      pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
           navigate: jest.fn()
@@ -79,14 +124,14 @@ describe("vehicle-style.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   styleQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -111,10 +156,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleStyle, mountOptions);
   const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
   styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }
\ No newline at end of file
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 22b8b29b1..3cd1766d3 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-          :text="funnelSubHeaderWidget.HeaderText"
+          ref="funnelSubHeader"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Model"
           :backButtonAction="backButtonAction"
@@ -30,9 +30,6 @@ export default {
   name: "vehicle-style",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedStyle: null,
     };
   },
@@ -58,9 +55,9 @@ export default {
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
       });
     });
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index d5fdde8a9..26f4d61b2 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -2,6 +2,9 @@ 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 funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -33,18 +36,42 @@ describe("vehicle-year.vue", () => {
 });
 
 describe("vehicle-year.vue", () => {
-  test("Page header is passed data from CMS", async (done) => {
+  test("Page logo image is initailized with api data", async (done) => {
 
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { funnelSubHeaderWidgetHeaderText: "Select a year to get started" });
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
 
     //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");
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-year.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
       done();
     });
   });
@@ -53,14 +80,14 @@ describe("vehicle-year.vue", () => {
 function setupMocks({
   radioQuestionCmsContent = {},
   yearQuestionInitialData = {},
-  funnelSubHeaderWidgetHeaderText = {},
+  pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
   
   //Mock api responses
   const apiResponses = {
     cmsContent: {
-      FunnelSubHeaderWidget: [{ HeaderText: funnelSubHeaderWidgetHeaderText }],
+      FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
       RadioQuestionWidget: [radioQuestionCmsContent],
       VehicleBannerWidget: [
         {
@@ -85,10 +112,25 @@ function setupMocks({
     loadInitialData: jest.fn(),
     initializeComponent: jest.fn(),
   };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
   yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
 }
\ No newline at end of file
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index d195bf72a..8456c3275 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <funnelHeader :imageSrc="funnelHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
         <funnelSubHeader 
-            :text="funnelSubHeaderWidget.HeaderText" 
             class="Header" 
+            ref="funnelSubHeader"
         />
         <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
@@ -28,9 +28,6 @@ export default {
   name: "vehicle-year",
   data() {
     return {
-      funnelSubHeaderWidget: {},
-      funnelHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedYear: null,
     };
   },
@@ -54,12 +51,11 @@ export default {
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
-
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.funnelSubHeaderWidget = resultMap.cmsContent.FunnelSubHeaderWidget[0];
-        vm.funnelHeaderWidget = resultMap.cmsContent.FunnelHeaderWidget[0];
-        vm.vehicleBannerWidget = resultMap.cmsContent.VehicleBannerWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
         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 a0ec966b5..1a4a80279 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -10,8 +10,8 @@
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
 // Supporting files
-import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "year-question",
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 14da7a16b..a31a5368f 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -1,3 +1,4 @@
+import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
@@ -9,20 +10,13 @@ export default {
     };
   },
   methods: {
-    // dispatchBlockingStoreAction(type, payload) {
-    //   // globalMethods.showWaitingModal(true);
-
-    //   return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-    //     // globalMethods.showWaitingModal(false);
-    //   });
-    // },
-    dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
+    dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
       // Encode the payload if required
       if (encodePayload) {
         encodeUriData(payload);
       }
 
-      return this.$store.dispatch(type, payload);
+      return store.dispatch(type, payload);
     },
   },
   computed: {
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index b10a9bbb3..e9ccbdc5b 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -1,38 +1,37 @@
 import baseMixin from "@/mixins/base-mixin";
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
 
 describe("baseMixin.js", () => {
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = {};
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = { make: "Alfa Romeo/Chrysler" };
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 });
 function getMixInInstance({ isDispatchSuccess = true }) {
   // Mock Store
-  const store = {
-    dispatch: jest.fn(),
-  };
+  const storeDispatch = jest.fn();
 
   if (isDispatchSuccess) {
-    store.dispatch.mockReturnValue(Promise.resolve());
+    storeDispatch.mockReturnValue(Promise.resolve());
   } else {
-    store.dispatch.mockReturnValue(Promise.reject());
+    storeDispatch.mockReturnValue(Promise.reject());
   }
 
   // Mock Route
@@ -45,7 +44,7 @@ function getMixInInstance({ isDispatchSuccess = true }) {
   // Attach mocks to mixin
   const baseMixIn = baseMixin;
   baseMixIn.methods.$route = route;
-  baseMixIn.methods.$store = store;
+  store.dispatch = storeDispatch;
   baseMixIn.methods.storeActions = storeActions;
   baseMixIn.methods.widgetNames = widgetNames;
 
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 8d5f3d8b7..b7ae7ef49 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
@@ -33,7 +33,6 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
-      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });
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 7721917c2..1ddeff1c6 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -3,7 +3,7 @@
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <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>
@@ -12,7 +12,7 @@
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
       <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>
@@ -42,7 +42,6 @@ export default {
   },
   data() {
     return {
-      isError: false,
       isLoaderDisplayed: false,
     };
   },

From b2a2e0303c7dc9e340550ce7dc2449b558b8a3c5 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 4 Jan 2022 10:49:53 -0500
Subject: [PATCH 74/86] updating styling for funnel sub header

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 30021c8e6..89e3f14a0 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss">
-  h2 {
+  h5 {
     color: $gray-550;
 
     button {

From 40e47949ef3cbdd453379f05f4f3ce29abc10b38 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 4 Jan 2022 15:15:37 -0500
Subject: [PATCH 75/86] removing unneeded classes

---
 src/common-components/button-question/button-question.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index ac96683f1..86921e4ee 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,7 +1,7 @@
 <template>
   <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">{{
+    <div class="mt-6 mb-4 d-flex">
+      <span class="text-center fs-6 fw-bold w-100">{{
         questionText
       }}</span>
     </div>

From c2a4f872708c86f9cadc9ab029a9b2887b36b216 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 4 Jan 2022 15:23:06 -0500
Subject: [PATCH 76/86] Fixing unit test

---
 src/common-components/button-question/button-question.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index df7b834c8..609981717 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -13,7 +13,7 @@ describe("buttonQuestion.vue", () => {
     wrapper.vm.chooseAnswer("2021");
 
     // Assert
-    expect(wrapper.find(".needed_car_info-text").text()).toEqual(
+    expect(wrapper.find(".text-center").text()).toEqual(
       "Question Text"
     );
     const buttonButtons = wrapper.findAllComponents('[data-test="button"]');

From 6c457b29ceb755a283a8df7c1901bca6ecf89ba9 Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 4 Jan 2022 15:29:00 -0500
Subject: [PATCH 77/86] removing unnecessary mixin

---
 src/layouts/vehicle-model/model-question/model-question.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 52a67342a..a78684b12 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -16,7 +16,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "model-question",
-  mixins: [baseMixin],
   data() {
     return {
       questionText: null,

From 96a5cdf46e9b8e53c1ff5a9039a56aef95f51a8b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 5 Jan 2022 16:55:10 -0500
Subject: [PATCH 78/86] CSR-222: refactor with emit for click event

---
 .../funnel-sub-header/funnel-sub-header.vue   | 16 ++++++----
 src/layouts/vehicle-make/vehicle-make.vue     |  6 ++--
 src/layouts/vehicle-model/vehicle-model.vue   |  4 +--
 src/layouts/vehicle-style/vehicle-style.vue   |  4 +--
 src/ux-components/button-back/button-back.vue | 12 +++----
 .../list-button-horizontal.spec.js            |  3 +-
 .../list-button-horizontal.vue                | 31 ++++++++++++++++---
 src/ux-components/list-card/list-card.vue     | 31 +++++++++++++------
 8 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 3fd7ebc15..c86141b8c 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -6,10 +6,10 @@
           {{ text }}
         </span>
         <buttonBack
-        v-if="hasBackButton"
-        :backButtonAction="backButtonAction"
-        :backButtonAccessibleText="backButtonAccessibleText"
-      />
+          v-if="hasBackButton"
+          :backButtonAccessibleText="backButtonAccessibleText"
+          @click-event="clickEvent"
+        />
     </h5>
     </div>
   </div>
@@ -24,11 +24,15 @@ export default {
     text: String,
     hasBackButton: Boolean,
     backButtonAccessibleText: String,
-    backButtonAction: Function,
   },
   components: {
     buttonBack,
-  }
+  },
+  methods: {
+    clickEvent() {
+      this.$emit('click-event');
+    }
+  },
 };
 </script>
 
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index f158b754a..400f491ca 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -8,8 +8,8 @@
             :text="funnelSubHeaderWidget.HeaderText"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
-            :backButtonAction="backButtonAction"
-            class="Header" 
+            @click-event="backButtonAction"
+            class="Header"
         />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
       </div>
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index bac05f3bc..163915ec0 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -8,7 +8,7 @@
           :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Make"
-          :backButtonAction="backButtonAction"
+          @click-event="backButtonAction"
           class="Header"
         />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }
diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue
index 22b8b29b1..ecb362663 100644
--- a/src/layouts/vehicle-style/vehicle-style.vue
+++ b/src/layouts/vehicle-style/vehicle-style.vue
@@ -8,7 +8,7 @@
           :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Model"
-          :backButtonAction="backButtonAction"
+          @click-event="backButtonAction"
           class="Header"
         />
         <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 55dee6f8f..23d5dd2f8 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,7 +1,6 @@
 <template>
   <button
-    v-if="backButtonAction"
-    @click="backButtonAction"
+    @click="handleClick"
     class="back-button-wrapper p-3" 
     :aria-label="backButtonAccessibleText"
   >
@@ -20,12 +19,13 @@ export default {
       type: String,
       required: true,
       default: "",
-    },
-    backButtonAction: {
-      type: Function,
-      default: null,
     }
   },
+  methods: {
+    handleClick() {
+      this.$emit('click-event');
+    }
+  }
 };
 </script>
 
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 8d5f3d8b7..9cc016c30 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
@@ -10,6 +10,7 @@ describe("list-button.vue", () => {
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
+        loaderEnabled: "true",
         sizeInRem: "1.5",
         errorMessage: "null",
       },
@@ -20,7 +21,7 @@ describe("list-button.vue", () => {
     const label = wrapper.find("label");
     const paragraph = wrapper.find("span");
 
-    await label.trigger("click");
+    await input.trigger("click");
 
     expect(input.attributes()).toEqual({
       id: "2023",
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 7721917c2..d02e923ec 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,7 @@
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)">
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@@ -11,8 +11,8 @@
   <p class="small">{{errorMessage}}</p>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()"/>
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click="displayLoader()">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)" />
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <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>
@@ -23,7 +23,10 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButtonHorizontal",
   props: {
@@ -34,15 +37,17 @@ export default {
     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 */
+    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
     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 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 */
+    positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
+    isRequired: Boolean,
   },
   data() {
     return {
-      isError: false,
+      hasError: false,
       isLoaderDisplayed: false,
     };
   },
@@ -50,6 +55,10 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
+    handleClick(value) {
+      this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
+    }
   },
   components: {
     loader,
@@ -65,8 +74,20 @@ export default {
       return className;
     },
   },
+  setup(props) {
+    const { groupName, buttonID } = toRefs(props);
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: props.isMultiSelect ? "checkbox" : "radio",
+      checkedValue: buttonID
+    });
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>
+
 <style lang="scss">
 .list-button-horizontal {
   input[type="radio"],
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 71bf0a83e..f51c7425a 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
@@ -9,7 +9,7 @@
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@@ -17,7 +17,7 @@
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -27,7 +27,7 @@
     </label>
   </div>
   <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -39,14 +39,16 @@
 </template>
 
 <script>
+import { useField } from 'vee-validate';
+
 export default {
   name: "listCard",
   props: {
     //Must choose one of the following four options
-    isMultiSelect: Boolean,//Defines use as checkbox
-    isRadio: Boolean,//Defines use as radio button
-    isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
-    isRadioHorizontal: Boolean,//Defines use as horizontal radio button
+    isMultiSelect: Boolean, //Defines use as checkbox
+    isRadio: Boolean, //Defines use as radio button
+    isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
+    isRadioHorizontal: Boolean, //Defines use as horizontal radio button
     //end must choose
     buttonImage: String,//Optional: File name of image
     buttonLabel: String,//Required: Label text
@@ -55,7 +57,18 @@ export default {
     groupName: String,//Rquired: Unique
     buttonLabelSubCopy: String,//Optional: sub text
     hasError: Boolean//Used to show error state
-  }
+  },
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  // setup({ groupName, value }) {
+  //   const { checked, handleChange } = useField(groupName, undefined, {
+  //     type: "radio",
+  //     checkedValue: value
+  //   });
+  //   return {
+  //     checked,
+  //     handleChange,
+  //   };
+  // },
 };
 </script>
 

From 79455adab35a0463558fef21ea8202f71c697af3 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 5 Jan 2022 17:00:59 -0500
Subject: [PATCH 79/86] CSR-241 WIP unit test.

---
 src/ux-components/list-card/list-card.spec.js | 66 ++++++++++++++++++-
 src/ux-components/list-card/list-card.vue     | 13 ++--
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3d0843e10..736fed6b9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -1 +1,65 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listCard from "./list-card";
+
+describe("list-card.vue", () => {
+
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelect: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "checkbox-demo-1",
+        groupName: "Checkbox 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+  });
+
+  it("Should return input type radio if isRadio is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadio: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+  });
+
+  it("Should return input type checkbox and class horizontal if isMultiSelectHorizontal is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelectHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        class: "horizontal"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+    
+  });
+
+});
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 177d43e90..3d2c807bb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -5,7 +5,7 @@
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
-      <p class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
@@ -13,7 +13,7 @@
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
-      <p class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
@@ -22,7 +22,7 @@
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
-        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
       </div>
     </label>
   </div>
@@ -32,7 +32,7 @@
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
         <p class="m-0 small">{{buttonLabel}}</p>
-        <p class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
       </div>
     </label>
   </div>
@@ -48,11 +48,12 @@ export default {
     isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
     isRadioHorizontal: Boolean,//Defines use as horizontal radio button
     //end must choose
-    buttonImage: String,//Optional: File name of image
+    buttonImage: String,//Required: File name of image
     buttonLabel: String,//Required: Label text
+    isRequired: Boolean, //Required: is input required or optional?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
-    groupName: String,//Rquired: Unique
+    groupName: String,//Required: Unique
     buttonLabelSubCopy: String,//Optional: sub text
   }
 };

From 740579aea9bd1b7def8b0e6ab5d7ed93f6ec3a2d Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 5 Jan 2022 17:04:35 -0500
Subject: [PATCH 80/86] CSR-241 WIP unit test updates.

---
 src/ux-components/list-card/list-card.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 736fed6b9..955f8f8ed 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -51,7 +51,6 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        class: "horizontal"
       },
     });
 
@@ -59,7 +58,7 @@ describe("list-card.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes().type).toEqual("checkbox");
-    
+
   });
 
 });

From 0d93ea4445cebc3dcaa657c78cd92f416e0196ac Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 5 Jan 2022 17:09:32 -0500
Subject: [PATCH 81/86] CSR-222: move back-button into different folder

---
 .../button-back/button-back.spec.js                             | 0
 .../button-back/button-back.vue                                 | 0
 src/common-components/funnel-sub-header/funnel-sub-header.vue   | 2 +-
 src/layouts/component-test/component-test.vue                   | 2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{ux-components => common-components}/button-back/button-back.spec.js (100%)
 rename src/{ux-components => common-components}/button-back/button-back.vue (100%)

diff --git a/src/ux-components/button-back/button-back.spec.js b/src/common-components/button-back/button-back.spec.js
similarity index 100%
rename from src/ux-components/button-back/button-back.spec.js
rename to src/common-components/button-back/button-back.spec.js
diff --git a/src/ux-components/button-back/button-back.vue b/src/common-components/button-back/button-back.vue
similarity index 100%
rename from src/ux-components/button-back/button-back.vue
rename to src/common-components/button-back/button-back.vue
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index c86141b8c..6617e9639 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import buttonBack from "@/ux-components/button-back/button-back";
+import buttonBack from "@/common-components/button-back/button-back";
 
 export default {
   name: "FunnelSubHeader",
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index bbbf589f7..d402e05b2 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -739,7 +739,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 buttonBack from "@/common-components/button-back/button-back";
 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";

From dc80115834a32a2f3c5749fbe509eae3cd1f2b5f Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 6 Jan 2022 10:00:05 -0500
Subject: [PATCH 82/86] CSR-246 unit test for list-card.

---
 src/ux-components/list-card/list-card.spec.js | 128 +++++++++++++++++-
 src/ux-components/list-card/list-card.vue     |   2 +-
 2 files changed, 127 insertions(+), 3 deletions(-)

diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 955f8f8ed..8438e01b9 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -41,7 +41,7 @@ describe("list-card.vue", () => {
     expect(input.attributes().type).toEqual("radio");
   });
 
-  it("Should return input type checkbox and class horizontal if isMultiSelectHorizontal is true", async () => {
+  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
       propsData: {
@@ -50,7 +50,7 @@ describe("list-card.vue", () => {
         buttonID: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
-        buttonImage: "windshield-damage.svg",
+        buttonImage: "windshield-damage.svg"
       },
     });
 
@@ -61,4 +61,128 @@ describe("list-card.vue", () => {
 
   });
 
+  it("Should return input type radio if isRadioHorizontal is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+
+  });
+
+  it("Should return primary label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("Windshield");
+
+  });
+
+  it("Should return secondary (sub) label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p:nth-of-type(2)");
+
+    expect(paragraph.text()).toEqual("Test");
+
+  });
+
+  it("Should return value used for various text settings including the label 'for' and input id", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+
+  });
+
+  it("Should return input group name used for radio or checkbox", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().name).toEqual("radio 1");
+
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+
+  });
+
 });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 3d2c807bb..daf419704 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -50,7 +50,7 @@ export default {
     //end must choose
     buttonImage: String,//Required: File name of image
     buttonLabel: String,//Required: Label text
-    isRequired: Boolean, //Required: is input required or optional?
+    isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
     groupName: String,//Required: Unique

From bc1d0d358e2a170a0213e86251b7bd37f379c038 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 6 Jan 2022 11:15:56 -0500
Subject: [PATCH 83/86] CSR-222: fix unit test

---
 .../list-button-horizontal/list-button-horizontal.spec.js        | 1 +
 1 file changed, 1 insertion(+)

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 ae65382c7..9cc016c30 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
@@ -34,6 +34,7 @@ describe("list-button.vue", () => {
     expect(label.attributes()).toEqual({
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });

From 7761ad879db31f461dacb13d02f72e219421e446 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 6 Jan 2022 11:23:40 -0500
Subject: [PATCH 84/86] CSR-222: undo accidental code collusion

---
 .../list-button-horizontal.vue                | 21 ++-----------------
 src/ux-components/list-card/list-card.vue     | 21 ++++---------------
 2 files changed, 6 insertions(+), 36 deletions(-)

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 da7483f34..65c2270d2 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,7 +2,7 @@
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@@ -11,7 +11,7 @@
   <p class="small">{{errorMessage}}</p>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()" @click="displayLoader()" />
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 
 export default {
@@ -53,10 +51,6 @@ export default {
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
-    },
-    handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
-      this.handleChange(value);
     }
   },
   components: {
@@ -73,17 +67,6 @@ export default {
       return className;
     },
   },
-  setup(props) {
-    const { groupName, buttonID } = toRefs(props);
-    const { checked, handleChange } = useField(groupName, undefined, {
-      type: props.isMultiSelect ? "checkbox" : "radio",
-      checkedValue: buttonID
-    });
-    return {
-      checked,
-      handleChange,
-    };
-  },
 };
 </script>
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f51c7425a..fe17af9db 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
@@ -9,7 +9,7 @@
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@@ -17,7 +17,7 @@
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -27,7 +27,7 @@
     </label>
   </div>
   <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -39,8 +39,6 @@
 </template>
 
 <script>
-import { useField } from 'vee-validate';
-
 export default {
   name: "listCard",
   props: {
@@ -58,17 +56,6 @@ export default {
     buttonLabelSubCopy: String,//Optional: sub text
     hasError: Boolean//Used to show error state
   },
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  // setup({ groupName, value }) {
-  //   const { checked, handleChange } = useField(groupName, undefined, {
-  //     type: "radio",
-  //     checkedValue: value
-  //   });
-  //   return {
-  //     checked,
-  //     handleChange,
-  //   };
-  // },
 };
 </script>
 

From 8946f75877bae40b3237e81d9b79ac4871270395 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 6 Jan 2022 12:18:29 -0500
Subject: [PATCH 85/86] CSR-222: check loaderEnabled prop before displaying
 loader

---
 .../list-button-horizontal/list-button-horizontal.vue        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 65c2270d2..f68c906ba 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -11,7 +11,7 @@
   <p class="small">{{errorMessage}}</p>
   </div>
   <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()" @click="displayLoader()" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick()" @click="handleClick()" />
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
@@ -51,6 +51,9 @@ export default {
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
+    },
+    handleClick() {
+      this.loaderEnabled && this.displayLoader();
     }
   },
   components: {

From c746adf49a9555e82b1414e4331341a9a3cbec35 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 7 Jan 2022 09:43:15 -0500
Subject: [PATCH 86/86] CSR-222: remove unneeded prop again

---
 src/common-components/funnel-sub-header/funnel-sub-header.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 99f97e311..c057eda85 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -27,7 +27,6 @@ export default {
   },
   props: {
     hasBackButton: Boolean,
-    backButtonUrl: String,
     backButtonAccessibleText: String,
   },
   components: {