From f19870cdaab345384d2f2d185ec862c449a3788f Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Tue, 7 Dec 2021 20:18:44 -0500
Subject: [PATCH 01/19] routing table init

---
 src/router/index.js                                 | 11 +++++++++++
 src/router/router-constants/fmgPage-values.js       |  6 ++++++
 src/router/router-constants/navigation-scenarios.js |  5 +++++
 src/router/router-constants/routing-table.js        | 13 +++++++++++++
 4 files changed, 35 insertions(+)
 create mode 100644 src/router/router-constants/fmgPage-values.js
 create mode 100644 src/router/router-constants/navigation-scenarios.js
 create mode 100644 src/router/router-constants/routing-table.js

diff --git a/src/router/index.js b/src/router/index.js
index 2b3d566a1..d2c335ca7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,6 +70,17 @@ const router = createRouter({
   routes,
 });
 
+router.navigate = (scenario, optionalQuery, optionalParams) => 
+{
+
+}
+
+router.getNavigationMap = (scenario, currentRoute) => 
+{
+  const fmgPageValue = currentRoute.query.fmgPage;
+  
+}
+
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 function GetRouteInfoFromPageName(pageName) {
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
new file mode 100644
index 000000000..ee3031bff
--- /dev/null
+++ b/src/router/router-constants/fmgPage-values.js
@@ -0,0 +1,6 @@
+const fmgPageValues = {
+    VEHICLE_YEAR: 'vehicle-year',
+    VEHICLE_MAKE: 'vehicle-make',
+};
+
+export { fmgPageValues };
\ No newline at end of file
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
new file mode 100644
index 000000000..5db881eef
--- /dev/null
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -0,0 +1,5 @@
+const navigationScenarios = { 
+    SELECTED_YEAR: 'SELECTED_YEAR',
+};
+
+export { navigationScenarios } ;
\ No newline at end of file
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
new file mode 100644
index 000000000..410665630
--- /dev/null
+++ b/src/router/router-constants/routing-table.js
@@ -0,0 +1,13 @@
+import { fmgPageValues } from '@/router/router-constants/fmg-page-values';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
+
+const routingTable = [
+    {
+        fmgPageValue: fmgPageValues.VEHICLE_YEAR,
+        maps: [
+            { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE }
+        ]
+    }
+]
+
+export { routingTable };
\ No newline at end of file

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

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

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 8e44d965c..1abf5bb0f 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="w-100 d-flex justify-content-center">
       <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
-        <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
+        <h3 class="visually-hidden" id="select-year-radio-group">Vehicle Year</h3>
           <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
@@ -17,7 +17,9 @@
             data-test="radio"
             groupName="radio-list"
             textPosition="text-start"
+            isRequired=true
             :value="modelValue"
+            screenReaderOnlyText="(opens new window)"
           />
       </div>
     </div>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 61614606a..d1b96ff23 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -81,6 +81,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -90,6 +91,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -99,6 +101,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 2af1d9e38..2b4933ec1 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,10 +7,11 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent">
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent">
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="visually-hidden">{{screenReaderOnlyText}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
   <p class="small">{{errorMessage}}</p>
@@ -24,6 +25,8 @@ export default {
   props: {
     groupName: String, /* Required, unique for each radio button GROUP */
     radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
+    isRequired: Boolean, /* Optional, default is false */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */

From d82c21c7448257229cce4b8451a0c5da9081992e Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 8 Dec 2021 16:28:17 -0500
Subject: [PATCH 03/19] created routing table logic

---
 src/router/index.js                          | 27 ++++++++++++++++----
 src/router/router-constants/routing-table.js |  5 ++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index d2c335ca7..924ac5965 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,8 @@
 import { createWebHistory, createRouter } from "vue-router";
 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 { fmgPageValues } from '@/router/router-constants/fmgPage-values.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";
@@ -65,22 +67,37 @@ const routes = [
   },
 ];
 
+
 const router = createRouter({
   history: createWebHistory("/fmg/"),
   routes,
 });
 
-router.navigate = (scenario, optionalQuery, optionalParams) => 
-{
+router.navigate = (scenario, currentRoute, optionalQuery, optionalParams) => {
+  if (!scenario) {
+    console.error("No scenario provided, navigating to 404 page.");
+  }
+
+  // Match our maps up and navigate if we have a destination.
+  const matchingScenarioMap = router.getNavigationMap(scenario, currentRoute);
+
+  if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
+    router.push({
+      path: '/', query: Object.assign(currentRoute.query, { fmgPage: matchingScenarioMap.destinationFmgPageValue })
+    });
+  }
 
 }
 
-router.getNavigationMap = (scenario, currentRoute) => 
-{
+router.getNavigationMap = (scenario, currentRoute) => {
   const fmgPageValue = currentRoute.query.fmgPage;
-  
+  const matchedQueryValue = routingTable.filter(item => (item.fmgPageValue === fmgPageValue) && item.maps.filter(map => map.scenario === scenario).length > 0).map(m => m.maps.filter(map => map.scenario === scenario));
+  return matchedQueryValue[0][0];
 }
 
+
+
+
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 function GetRouteInfoFromPageName(pageName) {
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 410665630..584161f43 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -1,4 +1,4 @@
-import { fmgPageValues } from '@/router/router-constants/fmg-page-values';
+import { fmgPageValues } from '@/router/router-constants/fmgPage-values';
 import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
 
 const routingTable = [
@@ -7,7 +7,8 @@ const routingTable = [
         maps: [
             { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE }
         ]
-    }
+    },
+ 
 ]
 
 export { routingTable };
\ No newline at end of file

From 43c6aed0a28a7861ce21217aa94a32c1ae6d9612 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 8 Dec 2021 20:56:57 -0500
Subject: [PATCH 04/19] improvements

---
 src/helpers/cms-content-helper.js         |  7 +-----
 src/layouts/vehicle-year/vehicle-year.vue |  2 +-
 src/router/index.js                       | 28 +++++++++++++++++------
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e5826c81d..d6f4547c5 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -4,9 +4,7 @@ import store from "@/store";
 
 export function fetchCmsContentForPage(fmgPage) {
     return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
-        const pageDataFromCms = {
-            isCmsContentReady: false
-        };
+        const pageDataFromCms = {};
 
         response.data.Result.forEach((widget) => {
             if (Object.values(widgetNames).includes(widget.Type)) {
@@ -20,9 +18,6 @@ export function fetchCmsContentForPage(fmgPage) {
             }
         });
 
-        // Our 'Page' is ready because we have data now
-        pageDataFromCms.isCmsContentReady = true;
-
         return pageDataFromCms;
     });
 }
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 4da235fcc..6681ea3d6 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>
   <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
   <div class="select-car">
     <div class="select-car-form rounded text-center">
diff --git a/src/router/index.js b/src/router/index.js
index 924ac5965..24854555b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,6 @@ import { createWebHistory, createRouter } from "vue-router";
 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 { fmgPageValues } from '@/router/router-constants/fmgPage-values.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";
@@ -73,30 +72,45 @@ const router = createRouter({
   routes,
 });
 
-router.navigate = (scenario, currentRoute, optionalQuery, optionalParams) => {
+
+//---------------------------------------------------------- Router Functions ----------------------------------------------------------
+
+// Navigate to the next route, depending on the scenario.
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+
   if (!scenario) {
-    console.error("No scenario provided, navigating to 404 page.");
+    console.error("No scenario provided. Please review the routing table.");
+    return;
   }
 
   // Match our maps up and navigate if we have a destination.
   const matchingScenarioMap = router.getNavigationMap(scenario, currentRoute);
 
   if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
-    router.push({
-      path: '/', query: Object.assign(currentRoute.query, { fmgPage: matchingScenarioMap.destinationFmgPageValue })
-    });
+    // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
+    router.push({ path: '/', query: Object.assign(optionalQuery, { fmgPage: matchingScenarioMap.destinationFmgPageValue }), params: optionalParams });
+  } else if (matchingScenarioMap.destinationUrl !== undefined) {
+    navigateToUrl(matchingScenarioMap.destinationUrl);
   }
 
 }
 
+// Get navigation map depeding on the scenario and the current 'page' you're on.
 router.getNavigationMap = (scenario, currentRoute) => {
+
   const fmgPageValue = currentRoute.query.fmgPage;
   const matchedQueryValue = routingTable.filter(item => (item.fmgPageValue === fmgPageValue) && item.maps.filter(map => map.scenario === scenario).length > 0).map(m => m.maps.filter(map => map.scenario === scenario));
+
   return matchedQueryValue[0][0];
 }
 
+//---------------------------------------------------------- Private Functions ----------------------------------------------------------
 
-
+// Navigate to an external url.
+function navigateToUrl(url) {
+  // possibly show some loading screen in the future here.
+  window.location.assign(url);
+}
 
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.

From daab1b0f1a314c02673329ce9276e6fba10df328 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 8 Dec 2021 21:00:37 -0500
Subject: [PATCH 05/19] Ran linter

---
 jest.config.js                                |   2 +-
 .../radio-question/radio-question.spec.js     |   4 +-
 .../radio-question/radio-question.vue         |  43 +-
 .../site-header/site-header.spec.js           |  30 +-
 .../site-header/site-header.vue               |  31 +-
 .../vehicle-banner/vehicle-banner.spec.js     |  30 +-
 .../vehicle-banner/vehicle-banner.vue         |  14 +-
 src/constants/store-mutations.js              |   6 +-
 src/helpers/cms-content-helper.js             |  29 +-
 src/helpers/cms-helper.spec.js                |  86 ++--
 src/helpers/layout-helper.js                  |  44 +-
 src/helpers/layout-helper.spec.js             |  43 +-
 src/layouts/component-test/component-test.vue | 457 ++++++++++--------
 src/layouts/loader-demo/loader-demo.vue       |  10 +-
 src/layouts/vehicle-year/vehicle-year.spec.js |  47 +-
 src/layouts/vehicle-year/vehicle-year.vue     |  51 +-
 .../year-question/year-question.spec.js       |  38 +-
 .../year-question/year-question.vue           |  43 +-
 src/mixins/base-mixin.js                      |   5 +-
 src/mixins/base-mixin.spec.js                 |  79 ++-
 src/router/index.js                           |  32 +-
 src/router/router-constants/fmgPage-values.js |   6 +-
 .../router-constants/navigation-scenarios.js  |   6 +-
 src/router/router-constants/routing-table.js  |  24 +-
 src/store/index.js                            |  12 +-
 src/store/store.spec.js                       | 198 ++++----
 src/ux-components/alert/alert.spec.js         |   2 +-
 src/ux-components/alert/alert.vue             |  35 +-
 .../button-primary/button-primary.vue         |  14 +-
 .../button-secondary/button-secondary.vue     |  14 +-
 src/ux-components/header/header.vue           |   4 +-
 src/ux-components/list-button/list-button.vue |  38 +-
 src/ux-components/loader/loader.vue           |  26 +-
 .../radio-horizontal/radio-horizontal.spec.js |  13 +-
 .../radio-horizontal/radio-horizontal.vue     |  89 ++--
 src/ux-components/radio/radio.spec.js         |  13 +-
 src/ux-components/radio/radio.vue             |  62 ++-
 37 files changed, 927 insertions(+), 753 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index cc95af335..e36f1a70d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,7 +11,7 @@ module.exports = {
     "!src/constants/*.js",
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
-    "!src/layouts/component-test/component-test.vue"
+    "!src/layouts/component-test/component-test.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
diff --git a/src/common-components/radio-question/radio-question.spec.js b/src/common-components/radio-question/radio-question.spec.js
index 17b6ff311..de6458122 100644
--- a/src/common-components/radio-question/radio-question.spec.js
+++ b/src/common-components/radio-question/radio-question.spec.js
@@ -4,11 +4,11 @@ import radioQuestion from "@/common-components/radio-question/radio-question";
 describe("radioQuestion.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(radioQuestion);
     await wrapper.setProps({
       questionText: "Question Text",
       answers: ["2023", "2022", "2021"],
-      modelValue: "2020"
+      modelValue: "2020",
     });
     wrapper.vm.chooseAnswer("2021");
 
diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index 8e44d965c..2c088fcc7 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -6,19 +6,32 @@
       }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <div class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
+      <div
+        class="
+          car_list
+          overflow-scroll
+          position-absolute
+          container-fluid
+          w-100
+          pt-1
+        "
+        role="radiogroup"
+        aria-labelledby="select-year-radio-group"
+      >
         <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
-          <radio v-for="answer in answers" :key="answer"
-            :radioID="answer"
-            @click="chooseAnswer(answer)"
-            loaderColor="blue"
-            loaderPosition="right"
-            sizeInRem="1.5"
-            data-test="radio"
-            groupName="radio-list"
-            textPosition="text-start"
-            :value="modelValue"
-          />
+        <radio
+          v-for="answer in answers"
+          :key="answer"
+          :radioID="answer"
+          @click="chooseAnswer(answer)"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1.5"
+          data-test="radio"
+          groupName="radio-list"
+          textPosition="text-start"
+          :value="modelValue"
+        />
       </div>
     </div>
   </div>
@@ -31,12 +44,12 @@ export default {
   props: {
     questionText: String,
     answers: Array,
-    modelValue: String
+    modelValue: String,
   },
   methods: {
     chooseAnswer(answer) {
-      this.$emit('update:modelValue', answer);
-    }
+      this.$emit("update:modelValue", answer);
+    },
   },
   components: {
     radio,
diff --git a/src/common-components/site-header/site-header.spec.js b/src/common-components/site-header/site-header.spec.js
index f6d442931..2a471fe26 100644
--- a/src/common-components/site-header/site-header.spec.js
+++ b/src/common-components/site-header/site-header.spec.js
@@ -1,21 +1,19 @@
-import { shallowMount } from '@vue/test-utils';
-import siteHeader from './site-header';
+import { shallowMount } from "@vue/test-utils";
+import siteHeader from "./site-header";
 
-describe('siteHeader', () => {
+describe("siteHeader", () => {
+  test("renders the logo image", () => {
+    // Arrange
 
-    test('renders the logo image', () => {
-        // Arrange
-
-        // Act
-        const wrapper = shallowMount(siteHeader, {
-            propsData: {
-                imageSrc: "image_url",
-            },
-        });
-
-        // Assert
-        expect(wrapper.find('img')).toBeTruthy();
-        wrapper.unmount();
+    // Act
+    const wrapper = shallowMount(siteHeader, {
+      propsData: {
+        imageSrc: "image_url",
+      },
     });
 
+    // Assert
+    expect(wrapper.find("img")).toBeTruthy();
+    wrapper.unmount();
+  });
 });
diff --git a/src/common-components/site-header/site-header.vue b/src/common-components/site-header/site-header.vue
index 1d09726e9..441b188c4 100644
--- a/src/common-components/site-header/site-header.vue
+++ b/src/common-components/site-header/site-header.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="funnel-header d-flex justify-content-center align-items-center" v-if="imageSrc">
-    <img
-      class="logo-image img-fluid"
-      :src="imageSrc"
-      alt="Safelite logo"
-    />
+  <div
+    class="funnel-header d-flex justify-content-center align-items-center"
+    v-if="imageSrc"
+  >
+    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
   </div>
 </template>
 
@@ -14,17 +13,17 @@ export default {
   props: {
     imageSrc: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .funnel-header {
-    height: 56px;
-  }
-  .logo-image {
-    max-width: 78px;
-  }
-</style>
\ No newline at end of file
+.funnel-header {
+  height: 56px;
+}
+.logo-image {
+  max-width: 78px;
+}
+</style>
diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index aab2aa3e0..98bf90a5a 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -1,21 +1,19 @@
-import { shallowMount } from '@vue/test-utils';
-import vehicleBanner from './vehicle-banner';
+import { shallowMount } from "@vue/test-utils";
+import vehicleBanner from "./vehicle-banner";
 
-describe('vehicleBanner', () => {
+describe("vehicleBanner", () => {
+  test("renders the blurrycar image", () => {
+    // Arrange
 
-    test('renders the blurrycar image', () => {
-        // Arrange
-
-        // Act
-        const wrapper = shallowMount(vehicleBanner, {
-            propsData: {
-                vehicleImageSrc: "image_url",
-            },
-        });
-
-        // Assert
-        expect(wrapper.find('img').attributes('class')).toContain('blurrycar');
-        wrapper.unmount();
+    // Act
+    const wrapper = shallowMount(vehicleBanner, {
+      propsData: {
+        vehicleImageSrc: "image_url",
+      },
     });
 
+    // Assert
+    expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
+    wrapper.unmount();
+  });
 });
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index f259390ee..32caa82f8 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -14,14 +14,14 @@ export default {
   props: {
     vehicleImageSrc: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .vehicle-image {
-    max-width: 290px;
-  }
-</style>
\ No newline at end of file
+.vehicle-image {
+  max-width: 290px;
+}
+</style>
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index 6ade6cd1d..d9292b5f8 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -1,5 +1,5 @@
 const storeMutations = {
-    UPDATE_YEAR: "updateYear",
-}
+  UPDATE_YEAR: "updateYear",
+};
 
-export { storeMutations };
\ No newline at end of file
+export { storeMutations };
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index d6f4547c5..e0a12d8fe 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -3,22 +3,23 @@ import { widgetNames } from "@/constants/widget-names.js";
 import store from "@/store";
 
 export function fetchCmsContentForPage(fmgPage) {
-    return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
-        const pageDataFromCms = {};
+  return store
+    .dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage })
+    .then((response) => {
+      const pageDataFromCms = {};
 
-        response.data.Result.forEach((widget) => {
-            if (Object.values(widgetNames).includes(widget.Type)) {
-                // If we already have this widget, push it on the collection
-                if (widget.Type in pageDataFromCms) {
-                    pageDataFromCms[widget.Type].push(widget.Model);
-                    return;
-                }
+      response.data.Result.forEach((widget) => {
+        if (Object.values(widgetNames).includes(widget.Type)) {
+          // If we already have this widget, push it on the collection
+          if (widget.Type in pageDataFromCms) {
+            pageDataFromCms[widget.Type].push(widget.Model);
+            return;
+          }
 
-                pageDataFromCms[widget.Type] = [widget.Model];
-            }
-        });
+          pageDataFromCms[widget.Type] = [widget.Model];
+        }
+      });
 
-        return pageDataFromCms;
+      return pageDataFromCms;
     });
 }
-
diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index bb0edafcb..f019aa658 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -2,52 +2,52 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { dispatch } from "@/store";
 
 jest.mock("@/store", () => ({
-    dispatch: jest.fn()
+  dispatch: jest.fn(),
 }));
 
 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?",
+        },
+      },
+    ],
+  };
 
-    // 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 }));
-
-    // Act
-    fetchCmsContentForPage('testPage').then((response) => {
-        
-        // Assert
-        expect(response.isCmsContentReady).toBe(true);
-        expect(response.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
-    });
+  dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
 
+  // Act
+  fetchCmsContentForPage("testPage").then((response) => {
+    // Assert
+    expect(response.isCmsContentReady).toBe(true);
+    expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+      "Select a year to get started"
+    );
+  });
 });
-
diff --git a/src/helpers/layout-helper.js b/src/helpers/layout-helper.js
index d62d4d59f..10f331faf 100644
--- a/src/helpers/layout-helper.js
+++ b/src/helpers/layout-helper.js
@@ -1,29 +1,27 @@
 export function settleAllPromises(promiseResultMap) {
+  // Pull our keys out of the promise 'table'
+  const promiseNames = Object.entries(promiseResultMap);
 
-    // Pull our keys out of the promise 'table'
-    const promiseNames = Object.entries(promiseResultMap);
+  return Promise.allSettled(
+    promiseNames.map((e) => e[1]).map((n) => n.promise)
+  ).then((results) => {
+    const resultMap = {};
 
-    return Promise.allSettled(promiseNames.map(e => e[1]).map(n => n.promise))
-        .then(results => {
+    // Build a map of the results
+    for (let i = 0; i < results.length; ++i) {
+      const promiseName = promiseNames[i][1].resultKey;
 
-            const resultMap = {};
+      // Some Promises like the cms content call don't have a 'data' field
+      // when returned, so other promises do. Map the results to the object
+      // so that the object is the return data.
 
-            // Build a map of the results
-            for (let i = 0; i < results.length; ++i) {
-                
-                const promiseName = promiseNames[i][1].resultKey;
-                
-                // Some Promises like the cms content call don't have a 'data' field 
-                // when returned, so other promises do. Map the results to the object
-                // so that the object is the return data.
+      if (results[i].value.data === undefined) {
+        resultMap[promiseName] = results[i].value;
+      } else {
+        resultMap[promiseName] = results[i].value.data;
+      }
+    }
 
-                if (results[i].value.data === undefined) {
-                    resultMap[promiseName] = results[i].value
-                } else {
-                    resultMap[promiseName] = results[i].value.data;
-                }
-            }
-
-            return resultMap;
-        });
-}
\ No newline at end of file
+    return resultMap;
+  });
+}
diff --git a/src/helpers/layout-helper.spec.js b/src/helpers/layout-helper.spec.js
index f85667f64..d71810756 100644
--- a/src/helpers/layout-helper.spec.js
+++ b/src/helpers/layout-helper.spec.js
@@ -1,28 +1,25 @@
 import { settleAllPromises } from "@/helpers/layout-helper";
 
 it("layout-helper: Should settle all promises and return mapped promise results", () => {
+  // Arrange
+  const mockPromiseOne = Promise.resolve({ data: "test-data" });
+  const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
 
-    // Arrange
-    const mockPromiseOne = Promise.resolve({ data: "test-data" });
-    const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
+  const promiseResultMap = [
+    {
+      resultKey: "MockResultOne",
+      promise: mockPromiseOne,
+    },
+    {
+      resultKey: "MockResultTwo",
+      promise: mockPromiseTwo,
+    },
+  ];
 
-    const promiseResultMap = [
-        {
-            resultKey: "MockResultOne",
-            promise: mockPromiseOne,
-        },
-        {
-            resultKey: "MockResultTwo",
-            promise: mockPromiseTwo,
-        },
-    ];
-
-    // Act
-    settleAllPromises(promiseResultMap).then(results => {
-
-        // Assert
-        expect(results.MockResultOne).toEqual('test-data');
-        expect(results.MockResultTwo).toEqual('test-data-two');
-    });
-
-})
\ No newline at end of file
+  // Act
+  settleAllPromises(promiseResultMap).then((results) => {
+    // Assert
+    expect(results.MockResultOne).toEqual("test-data");
+    expect(results.MockResultTwo).toEqual("test-data-two");
+  });
+});
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 61614606a..f00d29231 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,245 +2,275 @@
   <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">Radio Card</h4>
       </div>
     </div>
     <div class="row g-2">
       <radioCard
-      radioLabel="Windshield"
-      radioImage="windshield-damage.svg"
-      altText="Windshield"
-      groupName="damageKey"
-      radioID="windshield"
+        radioLabel="Windshield"
+        radioImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        radioID="windshield"
       />
       <radioCard
-      radioLabel="Side Window"
-      radioImage="side-window-damage.svg"
-      altText="Side Window"
-      groupName="damageKey"
-      radioID="sidewindow"
+        radioLabel="Side Window"
+        radioImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        radioID="sidewindow"
       />
       <radioCard
-      radioLabel="Back Glass"
-      radioImage="back-glass-damage.svg"
-      altText="Back Glass"
-      groupName="damageKey"
-      radioID="backglass"
+        radioLabel="Back Glass"
+        radioImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        radioID="backglass"
       />
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
-        buttonText="Primary"
-        loaderColor="white"
-        sizeInRem="1"
+          buttonText="Primary"
+          loaderColor="white"
+          sizeInRem="1"
+          @click="onClick"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonSecondary
-        buttonText="Secondary"
-        loaderColor="white"
-        sizeInRem="1"
+          buttonText="Secondary"
+          loaderColor="white"
+          sizeInRem="1"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+        <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"
+          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>
+        <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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="visually-hidden" id="demo-1-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="demo-1-radio-group">
+          Select Vehicle Year
+        </h3>
         <radio
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        radioID="2021"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          radioID="2021"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        radioID="2020"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          radioID="2020"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        radioID="2019"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          radioID="2019"
+          textPosition="text-start"
+          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 - Multi-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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="visually-hidden" id="demo-2-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="demo-2-radio-group">
+          Select Vehicle Year
+        </h3>
         <radio
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        radioID="Chevrolet"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          radioID="Chevrolet"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        radioID="Dodge"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          radioID="Dodge"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        radioID="Ford"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          radioID="Ford"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          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 - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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="visually-hidden" id="demo-3-radio-group">Multi-Line Centered</h3>
+        <h3 class="visually-hidden" id="demo-3-radio-group">
+          Multi-Line Centered
+        </h3>
         <radio
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        radioID="Corvette"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          radioID="Corvette"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        radioID="Testarosa"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          radioID="Testarosa"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
         />
         <radio
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        radioID="S600"
-        radioLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          radioID="S600"
+          radioLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          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 Horizontal</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
       </div>
     </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio 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="visually-hidden" id="demo-4-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="demo-4-radio-group">
+          Select Vehicle Year
+        </h3>
         <radioHorizontal
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        radioID="1"
-        radioLabelSubCopy=""
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="1"
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          radioID="1"
+          radioLabelSubCopy=""
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
         />
         <radioHorizontal
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        radioID="2"
-        radioLabelSubCopy=""
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="2"
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          radioID="2"
+          radioLabelSubCopy=""
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
         />
         <radioHorizontal
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        radioID="3"
-        radioLabelSubCopy=""
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="3"
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          radioID="3"
+          radioLabelSubCopy=""
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
       </div>
     </div>
     <div class="row">
@@ -250,19 +280,23 @@
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <p>This is default body copy font size/weight</p>
-        <p class="small">This is small body copy using <code>.small</code> class</p>
-        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
+        <p class="small">
+          This is small body copy using <code>.small</code> class
+        </p>
+        <p>
+          <small>This is also small using <code>&lt;small&gt;</code> tag</small>
+        </p>
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
       </div>
     </div>
     <div class="row my-2">
@@ -297,119 +331,128 @@
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <alert
-        alertClass="alert-success"
-        alertHeadline="Dismissible Alert"
-        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-        v-bind:isDismissible = "true"
+          alertClass="alert-success"
+          alertHeadline="Dismissible Alert"
+          alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+          v-bind:isDismissible="true"
         />
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <alert
-        alertClass="alert-danger"
-        alertHeadline="NON-Dismissible Alert"
-        alertCopy="This is an example of a NON-DISMISSIBLE alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-        <div class="col">
-        <alert
-        alertClass="alert-warning"
-        alertHeadline="Warning Alert"
-        alertCopy="This is an example of a WARNING alert."
-        v-bind:isDismissible = "false"
+          alertClass="alert-danger"
+          alertHeadline="NON-Dismissible Alert"
+          alertCopy="This is an example of a NON-DISMISSIBLE alert."
+          v-bind:isDismissible="false"
         />
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <alert
-        alertClass="alert-info"
-        alertHeadline="Info Alert"
-        alertCopy="This is an example of a INFO alert."
-        v-bind:isDismissible = "false"
+          alertClass="alert-warning"
+          alertHeadline="Warning Alert"
+          alertCopy="This is an example of a WARNING alert."
+          v-bind:isDismissible="false"
         />
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <alert
-        alertClass="alert-danger"
-        alertHeadline="Danger Alert"
-        alertCopy="This is an example of a DANGER alert."
-        v-bind:isDismissible = "false"
+          alertClass="alert-info"
+          alertHeadline="Info Alert"
+          alertCopy="This is an example of a INFO alert."
+          v-bind:isDismissible="false"
         />
       </div>
     </div>
     <div class="row my-2">
       <div class="col">
         <alert
-        alertClass="alert-success"
-        alertHeadline="No Body Copy Alert"
-        alertCopy=""
-        v-bind:isDismissible = "false"
+          alertClass="alert-danger"
+          alertHeadline="Danger Alert"
+          alertCopy="This is an example of a DANGER alert."
+          v-bind:isDismissible="false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+          alertClass="alert-success"
+          alertHeadline="No Body Copy Alert"
+          alertCopy=""
+          v-bind:isDismissible="false"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
       </div>
     </div>
     <div class="row my-3">
       <div class="col">
-        <siteHeader imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3" />
+        <siteHeader
+          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
+        />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
       </div>
     </div>
     <div class="row my-3">
       <div class="col">
-        <vehicleBanner vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3" />
+        <vehicleBanner
+          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import buttonPrimary from "@/ux-components/button-primary/button-primary";
-  import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-  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";
-  import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
-  export default {
-    name: "App",
-    components: {
-      buttonPrimary,
-      buttonSecondary,
-      radioCard,
-      listButton,
-      radio,
-      alert,
-      vehicleBanner,
-      radioHorizontal,
-      siteHeader,
+import buttonPrimary from "@/ux-components/button-primary/button-primary";
+import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+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";
+import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
+export default {
+  name: "App",
+  components: {
+    buttonPrimary,
+    buttonSecondary,
+    radioCard,
+    listButton,
+    radio,
+    alert,
+    vehicleBanner,
+    radioHorizontal,
+    siteHeader,
+  },
+  data() {
+    return {
+      years: [2023, 2022, 2021, 2020],
+    };
+  },
+  methods: {
+    onClick() {
+      this.$router.navigate("SELECTED_YEAR", this.$route);
     },
-    data() {
-      return {
-        years: [2023, 2022, 2021, 2020],
-      };
-    }
-  };
+  },
+};
 </script>
diff --git a/src/layouts/loader-demo/loader-demo.vue b/src/layouts/loader-demo/loader-demo.vue
index 4c19c4d21..0407f4fd4 100644
--- a/src/layouts/loader-demo/loader-demo.vue
+++ b/src/layouts/loader-demo/loader-demo.vue
@@ -7,11 +7,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <loader
-        sizeInRem="10"
-        loaderColor="blue"
-        loaderPosition="center"
-        />
+        <loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
       </div>
     </div>
   </div>
@@ -22,7 +18,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "App",
   components: {
-    loader
-  }
+    loader,
+  },
 };
 </script>
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index 8190957e7..06cc0339b 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -2,16 +2,15 @@ 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 { settleAllPromises } from "@/helpers/layout-helper.js";
-import { nextTick } from 'vue'
+import { nextTick } from "vue";
 
 // Mock our module for promises.
-jest.mock("@/helpers/layout-helper.js", () => ({ 
-  settleAllPromises: jest.fn()
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
 }));
 
 describe("vehicle-year.vue", () => {
   test("vehicle-year.vue should render data from CMS", async () => {
-
     // Arrange
 
     // Our mock data for our call to settleAllPromises
@@ -19,31 +18,43 @@ describe("vehicle-year.vue", () => {
       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" }],
+        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
+        year: null,
       },
       router: {
-          push: jest.fn()
-      }
-    }
+        push: jest.fn(),
+      },
+    };
 
     // our router information needed.
     const to = {
       query: {
-        fmgPage: 'vehicle-year'
-      }
+        fmgPage: "vehicle-year",
+      },
     };
 
     const mountOptions = getMountOptions(mockData);
 
     // our mock implementation of settleAllPromises
-    settleAllPromises.mockImplementation(() => { return Promise.resolve(mockData);});
+    settleAllPromises.mockImplementation(() => {
+      return Promise.resolve(mockData);
+    });
 
     // Act
     const wrapper = shallowMount(vehicleYear, mountOptions);
@@ -52,7 +63,9 @@ describe("vehicle-year.vue", () => {
     // 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));
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
+      c(wrapper.vm)
+    );
 
     await nextTick(); // Wait for the DOM to update.
 
@@ -60,7 +73,9 @@ describe("vehicle-year.vue", () => {
     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?");
+    const yearQuestion = wrapper.findComponent({ name: "year-question" });
+    expect(yearQuestion.attributes("questiontext")).toEqual(
+      "What year is your vehicle?"
+    );
   });
 });
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 6681ea3d6..6a4c6c169 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -2,9 +2,15 @@
   <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
   <div class="select-car">
     <div class="select-car-form rounded text-center">
-      <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+      <vehicleBanner
+        :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage"
+      />
       <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+      <yearQuestion
+        :questionText="radioQuestionWidgets.QuestionText"
+        :years="vehicleYears"
+        v-model="selectedYear"
+      />
     </div>
   </div>
 </template>
@@ -29,16 +35,18 @@ export default {
       vehicleYears: [],
       siteHeaderWidget: {},
       vehicleBannerWidget: {},
-      selectedYear: null
+      selectedYear: null,
     };
   },
   computed: {},
 
   beforeRouteEnter(to, from, next) {
-
     // Call APIs
     const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
+    const getVehicleYearPromise = store.dispatch(
+      storeActions.GET_VEHICLE_YEARS,
+      {}
+    );
 
     // Settle promises and get results
     const promiseResultMap = [
@@ -52,13 +60,14 @@ export default {
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
-
       // 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.radioQuestionWidgets =
+          resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.vehicleBannerWidget =
+          resultMap.getPageContent.VehicleBannerWidget[0];
         vm.vehicleYears = resultMap.getVehicleYear;
       });
     });
@@ -66,9 +75,9 @@ export default {
 
   watch: {
     selectedYear(year) {
-        this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-        this.$router.push('?fmgPage=vehicle-make');
-    }
+      this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
+      this.$router.push("?fmgPage=vehicle-make");
+    },
   },
 
   components: {
@@ -81,15 +90,15 @@ export default {
 </script>
 
 <style lang="scss">
-    .select-car {
-        height: calc(100vh - 56px);
-        padding: 0 1.5rem;
+.select-car {
+  height: calc(100vh - 56px);
+  padding: 0 1.5rem;
 
-        .car_list {
-            // Height will be determined by overall height of content above list
-            height: calc(100% - 300px);
-            padding: 0 1.5rem;
-            -webkit-overflow-scrolling: touch;
-        }
-    }
+  .car_list {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 300px);
+    padding: 0 1.5rem;
+    -webkit-overflow-scrolling: touch;
+  }
+}
 </style>
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 5e2ffeca7..a51d25810 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -1,21 +1,25 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { shallowMount } from "@vue/test-utils";
 
-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);
-
-        // 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");
+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",
     });
