From b92c425fb45e7f9332e62d915f8ad8328e49c5ab Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Fri, 28 Jan 2022 10:22:33 -0500
Subject: [PATCH] Linter

---
 jest.config.js                                |    2 +-
 src/App.vue                                   |   10 +-
 .../button-back/button-back.spec.js           |    4 +-
 .../button-back/button-back.vue               |   35 +-
 .../button-question/button-question.spec.js   |    4 +-
 .../button-question/button-question.vue       |  104 +-
 .../funnel-header/funnel-header.spec.js       |    4 +-
 .../funnel-header/funnel-header.vue           |   91 +-
 .../funnel-sub-header.spec.js                 |    6 +-
 .../funnel-sub-header/funnel-sub-header.vue   |   34 +-
 .../text-input/text-input.spec.js             |    7 +-
 .../text-input/text-input.vue                 |   20 +-
 .../vehicle-banner/vehicle-banner.spec.js     |    6 +-
 .../vehicle-banner/vehicle-banner.vue         |    6 +-
 src/constants/events.js                       |   26 +-
 src/helpers/cms-content-helper.js             |   53 +-
 src/helpers/cms-helper.spec.js                |   52 +-
 src/helpers/event-bus/event-bus.js            |   39 +-
 src/helpers/event-bus/event-bus.spec.js       |   83 +-
 src/layouts/address-poc/address-poc.vue       |   57 +-
 src/layouts/component-test/component-test.vue | 1168 +++++++++--------
 src/layouts/form-test/form-test.vue           |  426 +++---
 .../vehicle-damage/vehicle-damage.spec.js     |   94 +-
 .../make-question/make-question.spec.js       |   55 +-
 .../make-question/make-question.vue           |   14 +-
 src/layouts/vehicle-make/vehicle-make.spec.js |  121 +-
 .../model-question/model-question.spec.js     |   61 +-
 .../model-question/model-question.vue         |   14 +-
 .../vehicle-model/vehicle-model.spec.js       |  112 +-
 .../style-question/style-question.spec.js     |   57 +-
 .../style-question/style-question.vue         |   18 +-
 .../vehicle-style/vehicle-style.spec.js       |  168 ++-
 src/layouts/vehicle-year/vehicle-year.spec.js |  105 +-
 .../year-question/year-question.spec.js       |   53 +-
 .../year-question/year-question.vue           |   16 +-
 src/main.js                                   |    1 -
 src/mixins/base-mixin.js                      |    3 +-
 src/mixins/base-mixin.spec.js                 |    8 +-
 src/router/index.js                           |   34 +-
 src/router/router-constants/routing-table.js  |    8 +-
 src/store/index.js                            |   49 +-
 src/store/store.spec.js                       |   67 +-
 .../button-main/button-main.spec.js           |   25 +-
 src/ux-components/button-main/button-main.vue |   38 +-
 src/ux-components/checkbox/checkbox.spec.js   |   17 +-
 src/ux-components/checkbox/checkbox.vue       |   25 +-
 .../list-button-horizontal.spec.js            |   34 +-
 .../list-button-horizontal.vue                |   66 +-
 .../list-button/list-button.spec.js           |   34 +-
 src/ux-components/list-button/list-button.vue |   69 +-
 src/ux-components/list-card/list-card.spec.js |   17 +-
 src/ux-components/list-card/list-card.vue     |  105 +-
 src/ux-components/loader/loader.vue           |   11 +-
 src/ux-components/text-link/text-link.spec.js |   11 +-
 src/ux-components/text-link/text-link.vue     |   35 +-
 55 files changed, 2158 insertions(+), 1624 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index f4355ef93..bce302e5a 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,7 +13,7 @@ module.exports = {
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
     "!src/layouts/form-test/form-test.vue",
-    "!src/layouts/address-poc/address-poc.vue"
+    "!src/layouts/address-poc/address-poc.vue",
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
diff --git a/src/App.vue b/src/App.vue
index f64aad6aa..e529f225a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,9 @@
 </template>
 
 <style lang="scss">
-  @import "./node_modules/bootstrap/scss/bootstrap";
-  @import "@/styles/common-styles.scss";
-  @import "@/styles/common-list-styles.scss";
-  @import "@/styles/common-typography-styles.scss";
-  @import "@/styles/error-styles.scss";
+@import "./node_modules/bootstrap/scss/bootstrap";
+@import "@/styles/common-styles.scss";
+@import "@/styles/common-list-styles.scss";
+@import "@/styles/common-typography-styles.scss";
+@import "@/styles/error-styles.scss";
 </style>
diff --git a/src/common-components/button-back/button-back.spec.js b/src/common-components/button-back/button-back.spec.js
index b8bc3256d..c7bff87f0 100644
--- a/src/common-components/button-back/button-back.spec.js
+++ b/src/common-components/button-back/button-back.spec.js
@@ -2,7 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import buttonBack from "./button-back";
 
 describe("back button", () => {
-
   test("renders a button", () => {
     // Arrange
     const myFunction = () => {};
@@ -14,10 +13,9 @@ describe("back button", () => {
         backButtonAccessibleText: "something",
       },
     });
-    
+
     // Assert
     expect(wrapper.find("button").exists()).toBe(true);
     wrapper.unmount();
   });
-
 });
diff --git a/src/common-components/button-back/button-back.vue b/src/common-components/button-back/button-back.vue
index 7f06dfcec..cf3a630bf 100644
--- a/src/common-components/button-back/button-back.vue
+++ b/src/common-components/button-back/button-back.vue
@@ -1,23 +1,36 @@
 <template>
   <button
     @click="handleClick"
-    class="back-button-wrapper" 
+    class="back-button-wrapper"
     :aria-label="backButtonAccessibleText"
   >
-    <svg xmlns="http://www.w3.org/2000/svg" width="34px" height="30px" viewBox="-2.2 -6 30 30">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="34px"
+      height="30px"
+      viewBox="-2.2 -6 30 30"
+    >
       <g id="Layer_3">
-        <path class="outer" fill="#FFFFFF" d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
+        <path
+          class="outer"
+          fill="#FFFFFF"
+          d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
               c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
-              V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z"/>
+              V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z"
+        />
       </g>
       <g id="Layer_2">
-        <path class="inner" fill="#727676" d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
+        <path
+          class="inner"
+          fill="#727676"
+          d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
           c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
           c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
           c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
           c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
           c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
-          c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z"/>
+          c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z"
+        />
       </g>
     </svg>
   </button>
@@ -31,13 +44,13 @@ export default {
       type: String,
       required: true,
       default: "",
-    }
+    },
   },
   methods: {
     handleClick() {
-      this.$emit('click-event');
-    }
-  }
+      this.$emit("click-event");
+    },
+  },
 };
 </script>
 
@@ -63,7 +76,7 @@ export default {
     }
   }
   &:focus-visible {
-      outline: none;
+    outline: none;
   }
 }
 </style>
diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js
index 609981717..4a1f42822 100644
--- a/src/common-components/button-question/button-question.spec.js
+++ b/src/common-components/button-question/button-question.spec.js
@@ -13,9 +13,7 @@ describe("buttonQuestion.vue", () => {
     wrapper.vm.chooseAnswer("2021");
 
     // Assert
-    expect(wrapper.find(".text-center").text()).toEqual(
-      "Question Text"
-    );
+    expect(wrapper.find(".text-center").text()).toEqual("Question Text");
     const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
     expect(buttonButtons.length).toBe(3);
     expect(wrapper.props().modelValue).toBe("2020");
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3c818eb8d..bf52b4ac8 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -1,37 +1,43 @@
 <template>
   <div :class="isOverflowScrollable ? 'button_question' : ''">
     <div v-if="questionText" class="mt-6 mb-4 d-flex">
-      <span class="text-center fs-6 fw-bold w-100">{{
-        questionText
-      }}</span>
+      <span class="text-center fs-6 fw-bold w-100">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">
-      <fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
-        <legend class="sr-only">{{groupName}}</legend>
-          <div :class="getComponentWrapperClasses">
-            <component :is="buttonType" v-for="answer in answers" :key="answer"
-              @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
-              @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
-              :buttonID="answer.Name ? answer.Name : answer"
-              :buttonLabel="answer.Text ? answer.Text : answer"
-              :buttonLabelSubCopy="answer.SubText"
-              :textPosition="textPosition"
-              :isMultiSelect="isMultiSelect"
-              :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
-              :loaderColor="loaderColor"
-              :loaderPosition="loaderPosition"
-              :sizeInRem="sizeInRem"
-              :isWide="isWide"
-              :isRequired="isRequired"
-              :buttonImage="answer.AnswerImageUrl"
-              :buttonImageId="answer.ImageId"
-              :altText="answer.Name ? answer.Name : answer"
-              screenReaderOnlyText="(opens new window)"
-              :value="modelValue"
-              data-test="button"
-            />
-          </div>
+      <fieldset
+        class="w-100"
+        :class="getFieldSetClasses"
+        role="radiogroup"
+        :aria-labelledby="groupName ? groupName + '-radio-group' : ''"
+      >
+        <legend class="sr-only">{{ groupName }}</legend>
+        <div :class="getComponentWrapperClasses">
+          <component
+            :is="buttonType"
+            v-for="answer in answers"
+            :key="answer"
+            @mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
+            @keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
+            :buttonID="answer.Name ? answer.Name : answer"
+            :buttonLabel="answer.Text ? answer.Text : answer"
+            :buttonLabelSubCopy="answer.SubText"
+            :textPosition="textPosition"
+            :isMultiSelect="isMultiSelect"
+            :groupName="groupName"
+            :loaderEnabled="loaderEnabled"
+            :loaderColor="loaderColor"
+            :loaderPosition="loaderPosition"
+            :sizeInRem="sizeInRem"
+            :isWide="isWide"
+            :isRequired="isRequired"
+            :buttonImage="answer.AnswerImageUrl"
+            :buttonImageId="answer.ImageId"
+            :altText="answer.Name ? answer.Name : answer"
+            screenReaderOnlyText="(opens new window)"
+            :value="modelValue"
+            data-test="button"
+          />
+        </div>
       </fieldset>
     </div>
   </div>
@@ -46,8 +52,8 @@ export default {
   name: "buttonQuestion",
   props: {
     buttonType: {
-      type: String, 
-      default: 'listButton'
+      type: String,
+      default: "listButton",
     },
     isMultiSelect: Boolean,
     groupName: String,
@@ -55,20 +61,20 @@ export default {
     answers: Array,
     textPosition: {
       type: String,
-      default: 'text-center'
+      default: "text-center",
     },
     loaderEnabled: Boolean,
     loaderColor: {
       type: String,
-      default: 'blue'
+      default: "blue",
     },
     loaderPosition: {
-      type: String, 
-      default: 'right'
+      type: String,
+      default: "right",
     },
     sizeInRem: {
-      type: [String, Number], 
-      default: 1.5
+      type: [String, Number],
+      default: 1.5,
     },
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
@@ -76,24 +82,26 @@ export default {
     modelValue: String,
   },
   computed: {
-    getFieldSetClasses(){
-      return this.isOverflowScrollable ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0' : '';
+    getFieldSetClasses() {
+      return this.isOverflowScrollable
+        ? "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"
+        : "";
     },
     getComponentWrapperClasses() {
       let classes;
-      switch(this.buttonType) {
-        case 'listButton':
-          classes = 'w-100'
+      switch (this.buttonType) {
+        case "listButton":
+          classes = "w-100";
           break;
-        case 'listButtonHorizontal':
-          classes = 'd-flex flex-row p-0'
+        case "listButtonHorizontal":
+          classes = "d-flex flex-row p-0";
           break;
-        case 'listCard':
-          classes = 'row g-2'
+        case "listCard":
+          classes = "row g-2";
           break;
       }
       return classes;
-    }
+    },
   },
   methods: {
     chooseAnswer(answer) {
@@ -103,7 +111,7 @@ export default {
   components: {
     listButton,
     listButtonHorizontal,
-    listCard
+    listCard,
   },
 };
 </script>
diff --git a/src/common-components/funnel-header/funnel-header.spec.js b/src/common-components/funnel-header/funnel-header.spec.js
index ebb4a549c..ed60d5f73 100644
--- a/src/common-components/funnel-header/funnel-header.spec.js
+++ b/src/common-components/funnel-header/funnel-header.spec.js
@@ -21,5 +21,5 @@ describe("funnelHeader", () => {
 
 //Mock CMS content
 const cmsContent = {
-  imageSrc: 'image_url'
-};  
+  imageSrc: "image_url",
+};
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 934277844..86cb76197 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -1,64 +1,69 @@
 <template>
-<div class="funnel-header d-flex justify-content-center align-items-center flex-column" v-if="imageSrc">
+  <div
+    class="funnel-header d-flex justify-content-center align-items-center flex-column"
+    v-if="imageSrc"
+  >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-</div>
-        <alert class="position-absolute rounded-0 w-100 border-0 shadow-sm" v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageHeadline" :alertCopy="globalAlertMessage.messageCopy" v-bind:isDismissible="globalAlertMessage.isDismissible" />
-
+  </div>
+  <alert
+    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
+    v-if="displayGlobalAlert"
+    :alertClass="globalAlertMessage.type"
+    :alertHeadline="globalAlertMessage.messageHeadline"
+    :alertCopy="globalAlertMessage.messageCopy"
+    v-bind:isDismissible="globalAlertMessage.isDismissible"
+  />
 </template>
 
 <script>
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
-import {
-    globalEvents,
-} from "@/constants/events";
+import { globalEvents } from "@/constants/events";
 
 export default {
-    name: "funnel-header",
-    data() {
-        return {
-            imageSrc: "",
-            displayGlobalAlert: false,
-            globalAlertMessage: {
-                isDismissible: false,
-                messageCopy: "",
-                messageHeadline: "",
-                type: "",
-            },
-        };
-    },
-    methods: {
-        initializeComponent(cmsContent) {
-            this.imageSrc = cmsContent.LogoImage;
-        },
-    },
-    components: {
-        alert,
-    },
-    mounted() {
-
-        // Check if alert event is on the bus
-        const alertEvent = eventBus.readAndPopEventFromBus(
-            globalEvents.Categories.GLOBAL_ALERT,
-            globalEvents.SubCategories.PAGE_NOT_FOUND
-        );
-
-        // If alert event is on the bus, then display the alert
-        if (alertEvent !== undefined) {
-            this.displayGlobalAlert = true;
-            this.globalAlertMessage = alertEvent;
-        }
+  name: "funnel-header",
+  data() {
+    return {
+      imageSrc: "",
+      displayGlobalAlert: false,
+      globalAlertMessage: {
+        isDismissible: false,
+        messageCopy: "",
+        messageHeadline: "",
+        type: "",
+      },
+    };
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.imageSrc = cmsContent.LogoImage;
     },
+  },
+  components: {
+    alert,
+  },
+  mounted() {
+    // Check if alert event is on the bus
+    const alertEvent = eventBus.readAndPopEventFromBus(
+      globalEvents.Categories.GLOBAL_ALERT,
+      globalEvents.SubCategories.PAGE_NOT_FOUND
+    );
 
+    // If alert event is on the bus, then display the alert
+    if (alertEvent !== undefined) {
+      this.displayGlobalAlert = true;
+      this.globalAlertMessage = alertEvent;
+    }
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .funnel-header {
-    height: 56px;
+  height: 56px;
 }
 
 .logo-image {
-    max-width: 78px;
+  max-width: 78px;
 }
 </style>
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
index c6d30a71b..08561ce67 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js
@@ -5,7 +5,7 @@ describe("FunnelSubHeader.vue", () => {
   it("Should render the 'text' data value as a span value for the header span text value.", async () => {
     // Act
     const wrapper = shallowMount(FunnelSubHeader);
-    await wrapper.setData ({
+    await wrapper.setData({
       text: "FunnelSubHeader Content",
     });
     wrapper.vm.initializeComponent(cmsContent);
@@ -18,5 +18,5 @@ describe("FunnelSubHeader.vue", () => {
 
 //Mock CMS content
 const cmsContent = {
-  HeaderText: 'FunnelSubHeader Content'
-};  
+  HeaderText: "FunnelSubHeader Content",
+};
diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index b0bca0cae..40c3995a2 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+    <div
+      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
+    >
       <h5 class="text-center fw-normal mb-0">
         <span>
           {{ text }}
@@ -10,14 +12,16 @@
           :backButtonAccessibleText="backButtonAccessibleText"
           @click-event="clickEvent"
         />
-    </h5>
+      </h5>
     </div>
-    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+    <div
+      class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"
+    >
       <p class="text-center small fw-normal mb-0">
         <span>
           {{ subText }}
         </span>
-    </p>
+      </p>
     </div>
   </div>
 </template>
@@ -29,9 +33,9 @@ export default {
   name: "FunnelSubHeader",
   data() {
     return {
-      text: '',
-      subText: ''
-    }
+      text: "",
+      subText: "",
+    };
   },
   props: {
     hasBackButton: Boolean,
@@ -42,23 +46,23 @@ export default {
   },
   methods: {
     clickEvent() {
-      this.$emit('click-event');
+      this.$emit("click-event");
     },
     initializeComponent(cmsContent) {
       this.text = cmsContent.HeaderText;
       this.subText = cmsContent.HeaderSubText;
-    }
+    },
   },
 };
 </script>
 
 <style lang="scss">
-  h5 {
-    color: $gray-550;
-    line-height: 32px;
+h5 {
+  color: $gray-550;
+  line-height: 32px;
 
-    button {
-      color: inherit;
-    }
+  button {
+    color: inherit;
   }
+}
 </style>
diff --git a/src/common-components/text-input/text-input.spec.js b/src/common-components/text-input/text-input.spec.js
index fcb08d57a..ba20a5c78 100644
--- a/src/common-components/text-input/text-input.spec.js
+++ b/src/common-components/text-input/text-input.spec.js
@@ -2,7 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import textInput from "./text-input";
 
 describe("text-input.vue", () => {
-
   it("Should render a text input", async () => {
     // Act
     const wrapper = shallowMount(textInput, {
@@ -24,7 +23,7 @@ describe("text-input.vue", () => {
       propsData: {
         name: "test",
         label: "unit test label",
-        isRequired: true
+        isRequired: true,
       },
     });
 
@@ -32,7 +31,5 @@ describe("text-input.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes()["aria-required"]).toEqual("true");
-
   });
-
-});
\ No newline at end of file
+});
diff --git a/src/common-components/text-input/text-input.vue b/src/common-components/text-input/text-input.vue
index e8d63f9e4..c5285a3b7 100644
--- a/src/common-components/text-input/text-input.vue
+++ b/src/common-components/text-input/text-input.vue
@@ -16,7 +16,7 @@
       :aria-labelledby="name"
       class="d-flex justify-content-center py-3 px-4"
     >
-      <span class="m-0">{{label}}</span>
+      <span class="m-0">{{ label }}</span>
     </label>
   </div>
   <div v-show="errorMessage" class="row px-3 form-test-error">
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import { useField } from 'vee-validate';
+import { useField } from "vee-validate";
 
 export default {
   name: "textInput",
@@ -49,16 +49,16 @@ export default {
     isRequired: Boolean,
   },
   setup(props) {
-    const { 
-        value: inputValue,
-        errorMessage,
-        handleBlur,
-        handleChange,
-        meta, 
+    const {
+      value: inputValue,
+      errorMessage,
+      handleBlur,
+      handleChange,
+      meta,
     } = useField(props.name, undefined, {
-        initialValue: props.value,
+      initialValue: props.value,
     });
-    
+
     return {
       handleChange,
       handleBlur,
diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js
index df471038e..44fdeec84 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.spec.js
+++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js
@@ -7,7 +7,7 @@ describe("vehicleBanner", () => {
 
     // Act
     const wrapper = shallowMount(vehicleBanner);
-    await wrapper.setData ({
+    await wrapper.setData({
       vehicleImageSrc: "image_url",
     });
     wrapper.vm.initializeComponent(cmsContent);
@@ -20,5 +20,5 @@ describe("vehicleBanner", () => {
 
 //Mock CMS content
 const cmsContent = {
-  GenericVehicleImage: 'image_url'
-};  
\ No newline at end of file
+  GenericVehicleImage: "image_url",
+};
diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue
index 652fbdae7..1d01bda83 100644
--- a/src/common-components/vehicle-banner/vehicle-banner.vue
+++ b/src/common-components/vehicle-banner/vehicle-banner.vue
@@ -13,13 +13,13 @@ export default {
   name: "vehicle-banner",
   data() {
     return {
-      vehicleImageSrc: '',
-    }
+      vehicleImageSrc: "",
+    };
   },
   methods: {
     initializeComponent(cmsContent) {
       this.vehicleImageSrc = cmsContent.GenericVehicleImage;
-    }
+    },
   },
 };
 </script>
diff --git a/src/constants/events.js b/src/constants/events.js
index 91461d535..066ef6dcd 100644
--- a/src/constants/events.js
+++ b/src/constants/events.js
@@ -1,17 +1,17 @@
 const globalEvents = {
-    Categories: {
-        GLOBAL_ALERT: "GLOBAL_ALERT",
-    },
-    SubCategories: {
-        PAGE_NOT_FOUND: "PAGE_NOT_FOUND",
-    }
-}
+  Categories: {
+    GLOBAL_ALERT: "GLOBAL_ALERT",
+  },
+  SubCategories: {
+    PAGE_NOT_FOUND: "PAGE_NOT_FOUND",
+  },
+};
 
 const globalEventTypes = {
-    Success: "alert-success",
-    Warning: "alert-warning",
-    Info: "alert-info",
-    Danger: "alert-danger",
-}
+  Success: "alert-success",
+  Warning: "alert-warning",
+  Info: "alert-info",
+  Danger: "alert-danger",
+};
 
-export {globalEvents, globalEventTypes}
\ No newline at end of file
+export { globalEvents, globalEventTypes };
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 1c795aab2..a20446ef8 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -9,20 +9,26 @@ export function fetchCmsContentForPage(fmgPage) {
       const pageDataFromCms = {};
 
       response.data.Result.forEach((widget) => {
-
-        let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Name);
+        let widgetWithReplacements = findAndReplaceGlobalStateValues(
+          widget.Model,
+          widget.Name
+        );
 
         // If we already have this widget, push it on the collection
         if (widgetWithReplacements.Name in pageDataFromCms) {
-          pageDataFromCms[widgetWithReplacements.Name].push(widgetWithReplacements.Model);
+          pageDataFromCms[widgetWithReplacements.Name].push(
+            widgetWithReplacements.Model
+          );
           return;
         }
 
-        pageDataFromCms[widgetWithReplacements.Name] = [widgetWithReplacements.Model];
+        pageDataFromCms[widgetWithReplacements.Name] = [
+          widgetWithReplacements.Model,
+        ];
       });
 
       Object.keys(pageDataFromCms).forEach((key) => {
-        if (pageDataFromCms[key].length === 1){
+        if (pageDataFromCms[key].length === 1) {
           pageDataFromCms[key] = pageDataFromCms[key][0];
         }
       });
@@ -33,31 +39,29 @@ export function fetchCmsContentForPage(fmgPage) {
 
 // Function to convert a string, into a matching global state item.
 function mapStringToState(str) {
-
   // Pull all matches out of the string.
-  const regexExp = new RegExp('{(.*?):(.*?)}', 'g');
+  const regexExp = new RegExp("{(.*?):(.*?)}", "g");
   const matches = [...str.matchAll(regexExp)];
 
   // Our final string value that will be built from the matches.
-  let stringBuilder = '';
+  let stringBuilder = "";
 
   for (const match of matches) {
-
     // Reset store state for each match.
     let storeState = store.state;
 
-    for (const s of match[2].split('.')) {
+    for (const s of match[2].split(".")) {
       if (storeState[s] != undefined) {
         storeState = storeState[s];
       } else {
-        return ''; // if we can't map our string to state data, return an empty string.
+        return ""; // if we can't map our string to state data, return an empty string.
       }
     }
 
     const stringWithReplacement = str.replace(match[0], storeState);
 
     // If we still have values we need to substitute, call this function again.
-    if(stringWithReplacement.includes('{globalState:')) {
+    if (stringWithReplacement.includes("{globalState:")) {
       return mapStringToState(stringWithReplacement);
     }
 
@@ -71,15 +75,16 @@ function mapStringToState(str) {
 // Parent function for processWidgetItemForReplacement. This will loop through the parent
 // object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
 function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
-
   const objWithReplacements = {
     Name: widgetName,
-    Model: {}
+    Model: {},
   };
 
-  Object.keys(widgetModel).forEach(key => {
-
-    let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
+  Object.keys(widgetModel).forEach((key) => {
+    let modelWithReplacements = processWidgetItemForReplacement(
+      widgetModel,
+      key
+    );
 
     objWithReplacements.Model[key] = modelWithReplacements;
   });
@@ -91,16 +96,19 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
 // This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
 function processWidgetItemForReplacement(widgetModel, key) {
   // If we have a string, and it needs to be replaced.
-  if (typeof widgetModel[key] === 'string') {
-    if (widgetModel[key].includes('{globalState:')) {
+  if (typeof widgetModel[key] === "string") {
+    if (widgetModel[key].includes("{globalState:")) {
       widgetModel[key] = mapStringToState(widgetModel[key]);
     }
     return widgetModel[key];
   }
 
   // If we have an object. array, etc
-  if (typeof widgetModel[key] === 'object' && Object.keys(widgetModel[key]).length) {
-    Object.keys(widgetModel[key]).forEach(item => {
+  if (
+    typeof widgetModel[key] === "object" &&
+    Object.keys(widgetModel[key]).length
+  ) {
+    Object.keys(widgetModel[key]).forEach((item) => {
       processWidgetItemForReplacement(widgetModel[key], item);
     });
 
@@ -109,5 +117,4 @@ function processWidgetItemForReplacement(widgetModel, key) {
 
   // If we have something else like a number, boolean, etc. just return it
   return widgetModel[key];
-
-}
\ No newline at end of file
+}
diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js
index efc0ee56c..d7aeb8bf4 100644
--- a/src/helpers/cms-helper.spec.js
+++ b/src/helpers/cms-helper.spec.js
@@ -4,12 +4,11 @@ import { dispatch } from "@/store";
 jest.mock("@/store", () => ({
   dispatch: jest.fn(),
   state: {
-    order: { vehicle: { year: "2019", make: "Acura" } }
-  }
+    order: { vehicle: { year: "2019", make: "Acura" } },
+  },
 }));
 
-
-describe("cms-content-helper.js", () => { 
+describe("cms-content-helper.js", () => {
   it("Should return data from CMS", () => {
     // Arrange
     const cmsMockData = {
@@ -34,9 +33,9 @@ describe("cms-content-helper.js", () => {
         },
       ],
     };
-  
+
     dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
-  
+
     // Act
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
@@ -45,10 +44,9 @@ describe("cms-content-helper.js", () => {
       );
     });
   });
-
 });
 
-describe("cms-content-helper.js", () => { 
+describe("cms-content-helper.js", () => {
   it("Should replace strings for global state", () => {
     const cmsMockData = {
       Result: [
@@ -60,21 +58,18 @@ describe("cms-content-helper.js", () => {
         },
       ],
     };
-  
+
     dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
-  
+
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
-      expect(response.FunnelSubHeaderWidget.HeaderText).toEqual(
-        "2019"
-      );
+      expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019");
     });
   });
 });
 
-describe("cms-content-helper.js", () => { 
+describe("cms-content-helper.js", () => {
   it("Should replace strings for global state, and leave others the same", () => {
-
     const cmsMockData = {
       Result: [
         {
@@ -91,21 +86,21 @@ describe("cms-content-helper.js", () => {
         },
       ],
     };
-  
+
     dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
-  
+
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
       expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019");
-      expect(response.VehicleYearQuestion.ExampleText).toEqual("My widget value!");
-  
+      expect(response.VehicleYearQuestion.ExampleText).toEqual(
+        "My widget value!"
+      );
     });
   });
 });
 
-describe("cms-content-helper.js", () => { 
+describe("cms-content-helper.js", () => {
   it("Should replace strings for global state in nested objects", () => {
-
     const cmsMockData = {
       Result: [
         {
@@ -119,22 +114,23 @@ describe("cms-content-helper.js", () => {
           Model: {
             OtherObjectInside: {
               ExampleText: "{globalState:order.vehicle.make}",
-            }
+            },
           },
         },
       ],
     };
-  
+
     dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
-  
+
     fetchCmsContentForPage("testPage").then((response) => {
       // Assert
-  
+
       expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019");
-      expect(response.VehicleMakeQuestion.OtherObjectInside.ExampleText).toEqual("Acura");
-  
+      expect(
+        response.VehicleMakeQuestion.OtherObjectInside.ExampleText
+      ).toEqual("Acura");
     });
   });
 });
 
-test.todo("String cannot be mapped to global state");
\ No newline at end of file
+test.todo("String cannot be mapped to global state");
diff --git a/src/helpers/event-bus/event-bus.js b/src/helpers/event-bus/event-bus.js
index 8ac156776..47f229210 100644
--- a/src/helpers/event-bus/event-bus.js
+++ b/src/helpers/event-bus/event-bus.js
@@ -2,24 +2,31 @@ import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 
 export default {
-    // Adds event to the bus given its category, subcategory, and eventValue;
-    addEventToBus(category, subCategory, eventValue) {
-        store.commit(storeActions.ADD_EVENT_TO_BUS, { category: category, subCategory: subCategory, eventValue: eventValue });
-    },
+  // Adds event to the bus given its category, subcategory, and eventValue;
+  addEventToBus(category, subCategory, eventValue) {
+    store.commit(storeActions.ADD_EVENT_TO_BUS, {
+      category: category,
+      subCategory: subCategory,
+      eventValue: eventValue,
+    });
+  },
 
-    // Finds event on the bus, removes the item, and returns its value to the caller.
-    readAndPopEventFromBus(category, subCategory) {
-        const event = store.getters.eventBusItem(category, subCategory);
+  // Finds event on the bus, removes the item, and returns its value to the caller.
+  readAndPopEventFromBus(category, subCategory) {
+    const event = store.getters.eventBusItem(category, subCategory);
 
-        store.commit(storeActions.REMOVE_EVENT_FROM_BUS, { category: category, subCategory: subCategory });
+    store.commit(storeActions.REMOVE_EVENT_FROM_BUS, {
+      category: category,
+      subCategory: subCategory,
+    });
 
-        return event;
-    },
+    return event;
+  },
 
-    // Finds the event on the bus and returns its value to the caller, does not remove it.
-    readEventFromBus(category, subCategory) {
-        const event = store.getters.eventBusItem(category, subCategory);
+  // Finds the event on the bus and returns its value to the caller, does not remove it.
+  readEventFromBus(category, subCategory) {
+    const event = store.getters.eventBusItem(category, subCategory);
 
-        return event;
-    },
-}
\ No newline at end of file
+    return event;
+  },
+};
diff --git a/src/helpers/event-bus/event-bus.spec.js b/src/helpers/event-bus/event-bus.spec.js
index d20c11044..fece3fee2 100644
--- a/src/helpers/event-bus/event-bus.spec.js
+++ b/src/helpers/event-bus/event-bus.spec.js
@@ -3,48 +3,57 @@ import eventBus from "@/helpers/event-bus/event-bus";
 import store from "@/store";
 
 describe("event-bus.js", () => {
+  let event = {
+    isDismissible: true,
+    messageCopy: "You can get a quote by starting on this page.",
+    messageHeadline: "We're sorry, something went wrong.",
+    type: globalEventTypes.Danger,
+  };
 
-    let event = {
-        isDismissible: true,
-        messageCopy: 'You can get a quote by starting on this page.',
-        messageHeadline: 'We\'re sorry, something went wrong.',
-        type: globalEventTypes.Danger
-    };
+  it("Puts item on bus and then take it off", () => {
+    // Arrange / Act
+    eventBus.addEventToBus(
+      globalEvents.Categories.GLOBAL_ALERT,
+      globalEvents.SubCategories.PAGE_NOT_FOUND,
+      event
+    );
 
-    it("Puts item on bus and then take it off", () => {
+    // Assert
+    expect(
+      store.getters.eventBusItem(
+        globalEvents.Categories.GLOBAL_ALERT,
+        globalEvents.SubCategories.PAGE_NOT_FOUND
+      )
+    ).toEqual(event);
 
-        // Arrange / Act
-        eventBus.addEventToBus(
-            globalEvents.Categories.GLOBAL_ALERT,
-            globalEvents.SubCategories.PAGE_NOT_FOUND,
-            event
-        );
+    expect(store.state.applicationUser.eventBus.length).toEqual(1);
 
+    // Arrange / Act
+    const eventValue = eventBus.readAndPopEventFromBus(
+      globalEvents.Categories.GLOBAL_ALERT,
+      globalEvents.SubCategories.PAGE_NOT_FOUND
+    );
 
-        // Assert
-        expect(store.getters.eventBusItem(globalEvents.Categories.GLOBAL_ALERT, globalEvents.SubCategories.PAGE_NOT_FOUND)).toEqual(event);
+    // Assert
+    expect(eventValue).toEqual(event);
 
-        expect(store.state.applicationUser.eventBus.length).toEqual(1);
+    expect(store.state.applicationUser.eventBus.length).toEqual(0);
+  });
 
-        // Arrange / Act
-        const eventValue = eventBus.readAndPopEventFromBus(globalEvents.Categories.GLOBAL_ALERT, globalEvents.SubCategories.PAGE_NOT_FOUND);
+  it("Reads event from bus, should have event value.", () => {
+    // Arrange / Act
+    eventBus.addEventToBus(
+      globalEvents.Categories.GLOBAL_ALERT,
+      globalEvents.SubCategories.PAGE_NOT_FOUND,
+      event
+    );
 
-        // Assert
-        expect(eventValue).toEqual(event);
-
-        expect(store.state.applicationUser.eventBus.length).toEqual(0);
-    });
-
-    it("Reads event from bus, should have event value.", () => {
-        // Arrange / Act
-        eventBus.addEventToBus(
-            globalEvents.Categories.GLOBAL_ALERT,
-            globalEvents.SubCategories.PAGE_NOT_FOUND,
-            event
-        );
-
-        // Assert
-        expect(eventBus.readEventFromBus(globalEvents.Categories.GLOBAL_ALERT, globalEvents.SubCategories.PAGE_NOT_FOUND)).toEqual(event);
-
-    });
-});
\ No newline at end of file
+    // Assert
+    expect(
+      eventBus.readEventFromBus(
+        globalEvents.Categories.GLOBAL_ALERT,
+        globalEvents.SubCategories.PAGE_NOT_FOUND
+      )
+    ).toEqual(event);
+  });
+});
diff --git a/src/layouts/address-poc/address-poc.vue b/src/layouts/address-poc/address-poc.vue
index 31a5e66ee..65ca768b4 100644
--- a/src/layouts/address-poc/address-poc.vue
+++ b/src/layouts/address-poc/address-poc.vue
@@ -8,45 +8,51 @@
     <div class="row my-4">
       <div class="col">
         <label for="autocomplete">Home address</label>
-        <input ref="autocomplete" 
-            id="autocomplete"
-            placeholder="Search" 
-            class="form-control search-location"
-            onfocus="value = ''" 
-            type="text" />
+        <input
+          ref="autocomplete"
+          id="autocomplete"
+          placeholder="Search"
+          class="form-control search-location"
+          onfocus="value = ''"
+          type="text"
+        />
       </div>
-    </div>          
-  </div>  
+    </div>
+  </div>
 </template>
 
 <script>
-
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 export default {
   name: "App",
   components: {
-    vehicleBanner
+    vehicleBanner,
   },
 
   mounted() {
-    this.$refs.vehicleBanner.initializeComponent({GenericVehicleImage: 'https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3'});
+    this.$refs.vehicleBanner.initializeComponent({
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    });
 
     let self = this;
-//AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
-//AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
-    this.$loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places")
+    //AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
+    //AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
+    this.$loadScript(
+      "https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places"
+    )
       .then(() => {
         // Script is loaded, do something
         self.autocomplete = new window.google.maps.places.Autocomplete(
-          (self.$refs.autocomplete),
-          { 
+          self.$refs.autocomplete,
+          {
             componentRestrictions: { country: ["us"] },
             fields: ["address_components"],
-            types: ['address'] 
+            types: ["address"],
           }
         );
 
-        self.autocomplete.addListener('place_changed', () => {
+        self.autocomplete.addListener("place_changed", () => {
           let place = self.autocomplete.getPlace();
           let address1 = "";
           let postcode = "";
@@ -67,10 +73,10 @@ export default {
                 break;
               }
               case "locality":
-                address1 += ', ' + component.long_name;
+                address1 += ", " + component.long_name;
                 break;
               case "administrative_area_level_1": {
-                address1 += ', ' +  component.short_name;
+                address1 += ", " + component.short_name;
                 break;
               }
               case "postal_code": {
@@ -82,20 +88,17 @@ export default {
                 postcode = `${postcode}-${component.long_name}`;
                 break;
               }
-
             }
 
             let addressField1 = document.querySelector("#autocomplete");
-            addressField1.value = address1 + ' ' + postcode;
-          }      
-        }); 
+            addressField1.value = address1 + " " + postcode;
+          }
+        });
       })
       .catch(() => {
         // Failed to fetch script
-        console.log("Unable to load Google Places API script")
+        console.log("Unable to load Google Places API script");
       });
   },
-
 };
-
 </script>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 7363ec3d4..2f5dc0308 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -8,10 +8,10 @@
     <div class="row">
       <div class="col">
         <checkbox
-        checkboxName="demo checkbox"
-        buttonID="checkbox-1"
-        tabIndex="1"
-        checkboxLabel="I'm a checkbox"
+          checkboxName="demo checkbox"
+          buttonID="checkbox-1"
+          tabIndex="1"
+          checkboxLabel="I'm a checkbox"
         />
       </div>
     </div>
@@ -23,27 +23,21 @@
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonMain
-        isPrimary
-        buttonText="Primary"
-        loaderColor="white"
-        sizeInRem="1"
+          isPrimary
+          buttonText="Primary"
+          loaderColor="white"
+          sizeInRem="1"
         />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain
-        buttonText="secondary"
-        loaderColor="white"
-        sizeInRem="1"
-        />
+        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack
-        backButtonAccessibleText="Back button label"
-        />
+        <buttonBack backButtonAccessibleText="Back button label" />
       </div>
     </div>
     <div class="row my-4">
@@ -56,31 +50,31 @@
       <legend class="sr-only">Functioning as Checkbox</legend>
       <div class="row g-2">
         <listCard
-        isMultiSelect
-        buttonImage="windshield-damage.svg"
-        buttonLabel="Windshield"
-        altText=""
-        buttonID="List Card Checkbox 1"
-        groupID="checkbox-demo-1"
-        buttonLabelSubCopy="Description"
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 1"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy="Description"
         />
         <listCard
-        isMultiSelect
-        buttonImage="side-window-damage-right-all.svg"
-        buttonLabel="Windshield"
-        altText=""
-        buttonID="List Card Checkbox 2"
-        groupID="checkbox-demo-1"
-        buttonLabelSubCopy="Description with more than one line"
+          isMultiSelect
+          buttonImage="side-window-damage-right-all.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 2"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy="Description with more than one line"
         />
         <listCard
-        isMultiSelect
-        buttonImage="windshield-damage.svg"
-        buttonLabel="Windshield"
-        altText=""
-        buttonID="List Card Checkbox 3"
-        groupID="checkbox-demo-1"
-        buttonLabelSubCopy=""
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox 3"
+          groupID="checkbox-demo-1"
+          buttonLabelSubCopy=""
         />
       </div>
     </fieldset>
@@ -95,13 +89,13 @@
         <fieldset>
           <legend class="sr-only">Functioning as Checkbox</legend>
           <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox"
-          groupID="checkbox-demo-1"
-          buttonLabelSubCopy="Description"
+            isMultiSelect
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Checkbox"
+            groupID="checkbox-demo-1"
+            buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
@@ -112,13 +106,13 @@
         <fieldset>
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
-          isMultiSelect
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Checkbox b"
-          groupID="checkbox-demo-1a"
-          buttonLabelSubCopy=""
+            isMultiSelect
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Checkbox b"
+            groupID="checkbox-demo-1a"
+            buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
@@ -129,13 +123,13 @@
         <fieldset>
           <legend class="sr-only">Functioning as Radio Button</legend>
           <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Radio Button"
-          groupID="radio-demo-2"
-          buttonLabelSubCopy="Description"
+            isRadio
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Radio Button"
+            groupID="radio-demo-2"
+            buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
@@ -146,13 +140,13 @@
         <fieldset>
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
-          isRadio
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Radio Button b"
-          groupID="radio-demo-2b"
-          buttonLabelSubCopy=""
+            isRadio
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Radio Button b"
+            groupID="radio-demo-2b"
+            buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
@@ -163,14 +157,14 @@
         <fieldset>
           <legend class="sr-only">Horizontal Checkbox</legend>
           <listCard
-          isMultiSelect
-          isWide
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Horizontal Checkbox"
-          groupID="checkbox-demo-3"
-          buttonLabelSubCopy="Description"
+            isMultiSelect
+            isWide
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Horizontal Checkbox"
+            groupID="checkbox-demo-3"
+            buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
@@ -181,14 +175,14 @@
         <fieldset>
           <legend class="sr-only">Checkbox no Description</legend>
           <listCard
-          isMultiSelect
-          isWide
-          buttonImage="side-window-damage-right-all.svg"
-          buttonLabel="Side Window"
-          altText=""
-          buttonID="List Card Horizontal Checkbox b"
-          groupID="checkbox-demo-3b"
-          buttonLabelSubCopy=""
+            isMultiSelect
+            isWide
+            buttonImage="side-window-damage-right-all.svg"
+            buttonLabel="Side Window"
+            altText=""
+            buttonID="List Card Horizontal Checkbox b"
+            groupID="checkbox-demo-3b"
+            buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
@@ -199,13 +193,13 @@
         <fieldset>
           <legend class="sr-only">Horizontal Radio Button</legend>
           <listCard
-          isWide
-          buttonImage="back-glass-damage.svg"
-          buttonLabel="Rear Window"
-          altText=""
-          buttonID="List Card Horizontal Radio Button"
-          groupID="radio-demo-4"
-          buttonLabelSubCopy="Description"
+            isWide
+            buttonImage="back-glass-damage.svg"
+            buttonLabel="Rear Window"
+            altText=""
+            buttonID="List Card Horizontal Radio Button"
+            groupID="radio-demo-4"
+            buttonLabelSubCopy="Description"
           />
         </fieldset>
       </div>
@@ -216,13 +210,13 @@
         <fieldset>
           <legend class="sr-only">Radio Button no Description</legend>
           <listCard
-          isWide
-          buttonImage="windshield-damage.svg"
-          buttonLabel="Windshield"
-          altText=""
-          buttonID="List Card Horizontal Radio Button b"
-          groupID="radio-demo-4b"
-          buttonLabelSubCopy=""
+            isWide
+            buttonImage="windshield-damage.svg"
+            buttonLabel="Windshield"
+            altText=""
+            buttonID="List Card Horizontal Radio Button b"
+            groupID="radio-demo-4b"
+            buttonLabelSubCopy=""
           />
         </fieldset>
       </div>
@@ -235,93 +229,99 @@
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div role="radiogroup" aria-labelledby="demo-1-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-1-radio-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-1-radio-group">
-          Select Vehicle Year
-        </h3>
+        <h3 class="sr-only" id="demo-1-radio-group">Select Vehicle Year</h3>
         <listButton
-        isMultiSelect
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        buttonID="2021"
-        buttonLabel="2021"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          buttonID="2021"
+          buttonLabel="2021"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        buttonID="2020"
-        buttonLabel="2020"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          buttonID="2020"
+          buttonLabel="2020"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-1"
-        ariaLabelBy="vehicle-year"
-        buttonID="2019"
-        buttonLabel="2019"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-1"
+          ariaLabelBy="vehicle-year"
+          buttonID="2019"
+          buttonLabel="2019"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
+      <div
+        role="checkbox"
+        aria-labelledby="demo-1-checkbox-group"
+        class="col my-3 d-flex flex-column"
+      >
         <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
         <listButton
-        groupName="demo-1-checkbox"
-        ariaLabelBy="vehicle-year"
-        buttonID="2018"
-        buttonLabel="2018"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2018"
+          buttonLabel="2018"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-1-checkbox"
-        ariaLabelBy="vehicle-year"
-        buttonID="2017"
-        buttonLabel="2017"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2017"
+          buttonLabel="2017"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-1-checkbox"
-        ariaLabelBy="vehicle-year"
-        buttonID="2016"
-        buttonLabel="2016"
-        isRequired=true
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-1-checkbox"
+          ariaLabelBy="vehicle-year"
+          buttonID="2016"
+          buttonLabel="2016"
+          isRequired="true"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -333,187 +333,205 @@
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div role="radiogroup" aria-labelledby="demo-2-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-2-radio-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
-        isMultiSelect
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        buttonID="Chevrolet"
-        buttonLabel="Chevrolet"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          buttonID="Chevrolet"
+          buttonLabel="Chevrolet"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        buttonID="Dodge"
-        buttonLabel="Dodge"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          buttonID="Dodge"
+          buttonLabel="Dodge"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-2"
-        ariaLabelBy="vehicle-make"
-        buttonID="Ford"
-        buttonLabel="Ford"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-2"
+          ariaLabelBy="vehicle-make"
+          buttonID="Ford"
+          buttonLabel="Ford"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div role="radiogroup" aria-labelledby="demo-2-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-2-checkbox-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
         <listButton
-        groupName="demo-2-checkbox"
-        ariaLabelBy="vehicle-make"
-        buttonID="Honda"
-        buttonLabel="Honda"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-2-checkbox"
+          ariaLabelBy="vehicle-make"
+          buttonID="Honda"
+          buttonLabel="Honda"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-2-checkbox"
-        ariaLabelBy="vehicle-make"
-        buttonID="Acura"
-        buttonLabel="Acura"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-2-checkbox"
+          ariaLabelBy="vehicle-make"
+          buttonID="Acura"
+          buttonLabel="Acura"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-2-checkbox"
-        ariaLabelBy="vehicle-make"
-        buttonID="Infiniti"
-        buttonLabel="Infiniti"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-start"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-2-checkbox"
+          ariaLabelBy="vehicle-make"
+          buttonID="Infiniti"
+          buttonLabel="Infiniti"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-start"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">
+          List Button - Multi-Line Centered
+        </h4>
         <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-3-radio-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
-        isMultiSelect
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        buttonID="Corvette"
-        buttonLabel="Corvette"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          buttonID="Corvette"
+          buttonLabel="Corvette"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        buttonID="Testarosa"
-        buttonLabel="Testarosa"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          buttonID="Testarosa"
+          buttonLabel="Testarosa"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        isMultiSelect
-        groupName="demo-3"
-        ariaLabelBy="vehicle-model"
-        buttonID="S600"
-        buttonLabel="S600"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-3"
+          ariaLabelBy="vehicle-model"
+          buttonID="S600"
+          buttonLabel="S600"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div role="radiogroup" aria-labelledby="demo-3-checkbox-group" class="col my-3 d-flex align-items-center flex-column">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-3-checkbox-group"
+        class="col my-3 d-flex align-items-center flex-column"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
         <listButton
-        groupName="demo-3-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="Accord"
-        buttonLabel="Accord"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-3-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="Accord"
+          buttonLabel="Accord"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-3-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="Civic"
-        buttonLabel="Civic"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-3-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="Civic"
+          buttonLabel="Civic"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButton
-        groupName="demo-3-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="Ridgeline"
-        buttonLabel="Ridgeline"
-        buttonLabelSubCopy="Test sub-headline"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-3-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="Ridgeline"
+          buttonLabel="Ridgeline"
+          buttonLabelSubCopy="Test sub-headline"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -525,104 +543,108 @@
     </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div role="radiogroup" aria-labelledby="demo-4-radio-group" class="d-flex flex-row p-0">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-radio-group"
+        class="d-flex flex-row p-0"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-radio-group">
-          Select Vehicle Year
-        </h3>
+        <h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
         <listButtonHorizontal
-        isMultiSelect
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        buttonID="1"
-        buttonLabel="1"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="1"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          buttonID="1"
+          buttonLabel="1"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
-        isMultiSelect
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        buttonID="2"
-        buttonLabel="2"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="2"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          buttonID="2"
+          buttonLabel="2"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
-        isMultiSelect
-        groupName="demo-4"
-        ariaLabelBy="vehicle-model"
-        buttonID="3"
-        buttonLabel="3"
-        textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="3"
-        screenReaderOnlyText=" opens new window"
+          isMultiSelect
+          groupName="demo-4"
+          ariaLabelBy="vehicle-model"
+          buttonID="3"
+          buttonLabel="3"
+          textPosition="text-center"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row px-3">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-      <div role="radiogroup" aria-labelledby="demo-4-checkbox-group" class="d-flex flex-row p-0">
+      <div
+        role="radiogroup"
+        aria-labelledby="demo-4-checkbox-group"
+        class="d-flex flex-row p-0"
+      >
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="sr-only" id="demo-4-checkbox-group">
-          Select Vehicle Year
-        </h3>
+        <h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
         <listButtonHorizontal
-        groupName="demo-4-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="4"
-        buttonLabel="4"
-        textPosition="text-center"
-        loaderEnabled=true
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="1"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-4-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="4"
+          buttonLabel="4"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="1"
+          screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
-        groupName="demo-4-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="5"
-        buttonLabel="5"
-        textPosition="text-center"
-        loaderEnabled=true
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="2"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-4-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="5"
+          buttonLabel="5"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="2"
+          screenReaderOnlyText=" opens new window"
         />
         <listButtonHorizontal
-        groupName="demo-4-checkbox"
-        ariaLabelBy="vehicle-model"
-        buttonID="6"
-        buttonLabel="6"
-        textPosition="text-center"
-        loaderEnabled=true
-        loaderColor="blue"
-        loaderPosition="right"
-        sizeInRem="1"
-        v-bind:totalInGroup="3"
-        v-bind:positionInGroup="3"
-        screenReaderOnlyText=" opens new window"
+          groupName="demo-4-checkbox"
+          ariaLabelBy="vehicle-model"
+          buttonID="6"
+          buttonLabel="6"
+          textPosition="text-center"
+          loaderEnabled="true"
+          loaderColor="blue"
+          loaderPosition="right"
+          sizeInRem="1"
+          v-bind:totalInGroup="3"
+          v-bind:positionInGroup="3"
+          screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -633,22 +655,10 @@
     </div>
     <div class="row">
       <div class="col my-3">
-        <textLink
-          navigation=true
-          text="Navigation Link"
-        /><br><br>
-        <textLink
-          text="Default Link"
-        /><br><br>
-        <textLink
-          textSmall=true
-          text="Small Link"
-        /><br><br>
-        <textLink
-          footer=true
-          text="Footer Link"
-          href="https://google.com"
-        />
+        <textLink navigation="true" text="Navigation Link" /><br /><br />
+        <textLink text="Default Link" /><br /><br />
+        <textLink textSmall="true" text="Small Link" /><br /><br />
+        <textLink footer="true" text="Footer Link" href="https://google.com" />
       </div>
     </div>
     <div class="row my-4">
@@ -710,60 +720,60 @@
     <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"
+          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-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-info"
-        alertHeadline="Info Alert"
-        alertCopy="This is an example of a INFO 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-danger"
-        alertHeadline="Danger Alert"
-        alertCopy="This is an example of a DANGER alert."
-        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"
+          alertClass="alert-success"
+          alertHeadline="No Body Copy Alert"
+          alertCopy=""
+          v-bind:isDismissible="false"
         />
       </div>
     </div>
@@ -775,7 +785,7 @@
     <div class="row my-3">
       <div class="col">
         <funnelHeader
-        imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
+          imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
     </div>
@@ -787,7 +797,7 @@
     <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"
+          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
         />
       </div>
     </div>
@@ -797,94 +807,94 @@
       </div>
     </div>
     <buttonQuestion
-    :answers="checkboxAnswers"
-    :isMultiSelect="true"
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list"
-    questionText="List Button as checkbox"
-   />
-   <buttonQuestion
-    :answers="radioAnswers"
-    ariaLabelBy="radio"
-    groupName="radio-list"
-    questionText="List Button as radio"
-   />
+      :answers="checkboxAnswers"
+      :isMultiSelect="true"
+      ariaLabelBy="checkbox"
+      groupName="checkbox-list"
+      questionText="List Button as checkbox"
+    />
     <buttonQuestion
-    :answers="horizontalCheckboxAnswers"
-    buttonType="listButtonHorizontal"
-    :isMultiSelect="true"
-    isColumn
-    ariaLabelBy="checkbox"
-    groupName="checkbox-list-horizontal"
-    questionText="List Button Horizontal as checkbox"
-   />
-   <buttonQuestion
-    :answers="horizontalRadioAnswers"
-    buttonType="listButtonHorizontal"
-    isColumn
-    ariaLabelBy="radio"
-    groupName="radio-list-horizontal"
-    questionText="List Button Horizontal as radio"
-    sizeInRem="1"
-   />
-   <buttonQuestion
-    :answers="listCardCheckBox"
-    buttonType="listCard"
-    isMultiSelect
-    ariaLabelBy="check_card"
-    groupName="check-list-card"
-    questionText="List Card as checkbox"
-   />
-   <buttonQuestion
-    :answers="listCardRadio"
-    buttonType="listCard"
-    ariaLabelBy="radio_card"
-    groupName="radio-card"
-    questionText="List Card as radio"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card"
-    groupName="horizontal_check-card"
-    questionText="List Card Horizontal as checkbox"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isWide
-    :answers="listCardCheckBoxHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_check_card-st"
-    groupName="horizontal_check-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontal"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card"
-    groupName="horizontal_cradio-card"
-    questionText="List Card Horizontal as radio"
-   />
-   <buttonQuestion
-    isWide
-    :answers="listRadioHorizontalSubText"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-st"
-    groupName="horizontal_cradio-card-st"
-    questionText="With Subtext"
-   />
-   <buttonQuestion
-    isMultiSelect
-    isRow
-    :answers="listCardGroup"
-    buttonType="listCard"
-    ariaLabelBy="horizontal_radio_card-group"
-    groupName="horizontal_cradio-card-group"
-    questionText="In column layout"
-   />
+      :answers="radioAnswers"
+      ariaLabelBy="radio"
+      groupName="radio-list"
+      questionText="List Button as radio"
+    />
+    <buttonQuestion
+      :answers="horizontalCheckboxAnswers"
+      buttonType="listButtonHorizontal"
+      :isMultiSelect="true"
+      isColumn
+      ariaLabelBy="checkbox"
+      groupName="checkbox-list-horizontal"
+      questionText="List Button Horizontal as checkbox"
+    />
+    <buttonQuestion
+      :answers="horizontalRadioAnswers"
+      buttonType="listButtonHorizontal"
+      isColumn
+      ariaLabelBy="radio"
+      groupName="radio-list-horizontal"
+      questionText="List Button Horizontal as radio"
+      sizeInRem="1"
+    />
+    <buttonQuestion
+      :answers="listCardCheckBox"
+      buttonType="listCard"
+      isMultiSelect
+      ariaLabelBy="check_card"
+      groupName="check-list-card"
+      questionText="List Card as checkbox"
+    />
+    <buttonQuestion
+      :answers="listCardRadio"
+      buttonType="listCard"
+      ariaLabelBy="radio_card"
+      groupName="radio-card"
+      questionText="List Card as radio"
+    />
+    <buttonQuestion
+      isMultiSelect
+      isWide
+      :answers="listCardCheckBoxHorizontal"
+      buttonType="listCard"
+      ariaLabelBy="horizontal_check_card"
+      groupName="horizontal_check-card"
+      questionText="List Card Horizontal as checkbox"
+    />
+    <buttonQuestion
+      isMultiSelect
+      isWide
+      :answers="listCardCheckBoxHorizontalSubText"
+      buttonType="listCard"
+      ariaLabelBy="horizontal_check_card-st"
+      groupName="horizontal_check-card-st"
+      questionText="With Subtext"
+    />
+    <buttonQuestion
+      isWide
+      :answers="listRadioHorizontal"
+      buttonType="listCard"
+      ariaLabelBy="horizontal_radio_card"
+      groupName="horizontal_cradio-card"
+      questionText="List Card Horizontal as radio"
+    />
+    <buttonQuestion
+      isWide
+      :answers="listRadioHorizontalSubText"
+      buttonType="listCard"
+      ariaLabelBy="horizontal_radio_card-st"
+      groupName="horizontal_cradio-card-st"
+      questionText="With Subtext"
+    />
+    <buttonQuestion
+      isMultiSelect
+      isRow
+      :answers="listCardGroup"
+      buttonType="listCard"
+      ariaLabelBy="horizontal_radio_card-group"
+      groupName="horizontal_cradio-card-group"
+      questionText="In column layout"
+    />
   </div>
 </template>
 
@@ -913,75 +923,97 @@ export default {
     checkbox,
     funnelHeader,
     buttonQuestion,
-    textLink
+    textLink,
   },
   data() {
     return {
       years: [2023, 2022, 2021, 2020],
-      checkboxAnswers: ['Checkbox Answer 1', 'Checkbox Answer 2', 'Checkbox Answer 3'],
-      radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'],
-      horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'],
-      horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'],
-      listCardCheckBox: [{
-        Name: 'List-Card-CB',
-        Text: "List Card CB",
-        SubText: "checkbox",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listCardRadio: [{
-        Name: 'List-Card-R',
-        Text: "List Card R",
-        SubText: "Radio",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listCardCheckBoxHorizontalSubText: [{
-        Name: 'List-Card-CBHst',
-        Text: "List Card CBHst",
-        SubText: "With Subtext",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listCardCheckBoxHorizontal: [{
-        Name: 'List-Card-CBH',
-        Text: "List Card CBH",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listRadioHorizontalSubText: [{
-        Name: 'List-Card-RHst',
-        Text: "List Card RHst",
-        SubText: "With Subtext",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listRadioHorizontal: [{
-        Name: 'List-Card-RH',
-        Text: "List Card RH",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
-      listCardGroup: [{
-        Name: 'Side-Window-1',
-        Text: "Side Window",
-        SubText: "With Subtext",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      },
-      {
-        Name: 'Side-Window-2',
-        Text: "Side Window",
-        SubText: "With Subtext that is more than one line",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      },
-      {
-        Name: 'Side-Window-3',
-        Text: "Side Window",
-        ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955',
-        AnswerImageUrl: "side-window-damage-right-all.svg"
-      }],
+      checkboxAnswers: [
+        "Checkbox Answer 1",
+        "Checkbox Answer 2",
+        "Checkbox Answer 3",
+      ],
+      radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
+      horizontalCheckboxAnswers: [
+        "HCB Answer 1",
+        "HCB Answer 2",
+        "HCB Answer 3",
+      ],
+      horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
+      listCardCheckBox: [
+        {
+          Name: "List-Card-CB",
+          Text: "List Card CB",
+          SubText: "checkbox",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listCardRadio: [
+        {
+          Name: "List-Card-R",
+          Text: "List Card R",
+          SubText: "Radio",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listCardCheckBoxHorizontalSubText: [
+        {
+          Name: "List-Card-CBHst",
+          Text: "List Card CBHst",
+          SubText: "With Subtext",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listCardCheckBoxHorizontal: [
+        {
+          Name: "List-Card-CBH",
+          Text: "List Card CBH",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listRadioHorizontalSubText: [
+        {
+          Name: "List-Card-RHst",
+          Text: "List Card RHst",
+          SubText: "With Subtext",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listRadioHorizontal: [
+        {
+          Name: "List-Card-RH",
+          Text: "List Card RH",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
+      listCardGroup: [
+        {
+          Name: "Side-Window-1",
+          Text: "Side Window",
+          SubText: "With Subtext",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+        {
+          Name: "Side-Window-2",
+          Text: "Side Window",
+          SubText: "With Subtext that is more than one line",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+        {
+          Name: "Side-Window-3",
+          Text: "Side Window",
+          ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
+          AnswerImageUrl: "side-window-damage-right-all.svg",
+        },
+      ],
     };
   },
 };
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 33a7e6a70..d56b764b3 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,119 +1,126 @@
 <template>
-<Form
-  :validation-schema="schema"
-  @submit="onSubmit"
-  @invalid-submit="onInvalidSubmit"
-  v-slot="{ values, meta }"
-  class="w-50"
->
-  <div class="row g-2 mt-6 mx-4">
-    <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
-    <p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
-  </div>
+  <Form
+    :validation-schema="schema"
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    v-slot="{ values, meta }"
+    class="w-50"
+  >
+    <div class="row g-2 mt-6 mx-4">
+      <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
+      <p class="mx-2">
+        NOTE: This page is testing functionality only; styling will not match
+        Figma mocks.
+      </p>
+    </div>
 
-  <div class="row g-2 mt-6 mx-4">
-    <h4 class="mx-2 mt-4 mb-0">How many chips are we repairing? (Required)</h4>
-    <fieldset>
-    <div
-      role="radiogroup"
-      aria-labelledby="demo-group"
-      class="d-flex flex-row p-0"
-    >
-      <h4 class="sr-only" id="demo-group">
-        How many chips are we repairing?
+    <div class="row g-2 mt-6 mx-4">
+      <h4 class="mx-2 mt-4 mb-0">
+        How many chips are we repairing? (Required)
       </h4>
-      <listButtonHorizontal
-        groupName="demo"
-        aria-required="true"
-        buttonID="1"
-        buttonLabel="1"
-        value="1"
-        buttonLabelSubCopy=""
-        textPosition="text-center"
-        sizeInRem="1"
-        :totalInGroup="3"
-        :positionInGroup="1"
-        screenReaderOnlyText=" opens new window"
-      />
-      <listButtonHorizontal
-        groupName="demo"
-        aria-required="true"
-        buttonID="2"
-        buttonLabel="2"
-        value="2"
-        buttonLabelSubCopy=""
-        textPosition="text-center"
-        sizeInRem="1"
-        :totalInGroup="3"
-        :positionInGroup="2"
-        screenReaderOnlyText=" opens new window"
-      />
-      <listButtonHorizontal
-        groupName="demo"
-        aria-required="true"
-        buttonID="3"
-        buttonLabel="3"
-        value="3"
-        buttonLabelSubCopy=""
-        textPosition="text-center"
-        sizeInRem="1"
-        :totalInGroup="3"
-        :positionInGroup="3"
-        screenReaderOnlyText=" opens new window"
-      />
-    </div>
-  </fieldset>
-    <div class="row px-3 form-test-error">
-      <error-message name="demo"></error-message>
-    </div>
-  </div>
-
-  <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">Which windshield part needs fixed? (Required)</h4>
       <fieldset>
-        <legend class="sr-only">Which windshield part needs fixed?</legend>
-        <listButton
-          isMultiSelect
-          buttonID="Single Windshield"
-          buttonLabel="Single Windshield"
-          value="Single Windshield"
-          groupName="demo2"
-        />
-        <listButton
-          isMultiSelect
-          buttonID="Driver Side"
-          buttonLabel="Driver Side"
-          value="Driver Side"
-          groupName="demo2"
-        />
-        <listButton
-          isMultiSelect
-          buttonID="Passenger Side"
-          buttonLabel="Passenger Side"
-          value="Passenger Side"
-          groupName="demo2"
-        />
+        <div
+          role="radiogroup"
+          aria-labelledby="demo-group"
+          class="d-flex flex-row p-0"
+        >
+          <h4 class="sr-only" id="demo-group">
+            How many chips are we repairing?
+          </h4>
+          <listButtonHorizontal
+            groupName="demo"
+            aria-required="true"
+            buttonID="1"
+            buttonLabel="1"
+            value="1"
+            buttonLabelSubCopy=""
+            textPosition="text-center"
+            sizeInRem="1"
+            :totalInGroup="3"
+            :positionInGroup="1"
+            screenReaderOnlyText=" opens new window"
+          />
+          <listButtonHorizontal
+            groupName="demo"
+            aria-required="true"
+            buttonID="2"
+            buttonLabel="2"
+            value="2"
+            buttonLabelSubCopy=""
+            textPosition="text-center"
+            sizeInRem="1"
+            :totalInGroup="3"
+            :positionInGroup="2"
+            screenReaderOnlyText=" opens new window"
+          />
+          <listButtonHorizontal
+            groupName="demo"
+            aria-required="true"
+            buttonID="3"
+            buttonLabel="3"
+            value="3"
+            buttonLabelSubCopy=""
+            textPosition="text-center"
+            sizeInRem="1"
+            :totalInGroup="3"
+            :positionInGroup="3"
+            screenReaderOnlyText=" opens new window"
+          />
+        </div>
       </fieldset>
+      <div class="row px-3 form-test-error">
+        <error-message name="demo"></error-message>
+      </div>
     </div>
-    <div class="row px-3 form-test-error">
-      <error-message name="demo2"></error-message>
-    </div>
-  </div>
 
-  <div class="row g-2 mt-6 mx-4">
-    <div class="col">
-      <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
-      <textInput
-        name="demo3"
-        type="text"
-        label="VIN (Required)"
-        :isRequired="true"
-      />
+    <div class="row g-2 mt-6 mx-4">
+      <div class="col">
+        <h4 class="mx-2 mt-4 mb-0">
+          Which windshield part needs fixed? (Required)
+        </h4>
+        <fieldset>
+          <legend class="sr-only">Which windshield part needs fixed?</legend>
+          <listButton
+            isMultiSelect
+            buttonID="Single Windshield"
+            buttonLabel="Single Windshield"
+            value="Single Windshield"
+            groupName="demo2"
+          />
+          <listButton
+            isMultiSelect
+            buttonID="Driver Side"
+            buttonLabel="Driver Side"
+            value="Driver Side"
+            groupName="demo2"
+          />
+          <listButton
+            isMultiSelect
+            buttonID="Passenger Side"
+            buttonLabel="Passenger Side"
+            value="Passenger Side"
+            groupName="demo2"
+          />
+        </fieldset>
+      </div>
+      <div class="row px-3 form-test-error">
+        <error-message name="demo2"></error-message>
+      </div>
     </div>
-  </div>
 
-  <!-- <div class="row g-2 mt-6 mx-4">
+    <div class="row g-2 mt-6 mx-4">
+      <div class="col">
+        <h4 class="mx-2 mt-4 mb-0">demo3: Enter your VIN (Required)</h4>
+        <textInput
+          name="demo3"
+          type="text"
+          label="VIN (Required)"
+          :isRequired="true"
+        />
+      </div>
+    </div>
+
+    <!-- <div class="row g-2 mt-6 mx-4">
     <div class="col">
       <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
       <textInput
@@ -125,16 +132,11 @@
     </div>
   </div> -->
 
-  <div class="row g-2 mt-6 mx-4">
-    <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
-    <div
-      aria-labelledby="demo5-group"
-      class="d-flex flex-row p-0"
-    >
-      <h4 class="sr-only" id="demo5-group">
-        Where's your damage?
-      </h4>
-      <listCard
+    <div class="row g-2 mt-6 mx-4">
+      <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
+      <div aria-labelledby="demo5-group" class="d-flex flex-row p-0">
+        <h4 class="sr-only" id="demo5-group">Where's your damage?</h4>
+        <listCard
           isMultiSelect
           buttonImage="windshield-damage.svg"
           buttonLabel="Windshield"
@@ -161,24 +163,25 @@
           buttonID="List Card Checkbox c"
           groupName="demo5"
         />
+      </div>
     </div>
-  </div>
 
-  <div class="row px-3 form-test-error">
-    <error-message name="demo5"></error-message>
-  </div>
+    <div class="row px-3 form-test-error">
+      <error-message name="demo5"></error-message>
+    </div>
 
-  <div class="row g-2 mt-6 mx-4">
-    <h4 class="mx-2 mt-4 mb-0">demo6: What's your windshield damage? (Required if demo5 "Windshield" is selected)</h4>
-    <div
-      role="radiogroup"
-      aria-labelledby="demo6-group"
-      class="d-flex flex-row p-0"
-    >
-      <h4 class="sr-only" id="demo6-group">
-        What's your windshield damage?
+    <div class="row g-2 mt-6 mx-4">
+      <h4 class="mx-2 mt-4 mb-0">
+        demo6: What's your windshield damage? (Required if demo5 "Windshield" is
+        selected)
       </h4>
-      <listCard
+      <div
+        role="radiogroup"
+        aria-labelledby="demo6-group"
+        class="d-flex flex-row p-0"
+      >
+        <h4 class="sr-only" id="demo6-group">What's your windshield damage?</h4>
+        <listCard
           isRadio
           buttonImage="windshield-damage.svg"
           buttonLabel="Crack"
@@ -198,14 +201,14 @@
           buttonID="Chip Checkbox b"
           groupName="demo6"
         />
+      </div>
     </div>
-  </div>
 
-  <div class="row px-3 form-test-error">
-    <error-message name="demo6"></error-message>
-  </div>
+    <div class="row px-3 form-test-error">
+      <error-message name="demo6"></error-message>
+    </div>
 
-  <!-- <div class="row g-2 mt-6 mx-4">
+    <!-- <div class="row g-2 mt-6 mx-4">
     <div class="col">
       <h4 class="mx-2 mt-4 mb-0">Password (Required, enter any string)</h4>
       <textInput
@@ -229,24 +232,24 @@
     </div>
   </div> -->
 
-  <div class="row px-3 form-test-error" data-focus-target="demoX">
-    <error-message name="demoX"></error-message>
-  </div>
+    <div class="row px-3 form-test-error" data-focus-target="demoX">
+      <error-message name="demoX"></error-message>
+    </div>
 
-  <div class="g-2 mt-6 mx-4">
-    <button class="mb-6" :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
-    <p>Current Form Values:</p>
-    <pre>{{ values }}</pre>
-    <p>Is Form Valid? (Meta.valid):</p>
-    <pre>{{ meta.valid }}</pre>
-  </div>
-
-</Form>
+    <div class="g-2 mt-6 mx-4">
+      <button class="mb-6" :class="!meta.valid && 'form-test-invalid'">
+        Get your estimate
+      </button>
+      <p>Current Form Values:</p>
+      <pre>{{ values }}</pre>
+      <p>Is Form Valid? (Meta.valid):</p>
+      <pre>{{ meta.valid }}</pre>
+    </div>
+  </Form>
 </template>
 
 <script>
-
-import { Form, ErrorMessage } from 'vee-validate';
+import { Form, ErrorMessage } from "vee-validate";
 import * as Yup from "yup";
 
 import listCard from "@/ux-components/list-card/list-card";
@@ -258,62 +261,81 @@ export default {
   name: "App",
   data() {
     const errorMessages = {
-      demo: 'Please select chip(s)',
-      demo2: 'Please select a windshield part',
-      demo3: 'You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.',
-      demo4: 'Invalid Entry. Must enter only numbers, no letters.',
-      demo5: 'Please select damage location',
+      demo: "Please select chip(s)",
+      demo2: "Please select a windshield part",
+      demo3:
+        "You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.",
+      demo4: "Invalid Entry. Must enter only numbers, no letters.",
+      demo5: "Please select damage location",
     };
     return {
-      schema: Yup.object().shape({
-        demo: Yup.string().required(errorMessages.demo),
-        demo2: Yup.array().required(errorMessages.demo2).min(1, errorMessages.demo2),
-        demo3: Yup.string()
-          .uppercase()
-          .required('Please enter a VIN.')
-          .min(17, errorMessages.demo3)
-          .max(17, errorMessages.demo3)
-          .matches('^[^IOQ]+$', errorMessages.demo3),
-        // demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
-        demo5: Yup.array().required(errorMessages.demo5).min(1, errorMessages.demo5),
-        demo6: Yup.string()
-          .when('demo5', function (demo5, schema, value) {
+      schema: Yup.object()
+        .shape({
+          demo: Yup.string().required(errorMessages.demo),
+          demo2: Yup.array()
+            .required(errorMessages.demo2)
+            .min(1, errorMessages.demo2),
+          demo3: Yup.string()
+            .uppercase()
+            .required("Please enter a VIN.")
+            .min(17, errorMessages.demo3)
+            .max(17, errorMessages.demo3)
+            .matches("^[^IOQ]+$", errorMessages.demo3),
+          // demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
+          demo5: Yup.array()
+            .required(errorMessages.demo5)
+            .min(1, errorMessages.demo5),
+          demo6: Yup.string().when("demo5", function (demo5, schema, value) {
             if (demo5) {
               const demo5String = demo5.toString();
               if (demo5String.includes("Windshield")) {
                 // make demo6 required
-                return schema.required('You must pick an option for Windshield Damage.')
+                return schema.required(
+                  "You must pick an option for Windshield Damage."
+                );
               }
               return schema;
             }
             return schema;
           }),
-        demoX: Yup.string().notRequired(),
-        // PASSWORD EXAMPLE, NOT BEING USED NOW
-        // password: Yup.string().min(6).required(),
-        // passwordConfirmation: Yup.string()
-        //  .required()
-        //  .oneOf([Yup.ref("password")], "Passwords do not match"),
-      }).test('repair-replace-conflict',
-        null, // need to pass null as error message so it won't get added to list of errors
-        function(value) {
-          // whole form test
-          console.log('ALL FORM VALUES: ', value);
+          demoX: Yup.string().notRequired(),
+          // PASSWORD EXAMPLE, NOT BEING USED NOW
+          // password: Yup.string().min(6).required(),
+          // passwordConfirmation: Yup.string()
+          //  .required()
+          //  .oneOf([Yup.ref("password")], "Passwords do not match"),
+        })
+        .test(
+          "repair-replace-conflict",
+          null, // need to pass null as error message so it won't get added to list of errors
+          function (value) {
+            // whole form test
+            console.log("ALL FORM VALUES: ", value);
 
-          // test problem scenario... return new error if conditions are true, allow submit if not
-          if (value.demo5 && value.demo6) {
-            const demo5String = value.demo5.toString();
-            console.log('demo5String: ', demo5String);
-            console.log('demo6: ', value.demo6);
+            // test problem scenario... return new error if conditions are true, allow submit if not
+            if (value.demo5 && value.demo6) {
+              const demo5String = value.demo5.toString();
+              console.log("demo5String: ", demo5String);
+              console.log("demo6: ", value.demo6);
 
-            if (demo5String.includes("Windshield") && value.demo5.length > 1 && value.demo6 == "Chip") {
-              return this.createError({ name: 'demoX', message: "Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.", path: 'demoX' });
+              if (
+                demo5String.includes("Windshield") &&
+                value.demo5.length > 1 &&
+                value.demo6 == "Chip"
+              ) {
+                return this.createError({
+                  name: "demoX",
+                  message:
+                    "Sorry, at this time we can't schedule a repair and replace at the same time. Please schedule these appointments separately as they are different technicians. Thanks.",
+                  path: "demoX",
+                });
+              }
+              return true;
             }
             return true;
           }
-          return true;
-        }),
-      }
+        ),
+    };
   },
   components: {
     listCard,
@@ -325,8 +347,10 @@ export default {
   },
   methods: {
     onSubmit(values) {
-      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-      console.log('submitted: ', JSON.stringify(values, null ,2));
+      window.alert(
+        "Success! Submitted values: " + JSON.stringify(values, null, 2)
+      );
+      console.log("submitted: ", JSON.stringify(values, null, 2));
     },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
@@ -336,22 +360,22 @@ export default {
       // get errorEls and order by alpha
       const errorEls = Object.keys(errors).sort();
       const firstErrorEl = errorEls[0];
-      console.log('firstErrorEl: ', firstErrorEl);
+      console.log("firstErrorEl: ", firstErrorEl);
       if (firstErrorEl) {
         const qsString = "[data-focus-target='" + firstErrorEl + "']";
         document.querySelector(qsString).focus();
       }
-    }
+    },
   },
 };
 </script>
 
 <style lang="scss">
-  .form-test-error {
-    color: red;
-    font-weight: bold;
-  }
-  .form-test-invalid {
-    opacity: 0.5;
-  }
+.form-test-error {
+  color: red;
+  font-weight: bold;
+}
+.form-test-invalid {
+  opacity: 0.5;
+}
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 02a50023c..81c7c8b7a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -26,24 +26,32 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 jest.mock("@/store", () => ({
   getters: {
     vehicle: {
-      carId: "C00000000"
-    }
-  }
+      carId: "C00000000",
+    },
+  },
 }));
 
 describe("vehicle-damage.vue", () => {
   test("Page header is initailized with api data", async (done) => {
-
     //Arrange
     const pageHeaderWidgetHeaderText = "Select Damage";
-    const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
 
     //Act
-    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
       done();
     });
   });
@@ -51,20 +59,28 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Page logo image is initailized with api data", async (done) => {
-
     //Arrange
     const SiteHeaderWidget = {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      SiteHeaderWidget: SiteHeaderWidget,
+    });
 
     //Act
-    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        SiteHeaderWidget
+      );
       done();
     });
   });
@@ -72,20 +88,28 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Vehicle image is initailized with api data", async (done) => {
-
     //Arrange
     const VehicleBannerWidget = {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ VehicleBannerWidget: VehicleBannerWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      VehicleBannerWidget: VehicleBannerWidget,
+    });
 
     //Act
-    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
+        VehicleBannerWidget
+      );
       done();
     });
   });
@@ -93,12 +117,16 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("CarId set, arePagePrerequisitesValid should be true ", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({});
 
     //Act
-    vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+    vehicleDamage.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-damage" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
     await nextTick();
@@ -112,27 +140,26 @@ function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
-
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
   baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
-    return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] });
+    return Promise.resolve({
+      data: ["Front Window", "Back Window", "Side Window"],
+    });
   });
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
-      VehicleBannerWidget:
-      {
+      VehicleBannerWidget: {
         GenericVehicleImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
       },
-      FunnelHeaderWidget:
-      {
+      FunnelHeaderWidget: {
         LogoImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
     },
-    damageOptions: ['Front Window', 'Back Window', 'Side Window'],
+    damageOptions: ["Front Window", "Back Window", "Side Window"],
   };
 
   const apiPromise = Promise.resolve(apiResponses);
@@ -157,13 +184,18 @@ function setupMocks({
   const wrapper = shallowMount(vehicleDamage, mountOptions);
 
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
 
   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
 
-  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-make/make-question/make-question.spec.js b/src/layouts/vehicle-make/make-question/make-question.spec.js
index 6a811459f..469be6d24 100644
--- a/src/layouts/vehicle-make/make-question/make-question.spec.js
+++ b/src/layouts/vehicle-make/make-question/make-question.spec.js
@@ -2,11 +2,16 @@ import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
-jest.mock("@/store", () => { return {}; }, {virtual: true});
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("make-question.vue", () => {
   test("Selected make is emitted upon selection.", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({ modelValueProp: "honda" });
     const makeToSelect = "ford";
@@ -16,51 +21,65 @@ describe("make-question.vue", () => {
     await wrapper.vm.$nextTick();
 
     //Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{selectedMake: "ford"}]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { selectedMake: "ford" },
+    ]);
   });
 });
 
 describe("make-question.vue", () => {
   test("CMS question text is used as radio question text.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
+    const { wrapper, cmsContent } = setupMocks({
+      cmsQuestionText: "What make is your vehicle?",
+    });
 
     //Act
     makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe(
+      "What make is your vehicle?"
+    );
   });
 });
 
 describe("make-question.vue", () => {
   test("Data from store api are used as radio question answers.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["honda", "ford", "dodge"],
+    });
 
     //Act
     const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
-    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+    makeQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      initialData
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("answers")).toBe(
+      "honda,ford,dodge"
+    );
   });
 });
 
-
 function setupMocks({
   modelValueProp = "1900",
   cmsQuestionText = "CMS text goes here",
   dataFromStoreApi = [],
 }) {
-  
   //Mock store
   store.dispatch = jest.fn(() => dataFromStoreApi);
-  store.getters = { vehicle: {year: 2019} };
+  store.getters = { vehicle: { year: 2019 } };
   const mountOptions = getMountOptions({
     store: {
       dispatch: store.dispatch,
@@ -76,7 +95,7 @@ function setupMocks({
 
   //Mock CMS content
   const cmsContent = {
-    QuestionText: cmsQuestionText
-  };  
+    QuestionText: cmsQuestionText,
+  };
   return { wrapper, cmsContent };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 0276f1a67..2a94deafe 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -1,5 +1,6 @@
 <template>
-<buttonQuestion class="radioQuestion"
+  <buttonQuestion
+    class="radioQuestion"
     isOverflowScrollable
     :questionText="questionText"
     :answers="makes"
@@ -23,7 +24,7 @@ export default {
     return {
       questionText: null,
       makes: Array,
-    }
+    };
   },
   props: {
     modelValue: String,
@@ -33,17 +34,20 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_VEHICLE_MAKES,
+        { year: store.getters.vehicle.year }
+      );
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
       this.makes = initialData;
-    }
+    },
   },
   watch: {
     modelValue(val) {
       this.$emit("update:modelValue", val);
-    }
+    },
   },
 };
 </script>
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index 8043b94d7..146dd6318 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -9,13 +9,12 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 
-
 jest.mock("@/store", () => ({
   getters: {
     vehicle: {
-      year: 2019
-    }
-  }
+      year: 2019,
+    },
+  },
 }));
 
 // Mock fetchCmsContentForPage
@@ -34,22 +33,30 @@ beforeEach(() => {
 
 describe("vehicle-make.vue", () => {
   test("Make question component is initized with api data", async (done) => {
-
     //Arrange
-    const vehicleMakeQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
+    const vehicleMakeQuestionCmsContent = {
+      QuestionText: "What make is your vehicle?",
+    };
     const makeQuestionInitialData = ["honda", "ford", "dodge"];
     const { wrapper, apiPromise } = setupMocks({
       vehicleMakeQuestionCmsContent: vehicleMakeQuestionCmsContent,
       makeQuestionInitialData: makeQuestionInitialData,
     });
 
-
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleMakeQuestionCmsContent, makeQuestionInitialData);
+      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        vehicleMakeQuestionCmsContent,
+        makeQuestionInitialData
+      );
       done();
     });
   });
@@ -57,17 +64,25 @@ describe("vehicle-make.vue", () => {
 
 describe("vehicle-make.vue", () => {
   test("Page header is initailized with api data", async (done) => {
-
     //Arrange
     const pageHeaderWidgetHeaderText = "Select a make to get started";
-    const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
 
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
       done();
     });
   });
@@ -75,20 +90,28 @@ describe("vehicle-make.vue", () => {
 
 describe("vehicle-make.vue", () => {
   test("Page logo image is initailized with api data", async (done) => {
-
     //Arrange
     const SiteHeaderWidget = {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      SiteHeaderWidget: SiteHeaderWidget,
+    });
 
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        SiteHeaderWidget
+      );
       done();
     });
   });
@@ -96,20 +119,28 @@ describe("vehicle-make.vue", () => {
 
 describe("vehicle-make.vue", () => {
   test("Vehicle image is initailized with api data", async (done) => {
-
     //Arrange
     const VehicleBannerWidget = {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ VehicleBannerWidget: VehicleBannerWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      VehicleBannerWidget: VehicleBannerWidget,
+    });
 
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
+        VehicleBannerWidget
+      );
       done();
     });
   });
@@ -117,19 +148,23 @@ describe("vehicle-make.vue", () => {
 
 describe("vehicle-make.vue", () => {
   test("BackButtonAction triggers a router.navigate change", async (done) => {
-
     //Arrange
     const { wrapper, apiPromise } = setupMocks({
       pageHeaderWidgetHeaderText: "Select a make to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn()
+          navigate: jest.fn(),
         },
       },
     });
 
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     wrapper.vm.backButtonAction();
     await nextTick();
 
@@ -143,12 +178,16 @@ describe("vehicle-make.vue", () => {
 
 describe("vehicle-make.vue", () => {
   test("Year set, arePagePrerequisitesValid should be true ", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({});
 
     //Act
-    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleMake.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
     await nextTick();
@@ -158,26 +197,22 @@ describe("vehicle-make.vue", () => {
   });
 });
 
-
 function setupMocks({
   vehicleMakeQuestionCmsContent = {},
   makeQuestionInitialData = {},
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
-
   //Mock api responses
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
-      VehicleBannerWidget:
-      {
+      VehicleBannerWidget: {
         GenericVehicleImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
       },
-      FunnelHeaderWidget:
-      {
+      FunnelHeaderWidget: {
         LogoImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
@@ -208,13 +243,19 @@ function setupMocks({
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleMake, mountOptions);
   const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
-  makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+  makeQuestionWrapper.vm.initializeComponent =
+    makeQuestion.methods.initializeComponent;
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
-  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js
index e067cef37..061dd565e 100644
--- a/src/layouts/vehicle-model/model-question/model-question.spec.js
+++ b/src/layouts/vehicle-model/model-question/model-question.spec.js
@@ -2,11 +2,16 @@ import modelQuestion from "@/layouts/vehicle-model/model-question/model-question
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
-jest.mock("@/store", () => { return {}; }, {virtual: true});
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("model-question.vue", () => {
   test("Selected model is emitted upon selection.", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({ modelValueProp: "Accord" });
     const modelToSelect = "Civic";
@@ -16,51 +21,69 @@ describe("model-question.vue", () => {
     await wrapper.vm.$nextTick();
 
     //Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{selectedModel: "Civic"}]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { selectedModel: "Civic" },
+    ]);
   });
 });
 
 describe("model-question.vue", () => {
   test("CMS question text is used as radio question text.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
+    const { wrapper, cmsContent } = setupMocks({
+      cmsQuestionText: "What model is your vehicle?",
+    });
 
     //Act
-    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+    modelQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      null
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe(
+      "What model is your vehicle?"
+    );
   });
 });
 
 describe("model-question.vue", () => {
   test("Data from store api are used as radio question answers.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["accord", "civic", "insight"],
+    });
 
     //Act
     const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
-    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+    modelQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      initialData
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("answers")).toBe(
+      "accord,civic,insight"
+    );
   });
 });
 
-
 function setupMocks({
   modelValueProp = "1900",
   cmsQuestionText = "CMS text goes here",
   dataFromStoreApi = [],
 }) {
-  
   //Mock store
   store.dispatch = jest.fn(() => dataFromStoreApi);
-  store.getters = { vehicle: {year: 2019, make: 'honda'} };
+  store.getters = { vehicle: { year: 2019, make: "honda" } };
   const mountOptions = getMountOptions({
     store: {
       dispatch: store.dispatch,
@@ -76,7 +99,7 @@ function setupMocks({
 
   //Mock CMS content
   const cmsContent = {
-    QuestionText: cmsQuestionText
-  };  
+    QuestionText: cmsQuestionText,
+  };
   return { wrapper, cmsContent };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index a6dee179d..34a811e27 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -1,5 +1,6 @@
 <template>
-<buttonQuestion class="radioQuestion"
+  <buttonQuestion
+    class="radioQuestion"
     isOverflowScrollable
     :questionText="questionText"
     :answers="models"
@@ -23,7 +24,7 @@ export default {
     return {
       questionText: null,
       models: Array,
-    }
+    };
   },
   props: {
     modelValue: String,
@@ -33,17 +34,20 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MODELS, {year: store.getters.vehicle.year, make: store.getters.vehicle.make});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_VEHICLE_MODELS,
+        { year: store.getters.vehicle.year, make: store.getters.vehicle.make }
+      );
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
       this.models = initialData;
-    }
+    },
   },
   watch: {
     modelValue(val) {
       this.$emit("update:modelValue", val);
-    }
+    },
   },
 };
 </script>
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index 1187220b7..4c61215ba 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -26,25 +26,35 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 jest.mock("@/store", () => ({
   getters: {
     vehicle: {
-      make: "Acura"
-    }
-  }
+      make: "Acura",
+    },
+  },
 }));
 
 describe("vehicle-model.vue", () => {
   test("Model question component is initized with api data", async (done) => {
     //Arange
-    const buttonQuestionContent = { QuestionText: "What model is your vehicle?" };
+    const buttonQuestionContent = {
+      QuestionText: "What model is your vehicle?",
+    };
     const modelQuestionInitialData = ["accord", "civic", "insight"];
     const { wrapper, apiPromise } = setupMocks({
       buttonQuestionContent: buttonQuestionContent,
       modelQuestionInitialData: modelQuestionInitialData,
     });
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     //Assert
     apiPromise.finally(() => {
-      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(buttonQuestionContent, modelQuestionInitialData);
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        buttonQuestionContent,
+        modelQuestionInitialData
+      );
       done();
     });
   });
@@ -53,12 +63,21 @@ describe("vehicle-model.vue", () => {
   test("Page header is initailized with api data", async (done) => {
     //Arrange
     const pageHeaderWidgetHeaderText = "Select a model to get started";
-    const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     //Assert
     apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
       done();
     });
   });
@@ -69,13 +88,22 @@ describe("vehicle-model.vue", () => {
     const SiteHeaderWidget = {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      SiteHeaderWidget: SiteHeaderWidget,
+    });
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     //Assert
     apiPromise.finally(() => {
-      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        SiteHeaderWidget
+      );
       done();
     });
   });
@@ -86,13 +114,22 @@ describe("vehicle-model.vue", () => {
     const VehicleBannerWidget = {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-    }
-    const { wrapper, apiPromise } = setupMocks({ VehicleBannerWidget: VehicleBannerWidget });
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      VehicleBannerWidget: VehicleBannerWidget,
+    });
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     //Assert
     apiPromise.finally(() => {
-      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
+        VehicleBannerWidget
+      );
       done();
     });
   });
@@ -104,12 +141,17 @@ describe("vehicle-model.vue", () => {
       pageHeaderWidgetHeaderText: "Select a model to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn()
+          navigate: jest.fn(),
         },
       },
     });
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     wrapper.vm.backButtonAction();
     await nextTick();
     //Assert
@@ -121,12 +163,16 @@ describe("vehicle-model.vue", () => {
 });
 describe("vehicle-model.vue", () => {
   test("Make set, arePagePrerequisitesValid should be true ", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({});
 
     //Act
-    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    vehicleModel.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-model" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
     await nextTick();
@@ -147,13 +193,11 @@ function setupMocks({
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleModelQuestion: buttonQuestionContent,
-      VehicleBannerWidget:
-      {
+      VehicleBannerWidget: {
         GenericVehicleImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
       },
-      FunnelHeaderWidget:
-      {
+      FunnelHeaderWidget: {
         LogoImage:
           "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
@@ -183,16 +227,22 @@ function setupMocks({
   const wrapper = shallowMount(vehicleModel, mountOptions);
 
   const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
-  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+  modelQuestionWrapper.vm.initializeComponent =
+    modelQuestion.methods.initializeComponent;
 
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
 
   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
 
-  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js
index d346e3e62..bddbf7111 100644
--- a/src/layouts/vehicle-style/style-question/style-question.spec.js
+++ b/src/layouts/vehicle-style/style-question/style-question.spec.js
@@ -2,11 +2,16 @@ import styleQuestion from "@/layouts/vehicle-style/style-question/style-question
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
-jest.mock("@/store", () => { return {}; }, {virtual: true});
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("style-question.vue", () => {
   test("Selected style is emitted upon selection.", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
     const styleToSelect = "4 Door";
@@ -16,51 +21,67 @@ describe("style-question.vue", () => {
     await wrapper.vm.$nextTick();
 
     //Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{selectedStyle: "4 Door"}]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { selectedStyle: "4 Door" },
+    ]);
   });
 });
 
 describe("style-question.vue", () => {
   test("CMS question text is used as radio question text.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What style is your vehicle?" });
+    const { wrapper, cmsContent } = setupMocks({
+      cmsQuestionText: "What style is your vehicle?",
+    });
 
     //Act
-    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+    styleQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      null
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What style is your vehicle?");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe(
+      "What style is your vehicle?"
+    );
   });
 });
 
 describe("style-question.vue", () => {
   test("Data from store api are used as radio question answers.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2 Door", "4 Door"] });
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["2 Door", "4 Door"],
+    });
 
     //Act
     const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
-    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+    styleQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      initialData
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
     expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
   });
 });
 
-
 function setupMocks({
   modelValueProp = "1900",
   cmsQuestionText = "CMS text goes here",
   dataFromStoreApi = [],
 }) {
-  
   //Mock store
   store.dispatch = jest.fn(() => dataFromStoreApi);
-  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc'} };
+  store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } };
   const mountOptions = getMountOptions({
     store: {
       dispatch: store.dispatch,
@@ -76,7 +97,7 @@ function setupMocks({
 
   //Mock CMS content
   const cmsContent = {
-    QuestionText: cmsQuestionText
-  };  
+    QuestionText: cmsQuestionText,
+  };
   return { wrapper, cmsContent };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index 36c3718e8..f82ac6981 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -1,5 +1,6 @@
 <template>
-<buttonQuestion class="radioQuestion"
+  <buttonQuestion
+    class="radioQuestion"
     isOverflowScrollable
     :questionText="questionText"
     :answers="styles"
@@ -23,7 +24,7 @@ export default {
     return {
       questionText: null,
       styles: Array,
-    }
+    };
   },
   props: {
     modelValue: String,
@@ -33,17 +34,24 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_STYLES, {year: store.getters.vehicle.year, make: store.getters.vehicle.make, model: store.getters.vehicle.model});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_VEHICLE_STYLES,
+        {
+          year: store.getters.vehicle.year,
+          make: store.getters.vehicle.make,
+          model: store.getters.vehicle.model,
+        }
+      );
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
       this.styles = initialData;
-    }
+    },
   },
   watch: {
     modelValue(val) {
       this.$emit("update:modelValue", val);
-    }
+    },
   },
 };
 </script>
diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js
index d408ceb9d..183b22d57 100644
--- a/src/layouts/vehicle-style/vehicle-style.spec.js
+++ b/src/layouts/vehicle-style/vehicle-style.spec.js
@@ -27,28 +27,37 @@ jest.mock("@/helpers/cms-content-helper", () => ({
 jest.mock("@/store", () => ({
   getters: {
     vehicle: {
-      model: "TL"
-    }
-  }
+      model: "TL",
+    },
+  },
 }));
 
 describe("vehicle-style.vue", () => {
   test("Style question component is initized with api data", async (done) => {
-
     //Arrange
-    const vehicleStyleQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
+    const vehicleStyleQuestionCmsContent = {
+      QuestionText: "What style is your vehicle?",
+    };
     const styleQuestionInitialData = ["2 Door", "4 Door"];
-    const { wrapper, apiPromise } = setupMocks( { 
-      vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent, 
+    const { wrapper, apiPromise } = setupMocks({
+      vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent,
       styleQuestionInitialData: styleQuestionInitialData,
-    } );
+    });
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleStyleQuestionCmsContent, styleQuestionInitialData);
+      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        vehicleStyleQuestionCmsContent,
+        styleQuestionInitialData
+      );
       done();
     });
   });
@@ -56,17 +65,25 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("Page header is initailized with api data", async (done) => {
-
     //Arrange
     const pageHeaderWidgetHeaderText = "Select a style to get started";
-    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+    const { wrapper, apiPromise } = setupMocks({
+      pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+    });
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        pageHeaderWidgetHeaderText
+      );
       done();
     });
   });
@@ -74,20 +91,28 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("Page logo image is initailized with api data", async (done) => {
-
     //Arrange
     const SiteHeaderWidget = {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-    }
-    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      SiteHeaderWidget: SiteHeaderWidget,
+    });
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        SiteHeaderWidget
+      );
       done();
     });
   });
@@ -95,20 +120,28 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("Vehicle image is initailized with api data", async (done) => {
-
     //Arrange
     const VehicleBannerWidget = {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-    }
-    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      VehicleBannerWidget: VehicleBannerWidget,
+    });
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
+        VehicleBannerWidget
+      );
       done();
     });
   });
@@ -116,19 +149,23 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("BackButtonAction triggers a router.navigate change", async (done) => {
-    
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { 
+    const { wrapper, apiPromise } = setupMocks({
       pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         router: {
-          navigate: jest.fn()
+          navigate: jest.fn(),
         },
       },
     });
-    
+
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     wrapper.vm.backButtonAction();
     await nextTick();
 
@@ -142,9 +179,8 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("selectVehicle triggers a dispatchNonBlockingStoreAction commit", async (done) => {
-
     //Arrange
-    const { wrapper, apiPromise } = setupMocks( { 
+    const { wrapper, apiPromise } = setupMocks({
       pageHeaderWidgetHeaderText: "Select a style to get started",
       mountOptionsMockData: {
         store: {
@@ -152,23 +188,28 @@ describe("vehicle-style.vue", () => {
           getters: {
             vehicle: {
               year: 2020,
-              make: 'Honda',
-              model: 'Civic',
-              style: '2 Door',
-            }
-          }
+              make: "Honda",
+              model: "Civic",
+              style: "2 Door",
+            },
+          },
         },
         actionList: [
           {
             actionName: storeActions.SET_VEHICLE,
-            data: 'mockData'
-          }
-        ]
+            data: "mockData",
+          },
+        ],
       },
-    }); 
+    });
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
     wrapper.vm.setVehicle();
     await nextTick();
 
@@ -182,12 +223,16 @@ describe("vehicle-style.vue", () => {
 
 describe("vehicle-style.vue", () => {
   test("Model set, arePagePrerequisitesValid should be true ", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({});
 
     //Act
-    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    vehicleStyle.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-style" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
     await nextTick();
@@ -202,22 +247,19 @@ function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
-  
   //Mock api responses
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
-      VehicleBannerWidget: 
-        {
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-        },
-      FunnelHeaderWidget:
-        {
-          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",
+      },
+      FunnelHeaderWidget: {
+        LogoImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+      },
     },
     styleQuestionInitialData: styleQuestionInitialData,
   };
@@ -249,16 +291,22 @@ function setupMocks({
   const wrapper = shallowMount(vehicleStyle, mountOptions);
 
   const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
-  styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+  styleQuestionWrapper.vm.initializeComponent =
+    styleQuestion.methods.initializeComponent;
 
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
 
   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
 
-  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js
index c386bf4d4..9b27e6555 100644
--- a/src/layouts/vehicle-year/vehicle-year.spec.js
+++ b/src/layouts/vehicle-year/vehicle-year.spec.js
@@ -15,21 +15,30 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 
 describe("vehicle-year.vue", () => {
   test("Year question component is initized with api data", async (done) => {
-
     //Arrange
-    const vehicleYearQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
+    const vehicleYearQuestionCmsContent = {
+      QuestionText: "What year is your vehicle?",
+    };
     const yearQuestionInitialData = ["2023", "2022", "2021"];
-    const { wrapper, apiPromise } = setupMocks( { 
-      vehicleYearQuestionCmsContent: vehicleYearQuestionCmsContent, 
+    const { wrapper, apiPromise } = setupMocks({
+      vehicleYearQuestionCmsContent: vehicleYearQuestionCmsContent,
       yearQuestionInitialData: yearQuestionInitialData,
-    } );
+    });
 
     //Act
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-year" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleYearQuestionCmsContent, yearQuestionInitialData);
+      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(
+        vehicleYearQuestionCmsContent,
+        yearQuestionInitialData
+      );
       done();
     });
   });
@@ -37,20 +46,28 @@ describe("vehicle-year.vue", () => {
 
 describe("vehicle-year.vue", () => {
   test("Page logo image is initailized with api data", async (done) => {
-
     //Arrange
     const SiteHeaderWidget = {
       LogoImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-    }
-    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      SiteHeaderWidget: SiteHeaderWidget,
+    });
 
     //Act
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-year" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
+        SiteHeaderWidget
+      );
       done();
     });
   });
@@ -58,34 +75,45 @@ describe("vehicle-year.vue", () => {
 
 describe("vehicle-year.vue", () => {
   test("Vehicle image is initailized with api data", async (done) => {
-
     //Arrange
     const VehicleBannerWidget = {
       GenericVehicleImage:
         "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-    }
-    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+    };
+    const { wrapper, apiPromise } = setupMocks({
+      VehicleBannerWidget: VehicleBannerWidget,
+    });
 
     //Act
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-year" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     //Assert
     apiPromise.finally(() => {
-      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
+        VehicleBannerWidget
+      );
       done();
     });
   });
 });
 
-
 describe("vehicle-year.vue", () => {
   test("arePagePrerequisitesValid should be true ", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({});
 
     //Act
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    vehicleYear.beforeRouteEnter.call(
+      wrapper.vm,
+      { query: { fmgPage: "vehicle-make" } },
+      undefined,
+      (c) => c(wrapper.vm)
+    );
 
     let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
     await nextTick();
@@ -101,22 +129,19 @@ function setupMocks({
   pageHeaderWidgetHeaderText = {},
   mountOptionsMockData = {},
 }) {
-  
   //Mock api responses
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText },
       VehicleYearQuestion: vehicleYearQuestionCmsContent,
-      VehicleBannerWidget: 
-        {
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-        },
-      FunnelHeaderWidget: 
-        {
-          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",
+      },
+      FunnelHeaderWidget: {
+        LogoImage:
+          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+      },
     },
     yearQuestionInitialData: yearQuestionInitialData,
   };
@@ -140,13 +165,19 @@ function setupMocks({
   const mountOptions = getMountOptions(mountOptionsMockData);
   const wrapper = shallowMount(vehicleYear, mountOptions);
   const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
-  yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+  yearQuestionWrapper.vm.initializeComponent =
+    yearQuestion.methods.initializeComponent;
   const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
-  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  funnelHeaderWrapper.vm.initializeComponent =
+    funnelHeader.methods.initializeComponent;
   const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
-  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
-  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
-  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+  vehicleBannerWrapper.vm.initializeComponent =
+    vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({
+    name: "funnelSubHeader",
+  });
+  funnelSubHeaderWrapper.vm.initializeComponent =
+    funnelSubHeader.methods.initializeComponent;
 
   return { wrapper, apiPromise };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js
index 4d1a32a34..fe0852533 100644
--- a/src/layouts/vehicle-year/year-question/year-question.spec.js
+++ b/src/layouts/vehicle-year/year-question/year-question.spec.js
@@ -2,11 +2,16 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
-jest.mock("@/store", () => { return {}; }, {virtual: true});
+jest.mock(
+  "@/store",
+  () => {
+    return {};
+  },
+  { virtual: true }
+);
 
 describe("year-question.vue", () => {
   test("Selected year is emitted upon selection.", async () => {
-
     //Arrange
     const { wrapper } = setupMocks({ modelValueProp: "2020" });
     const yearToSelect = "2021";
@@ -16,48 +21,62 @@ describe("year-question.vue", () => {
     await wrapper.vm.$nextTick();
 
     //Assert
-    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: "2021"}]);
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+      { modelValue: "2021" },
+    ]);
   });
 });
 
 describe("year-question.vue", () => {
   test("CMS question text is used as radio question text.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
+    const { wrapper, cmsContent } = setupMocks({
+      cmsQuestionText: "What year is your vehicle?",
+    });
 
     //Act
     yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe(
+      "What year is your vehicle?"
+    );
   });
 });
 
 describe("year-question.vue", () => {
   test("Data from store api are used as radio question answers.", async () => {
-
     //Arrange
-    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] });
+    const { wrapper, cmsContent } = setupMocks({
+      dataFromStoreApi: ["2023", "2022", "2021"],
+    });
 
     //Act
     const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
-    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+    yearQuestion.methods.initializeComponent.call(
+      wrapper.vm,
+      cmsContent,
+      initialData
+    );
 
     //Assert
-    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
-    expect(buttonQuestionComponent.attributes("answers")).toBe("2023,2022,2021");
+    const buttonQuestionComponent = await wrapper.findComponent({
+      name: "buttonQuestion",
+    });
+    expect(buttonQuestionComponent.attributes("answers")).toBe(
+      "2023,2022,2021"
+    );
   });
 });
 
-
 function setupMocks({
   modelValueProp = "1900",
   cmsQuestionText = "CMS text goes here",
   dataFromStoreApi = [],
 }) {
-  
   //Mock store
   store.dispatch = jest.fn(() => dataFromStoreApi);
   const mountOptions = getMountOptions({
@@ -74,7 +93,7 @@ function setupMocks({
 
   //Mock CMS content
   const cmsContent = {
-    QuestionText: cmsQuestionText
-  };  
+    QuestionText: cmsQuestionText,
+  };
   return { wrapper, cmsContent };
-}
\ No newline at end of file
+}
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index d189bb54a..72d281302 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -1,5 +1,6 @@
 <template>
-<buttonQuestion class="radioQuestion"
+  <buttonQuestion
+    class="radioQuestion"
     isOverflowScrollable
     :questionText="questionText"
     :answers="years"
@@ -21,7 +22,7 @@ export default {
     return {
       questionText: null,
       years: Array,
-    }
+    };
   },
   props: {
     modelValue: String,
@@ -31,17 +32,20 @@ export default {
   },
   methods: {
     loadInitialData() {
-      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.GET_VEHICLE_YEARS,
+        {}
+      );
     },
     initializeComponent(cmsContent, initialData) {
       this.questionText = cmsContent.QuestionText;
       this.years = initialData;
-    }
+    },
   },
   watch: {
     modelValue(val) {
       this.$emit("update:modelValue", val);
-    }
+    },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/main.js b/src/main.js
index 322374cfd..c78696333 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,5 +14,4 @@ vueApp.use(store);
 vueApp.use(LoadScript);
 vueApp.mixin(baseMixin);
 
-
 vueApp.mount("#app");
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index bfa9a5d7e..5c1e8946d 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -6,8 +6,7 @@ import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
   data() {
-    return {
-    };
+    return {};
   },
   methods: {
     dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index 42281c4d7..bdc083399 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -8,7 +8,7 @@ import store from "@/store";
 describe("baseMixin.js", () => {
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
-    const type = '';
+    const type = "";
     const payload = {};
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
@@ -18,7 +18,7 @@ describe("baseMixin.js", () => {
 
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
-    const type = '';
+    const type = "";
     const payload = { make: "Alfa Romeo/Chrysler" };
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
@@ -58,7 +58,7 @@ describe("baseMixin.js", () => {
     // Assert
     expect(navigationScenariosForTest).toEqual(navigationScenarios);
   });
-  
+
   test("computed: widgetNames should be equal to import object", () => {
     // Arrange
     const mixIn = getMixInInstance({});
@@ -69,10 +69,8 @@ describe("baseMixin.js", () => {
     // Assert
     expect(widgetNamesForTest).toEqual(widgetNames);
   });
-
 });
 
-
 function getMixInInstance({ isDispatchSuccess = true }) {
   // Mock Store
   const storeDispatch = jest.fn();
diff --git a/src/router/index.js b/src/router/index.js
index 7482a3d50..413460bd4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,12 +40,14 @@ const routes = [
       if (to.query.fmgPage === undefined) {
         await GoToFunnelStartOn404(next);
       } else {
-
         try {
           // If we already have our route, go to it.
           if (router.hasRoute(to.query.fmgPage)) {
-            // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function. 
-            let arePagePrerequisitesValid = router.getRoutes().filter(x => x.name === to.query.fmgPage)[0].components.default.methods.arePagePrerequisitesValid();
+            // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
+            let arePagePrerequisitesValid = router
+              .getRoutes()
+              .filter((x) => x.name === to.query.fmgPage)[0]
+              .components.default.methods.arePagePrerequisitesValid();
 
             if (!arePagePrerequisitesValid) {
               await GoToFunnelStartOn404(next);
@@ -66,22 +68,26 @@ const routes = [
 
           // Call the next components arePagePrerequisitesValid method before load.
           // If it returns false, use the 404 logic.
-          let nextComponent = await router.getRoutes().filter(x => x.name === routeData[0].name)[0].components.default();
+          let nextComponent = await router
+            .getRoutes()
+            .filter((x) => x.name === routeData[0].name)[0]
+            .components.default();
 
           if (!nextComponent.default.methods.arePagePrerequisitesValid()) {
             await GoToFunnelStartOn404(next);
           }
 
           // Assign current query string parameters, as well as our fmgPage one.
-          next({ name: routeData[0].name, query: Object.assign(to.query, { fmgPage: routeData[0].name }) });
-          
+          next({
+            name: routeData[0].name,
+            query: Object.assign(to.query, { fmgPage: routeData[0].name }),
+          });
         } catch (error) {
           console.log(error);
 
           // If we don't have a route, go to our 404 page.
           await GoToFunnelStartOn404(next);
         }
-
       }
     },
   },
@@ -94,7 +100,6 @@ const router = createRouter({
 
 //---------------------------------------------------------- Router Functions ----------------------------------------------------------
 
-
 // Navigate to the next route, depending on the scenario.
 router.navigate = (
   scenario,
@@ -149,7 +154,9 @@ function navigateToUrl(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.
 async function GetRouteInfoFromPageName(pageName) {
-  const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName });
+  const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, {
+    pageName: pageName,
+  });
   const jsonFromResponse = JSON.parse(response.data.Result);
   let routeData = [];
 
@@ -167,7 +174,6 @@ async function GetRouteInfoFromPageName(pageName) {
 
 // Go to our start page on a 404.
 async function GoToFunnelStartOn404(next) {
-
   const apiResponse = await store.dispatch(storeActions.GET_HOMEPAGE_NAME);
   const homepageName = apiResponse.data.Result;
 
@@ -177,14 +183,14 @@ async function GoToFunnelStartOn404(next) {
     globalEvents.SubCategories.PAGE_NOT_FOUND,
     {
       isDismissible: true,
-      messageCopy: 'You can get a quote by starting on this page.',
-      messageHeadline: 'We\'re sorry, something went wrong.',
-      type: globalEventTypes.Danger
+      messageCopy: "You can get a quote by starting on this page.",
+      messageHeadline: "We're sorry, something went wrong.",
+      type: globalEventTypes.Danger,
     }
   );
 
   next({
-    path: '/',
+    path: "/",
     query: { fmgPage: homepageName },
   });
 }
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index dc467edc2..17f05b304 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -21,7 +21,7 @@ const routingTable = [
       {
         scenario: navigationScenarios.CLICKED_BACK,
         destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
-      }
+      },
     ],
   },
   {
@@ -34,7 +34,7 @@ const routingTable = [
       {
         scenario: navigationScenarios.CLICKED_BACK,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
-      }
+      },
     ],
   },
   {
@@ -47,9 +47,9 @@ const routingTable = [
       {
         scenario: navigationScenarios.CLICKED_BACK,
         destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
-      }
+      },
     ],
   },
 ];
 
-export { routingTable };
\ No newline at end of file
+export { routingTable };
diff --git a/src/store/index.js b/src/store/index.js
index ad4a9f388..9d5078f74 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,6 @@
 import { createStore } from "vuex";
 import { endpoints } from "@/constants/endpoints.js";
-import { storeMutations } from "@/constants/store-mutations"
+import { storeMutations } from "@/constants/store-mutations";
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
 import eventBus from "../helpers/event-bus/event-bus";
@@ -29,7 +29,7 @@ export default createStore({
       },
     },
     applicationUser: {
-      eventBus: []
+      eventBus: [],
     },
   },
   // See IMPORTANT note at top of "state" declaration.
@@ -55,23 +55,30 @@ export default createStore({
       state.applicationUser.eventBus.push(event);
     },
     removeEventFromBus(state, eventData) {
-      const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventData.category && subCategory === eventData.subCategory);
+      const matchedEvent = state.applicationUser.eventBus.find(
+        ({ category, subCategory }) =>
+          category === eventData.category &&
+          subCategory === eventData.subCategory
+      );
       const itemIndex = state.applicationUser.eventBus.indexOf(matchedEvent);
 
       // If the item exists, remove it.
       if (itemIndex > -1) {
         state.applicationUser.eventBus.splice(itemIndex, 1);
       }
-    }
+    },
   },
   getters: {
-    vehicle: state => state.order.vehicle,
+    vehicle: (state) => state.order.vehicle,
     eventBusItem: (state) => (eventCategory, eventSubCategory) => {
-      const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);
+      const matchedEvent = state.applicationUser.eventBus.find(
+        ({ category, subCategory }) =>
+          category === eventCategory && subCategory === eventSubCategory
+      );
 
       return matchedEvent !== undefined ? matchedEvent.eventValue : undefined;
     },
-    eventBus: state => state.applicationUser.eventBus
+    eventBus: (state) => state.applicationUser.eventBus,
   },
   actions: {
     // Vehicle API Actions
@@ -119,22 +126,24 @@ export default createStore({
         payload: {},
       });
     },
-    setVehicle(context, {year, make, model, style}) {
-      return globalMethods.callHttpClient({
-        methods: endpoints.GetVehicle.method,
-        endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
-        payload: {},
-      }).then(response => {
-        context.commit(storeMutations.UPDATE_VEHICLE, response.data);
-        return response;
-      });
+    setVehicle(context, { year, make, model, style }) {
+      return globalMethods
+        .callHttpClient({
+          methods: endpoints.GetVehicle.method,
+          endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
+          payload: {},
+        })
+        .then((response) => {
+          context.commit(storeMutations.UPDATE_VEHICLE, response.data);
+          return response;
+        });
     },
-    getDamageOptions(context, {carId}){
+    getDamageOptions(context, { carId }) {
       return globalMethods.callHttpClient({
         methods: endpoints.GetDamageOptions.method,
         endpoint: `${endpoints.GetDamageOptions.url}/${carId}`,
         payload: {},
-      })
+      });
     },
 
     // Content API Actions
@@ -151,8 +160,8 @@ export default createStore({
       return globalMethods.callHttpClient({
         method: endpoints.GetHomepageInfo.method,
         endpoint: endpoints.GetHomepageInfo.url,
-    });
-  },
+      });
+    },
     getPageData(context, { pageName }) {
       return globalMethods.callHttpClient({
         method: endpoints.GetPageData.method,
diff --git a/src/store/store.spec.js b/src/store/store.spec.js
index 0702f625d..e71f07909 100644
--- a/src/store/store.spec.js
+++ b/src/store/store.spec.js
@@ -152,7 +152,12 @@ describe("Actions", () => {
       });
     });
     await store
-      .dispatch("lookupVehicleByYmms", { year: "2018", make:  "Honda", model: "Civic", style: "2 Door"})
+      .dispatch("lookupVehicleByYmms", {
+        year: "2018",
+        make: "Honda",
+        model: "Civic",
+        style: "2 Door",
+      })
       .then((response) => {
         returnData = response.data.Result;
       });
@@ -174,7 +179,7 @@ describe("Actions", () => {
       });
     });
     await store
-      .dispatch("lookupVehicleByVin", { vin: "12345678"})
+      .dispatch("lookupVehicleByVin", { vin: "12345678" })
       .then((response) => {
         returnData = response.data.Result;
       });
@@ -197,7 +202,7 @@ describe("Actions", () => {
       });
     });
     await store
-      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
+      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com" })
       .then((response) => {
         returnData = response.data.Result;
       });
@@ -244,8 +249,8 @@ describe("Mutations", () => {
     // Arrange
     const carData = {
       carId: "123abc",
-      category: "car"
-    }
+      category: "car",
+    };
     // Act
     store.commit("updateVehicle", carData);
 
@@ -256,48 +261,68 @@ describe("Mutations", () => {
 
   it("Should add event onto bus and update state", () => {
     // Arrange
-    const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+    const event = {
+      category: "TestCategoryOne",
+      subCategory: "TestSubCategoryOne",
+      eventValue: "TestEventValueOne",
+    };
 
     // Act
     store.commit("addEventToBus", event);
 
     //Assert
-    expect(store.state.applicationUser.eventBus[0].category).toBe('TestCategoryOne');
-    expect(store.state.applicationUser.eventBus[0].subCategory).toBe('TestSubCategoryOne');
-    expect(store.state.applicationUser.eventBus[0].eventValue).toBe('TestEventValueOne');
+    expect(store.state.applicationUser.eventBus[0].category).toBe(
+      "TestCategoryOne"
+    );
+    expect(store.state.applicationUser.eventBus[0].subCategory).toBe(
+      "TestSubCategoryOne"
+    );
+    expect(store.state.applicationUser.eventBus[0].eventValue).toBe(
+      "TestEventValueOne"
+    );
   });
 });
 
 describe("Getters", () => {
-
   it("Should validate vehicle getter", () => {
     // Arrange
     const vehicle = store.getters.vehicle;
 
     // Assert
-    expect(typeof vehicle).toBe('object');
+    expect(typeof vehicle).toBe("object");
   });
 
   it("Should get item from bus via getter", () => {
     // Arrange
-    const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+    const event = {
+      category: "TestCategoryOne",
+      subCategory: "TestSubCategoryOne",
+      eventValue: "TestEventValueOne",
+    };
 
     // Act
-    store.commit("addEventToBus", event)
+    store.commit("addEventToBus", event);
 
     // Assert
-    const returnedEventValue = store.getters.eventBusItem(event.category, event.subCategory);
-    expect(returnedEventValue).toBe('TestEventValueOne');
+    const returnedEventValue = store.getters.eventBusItem(
+      event.category,
+      event.subCategory
+    );
+    expect(returnedEventValue).toBe("TestEventValueOne");
   });
 
   it("Should get eventbus from getter, should have length > 0", () => {
-        // Arrange
-        const event = {category: 'TestCategoryOne', subCategory: 'TestSubCategoryOne', eventValue: 'TestEventValueOne'};
+    // Arrange
+    const event = {
+      category: "TestCategoryOne",
+      subCategory: "TestSubCategoryOne",
+      eventValue: "TestEventValueOne",
+    };
 
-        // Act
-        store.commit("addEventToBus", event);
+    // Act
+    store.commit("addEventToBus", event);
 
-        //Assert
-        expect(store.getters.eventBus.length).toBeGreaterThan(0);
+    //Assert
+    expect(store.getters.eventBus.length).toBeGreaterThan(0);
   });
 });
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index 7d8234714..bbdbbe134 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -3,12 +3,11 @@ import buttonMain from "./button-main";
 import { nextTick } from "vue";
 
 describe("buttonMain.vue", () => {
-
   it("Should return btn-primary class", async () => {
     // Act
     const wrapper = shallowMount(buttonMain, {
       propsData: {
-        isPrimary: true
+        isPrimary: true,
       },
     });
 
@@ -16,15 +15,14 @@ describe("buttonMain.vue", () => {
     const button = wrapper.find("button");
 
     // Expect
-    expect(button.attributes('class')).toContain("btn-primary");
-
+    expect(button.attributes("class")).toContain("btn-primary");
   });
 
   it("Should return aria-disabled state", async () => {
     // Act
     const wrapper = shallowMount(buttonMain, {
       propsData: {
-        isDisabled: true
+        isDisabled: true,
       },
     });
 
@@ -33,7 +31,6 @@ describe("buttonMain.vue", () => {
 
     // Expect
     expect(button.attributes()["aria-disabled"]).toEqual("true");
-
   });
 
   it("Should return loader color", async () => {
@@ -41,7 +38,7 @@ describe("buttonMain.vue", () => {
     const wrapper = shallowMount(buttonMain, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -55,8 +52,7 @@ describe("buttonMain.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("blue");
-
+    expect(loader.attributes("class")).toContain("blue");
   });
 
   it("Should return loader position", async () => {
@@ -64,7 +60,7 @@ describe("buttonMain.vue", () => {
     const wrapper = shallowMount(buttonMain, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -78,8 +74,7 @@ describe("buttonMain.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("right");
-
+    expect(loader.attributes("class")).toContain("right");
   });
 
   it("Should return loader size in rem", async () => {
@@ -87,7 +82,7 @@ describe("buttonMain.vue", () => {
     const wrapper = shallowMount(buttonMain, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -101,8 +96,6 @@ describe("buttonMain.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('style')).toContain("1rem");
-
+    expect(loader.attributes("style")).toContain("1rem");
   });
-
 });
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 5d89e9afa..ff2a5f83a 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,7 +1,18 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="isPrimary ? 'btn-primary' : 'btn-secondary'" @click="clicked()">
+  <button
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
+    class="btn d-flex align-items-center py-3 px-4"
+    :class="isPrimary ? 'btn-primary' : 'btn-secondary'"
+    @click="clicked()"
+  >
     <span class="m-0">{{ this.buttonText }}</span>
-    <loader class="ms-2" v-if="isLoaderDisplayed" v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }" v-bind:class="[this.loaderColor, this.loaderPosition]" />
+    <loader
+      class="ms-2"
+      v-if="isLoaderDisplayed"
+      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+      v-bind:class="[this.loaderColor, this.loaderPosition]"
+    />
   </button>
 </template>
 
@@ -25,8 +36,8 @@ export default {
   methods: {
     clicked() {
       this.isLoaderDisplayed = true;
-      this.$emit('click-event');
-    }
+      this.$emit("click-event");
+    },
   },
   components: {
     loader,
@@ -45,10 +56,15 @@ export default {
     color: $white;
     transition: all 150ms linear;
     &:hover {
-      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+      background: linear-gradient(
+        270deg,
+        rgba(6, 87, 124, 1) 0%,
+        rgba(6, 87, 124, 1) 100%
+      );
     }
     &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
+    &:focus-visible {
+      // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
@@ -56,7 +72,11 @@ export default {
     }
     &:disabled {
       background: $gray-100 !important;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+      background: linear-gradient(
+        270deg,
+        $gray-100 0%,
+        $gray-100 100%
+      ) !important;
       color: $gray !important;
       height: 48px;
       border: none;
@@ -75,7 +95,8 @@ export default {
       @include blue-gradient;
     }
     &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
+    &:focus-visible {
+      // Keyboard focus for accessibility
       outline: none;
       box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
       color: $white;
@@ -90,5 +111,4 @@ export default {
     }
   }
 }
-
 </style>
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
index e5536f97c..ab3c29e41 100644
--- a/src/ux-components/checkbox/checkbox.spec.js
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -3,12 +3,11 @@ import checkbox from "./checkbox";
 import { nextTick } from "vue";
 
 describe("checkbox.vue", () => {
-
   it("Should return checkbox name", async () => {
     // Act
     const wrapper = shallowMount(checkbox, {
       propsData: {
-        checkboxName: "Checkbox"
+        checkboxName: "Checkbox",
       },
     });
 
@@ -17,14 +16,13 @@ describe("checkbox.vue", () => {
 
     // Expect
     expect(input.attributes().name).toEqual("Checkbox");
-
   });
 
   it("Should return checkbox id", async () => {
     // Act
     const wrapper = shallowMount(checkbox, {
       propsData: {
-        buttonID: "Checkbox ID"
+        buttonID: "Checkbox ID",
       },
     });
 
@@ -33,14 +31,13 @@ describe("checkbox.vue", () => {
 
     // Expect
     expect(input.attributes().id).toEqual("Checkbox ID");
-
   });
 
   it("Should return tabindex value", async () => {
     // Act
     const wrapper = shallowMount(checkbox, {
       propsData: {
-        tabIndex: "1"
+        tabIndex: "1",
       },
     });
 
@@ -49,14 +46,13 @@ describe("checkbox.vue", () => {
 
     // Expect
     expect(input.attributes().tabindex).toEqual("1");
-
   });
 
   it("Should return label text", async () => {
     // Act
     const wrapper = shallowMount(checkbox, {
       propsData: {
-        checkboxLabel: "label text"
+        checkboxLabel: "label text",
       },
     });
 
@@ -64,14 +60,13 @@ describe("checkbox.vue", () => {
     const paragraph = wrapper.find("p");
 
     expect(paragraph.text()).toEqual("label text");
-
   });
 
   it("Should return label text", async () => {
     // Act
     const wrapper = shallowMount(checkbox, {
       propsData: {
-        screenReaderOnlyText: "screenreader text"
+        screenReaderOnlyText: "screenreader text",
       },
     });
 
@@ -79,7 +74,5 @@ describe("checkbox.vue", () => {
     const paragraph = wrapper.find("span");
 
     expect(paragraph.text()).toEqual("screenreader text");
-
   });
-
 });
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 1b6254d29..dca64e689 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,10 +1,19 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
+    <input
+      type="checkbox"
+      aria-checked="false"
+      :name="checkboxName"
+      :id="buttonID"
+      :tabindex="tabIndex"
+      :aria-required="isRequired"
+    />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+      <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
     </label>
   </div>
 </template>
@@ -18,15 +27,15 @@ export default {
     tabIndex: Number,
     checkboxLabel: String,
     screenReaderOnlyText: String,
-    isRequired: Boolean
-  }
+    isRequired: Boolean,
+  },
 };
 </script>
 
 <style lang="scss">
 .ui-checkbox {
   position: relative;
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     position: absolute !important;
     height: 1px;
     width: 1px;
@@ -37,7 +46,7 @@ export default {
       position: relative;
     }
     + label::before {
-      content: '';
+      content: "";
       position: relative;
       display: inline-block;
       margin-right: 10px;
@@ -51,7 +60,7 @@ export default {
       background: $blue;
     }
     &:checked + label::after {
-      content: '';
+      content: "";
       position: absolute;
       top: 8px;
       left: 2px;
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index 91e4e1f6c..c25b169fa 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -3,7 +3,6 @@ import listButtonHorizontal from "./list-button-horizontal";
 import { nextTick } from "vue";
 
 describe("list-button-horizontal.vue", () => {
-
   it("Should return input type checkbox if isMultiSelect is true", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
@@ -36,7 +35,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        buttonID: "List Card Checkbox"
+        buttonID: "List Card Checkbox",
       },
     });
 
@@ -44,14 +43,13 @@ describe("list-button-horizontal.vue", () => {
     const label = wrapper.find("label");
 
     expect(label.attributes().for).toEqual("List Card Checkbox");
-
   });
 
   it("Should return screen reader text", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        screenReaderOnlyText: "Screen Reader Only Text"
+        screenReaderOnlyText: "Screen Reader Only Text",
       },
     });
 
@@ -59,29 +57,27 @@ describe("list-button-horizontal.vue", () => {
     const paragraph = wrapper.find("span.sr-only");
 
     expect(paragraph.text()).toEqual("Screen Reader Only Text");
-
   });
 
   it("Should return text alignment class", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        textPosition: "text-center"
+        textPosition: "text-center",
       },
     });
 
     // Assert
     const paragraph = wrapper.find("span.m-0");
 
-    expect(paragraph.attributes('class')).toContain("text-center");
-
+    expect(paragraph.attributes("class")).toContain("text-center");
   });
 
   it("Should return aria-required state", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        isRequired: true
+        isRequired: true,
       },
     });
 
@@ -89,14 +85,13 @@ describe("list-button-horizontal.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes()["aria-required"]).toEqual("true");
-
   });
 
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -111,7 +106,6 @@ describe("list-button-horizontal.vue", () => {
     const loader = wrapper.find("loader-stub");
 
     expect(loader.exists()).toBe(true);
-
   });
 
   it("Should return loader color", async () => {
@@ -119,7 +113,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -133,8 +127,7 @@ describe("list-button-horizontal.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("blue");
-
+    expect(loader.attributes("class")).toContain("blue");
   });
 
   it("Should return loader position", async () => {
@@ -142,7 +135,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -156,8 +149,7 @@ describe("list-button-horizontal.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("right");
-
+    expect(loader.attributes("class")).toContain("right");
   });
 
   it("Should return loader size in rem", async () => {
@@ -165,7 +157,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -179,8 +171,6 @@ describe("list-button-horizontal.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('style')).toContain("1rem");
-
+    expect(loader.attributes("style")).toContain("1rem");
   });
-
 });
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index d03a042d7..c0e2bd0b8 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,18 +1,42 @@
 <template>
-  <div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
-      <span class="m-0" :class="textPosition">{{buttonLabel}}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
+  <div
+    class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
+    @keyup.space="handleClick(value)"
+  >
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
+    />
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
+      <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{
+        buttonLabelSubCopy
+      }}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+      <loader
+        v-if="isLoaderDisplayed && !isMultiSelect"
+        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+        :class="[loaderColor, loaderPosition]"
+      />
     </label>
   </div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 
 export default {
@@ -30,10 +54,11 @@ export default {
     loaderPosition: String,
     sizeInRem: [Number, String],
     isRequired: Boolean,
-    value: { // Field initial value
+    value: {
+      // Field initial value
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
@@ -45,11 +70,11 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if(this.loaderEnabled){
+      if (this.loaderEnabled) {
         this.displayLoader();
       }
       this.handleChange(value);
-    }
+    },
   },
   components: {
     loader,
@@ -57,17 +82,20 @@ export default {
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
-      type: inputType,
-      checkedValue: value
-    });
+    const { checked, handleChange, errorMessage } = useField(
+      groupName,
+      undefined,
+      {
+        type: inputType,
+        checkedValue: value,
+      }
+    );
     return {
       checked,
       handleChange,
       errorMessage,
     };
   },
-
 };
 </script>
 
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index c583839ec..70ea54827 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -3,7 +3,6 @@ import listButton from "./list-button";
 import { nextTick } from "vue";
 
 describe("list-button.vue", () => {
-
   it("Should return input type checkbox if isMultiSelect is true", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
@@ -36,7 +35,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        buttonID: "List Card Checkbox"
+        buttonID: "List Card Checkbox",
       },
     });
 
@@ -44,14 +43,13 @@ describe("list-button.vue", () => {
     const label = wrapper.find("label");
 
     expect(label.attributes().for).toEqual("List Card Checkbox");
-
   });
 
   it("Should return screen reader text", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        screenReaderOnlyText: "Screen Reader Only Text"
+        screenReaderOnlyText: "Screen Reader Only Text",
       },
     });
 
@@ -59,29 +57,27 @@ describe("list-button.vue", () => {
     const paragraph = wrapper.find("span.sr-only");
 
     expect(paragraph.text()).toEqual("Screen Reader Only Text");
-
   });
 
   it("Should return text alignment class", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        textPosition: "text-center"
+        textPosition: "text-center",
       },
     });
 
     // Assert
     const paragraph = wrapper.find("span.m-0");
 
-    expect(paragraph.attributes('class')).toContain("text-center");
-
+    expect(paragraph.attributes("class")).toContain("text-center");
   });
 
   it("Should return aria-required state", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        isRequired: true
+        isRequired: true,
       },
     });
 
@@ -89,14 +85,13 @@ describe("list-button.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes()["aria-required"]).toEqual("true");
-
   });
 
   it("Should return loader enabled true", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -111,7 +106,6 @@ describe("list-button.vue", () => {
     const loader = wrapper.find("loader-stub");
 
     expect(loader.exists()).toBe(true);
-
   });
 
   it("Should return loader color", async () => {
@@ -119,7 +113,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -133,8 +127,7 @@ describe("list-button.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("blue");
-
+    expect(loader.attributes("class")).toContain("blue");
   });
 
   it("Should return loader position", async () => {
@@ -142,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -156,8 +149,7 @@ describe("list-button.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('class')).toContain("right");
-
+    expect(loader.attributes("class")).toContain("right");
   });
 
   it("Should return loader size in rem", async () => {
@@ -165,7 +157,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         sizeInRem: 1,
-        loaderEnabled: true
+        loaderEnabled: true,
       },
     });
 
@@ -179,8 +171,6 @@ describe("list-button.vue", () => {
 
     const loader = wrapper.find("loader-stub");
 
-    expect(loader.attributes('style')).toContain("1rem");
-
+    expect(loader.attributes("style")).toContain("1rem");
   });
-
 });
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 5fa285c31..39af3e7bb 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,26 +1,50 @@
 <template>
-  <div class="list-group list-button d-flex flex-column w-100 mb-2" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-    <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName">
-    <label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+  <div
+    class="list-group list-button d-flex flex-column w-100 mb-2"
+    @mouseup="handleClick(value)"
+    @keyup.space="handleClick(value)"
+  >
+    <input
+      :type="isMultiSelect ? 'checkbox' : 'radio'"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      :data-focus-target="groupName"
+    />
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="buttonID"
+      class="d-flex flex-column justify-content-center py-3 px-4"
+    >
       <span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
-      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
-      <loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{
+        buttonLabelSubCopy
+      }}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+      <loader
+        v-if="isLoaderDisplayed && !isMultiSelect"
+        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
+        :class="[this.loaderColor, this.loaderPosition]"
+      />
     </label>
   </div>
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
     isMultiSelect: Boolean,
     groupName: String,
-    buttonLabel: [Number,String],
-    buttonID: [Number,String],
+    buttonLabel: [Number, String],
+    buttonID: [Number, String],
     isRequired: Boolean,
     textPosition: String,
     buttonLabelSubCopy: String,
@@ -28,11 +52,12 @@ export default {
     loaderEnabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String],
-    value: { // Field initial value
+    sizeInRem: [Number, String],
+    value: {
+      // Field initial value
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
@@ -44,11 +69,11 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if(this.loaderEnabled){
+      if (this.loaderEnabled) {
         this.displayLoader();
       }
       this.handleChange(value);
-    }
+    },
   },
   components: {
     loader,
@@ -56,10 +81,14 @@ export default {
   setup(props) {
     const { groupName, value } = toRefs(props);
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
-    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
-      type: inputType,
-      checkedValue: value
-    });
+    const { checked, handleChange, errorMessage } = useField(
+      groupName,
+      undefined,
+      {
+        type: inputType,
+        checkedValue: value,
+      }
+    );
     return {
       checked,
       handleChange,
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index 3bb6af61c..b02ef6785 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -2,7 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import listCard from "./list-card";
 
 describe("list-card.vue", () => {
-
   it("Should return input type checkbox if isMultiSelect is true", async () => {
     // Act
     const wrapper = shallowMount(listCard, {
@@ -31,7 +30,7 @@ describe("list-card.vue", () => {
         buttonID: "List Card Checkbox",
         groupID: "radio-demo-1",
         groupName: "radio 1",
-        buttonImage: "windshield-damage.svg"
+        buttonImage: "windshield-damage.svg",
       },
     });
 
@@ -39,7 +38,6 @@ describe("list-card.vue", () => {
     const paragraph = wrapper.find("p");
 
     expect(paragraph.text()).toEqual("Windshield");
-
   });
 
   it("Should return secondary (sub) label text", async () => {
@@ -52,7 +50,7 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        buttonLabelSubCopy: "Test"
+        buttonLabelSubCopy: "Test",
       },
     });
 
@@ -60,7 +58,6 @@ describe("list-card.vue", () => {
     const paragraph = wrapper.find("p:nth-of-type(2)");
 
     expect(paragraph.text()).toEqual("Test");
-
   });
 
   it("Should return value used for various text settings including the label 'for' and input id", async () => {
@@ -73,7 +70,7 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        buttonLabelSubCopy: "Test"
+        buttonLabelSubCopy: "Test",
       },
     });
 
@@ -81,7 +78,6 @@ describe("list-card.vue", () => {
     const label = wrapper.find("label");
 
     expect(label.attributes().for).toEqual("List Card Checkbox");
-
   });
 
   it("Should return input group name used for radio or checkbox", async () => {
@@ -94,7 +90,7 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        buttonLabelSubCopy: "Test"
+        buttonLabelSubCopy: "Test",
       },
     });
 
@@ -102,7 +98,6 @@ describe("list-card.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes().name).toEqual("radio 1");
-
   });
 
   it("Should return aria-required state", async () => {
@@ -115,7 +110,7 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        isRequired: true
+        isRequired: true,
       },
     });
 
@@ -123,7 +118,5 @@ describe("list-card.vue", () => {
     const input = wrapper.find("input");
 
     expect(input.attributes()["aria-required"]).toEqual("true");
-
   });
-
 });
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 17c8193f0..c5c9f0603 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,15 +1,47 @@
 <template>
   <!-- Heavily documented below -->
   <div class="col">
-    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
-      <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
-      <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
-        <img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
-        <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+    <div
+      class="list-card w-100 rounded-3 d-flex align-items-center h-100"
+      :class="isWide ? 'horizontal' : ''"
+      @mouseup="handleClick(value)"
+      @keyup.space="handleClick(value)"
+    >
+      <input
+        :type="isMultiSelect ? 'checkbox' : 'radio'"
+        :id="buttonID"
+        :name="groupName"
+        :value="buttonID"
+        :aria-required="isRequired"
+        :data-focus-target="groupName"
+      />
+      <label
+        :for="buttonID"
+        class="d-flex w-100 align-items-center px-2 h-100"
+        :class="getLabelClasses"
+        tabindex="-1"
+      >
+        <img
+          :id="buttonImageId"
+          :class="!isWide ? 'order-1' : 'ms-auto order-3'"
+          v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
+          :alt="altText"
+        />
+        <p
+          v-if="!isWide"
+          class="small order-3"
+          :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+        >
+          {{ buttonLabel }}
+        </p>
+        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
+          {{ buttonLabelSubCopy }}
+        </p>
         <div v-if="isWide" class="order-2">
-          <p class="m-0 small">{{buttonLabel}}</p>
-          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+          <p class="m-0 small">{{ buttonLabel }}</p>
+          <p v-if="buttonLabelSubCopy" class="m-0 fs-7">
+            {{ buttonLabelSubCopy }}
+          </p>
         </div>
       </label>
     </div>
@@ -17,8 +49,8 @@
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
+import { toRefs } from "vue";
+import { useField } from "vee-validate";
 
 export default {
   name: "listCard",
@@ -27,31 +59,32 @@ export default {
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
     //end must choose
-    buttonImage: String,//Required: File name of image
+    buttonImage: String, //Required: File name of image
     buttonImageId: String,
-    buttonLabel: String,//Required: Label text
+    buttonLabel: String, //Required: Label text
     isRequired: Boolean, //Required: is aria-required required or not?
-    altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-    buttonID: String,//Required: Unique
-    groupName: String,//Rquired: Unique
-    buttonLabelSubCopy: String,//Optional: sub text
-    value: { // Field initial value
+    altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
+    buttonID: String, //Required: Unique
+    groupName: String, //Rquired: Unique
+    buttonLabelSubCopy: String, //Optional: sub text
+    value: {
+      // Field initial value
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   computed: {
-    getLabelClasses(){
-      if(this.isWide) {
+    getLabelClasses() {
+      if (this.isWide) {
         let classes = "flex-row py-r ps-3 pe-8";
-        if(this.buttonLabelSubCopy) {
-          classes += " checkboxTop"
+        if (this.buttonLabelSubCopy) {
+          classes += " checkboxTop";
         }
-        return classes
+        return classes;
       } else {
         return "flex-column pt-4 pb-2";
       }
-    }
+    },
   },
   setup(props) {
     const { groupName, value } = toRefs(props);
@@ -71,10 +104,12 @@ export default {
 <style lang="scss">
 .list-card {
   border: 1px solid $gray-500;
-  &.invalid { //Red border if invalid
+  &.invalid {
+    //Red border if invalid
     border: 1px solid $red;
   }
-  img {// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
+  img {
+    // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
     height: auto;
     width: 6.5rem;
     margin-bottom: 3rem;
@@ -83,7 +118,7 @@ export default {
     box-shadow: 0px 0px 0px 6px $blue-100;
     border: 1px solid transparent;
   }
-  input[type='checkbox'],
+  input[type="checkbox"],
   input[type="radio"] {
     opacity: 0;
     width: 0;
@@ -100,12 +135,12 @@ export default {
     }
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
     }
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
     }
     + label::before {
       content: "";
@@ -131,7 +166,7 @@ export default {
       background: $blue;
     }
     &:checked + label::after {
-      content: '';
+      content: "";
       position: absolute;
       margin: 3.2rem 0 0 0;
       border-left: 2px solid $white;
@@ -161,18 +196,18 @@ export default {
       margin-bottom: 0;
       width: 5.5rem;
     }
-    input[type='checkbox'],
+    input[type="checkbox"],
     input[type="radio"] {
       + label::before {
         content: "";
         position: relative;
-        margin: 0 .5rem 0 0;
+        margin: 0 0.5rem 0 0;
         order: 1;
       }
       &:checked + label::after {
-        content: '';
+        content: "";
         margin: -0.25rem 0 0 0;
-        left: .875rem;
+        left: 0.875rem;
       }
       + label {
         min-height: 48px;
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 37477d83a..247e15665 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -1,9 +1,10 @@
 <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
+    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>
 </template>
 
diff --git a/src/ux-components/text-link/text-link.spec.js b/src/ux-components/text-link/text-link.spec.js
index 4c3458137..87e9dec77 100644
--- a/src/ux-components/text-link/text-link.spec.js
+++ b/src/ux-components/text-link/text-link.spec.js
@@ -3,7 +3,6 @@ import textLink from "./text-link";
 import { nextTick } from "vue";
 
 describe("text-link.vue", () => {
-
   it("Should return text-link type is navigation if prop navigation is true", async () => {
     // Act
     const wrapper = shallowMount(textLink, {
@@ -16,7 +15,7 @@ describe("text-link.vue", () => {
     const paragraph = wrapper.find("a");
 
     // Expect
-    expect(paragraph.attributes('class')).toContain("navigation-link");
+    expect(paragraph.attributes("class")).toContain("navigation-link");
   });
 
   it("Should return text-link type is footer if prop footer is true", async () => {
@@ -31,7 +30,7 @@ describe("text-link.vue", () => {
     const paragraph = wrapper.find("a");
 
     // Expect
-    expect(paragraph.attributes('class')).toContain("footer-link");
+    expect(paragraph.attributes("class")).toContain("footer-link");
   });
 
   it("Should return text-link type is textSmall if prop textSmall is true", async () => {
@@ -46,14 +45,14 @@ describe("text-link.vue", () => {
     const paragraph = wrapper.find("a");
 
     // Expect
-    expect(paragraph.attributes('class')).toContain("small");
+    expect(paragraph.attributes("class")).toContain("small");
   });
 
   it("Should return text for href", async () => {
     // Act
     const wrapper = shallowMount(textLink, {
       propsData: {
-        text: "This is link text"
+        text: "This is link text",
       },
     });
 
@@ -62,7 +61,5 @@ describe("text-link.vue", () => {
 
     // Expect
     expect(paragraph.text()).toEqual("This is link text");
-
   });
-
 });
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 15d677c9f..8d9de4450 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,12 +1,27 @@
 <template>
   <!-- Navigation Text Link -->
-  <a v-if="navigation" @click="handleClick" class="navigation-link" :href="href">{{text}}</a>
+  <a
+    v-if="navigation"
+    @click="handleClick"
+    class="navigation-link"
+    :href="href"
+    >{{ text }}</a
+  >
   <!-- Footer Text Link -->
-  <a v-else-if="footer" @click="handleClick" class="footer-link" :href="href" target="_blank">{{text}}</a>
+  <a
+    v-else-if="footer"
+    @click="handleClick"
+    class="footer-link"
+    :href="href"
+    target="_blank"
+    >{{ text }}</a
+  >
   <!-- Small Text Link -->
-  <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{text}}</a>
+  <a v-else-if="textSmall" @click="handleClick" class="small" :href="href">{{
+    text
+  }}</a>
   <!-- Default Text Link -->
-  <a v-else @click="handleClick" :href="href">{{text}}</a>
+  <a v-else @click="handleClick" :href="href">{{ text }}</a>
 </template>
 
 <script>
@@ -19,14 +34,14 @@ export default {
     text: String,
     href: {
       type: String,
-      default: `javascript:void(0)`//Prevents page jump when value is empty or #
-    }
+      default: `javascript:void(0)`, //Prevents page jump when value is empty or #
+    },
   },
   methods: {
     handleClick() {
-      this.$emit('click-event');
-    }
-  }
+      this.$emit("click-event");
+    },
+  },
 };
 </script>
 
@@ -59,7 +74,7 @@ a {
     line-height: 20px;
     padding: 0 0 2px 0;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: 0.75rem;
     &:hover {
       border-bottom: 1px solid $gray-500;
       padding: 0 0 2px 0;