-});
\ No newline at end of file
+    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
+
+    // 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");
+  });
+});
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 4c5bb8d30..b3d2f8279 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,33 +1,34 @@
 <template>
-<radioQuestion class="radioQuestion" 
-    :questionText="questionText" 
+  <radioQuestion
+    class="radioQuestion"
+    :questionText="questionText"
     :answers="years"
     v-model="selectedYear"
- />
+  />
 </template>
 
 <script>
 import radioQuestion from "@/common-components/radio-question/radio-question";
 
 export default {
-    name: "year-question",
-    data(){
-        return {
-            selectedYear: null
-        }
+  name: "year-question",
+  data() {
+    return {
+      selectedYear: null,
+    };
+  },
+  props: {
+    questionText: String,
+    years: Array,
+    modelValue: String,
+  },
+  components: {
+    radioQuestion,
+  },
+  watch: {
+    selectedYear(val) {
+      this.$emit("update:modelValue", val);
     },
-    props: {
-        questionText: String,
-        years: Array, 
-        modelValue: String
-    },
-    components: {
-        radioQuestion,
-    },
-    watch: {
-        selectedYear(val) {
-            this.$emit('update:modelValue', val)
-        }
-    }
+  },
 };
 </script>
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index eb6142910..afe618125 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -3,10 +3,9 @@ import { storeMutations } from "@/constants/store-mutations.js";
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
-  data(){
+  data() {
     return {
-      isCmsContentReady: false
-    }
+    };
   },
   methods: {
     // dispatchBlockingStoreAction(type, payload) {
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index e3acbcbb7..b10a9bbb3 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -1,54 +1,53 @@
-import baseMixin from "@/mixins/base-mixin"
+import baseMixin from "@/mixins/base-mixin";
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
 
 describe("baseMixin.js", () => {
-    test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => {
-        const mixIn = getMixInInstance({});
-        const type = {};
-        const payload = {};
+  test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
+    const mixIn = getMixInInstance({});
+    const type = {};
+    const payload = {};
 
-        mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
+    mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
 
-        expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
-    });
+    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+  });
 
-    test('dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode', () => {
-        const mixIn = getMixInInstance({});
-        const type = {};
-        const payload = { make: 'Alfa Romeo/Chrysler' };
+  test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
+    const mixIn = getMixInInstance({});
+    const type = {};
+    const payload = { make: "Alfa Romeo/Chrysler" };
 
-        mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
+    mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
 
-        expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
-    });
-})
+    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+  });
+});
 function getMixInInstance({ isDispatchSuccess = true }) {
+  // Mock Store
+  const store = {
+    dispatch: jest.fn(),
+  };
 
-    // Mock Store
-    const store = {
-        dispatch: jest.fn()
-    }
+  if (isDispatchSuccess) {
+    store.dispatch.mockReturnValue(Promise.resolve());
+  } else {
+    store.dispatch.mockReturnValue(Promise.reject());
+  }
 
-    if (isDispatchSuccess) {
-        store.dispatch.mockReturnValue(Promise.resolve())
-    } else {
-        store.dispatch.mockReturnValue(Promise.reject())
-    }
+  // Mock Route
+  const route = {
+    query: {
+      fmgPage: "test-page",
+    },
+  };
 
-    // Mock Route
-    const route = {
-        query: {
-            fmgPage: 'test-page'
-        }
-    };
+  // Attach mocks to mixin
+  const baseMixIn = baseMixin;
+  baseMixIn.methods.$route = route;
+  baseMixIn.methods.$store = store;
+  baseMixIn.methods.storeActions = storeActions;
+  baseMixIn.methods.widgetNames = widgetNames;
 
-    // Attach mocks to mixin
-    const baseMixIn = baseMixin;
-    baseMixIn.methods.$route = route;
-    baseMixIn.methods.$store = store;
-    baseMixIn.methods.storeActions = storeActions;
-    baseMixIn.methods.widgetNames = widgetNames;
-
-    return baseMixIn;
-}
\ No newline at end of file
+  return baseMixIn;
+}
diff --git a/src/router/index.js b/src/router/index.js
index 24854555b..a93fe6e54 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -66,18 +66,20 @@ const routes = [
   },
 ];
 
-
 const router = createRouter({
   history: createWebHistory("/fmg/"),
   routes,
 });
 
-
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
 // Navigate to the next route, depending on the scenario.
-router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
-
+router.navigate = (
+  scenario,
+  currentRoute,
+  optionalQuery = {},
+  optionalParams = {}
+) => {
   if (!scenario) {
     console.error("No scenario provided. Please review the routing table.");
     return;
@@ -88,21 +90,31 @@ router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams =
 
   if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
-    router.push({ path: '/', query: Object.assign(optionalQuery, { fmgPage: matchingScenarioMap.destinationFmgPageValue }), params: optionalParams });
+    router.push({
+      path: "/",
+      query: Object.assign(optionalQuery, {
+        fmgPage: matchingScenarioMap.destinationFmgPageValue,
+      }),
+      params: optionalParams,
+    });
   } else if (matchingScenarioMap.destinationUrl !== undefined) {
     navigateToUrl(matchingScenarioMap.destinationUrl);
   }
-
-}
+};
 
 // Get navigation map depeding on the scenario and the current 'page' you're on.
 router.getNavigationMap = (scenario, currentRoute) => {
-
   const fmgPageValue = currentRoute.query.fmgPage;
-  const matchedQueryValue = routingTable.filter(item => (item.fmgPageValue === fmgPageValue) && item.maps.filter(map => map.scenario === scenario).length > 0).map(m => m.maps.filter(map => map.scenario === scenario));
+  const matchedQueryValue = routingTable
+    .filter(
+      (item) =>
+        item.fmgPageValue === fmgPageValue &&
+        item.maps.filter((map) => map.scenario === scenario).length > 0
+    )
+    .map((m) => m.maps.filter((map) => map.scenario === scenario));
 
   return matchedQueryValue[0][0];
-}
+};
 
 //---------------------------------------------------------- Private Functions ----------------------------------------------------------
 
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index ee3031bff..e84d9e9ea 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -1,6 +1,6 @@
 const fmgPageValues = {
-    VEHICLE_YEAR: 'vehicle-year',
-    VEHICLE_MAKE: 'vehicle-make',
+  VEHICLE_YEAR: "vehicle-year",
+  VEHICLE_MAKE: "vehicle-make",
 };
 
-export { fmgPageValues };
\ No newline at end of file
+export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 5db881eef..3fc642d65 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -1,5 +1,5 @@
-const navigationScenarios = { 
-    SELECTED_YEAR: 'SELECTED_YEAR',
+const navigationScenarios = {
+  SELECTED_YEAR: "SELECTED_YEAR",
 };
 
-export { navigationScenarios } ;
\ No newline at end of file
+export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 584161f43..7f3f3d0d1 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -1,14 +1,16 @@
-import { fmgPageValues } from '@/router/router-constants/fmgPage-values';
-import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 const routingTable = [
-    {
-        fmgPageValue: fmgPageValues.VEHICLE_YEAR,
-        maps: [
-            { scenario: navigationScenarios.SELECTED_YEAR, destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE }
-        ]
-    },
- 
-]
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_YEAR,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_YEAR,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+      },
+    ],
+  },
+];
 
-export { routingTable };
\ No newline at end of file
+export { routingTable };
diff --git a/src/store/index.js b/src/store/index.js
index ec8dfa4e3..036694868 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -32,7 +32,7 @@ export default createStore({
           zipCode: null,
           firstName: null,
           lastName: null,
-          licensePlate: null
+          licensePlate: null,
         },
         damage: {
           isRepair: null,
@@ -52,16 +52,16 @@ export default createStore({
           isCash: null,
         },
         referralSeqNum: null,
-      }
+      },
     },
     applicationUser: {
       experiments: null,
-    }
+    },
   },
   // See IMPORTANT note at top of "state" declaration.
 
   mutations: {
-    updateYear(state, year){
+    updateYear(state, year) {
       state.order.vehicle.year = year;
     },
   },
@@ -86,7 +86,7 @@ export default createStore({
         method: endpoints.LookupVehicleByVin.method,
         endpoint: endpoints.LookupVehicleByVin.url,
         payload: {
-          "vin": vin  // EX "1J4GW58S4XC541166"
+          vin: vin, // EX "1J4GW58S4XC541166"
         },
       });
     },
@@ -135,6 +135,6 @@ export default createStore({
         endpoint: relativeUrl,
         payload: {},
       });
-    }
+    },
   },
 });
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 6f69b1a92..76acc0dbf 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -1,121 +1,131 @@
-import store from './index'
-import globalMethods from '@/global-methods'
+import store from "./index";
+import globalMethods from "@/global-methods";
 
 describe("Actions", () => {
-    it("Should return list of years retrieved", async () => {
-        // Arrange
-        let years = [];
+  it("Should return list of years retrieved", async () => {
+    // Arrange
+    let years = [];
 
-        // Act
-        globalMethods.callHttpClient = jest.fn();
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: [2023,2022,2021]});
-        });
-        await store.dispatch('getVehicleYears')
-        .then( (response) => {
-            years = response.data;
-        });
-
-        // Assert
-        expect(years[0]).toBe(2023);
+    // Act
+    globalMethods.callHttpClient = jest.fn();
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: [2023, 2022, 2021] });
+    });
+    await store.dispatch("getVehicleYears").then((response) => {
+      years = response.data;
     });
 
-    it("Should return list of makes retrieved", async () => {
-        // Arrange
-        let makes = [];
+    // Assert
+    expect(years[0]).toBe(2023);
+  });
 
-        // Act
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: ['Baic','Honda','Ford']});
-        });
-        await store.dispatch('getVehicleMakes', {year: 2023})
-        .then( (response) => {
-            makes = response.data;
-        });
+  it("Should return list of makes retrieved", async () => {
+    // Arrange
+    let makes = [];
 
-        // Assert
-        expect(makes[0]).toBe('Baic');
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: ["Baic", "Honda", "Ford"] });
+    });
+    await store.dispatch("getVehicleMakes", { year: 2023 }).then((response) => {
+      makes = response.data;
     });
 
-    it("Should return list of models retrieved", async () => {
-        // Arrange
-        let models = [];
+    // Assert
+    expect(makes[0]).toBe("Baic");
+  });
 
-        // Act
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: ['BJ40 (MEX)','Civic','Accord']});
-        });
-        await store.dispatch('getVehicleModels', {year: 2023, make: 'Baic'})
-        .then( (response) => {
-            models = response.data;
-        });
+  it("Should return list of models retrieved", async () => {
+    // Arrange
+    let models = [];
 
-        // Assert
-        expect(models[0]).toBe('BJ40 (MEX)');
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: ["BJ40 (MEX)", "Civic", "Accord"] });
     });
+    await store
+      .dispatch("getVehicleModels", { year: 2023, make: "Baic" })
+      .then((response) => {
+        models = response.data;
+      });
 
-    it("Should return list of styles retrieved", async () => {
-        // Arrange
-        let styles = [];
+    // Assert
+    expect(models[0]).toBe("BJ40 (MEX)");
+  });
 
-        // Act
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: ['4 DOOR UTILITY','2 DOOR']});
-        });
-        await store.dispatch('getVehicleStyles', {year: 2023, make: 'Baic', model: 'BJ40 (MEX)'})
-        .then( (response) => {
-            styles = response.data;
-        });
+  it("Should return list of styles retrieved", async () => {
+    // Arrange
+    let styles = [];
 
-        // Assert
-        expect(styles[0]).toBe('4 DOOR UTILITY');
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({ data: ["4 DOOR UTILITY", "2 DOOR"] });
     });
+    await store
+      .dispatch("getVehicleStyles", {
+        year: 2023,
+        make: "Baic",
+        model: "BJ40 (MEX)",
+      })
+      .then((response) => {
+        styles = response.data;
+      });
 
-    it("Should return  data from url retrieved", async () => {
-        // Arrange
-        let routeInfo = [];
+    // Assert
+    expect(styles[0]).toBe("4 DOOR UTILITY");
+  });
 
-        // Act
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: {
-                Result: 'Route Info Data'
-            }});
-        });
-        await store.dispatch('getRouteInfo', { pageName: 'vehicle-year' })
-        .then( (response) => {
-            routeInfo = response.data.Result;
-        });
+  it("Should return  data from url retrieved", async () => {
+    // Arrange
+    let routeInfo = [];
 
-        // Assert
-        expect(routeInfo).toBe('Route Info Data');
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "Route Info Data",
+        },
+      });
     });
+    await store
+      .dispatch("getRouteInfo", { pageName: "vehicle-year" })
+      .then((response) => {
+        routeInfo = response.data.Result;
+      });
 
-    it("Should return page data from url retrieved", async () => {
-        // Arrange
-        let pageData = [];
+    // Assert
+    expect(routeInfo).toBe("Route Info Data");
+  });
 
-        // Act
-        globalMethods.callHttpClient.mockImplementation(() => {
-            return Promise.resolve({ data: {
-                Result: 'Page Info Data'
-            }});
-        });
-        await store.dispatch('getPageData', { pageName: 'vehicle-year' })
-        .then( (response) => {
-            pageData = response.data.Result;
-        });
+  it("Should return page data from url retrieved", async () => {
+    // Arrange
+    let pageData = [];
 
-        // Assert
-        expect(pageData).toBe('Page Info Data');
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "Page Info Data",
+        },
+      });
     });
-})
+    await store
+      .dispatch("getPageData", { pageName: "vehicle-year" })
+      .then((response) => {
+        pageData = response.data.Result;
+      });
+
+    // Assert
+    expect(pageData).toBe("Page Info Data");
+  });
+});
 
 describe("Mutations", () => {
-    it("Should update the year property in the store", () => {
-        // Act
-        store.commit('updateYear', 2020);
+  it("Should update the year property in the store", () => {
+    // Act
+    store.commit("updateYear", 2020);
 
-        // Assert
-        expect(store.state.order.vehicle.year).toBe(2020);
-    });
-});
\ No newline at end of file
+    // Assert
+    expect(store.state.order.vehicle.year).toBe(2020);
+  });
+});
diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js
index 882a68129..3d0843e10 100644
--- a/src/ux-components/alert/alert.spec.js
+++ b/src/ux-components/alert/alert.spec.js
@@ -1 +1 @@
-test.todo('some test to be written in the future');
\ No newline at end of file
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index 7358073df..89bd366a3 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -1,12 +1,25 @@
 <template>
-  <div class="alert fade show text-center mb-0 py-2 px-3" role="alert"
-    :class="[ isDismissible ? 'alert-dismissible' : '', this.alertClass ]"
+  <div
+    class="alert fade show text-center mb-0 py-2 px-3"
+    role="alert"
+    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
+  >
+    <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
+    <p class="m-0 text-body small">{{ alertCopy }}</p>
+    <button
+      type="button"
+      class="btn-close p-2"
+      data-bs-dismiss="alert"
+      aria-label="Close"
     >
-    <p class="m-0 fw-bold small alert-heading">{{alertHeadline}}</p>
-    <p class="m-0 text-body small">{{alertCopy}}</p>
-    <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
-        <path d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"/>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 23.7 23.7"
+        xml:space="preserve"
+      >
+        <path
+          d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"
+        />
       </svg>
     </button>
   </div>
@@ -26,8 +39,8 @@ export default {
     alert-warning (yellow)
     alert-info (blue)
     */
-    alertClass: String
-  }
+    alertClass: String,
+  },
 };
 </script>
 
@@ -39,8 +52,8 @@ export default {
   .btn-close {
     background: none;
     opacity: 1;
-    width: .75rem;
-    height: .75rem;
+    width: 0.75rem;
+    height: 0.75rem;
   }
   &.alert-dismissible {
     button {
diff --git a/src/ux-components/button-primary/button-primary.vue b/src/ux-components/button-primary/button-primary.vue
index e2aaea4b3..ca0cc8505 100644
--- a/src/ux-components/button-primary/button-primary.vue
+++ b/src/ux-components/button-primary/button-primary.vue
@@ -3,14 +3,14 @@
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
     class="btn btn-primary d-flex align-items-center py-3 px-4"
-    @click='displayComponent'
-    >
+    @click="displayComponent"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
-    class="ms-2"
-    v-if="display"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
+      class="ms-2"
+      v-if="display"
+      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
 </template>
@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String]
+    sizeInRem: [Number, String],
   },
   data() {
     return {
diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue
index f6dd62631..ec4d7ec0c 100644
--- a/src/ux-components/button-secondary/button-secondary.vue
+++ b/src/ux-components/button-secondary/button-secondary.vue
@@ -3,14 +3,14 @@
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
     class="btn btn-secondary d-flex align-items-center py-3 px-4"
-    @click='displayComponent'
-    >
+    @click="displayComponent"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
-    class="ms-2"
-    v-if="display"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
+      class="ms-2"
+      v-if="display"
+      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
 </template>
@@ -24,7 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String]
+    sizeInRem: [Number, String],
   },
   data() {
     return {
diff --git a/src/ux-components/header/header.vue b/src/ux-components/header/header.vue
index 0749c0462..95e1e89a6 100644
--- a/src/ux-components/header/header.vue
+++ b/src/ux-components/header/header.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="current_car_info-text">
     <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">{{ text }}</h2>
+      <h2 class="text-center text-dark fs-5 d-block fw-normal mb-0">
+        {{ text }}
+      </h2>
     </div>
   </div>
 </template>
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 303ccdf2a..52997d5d6 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,21 +1,27 @@
 <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' : '',
-    ]"
+      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>
+      <span class="m-0">{{ this.buttonText }}</span>
+      <loader
+        v-if="display"
+        v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+        v-bind:class="[this.loaderColor, this.loaderPosition]"
+      />
+    </button>
+    <label class="small mt-1">{{ this.errorText }}</label>
+  </div>
 </template>
 
 <script>
@@ -27,12 +33,12 @@ export default {
     errorText: String,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String]
+    sizeInRem: [Number, String],
   },
   data() {
     return {
       display: false,
-      isError: false
+      isError: false,
     };
   },
   methods: {
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 66ac9bc85..7190f656d 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="loader"
-  v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-  v-bind:class="[this.loaderColor, this.loaderPosition]"
+  <div
+    class="loader"
+    v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+    v-bind:class="[this.loaderColor, this.loaderPosition]"
   ></div>
 </template>
 
@@ -12,18 +13,18 @@ export default {
   props: {
     sizeInRem: {
       type: Number,
-      default: 1
+      default: 1,
     },
     /* Color options: red, green, blue, white, black */
     loaderColor: {
-      type: String
+      type: String,
     },
     /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
     loaderPosition: {
-      type: String
-    }
+      type: String,
+    },
   },
-}
+};
 </script>
 
 <style lang="scss">
@@ -31,7 +32,7 @@ export default {
   display: flex;
   //Open an overlay to prevent page interaction
   &:before {
-    content: '';
+    content: "";
     position: fixed;
     top: 0;
     bottom: 0;
@@ -43,7 +44,7 @@ export default {
   }
   //Spinner basics
   &:after {
-    content: '';
+    content: "";
     mask: url(../../assets/img/icons/spinner.svg);
     mask-size: cover;
     position: relative;
@@ -52,7 +53,7 @@ export default {
     animation: rotation 1s infinite linear;
     @keyframes rotation {
       100% {
-        transform:rotate(360deg);
+        transform: rotate(360deg);
       }
     }
   }
@@ -70,7 +71,8 @@ export default {
     left: 1rem;
   }
   //Spinner color
-  &:after { //Default spinner color (blue) if no other color is specified from the options below
+  &:after {
+    //Default spinner color (blue) if no other color is specified from the options below
     background-color: $blue;
   }
   &.red:after {
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.spec.js b/src/ux-components/radio-horizontal/radio-horizontal.spec.js
index 0a926c912..c12eedefa 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.spec.js
+++ b/src/ux-components/radio-horizontal/radio-horizontal.spec.js
@@ -11,7 +11,7 @@ describe("radio.vue", () => {
         loaderColor: "blue",
         loaderPosition: "right",
         sizeInRem: "1.5",
-        errorMessage: 'null'
+        errorMessage: "null",
       },
     });
 
@@ -20,14 +20,14 @@ describe("radio.vue", () => {
     const label = wrapper.find("label");
     const paragraph = wrapper.find("span");
 
-    await label.trigger('click');
+    await label.trigger("click");
 
     expect(input.attributes()).toEqual({
       id: "2023",
       type: "radio",
       value: "2023",
       name: "TestGroup",
-      "aria-required": "true"
+      "aria-required": "true",
     });
 
     expect(label.attributes()).toEqual({
@@ -35,14 +35,13 @@ describe("radio.vue", () => {
       tabindex: "-1",
       for: "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
-      "aria-checked": "false"
+      "aria-checked": "false",
     });
 
-    expect(label.text()).toEqual('2023');
+    expect(label.text()).toEqual("2023");
 
-    expect(paragraph.text()).toEqual('2023');
+    expect(paragraph.text()).toEqual("2023");
 
     expect(wrapper.vm.display).toBe(true);
-
   });
 });
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index aeed345d6..26f716ea0 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -8,13 +8,34 @@
 <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">
-    <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>
-      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+    <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>
+      <loader
+        v-if="display"
+        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+        :class="[this.loaderColor, this.loaderPosition]"
+      />
     </label>
-    <p class="small">{{errorMessage}}</p>
+    <p class="small">{{ errorMessage }}</p>
   </div>
 </template>
 
@@ -23,42 +44,52 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioHorizontal",
   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 */
-    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 */
+    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 */,
+    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 */,
   },
   data() {
     return {
       isError: false,
-      display: false
+      display: false,
     };
   },
   methods: {
     displayComponent() {
       this.display = true;
-    }
+    },
   },
   components: {
     loader,
   },
   computed: {
     isFirstOrLastButton() {
-      let className = '';
-      if(this.positionInGroup == this.totalInGroup) {
-        className = 'last-item'
-      } else if(this.positionInGroup == 1) {
-          className = 'first-item'
+      let className = "";
+      if (this.positionInGroup == this.totalInGroup) {
+        className = "last-item";
+      } else if (this.positionInGroup == 1) {
+        className = "first-item";
       }
       return className;
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -103,12 +134,12 @@ export default {
       }
     }
     &.first-item {
-      border-bottom-left-radius: .5rem;
-      border-top-left-radius: .5rem;
+      border-bottom-left-radius: 0.5rem;
+      border-top-left-radius: 0.5rem;
     }
     &.last-item {
-      border-bottom-right-radius: .5rem;
-      border-top-right-radius: .5rem;
+      border-bottom-right-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
     }
   }
 }
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index 31aea38c1..c1b726dca 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/src/ux-components/radio/radio.spec.js
@@ -11,7 +11,7 @@ describe("radio.vue", () => {
         loaderColor: "blue",
         loaderPosition: "right",
         sizeInRem: "1.5",
-        errorMessage: 'null'
+        errorMessage: "null",
       },
     });
 
@@ -20,14 +20,14 @@ describe("radio.vue", () => {
     const label = wrapper.find("label");
     const paragraph = wrapper.find("span");
 
-    await label.trigger('click');
+    await label.trigger("click");
 
     expect(input.attributes()).toEqual({
       id: "2023",
       type: "radio",
       value: "2023",
       name: "TestGroup",
-      "aria-required": "true"
+      "aria-required": "true",
     });
 
     expect(label.attributes()).toEqual({
@@ -35,14 +35,13 @@ describe("radio.vue", () => {
       tabindex: "-1",
       for: "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4",
-      "aria-checked": "false"
+      "aria-checked": "false",
     });
 
-    expect(label.text()).toEqual('2023');
+    expect(label.text()).toEqual("2023");
 
-    expect(paragraph.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
index 2af1d9e38..fbc7396b0 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -7,14 +7,34 @@
   <!-- Example -->
   <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
-  <p class="small">{{errorMessage}}</p>
-</div>
+    <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"
+      @click="displayComponent"
+    >
+      <span class="m-0" :class="[this.textPosition]">{{ radioID }}</span>
+      <span class="m-0 small" :class="[this.textPosition]">{{
+        radioLabelSubCopy
+      }}</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>
@@ -22,19 +42,27 @@ 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> */
-    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)) */
+    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 */,
+    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
+      display: false,
     };
   },
   methods: {

From 50b02395daeabd2078a1dfc78756cbe22f8b296e Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 8 Dec 2021 21:07:34 -0500
Subject: [PATCH 06/19] unit test update

---
 src/helpers/cms-helper.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index f019aa658..e9bd66653 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -45,7 +45,6 @@ it("cms-content-helper: Should return data from CMS", () => {
   // Act
   fetchCmsContentForPage("testPage").then((response) => {
     // Assert
-    expect(response.isCmsContentReady).toBe(true);
     expect(response.PageHeaderWidget[0].HeaderText).toEqual(
       "Select a year to get started"
     );

From 2c7b8359c986ae443b41f1cc4f60b7377a8c8cd3 Mon Sep 17 00:00:00 2001
From: Frank <frank.rua@safelite.com>
Date: Wed, 8 Dec 2021 21:17:13 -0500
Subject: [PATCH 07/19] remove testing things

---
 src/layouts/component-test/component-test.vue | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f00d29231..8396ddd0a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -38,16 +38,6 @@
         <buttonPrimary buttonText="Primary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-          buttonText="Primary"
-          loaderColor="white"
-          sizeInRem="1"
-          @click="onClick"
-        />
-      </div>
-    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonSecondary
@@ -449,10 +439,5 @@ export default {
       years: [2023, 2022, 2021, 2020],
     };
   },
-  methods: {
-    onClick() {
-      this.$router.navigate("SELECTED_YEAR", this.$route);
-    },
-  },
 };
 </script>

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

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

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

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

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

diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/radio-horizontal/radio-horizontal.vue
index 5cd533e2a..2034ab1dd 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/src/ux-components/radio-horizontal/radio-horizontal.vue
@@ -1,10 +1,4 @@
 <!-- See the component-test.vue page for example implementation -->
-<!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-<!-- Example: -->
-<!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-<!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-<!-- Example -->
-<!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
   <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 516a51585..c7dbaf1e6 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,11 +1,5 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-  <!-- Example: -->
-  <!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-  <!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-  <!-- Example -->
-  <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
     <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
     <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/src/common-components/radio-question/radio-question.vue b/src/common-components/radio-question/radio-question.vue
index bdb15c7d5..36f130e9f 100644
--- a/src/common-components/radio-question/radio-question.vue
+++ b/src/common-components/radio-question/radio-question.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-5 mb-4 d-flex">
+    <div class="needed_car_info mt-6 mb-4 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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