Merge branch 'feature/CSR-231' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into feature/CSR-231

azure-pipelines.yml

@@ -76,4 +76,5 @@ stages:
                         deployFolder: ''
                         region: us-east-1
                     appDeployVariables:
-                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                    cfDistributionId: $(cfDistributionId)

jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 85,
     },
   },
 };

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

@@ -0,0 +1,23 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+
+  test("renders a button", () => {
+    // Arrange
+    const myFunction = () => {};
+
+    // Act
+    const wrapper = shallowMount(buttonBack, {
+      propsData: {
+        backButtonAction: myFunction,
+        backButtonAccessibleText: "something",
+      },
+    });
+    
+    // Assert
+    expect(wrapper.find("button").exists()).toBe(true);
+    wrapper.unmount();
+  });
+
+});

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

@@ -1,5 +1,9 @@
 <template>
-  <button class="back-button-wrapper d-flex p-0">
+  <button
+    @click="handleClick"
+    class="back-button-wrapper p-3" 
+    :aria-label="backButtonAccessibleText"
+  >
     <div class="button-back">
       <div class="arrow-left"></div>
       <div class="box"></div>
@@ -9,7 +13,19 @@
 
 <script>
 export default {
-  name: "buttonBack"
+  name: "buttonBack",
+  props: {
+    backButtonAccessibleText: {
+      type: String,
+      required: true,
+      default: "",
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click-event');
+    }
+  }
 };
 </script>
 
@@ -17,12 +33,20 @@ export default {
 .back-button-wrapper {
   border: none;
   background: transparent;
+  text-decoration: none;
+  border-bottom: none;
+  // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+  margin-bottom: -.75rem;
+  margin-top: -.75rem;
+
   .button-back {
     display: inline-flex;
     position: relative;
     height: 18px;
     width: 23px;
     overflow: hidden;
+     // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+    margin-bottom: -2px;
     .arrow-left {
       position: absolute;
       width: 18px;

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

@@ -0,0 +1,23 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+describe("buttonQuestion.vue", () => {
+  it("Should render the 'questionText' prop value as a span value for the button question and  the 'answer' values should render as text values for button components.", async () => {
+    // Act
+    const wrapper = shallowMount(buttonQuestion);
+    await wrapper.setProps({
+      questionText: "Question Text",
+      answers: ["2023", "2022", "2021"],
+      modelValue: "2020",
+    });
+    wrapper.vm.chooseAnswer("2021");
+
+    // Assert
+    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");
+  });
+});

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="button_question">
+    <div class="mt-6 mb-4 d-flex">
+      <span class="text-center fs-6 fw-bold w-100">{{
+        questionText
+      }}</span>
+    </div>
+    <div class="w-100 d-flex justify-content-center">
+      <fieldset class="overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
+        <legend class="sr-only">{{groupName}}</legend>
+          <listButton v-for="answer in answers" :key="answer"
+            :buttonID="answer"
+            @mouseup="chooseAnswer(answer)"
+            @keyup.space="chooseAnswer(answer)"
+            loaderColor="blue"
+            loaderPosition="right"
+            sizeInRem="1.5"
+            data-test="button"
+            :groupName="groupName"
+            textPosition="text-start"
+            :isRequired="true"
+            :value="modelValue"
+            screenReaderOnlyText="(opens new window)"
+          />
+      </fieldset>
+    </div>
+  </div>
+</template>
+
+<script>
+import listButton from "@/ux-components/list-button/list-button";
+export default {
+  name: "buttonQuestion",
+  props: {
+    isMultiSelect: Boolean,
+    questionText: String,
+    answers: Array,
+    modelValue: String,
+    groupName: String
+  },
+  methods: {
+    chooseAnswer(answer) {
+      this.$emit("update:modelValue", answer);
+    },
+  },
+  components: {
+    listButton,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.button_question {
+  height: calc(100vh - 280px);
+
+  .overflow-scroll {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
+    -webkit-overflow-scrolling: touch;
+  }
+}
+</style>

src/common-components/funnel-header/funnel-header.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from "@vue/test-utils";
+import funnelHeader from "./funnel-header";
+
+describe("funnelHeader", () => {
+  test("renders the logo image", () => {
+    // Arrange
+
+    // Act
+    const wrapper = shallowMount(funnelHeader, {
+      setData: {
+        imageSrc: "image_url",
+      },
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("img")).toBeTruthy();
+    wrapper.unmount();
+  });
+});
+
+//Mock CMS content
+const cmsContent = {
+  imageSrc: 'image_url'
+};  

src/common-components/funnel-header/funnel-header.vue

@@ -9,12 +9,16 @@
 
 <script>
 export default {
-  name: "site-header",
+  name: "funnel-header",
-  props: {
+  data() {
-    imageSrc: {
+    return {
-      type: String,
+      imageSrc: '',
-      required: true,
+    }
-    },
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.imageSrc = cmsContent.LogoImage;
+    }
   },
 };
 </script>

src/common-components/funnel-sub-header/funnel-sub-header.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from "@vue/test-utils";
+import FunnelSubHeader from "./funnel-sub-header";
+
+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 ({
+      text: "FunnelSubHeader Content",
+    });
+    wrapper.vm.initializeComponent(cmsContent);
+
+    // Assert
+    expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content");
+    wrapper.unmount();
+  });
+});
+
+//Mock CMS content
+const cmsContent = {
+  HeaderText: 'FunnelSubHeader Content'
+};  

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="current_car_info-text">
+    <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+      <h5 class="text-center fw-normal mb-0">
+        <span>
+          {{ text }}
+        </span>
+        <buttonBack
+          v-if="hasBackButton"
+          :backButtonAccessibleText="backButtonAccessibleText"
+          @click-event="clickEvent"
+        />
+    </h5>
+    </div>
+  </div>
+</template>
+
+<script>
+import buttonBack from "@/common-components/button-back/button-back";
+
+export default {
+  name: "FunnelSubHeader",
+  data() {
+    return {
+      text: '',
+    }
+  },
+  props: {
+    hasBackButton: Boolean,
+    backButtonAccessibleText: String,
+  },
+  components: {
+    buttonBack,
+  },
+  methods: {
+    clickEvent() {
+      this.$emit('click-event');
+    },
+    initializeComponent(cmsContent) {
+      this.text = cmsContent.HeaderText;
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  h5 {
+    color: $gray-550;
+
+    button {
+      border: none;
+      background: none;
+      color: inherit;
+    }
+  }
+  .back-button-wrapper {
+    margin-left: 0;
+  }
+</style>

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

@@ -1,23 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import radioQuestion from "@/common-components/radio-question/radio-question";
-
-describe("radioQuestion.vue", () => {
-  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", async () => {
-    // Act
-    const wrapper = shallowMount(radioQuestion);
-    await wrapper.setProps({
-      questionText: "Question Text",
-      answers: ["2023", "2022", "2021"],
-      modelValue: "2020",
-    });
-    wrapper.vm.chooseAnswer("2021");
-
-    // Assert
-    expect(wrapper.find(".needed_car_info-text").text()).toEqual(
-      "Question Text"
-    );
-    const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
-    expect(radioButtons.length).toBe(3);
-    expect(wrapper.props().modelValue).toBe("2020");
-  });
-});

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

@@ -1,48 +0,0 @@
-<template>
-  <div class="radio_question">
-    <div class="needed_car_info mt-6 mb-4 d-flex">
-      <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
-        questionText
-      }}</span>
-    </div>
-    <div class="w-100 d-flex justify-content-center">
-      <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
-        <legend class="sr-only">{{groupName}}</legend>
-          <radio v-for="answer in answers" :key="answer"
-            :radioID="answer"
-            @click="chooseAnswer(answer)"
-            loaderColor="blue"
-            loaderPosition="right"
-            sizeInRem="1.5"
-            data-test="radio"
-            :groupName="groupName"
-            textPosition="text-start"
-            isRequired=true
-            :value="modelValue"
-            screenReaderOnlyText="(opens new window)"
-          />
-      </fieldset>
-    </div>
-  </div>
-</template>
-
-<script>
-import radio from "@/ux-components/radio/radio";
-export default {
-  name: "radio-question",
-  props: {
-    questionText: String,
-    answers: Array,
-    modelValue: String,
-    groupName: String
-  },
-  methods: {
-    chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
-  },
-  components: {
-    radio,
-  },
-};
-</script>

src/common-components/site-header/site-header.spec.js

@@ -1,19 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import siteHeader from "./site-header";
-
-describe("siteHeader", () => {
-  test("renders the logo image", () => {
-    // Arrange
-
-    // Act
-    const wrapper = shallowMount(siteHeader, {
-      propsData: {
-        imageSrc: "image_url",
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("img")).toBeTruthy();
-    wrapper.unmount();
-  });
-});

src/common-components/vehicle-banner/vehicle-banner.spec.js

@@ -2,18 +2,23 @@ import { shallowMount } from "@vue/test-utils";
 import vehicleBanner from "./vehicle-banner";
 
 describe("vehicleBanner", () => {
-  test("renders the blurrycar image", () => {
+  test("renders the blurrycar image", async () => {
     // Arrange
 
     // Act
-    const wrapper = shallowMount(vehicleBanner, {
+    const wrapper = shallowMount(vehicleBanner);
-      propsData: {
+    await wrapper.setData ({
-        vehicleImageSrc: "image_url",
+      vehicleImageSrc: "image_url",
-      },
     });
+    wrapper.vm.initializeComponent(cmsContent);
 
     // Assert
     expect(wrapper.find("img").attributes("class")).toContain("blurrycar");
     wrapper.unmount();
   });
 });
+
+//Mock CMS content
+const cmsContent = {
+  GenericVehicleImage: 'image_url'
+};  

src/common-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle_banner mb-4 text-center">
+  <div class="vehicle_banner mb-3 text-center">
     <img
       class="vehicle-image img-fluid blurrycar"
       :src="vehicleImageSrc"
@@ -11,11 +11,15 @@
 <script>
 export default {
   name: "vehicle-banner",
-  props: {
+  data() {
-    vehicleImageSrc: {
+    return {
-      type: String,
+      vehicleImageSrc: '',
-      required: true,
+    }
-    },
+  },
+  methods: {
+    initializeComponent(cmsContent) {
+      this.vehicleImageSrc = cmsContent.GenericVehicleImage;
+    }
   },
 };
 </script>

src/constants/store-mutations.js

@@ -1,5 +1,8 @@
 const storeMutations = {
   UPDATE_YEAR: "updateYear",
+  UPDATE_MAKE: "updateMake",
+  UPDATE_MODEL: "updateModel",
+  UPDATE_STYLE: "updateStyle",
 };
 
 export { storeMutations };

src/constants/widget-names.js

@@ -1,8 +1,8 @@
 const widgetNames = {
-  PAGE_HEADER_WIDGET: "PageHeaderWidget",
+  FUNNEL_SUB_HEADER_WIDGET: "FunnelSubHeaderWidget",
   RADIO_QUESTION_WIDGET: "RadioQuestionWidget",
   VEHICLE_BANNER_WIDGET: "VehicleBannerWidget",
-  SITE_HEADER_WIDGET: "SiteHeaderWidget",
+  FUNNEL_HEADER_WIDGET: "FunnelHeaderWidget",
 };
 
 export { widgetNames };

src/helpers/cms-content-helper.js

@@ -9,17 +9,101 @@ export function fetchCmsContentForPage(fmgPage) {
       const pageDataFromCms = {};
 
       response.data.Result.forEach((widget) => {
-        if (Object.values(widgetNames).includes(widget.Type)) {
+
+        let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type);
+
+        if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) {
           // If we already have this widget, push it on the collection
-          if (widget.Type in pageDataFromCms) {
+          if (widgetWithReplacements.Type in pageDataFromCms) {
-            pageDataFromCms[widget.Type].push(widget.Model);
+            pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model);
             return;
           }
 
-          pageDataFromCms[widget.Type] = [widget.Model];
+          pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model];
         }
       });
 
       return pageDataFromCms;
     });
 }
+
+// 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 matches = [...str.matchAll(regexExp)];
+
+  // Our final string value that will be built from the matches.
+  let stringBuilder = '';
+
+  for (const match of matches) {
+
+    // Reset store state for each match.
+    let storeState = store.state;
+
+    for (const s of match[2].split('.')) {
+      if (storeState[s] != undefined) {
+        storeState = storeState[s];
+      } else {
+        return ''; // 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:')) {
+      return mapStringToState(stringWithReplacement);
+    }
+
+    // Concatenate the string.
+    stringBuilder = `${stringBuilder} ${stringWithReplacement}`;
+  }
+
+  return stringBuilder.trimStart();
+}
+
+// Parent function for processWidgetItemForReplacement. This will loop through the parent
+// object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
+function findAndReplaceGlobalStateValues(widgetModel, widgetType) {
+
+  const objWithReplacements = {
+    Type: widgetType,
+    Model: {}
+  };
+
+  Object.keys(widgetModel).forEach(key => {
+
+    let modelWithReplacements = processWidgetItemForReplacement(widgetModel, key);
+
+    objWithReplacements.Model[key] = modelWithReplacements;
+  });
+
+  return objWithReplacements;
+}
+
+// This function will process the widget item and replace any global state variables with their values.
+// This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
+function processWidgetItemForReplacement(widgetModel, key) {
+  // If we have a string, and it needs to be replaced.
+  if (typeof widgetModel[key] === 'string') {
+    if (widgetModel[key].includes('{globalState:')) {
+      widgetModel[key] = mapStringToState(widgetModel[key]);
+    }
+    return widgetModel[key];
+  }
+
+  // If we have an object. array, etc
+  if (typeof widgetModel[key] === 'object' && Object.keys(widgetModel[key]).length) {
+    Object.keys(widgetModel[key]).forEach(item => {
+      processWidgetItemForReplacement(widgetModel[key], item);
+    });
+
+    return widgetModel[key];
+  }
+
+  // If we have something else like a number, boolean, etc. just return it
+  return widgetModel[key];
+
+}

src/helpers/cms-helper.spec.js

@@ -3,50 +3,138 @@ import { dispatch } from "@/store";
 
 jest.mock("@/store", () => ({
   dispatch: jest.fn(),
+  state: {
+    order: { vehicle: { year: "2019", make: "Acura" } }
+  }
 }));
 
-it("cms-content-helper: Should return data from CMS", () => {
-  // Arrange
-  const cmsMockData = {
-    Result: [
-      {
-        Type: "VehicleBannerWidget",
-        Model: {
-          ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
-          GenericVehicleImage:
-            "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          GenericVehicleImageFilePath:
-            "images/default-source/default-album/blurred-image.jpg",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a year to get started",
-        },
-      },
-      {
-        Type: "PageHeaderWidget",
-        Model: {
-          HeaderText: "Select a model",
-        },
-      },
-      {
-        Type: "RadioQuestionWidget",
-        Model: {
-          QuestionText: "What year is your vehicle?",
-        },
-      },
-    ],
-  };
 
-  dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+describe("cms-content-helper.js", () => { 
+  it("Should return data from CMS", () => {
+    // Arrange
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "FunnelSubHeaderWidget",
+          Model: {
+            HeaderText: "Select a year to get started",
+          },
+        },
+        {
+          Type: "FunnelSubHeaderWidget",
+          Model: {
+            HeaderText: "Select a model",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            QuestionText: "What year is your vehicle?",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    // Act
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
+        "Select a year to get started"
+      );
+    });
+  });
 
-  // Act
+});
-  fetchCmsContentForPage("testPage").then((response) => {
+
-    // Assert
+describe("cms-content-helper.js", () => { 
-    expect(response.PageHeaderWidget[0].HeaderText).toEqual(
+  it("Should replace strings for global state", () => {
-      "Select a year to get started"
+    const cmsMockData = {
-    );
+      Result: [
+        {
+          Type: "FunnelSubHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual(
+        "2019"
+      );
+    });
   });
 });
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state, and leave others the same", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "FunnelSubHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            ExampleText: "My widget value!",
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!");
+  
+    });
+  });
+});
+
+describe("cms-content-helper.js", () => { 
+  it("Should replace strings for global state in nested objects", () => {
+
+    const cmsMockData = {
+      Result: [
+        {
+          Type: "FunnelSubHeaderWidget",
+          Model: {
+            HeaderText: "{globalState:order.vehicle.year}",
+          },
+        },
+        {
+          Type: "RadioQuestionWidget",
+          Model: {
+            OtherObjectInside: {
+              ExampleText: "{globalState:order.vehicle.make}",
+            }
+          },
+        },
+      ],
+    };
+  
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+  
+    fetchCmsContentForPage("testPage").then((response) => {
+      // Assert
+  
+      expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019");
+      expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura");
+  
+    });
+  });
+});
+
+test.todo("String cannot be mapped to global state");

src/helpers/unit-test-helper.js

@@ -1,5 +1,6 @@
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
 
 export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
@@ -21,6 +22,7 @@ export function getMountOptions(mockData) {
   // Mock const files
   mocks.storeActions = storeActions;
   mocks.storeMutations = storeMutations;
+  mocks.navigationScenarios = navigationScenarios;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;

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

@@ -2,31 +2,18 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
       </div>
     </div>
-    <div class="row g-2">
+    <div class="row">
-      <radioCard
+      <div class="col">
-        radioLabel="Windshield"
+        <checkbox
-        radioImage="windshield-damage.svg"
+          checkboxName="demo checkbox"
-        altText="Windshield"
+          buttonID="checkbox-1"
-        groupName="damageKey"
+          tabIndex="1"
-        radioID="windshield"
+          checkboxLabel="I'm a checkbox"
-      />
+        />
-      <radioCard
+      </div>
-        radioLabel="Side Window"
-        radioImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        radioID="sidewindow"
-      />
-      <radioCard
-        radioLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        radioID="backglass"
-      />
     </div>
     <div class="row my-4">
       <div class="col">
@@ -52,232 +39,527 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonBack/>
+        <buttonBack
-      </div>
+          backButtonAccessibleText="Back button label"
-    </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton
-          buttonText="List Button"
-          errorText="Test error message"
-          loaderColor="blue"
-          loaderPosition="right"
-          sizeInRem="1"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <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"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox No Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelect
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Checkbox b"
+          groupID="checkbox-demo-1a"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
+        <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"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadio
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Radio Button b"
+          groupID="radio-demo-2b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal Checkbox</legend>
+          <listCard
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Checkbox"
+          groupID="checkbox-demo-3"
+          buttonLabelSubCopy="Description"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Checkbox no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Checkbox no Description</legend>
+          <listCard
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Checkbox b"
+          groupID="checkbox-demo-3b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
+        <fieldset>
+          <legend class="sr-only">Horizontal Radio Button</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Radio Button"
+          groupID="radio-demo-4"
+          buttonLabelSubCopy="Description"
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+        <fieldset>
+          <legend class="sr-only">Radio Button no Description</legend>
+          <listCard
+          isRadioHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
+          altText=""
+          buttonID="List Card Horizontal Radio Button b"
+          groupID="radio-demo-4b"
+          buttonLabelSubCopy=""
+          />
+        </fieldset>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div role="radiogroup" aria-labelledby="demo-1-radio-group" class="col my-3 d-flex align-items-center flex-column">
-        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>
-        <radio
+        <listButton
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2021"
+        buttonID="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2020"
+        buttonID="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2019"
+        buttonID="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
-      </div>
-    </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div role="checkbox" aria-labelledby="demo-1-checkbox-group" class="col my-3 d-flex flex-column">
-        role="radiogroup"
+        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
-        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">
+        <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
-          Select Vehicle Year
+        <listButton
-        </h3>
+        groupName="demo-1-checkbox"
-        <radio
+        ariaLabelBy="vehicle-year"
-        groupName="demo-2"
+        buttonID="2018"
-        ariaLabelBy="vehicle-make"
+        isRequired=true
-        radioID="Chevrolet"
-        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
-        groupName="demo-2"
+        groupName="demo-1-checkbox"
-        ariaLabelBy="vehicle-make"
+        ariaLabelBy="vehicle-year"
-        radioID="Dodge"
+        buttonID="2017"
-        radioLabelSubCopy="Test sub-headline"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
-        groupName="demo-2"
+        groupName="demo-1-checkbox"
-        ariaLabelBy="vehicle-make"
+        ariaLabelBy="vehicle-year"
-        radioID="Ford"
+        buttonID="2016"
-        radioLabelSubCopy="Test sub-headline"
+        isRequired=true
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</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 radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div role="radiogroup" aria-labelledby="demo-2-radio-group" class="col my-3 d-flex align-items-center flex-column">
-        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">
+        <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
-          Multi-Line Centered
+        <listButton
-        </h3>
+        isMultiSelect
-        <radio
+        groupName="demo-2"
-        groupName="demo-3"
+        ariaLabelBy="vehicle-make"
-        ariaLabelBy="vehicle-model"
+        buttonID="Chevrolet"
-        radioID="Corvette"
+        buttonLabelSubCopy="Test sub-headline"
-        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
-        textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
-        groupName="demo-3"
+        isMultiSelect
-        ariaLabelBy="vehicle-model"
+        groupName="demo-2"
-        radioID="Testarosa"
+        ariaLabelBy="vehicle-make"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Dodge"
-        textPosition="text-center"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radio
+        <listButton
-        groupName="demo-3"
+        isMultiSelect
-        ariaLabelBy="vehicle-model"
+        groupName="demo-2"
-        radioID="S600"
+        ariaLabelBy="vehicle-make"
-        radioLabelSubCopy="Test sub-headline"
+        buttonID="Ford"
-        textPosition="text-center"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
-        screenReaderOnlyText="(opens new window)"
+        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">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-2-checkbox-group">Select Vehicle Year</h3>
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Honda"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Acura"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButton
+        groupName="demo-2-checkbox"
+        ariaLabelBy="vehicle-make"
+        buttonID="Infiniti"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</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">
+        <!-- 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"
+        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"
+        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"
+        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">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-3-checkbox-group">Multi-Line Centered</h3>
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Accord"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Civic"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButton
+        groupName="demo-3-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="Ridgeline"
+        buttonLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        screenReaderOnlyText=" opens new window"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
       </div>
     </div>
     <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <div
+      <div role="radiogroup" aria-labelledby="demo-4-radio-group" class="d-flex flex-row p-0">
-        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>
-        <radioHorizontal
+        <listButtonHorizontal
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="1"
+        buttonID="1"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="1"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radioHorizontal
+        <listButtonHorizontal
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="2"
+        buttonID="2"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="2"
-        screenReaderOnlyText="(opens new window)"
+        screenReaderOnlyText=" opens new window"
         />
-        <radioHorizontal
+        <listButtonHorizontal
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="3"
+        buttonID="3"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
         v-bind:totalInGroup="3"
         v-bind:positionInGroup="3"
-        screenReaderOnlyText="(opens new window)"
+        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">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-4-checkbox-group">
+          Select Vehicle Year
+        </h3>
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="4"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="5"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        screenReaderOnlyText=" opens new window"
+        />
+        <listButtonHorizontal
+        groupName="demo-4-checkbox"
+        ariaLabelBy="vehicle-model"
+        buttonID="6"
+        buttonLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="3"
+        screenReaderOnlyText=" opens new window"
         />
       </div>
     </div>
@@ -414,7 +696,7 @@
     </div>
     <div class="row my-3">
       <div class="col">
-        <siteHeader
+        <funnelHeader
           imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
         />
       </div>
@@ -437,27 +719,27 @@
 <script>
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import buttonBack from "@/ux-components/button-back/button-back";
+import buttonBack from "@/common-components/button-back/button-back";
-import radioCard from "@/ux-components/radio-card/radio-card";
+import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
-import radio from "@/ux-components/radio/radio";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import siteHeader from "@/common-components/site-header/site-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import checkbox from "@/ux-components/checkbox/checkbox";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     buttonSecondary,
     buttonBack,
-    radioCard,
+    listCard,
     listButton,
-    radio,
     alert,
     vehicleBanner,
-    radioHorizontal,
+    listButtonHorizontal,
-    siteHeader,
+    checkbox,
+    funnelHeader,
   },
   data() {
     return {

src/layouts/loader-demo/loader-demo.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="container-fluid container-shadow p-2 rounded-3">
-    <div class="row my-4">
-      <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Loader</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <loader sizeInRem="10" loaderColor="blue" loaderPosition="center" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "App",
-  components: {
-    loader,
-  },
-};
-</script>

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

@@ -0,0 +1,82 @@
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("make-question.vue", () => {
+  test("Selected make is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "honda" });
+    const makeToSelect = "ford";
+
+    //Act
+    wrapper.setData({ selectedMake: makeToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["ford"]);
+  });
+});
+
+describe("make-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" });
+
+    //Act
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?");
+  });
+});
+
+describe("make-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["honda", "ford", "dodge"] });
+
+    //Act
+    const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
+    makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(makeQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -0,0 +1,47 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="makes"
+    groupName="Choose Vehicle Make"
+    v-model="selectedMake"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export default {
+  name: "make-question",
+  data() {
+    return {
+      questionText: null,
+      selectedMake: null,
+      makes: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_MAKES, {year: store.getters.vehicle.year});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.makes = initialData;
+    }
+  },
+  watch: {
+    selectedMake(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -0,0 +1,180 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-make.vue", () => {
+  test("Make question component is initized with api data", async (done) => {
+
+    //Arrange
+    const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
+    const makeQuestionInitialData = ["honda", "ford", "dodge"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      makeQuestionInitialData: makeQuestionInitialData,
+    } );
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page header is initailized with api data", async (done) => {
+
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select a make to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-make.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+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()
+        },
+      },
+    });
+    
+    //Act
+    vehicleMake.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-make" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  makeQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      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",
+        },
+      ],
+    },
+    makeQuestionInitialData: makeQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock make question methods
+  makeQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleMake, mountOptions);
+  const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
+  makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-make/vehicle-make.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader ref="funnelHeader" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner ref="vehicleBanner" />
+        <funnelSubHeader 
+            ref="funnelSubHeader"
+            :hasBackButton="true"
+            backButtonAccessibleText="Change Vehicle Year"
+            @click-event="backButtonAction"
+            class="Header"
+        />
+        <makeQuestion v-model="selectedMake" ref="makeQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-make",
+  data() {
+    return {
+      selectedMake: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "makeQuestionInitialData",
+        promise: makeQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
+        vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedMake(make) {
+      this.$store.commit(this.storeMutations.UPDATE_MAKE, make);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route);
+    }
+  },
+
+  components: {
+    makeQuestion,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+  },
+};
+</script>

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

@@ -0,0 +1,82 @@
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("model-question.vue", () => {
+  test("Selected model is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "Accord" });
+    const modelToSelect = "Civic";
+
+    //Act
+    wrapper.setData({ selectedModel: modelToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Civic"]);
+  });
+});
+
+describe("model-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What model is your vehicle?" });
+
+    //Act
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What model is your vehicle?");
+  });
+});
+
+describe("model-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["accord", "civic", "insight"] });
+
+    //Act
+    const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
+    modelQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("accord,civic,insight");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(modelQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -0,0 +1,47 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="models"
+    groupName="Choose Vehicle Model"
+    v-model="selectedModel"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export default {
+  name: "model-question",
+  data() {
+    return {
+      questionText: null,
+      selectedModel: null,
+      models: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      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: {
+    selectedModel(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -0,0 +1,180 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-model.vue", () => {
+  test("Model question component is initized with api data", async (done) => {
+
+    //Arange
+    const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" };
+    const modelQuestionInitialData = ["accord", "civic", "insight"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      modelQuestionInitialData: modelQuestionInitialData,
+    } );
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page header is initailized with api data", async (done) => {
+
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select a model to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-model.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a model to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  modelQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      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",
+        },
+      ],
+    },
+    modelQuestionInitialData: modelQuestionInitialData,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock model question methods
+  modelQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleModel, mountOptions);
+  const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
+  modelQuestionWrapper.vm.initializeComponent = modelQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-model/vehicle-model.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader ref="funnelHeader" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner ref="vehicleBanner" />
+        <funnelSubHeader 
+          ref="funnelSubHeader"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Make"
+          @click-event="backButtonAction"
+          class="Header"
+        />
+        <modelQuestion v-model="selectedModel" ref="modelQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-model",
+  data() {
+    return {
+      selectedModel: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const modelQuestionInitialDataPromise = modelQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "modelQuestionInitialData",
+        promise: modelQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
+        vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedModel(model) {
+      this.$store.commit(this.storeMutations.UPDATE_MODEL, model);
+      this.$router.navigate(this.navigationScenarios.SELECTED_MODEL, this.$route);
+    }
+  },
+
+  components: {
+    modelQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>

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

@@ -0,0 +1,82 @@
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("style-question.vue", () => {
+  test("Selected style is emitted upon selection.", async () => {
+
+    //Arrange
+    const { wrapper } = setupMocks({ modelValueProp: "2 Door" });
+    const styleToSelect = "4 Door";
+
+    //Act
+    wrapper.setData({ selectedStyle: styleToSelect });
+    await wrapper.vm.$nextTick();
+
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["4 Door"]);
+  });
+});
+
+describe("style-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What style is your vehicle?" });
+
+    //Act
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("questiontext")).toBe("What style is your vehicle?");
+  });
+});
+
+describe("style-question.vue", () => {
+  test("Data from store api are used as radio question answers.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2 Door", "4 Door"] });
+
+    //Act
+    const initialData = styleQuestion.methods.loadInitialData.call(wrapper.vm);
+    styleQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" });
+    expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door");
+  });
+});
+
+
+function setupMocks({
+  modelValueProp = "1900",
+  cmsQuestionText = "CMS text goes here",
+  dataFromStoreApi = [],
+}) {
+  
+  //Mock store
+  store.dispatch = jest.fn(() => dataFromStoreApi);
+  store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc'} };
+  const mountOptions = getMountOptions({
+    store: {
+      dispatch: store.dispatch,
+      getters: store.getters,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(styleQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -0,0 +1,47 @@
+<template>
+<buttonQuestion class="radioQuestion"
+    :questionText="questionText"
+    :answers="styles"
+    groupName="Choose Vehicle Style"
+    v-model="selectedStyle"
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export default {
+  name: "style-question",
+  data() {
+    return {
+      questionText: null,
+      selectedStyle: null,
+      styles: Array,
+    }
+  },
+  props: {
+    modelValue: String,
+  },
+  components: {
+    buttonQuestion,
+  },
+  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});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.styles = initialData;
+    }
+  },
+  watch: {
+    selectedStyle(val) {
+      this.$emit("update:modelValue", val);
+    }
+  },
+};
+</script>

src/layouts/vehicle-style/vehicle-style.spec.js

@@ -0,0 +1,180 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from "vue";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+  settleAllPromises: jest.fn(),
+}));
+
+describe("vehicle-style.vue", () => {
+  test("Style question component is initized with api data", async (done) => {
+
+    //Arrange
+    const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
+    const styleQuestionInitialData = ["2 Door", "4 Door"];
+    const { wrapper, apiPromise } = setupMocks( { 
+      radioQuestionCmsContent: radioQuestionCmsContent, 
+      styleQuestionInitialData: styleQuestionInitialData,
+    } );
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page header is initailized with api data", async (done) => {
+
+    //Arrange
+    const pageHeaderWidgetHeaderText = "Select a style to get started";
+    const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-style.vue", () => {
+  test("BackButtonAction triggers a router.navigate change", async (done) => {
+    
+    //Arrange
+    const { wrapper, apiPromise } = setupMocks( { 
+      pageHeaderWidgetHeaderText: "Select a style to get started",
+      mountOptionsMockData: {
+        router: {
+          navigate: jest.fn()
+        },
+      },
+    });
+    
+    //Act
+    vehicleStyle.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm));
+    wrapper.vm.backButtonAction();
+    await nextTick();
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  styleQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      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,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock style question methods
+  styleQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleStyle, mountOptions);
+  const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" });
+  styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

src/layouts/vehicle-style/vehicle-style.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="container-fluid shadow rounded-3 p-0">
+    <funnelHeader ref="funnelHeader" />
+    <div class="select-car">
+      <div class="select-car-form rounded text-center">
+        <vehicleBanner ref="vehicleBanner" />
+        <funnelSubHeader 
+          ref="funnelSubHeader"
+          :hasBackButton="true"
+          backButtonAccessibleText="Change Vehicle Model"
+          @click-event="backButtonAction"
+          class="Header"
+        />
+        <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import styleQuestion from "@/layouts/vehicle-style/style-question/style-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+export default {
+  name: "vehicle-style",
+  data() {
+    return {
+      selectedStyle: null,
+    };
+  },
+  computed: {},
+
+  beforeRouteEnter(to, from, next) {
+    
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const styleQuestionInitialDataPromise = styleQuestion.methods.loadInitialData();
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "styleQuestionInitialData",
+        promise: styleQuestionInitialDataPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
+        vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData);
+      });
+    });
+  },
+
+  methods: {
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    }
+  },
+
+  watch: {
+    selectedStyle(style) {
+      this.$store.commit(this.storeMutations.UPDATE_STYLE, style);
+      this.$router.navigate(this.navigationScenarios.SELECTED_STYLE, this.$route);
+    }
+  },
+
+  components: {
+    styleQuestion,
+    funnelHeader,
+    funnelSubHeader,
+    vehicleBanner,
+  },
+};
+</script>

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

@@ -1,6 +1,10 @@
 import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
+import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import { settleAllPromises } from "@/helpers/layout-helper.js";
 import { nextTick } from "vue";
 
@@ -10,72 +14,123 @@ jest.mock("@/helpers/layout-helper.js", () => ({
 }));
 
 describe("vehicle-year.vue", () => {
-  test("vehicle-year.vue should render data from CMS", async () => {
+  test("Year question component is initized with api data", async (done) => {
-    // Arrange
 
-    // Our mock data for our call to settleAllPromises
+    //Arrange
-    const mockData = {
+    const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
-      getPageContent: {
+    const yearQuestionInitialData = ["2023", "2022", "2021"];
-        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+    const { wrapper, apiPromise } = setupMocks( { 
-        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+      radioQuestionCmsContent: radioQuestionCmsContent, 
-        VehicleBannerWidget: [
+      yearQuestionInitialData: yearQuestionInitialData,
-          {
+    } );
-            GenericVehicleImage:
-              "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
-          },
-        ],
-        SiteHeaderWidget: [
-          {
-            LogoImage:
-              "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
-          },
-        ],
-        isCmsContentReady: true,
-      },
-      getVehicleYear: [2023, 2022, 2021],
-      store: {
-        commit: jest.fn(),
-        year: null,
-      },
-      router: {
-        push: jest.fn(),
-      },
-    };
 
-    // our router information needed.
+    //Act
-    const to = {
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
-      query: {
-        fmgPage: "vehicle-year",
-      },
-    };
 
-    const mountOptions = getMountOptions(mockData);
+    //Assert
-
+    apiPromise.finally(() => {
-    // our mock implementation of settleAllPromises
+      expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData);
-    settleAllPromises.mockImplementation(() => {
+      done();
-      return Promise.resolve(mockData);
     });
-
-    // Act
-    const wrapper = shallowMount(vehicleYear, mountOptions);
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
-
-    // Call our beforeRouteEnter on the component.
-    // This passes (c) => c(wrapper.vm) so that next can be called and our
-    // data can be set.
-    vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) =>
-      c(wrapper.vm)
-    );
-
-    await nextTick(); // Wait for the DOM to update.
-
-    // Assert
-    const header = await wrapper.find(".Header");
-    expect(header.attributes("text")).toEqual("Select a year to get started");
-
-    const yearQuestion = wrapper.findComponent({ name: "year-question" });
-    expect(yearQuestion.attributes("questiontext")).toEqual(
-      "What year is your vehicle?"
-    );
   });
 });
+
+describe("vehicle-year.vue", () => {
+  test("Page logo image is initailized with api data", async (done) => {
+
+    //Arrange
+    const SiteHeaderWidget = {
+      LogoImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { SiteHeaderWidget: SiteHeaderWidget});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
+      done();
+    });
+  });
+});
+
+describe("vehicle-year.vue", () => {
+  test("Vehicle image is initailized with api data", async (done) => {
+
+    //Arrange
+    const VehicleBannerWidget = {
+      GenericVehicleImage:
+        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    }
+    const { wrapper, apiPromise } = setupMocks( { VehicleBannerWidget: VehicleBannerWidget});
+
+    //Act
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm));
+
+    //Assert
+    apiPromise.finally(() => {
+      expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+      done();
+    });
+  });
+});
+
+function setupMocks({
+  radioQuestionCmsContent = {},
+  yearQuestionInitialData = {},
+  pageHeaderWidgetHeaderText = {},
+  mountOptionsMockData = {},
+}) {
+  
+  //Mock api responses
+  const apiResponses = {
+    cmsContent: {
+      FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }],
+      RadioQuestionWidget: [radioQuestionCmsContent],
+      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,
+  };
+  const apiPromise = Promise.resolve(apiResponses);
+  settleAllPromises.mockImplementation(() => apiPromise);
+
+  //Mock year question methods
+  yearQuestion.methods = {
+    loadInitialData: jest.fn(),
+    initializeComponent: jest.fn(),
+  };
+  funnelHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  vehicleBanner.methods = {
+    initializeComponent: jest.fn(),
+  };
+  funnelSubHeader.methods = {
+    initializeComponent: jest.fn(),
+  };
+  const mountOptions = getMountOptions(mountOptionsMockData);
+  const wrapper = shallowMount(vehicleYear, mountOptions);
+  const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" });
+  yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent;
+  const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
+  funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
+  const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
+  vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
+  const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
+  funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
+
+  return { wrapper, apiPromise };
+}

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

@@ -1,11 +1,14 @@
-<template v-if="isCmsContentReady">
+<template>
   <div class="container-fluid shadow rounded-3 p-0">
-    <siteHeader :imageSrc="siteHeaderWidget.LogoImage" />
+    <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
-        <vehicleBanner :vehicleImageSrc="vehicleBannerWidget.GenericVehicleImage" />
+        <vehicleBanner ref="vehicleBanner" />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+        <funnelSubHeader 
-        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" v-model="selectedYear" />
+            class="Header" 
+            ref="funnelSubHeader"
+        />
+        <yearQuestion v-model="selectedYear" ref="yearQuestion" />
       </div>
     </div>
   </div>
@@ -14,57 +17,46 @@
 <script>
 // Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-import pageHeader from "@/ux-components/header/header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import siteHeader from "@/common-components/site-header/site-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import store from "@/store";
+
-import { storeActions } from "@/constants/store-actions.js";
 export default {
   name: "vehicle-year",
   data() {
     return {
-      pageHeaderWidgets: {},
-      radioQuestionWidgets: {},
-      vehicleYears: [],
-      siteHeaderWidget: {},
-      vehicleBannerWidget: {},
       selectedYear: null,
     };
   },
   computed: {},
 
   beforeRouteEnter(to, from, next) {
+    
     // Call APIs
-    const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const getVehicleYearPromise = store.dispatch(
+    const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
-      storeActions.GET_VEHICLE_YEARS,
-      {}
-    );
 
     // Settle promises and get results
     const promiseResultMap = [
       {
-        resultKey: "getPageContent",
+        resultKey: "cmsContent",
-        promise: contentPromise,
+        promise: cmsContentPromise,
       },
       {
-        resultKey: "getVehicleYear",
+        resultKey: "yearQuestionInitialData",
-        promise: getVehicleYearPromise,
+        promise: yearQuestionInitialDataPromise,
       },
     ];
     settleAllPromises(promiseResultMap).then((resultMap) => {
       // Call the "next" function to complete the transition to this page.
       next((vm) => {
-        vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
+        vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]);
-        vm.siteHeaderWidget = resultMap.getPageContent.SiteHeaderWidget[0];
+        vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]);
-        vm.radioQuestionWidgets =
+        vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]);
-          resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData);
-        vm.vehicleBannerWidget =
-          resultMap.getPageContent.VehicleBannerWidget[0];
-        vm.vehicleYears = resultMap.getVehicleYear;
       });
     });
   },
@@ -72,27 +64,15 @@ export default {
   watch: {
     selectedYear(year) {
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
-      this.$router.push('?fmgPage=vehicle-make');
+      this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route);
     }
   },
 
   components: {
     yearQuestion,
-    pageHeader,
+    funnelHeader,
-    siteHeader,
     vehicleBanner,
+    funnelSubHeader,
   },
 };
 </script>
-
-<style lang="scss">
-.select-car {
-  height: calc(100vh - 56px);
-
-  .car_list {
-    // Height will be determined by overall height of content above list
-    height: calc(100% - 300px);
-    -webkit-overflow-scrolling: touch;
-  }
-}
-</style>

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

@@ -1,25 +1,80 @@
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
 
 describe("year-question.vue", () => {
-  test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => {
+  test("Selected year is emitted upon selection.", async () => {
-    // Act
-    const wrapper = shallowMount(yearQuestion);
-    await wrapper.setProps({
-      questionText: "What year is your vehicle?",
-      years: ["2023", "2022", "2021"],
-      modelValue: "2020",
-    });
-    wrapper.vm.$options.watch.selectedYear.call(wrapper.vm);
 
-    // Assert
+    //Arrange
-    const radioQuestion = await wrapper.findComponent({
+    const { wrapper } = setupMocks({ modelValueProp: "2020" });
-      name: "radioQuestion",
+    const yearToSelect = "2021";
-    });
+
-    expect(radioQuestion.attributes("questiontext")).toBe(
+    //Act
-      "What year is your vehicle?"
+    wrapper.setData({ selectedYear: yearToSelect });
-    );
+    await wrapper.vm.$nextTick();
-    expect(radioQuestion.attributes("answers")).toBe("2023,2022,2021");
+
-    expect(wrapper.componentVM.modelValue).toBe("2020");
+    //Assert
+    expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]);
   });
 });
+
+describe("year-question.vue", () => {
+  test("CMS question text is used as radio question text.", async () => {
+
+    //Arrange
+    const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" });
+
+    //Act
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
+
+    //Assert
+    const 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"] });
+
+    //Act
+    const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm);
+    yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData);
+
+    //Assert
+    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({
+    store: {
+      dispatch: store.dispatch,
+    },
+  });
+
+  //Mock props
+  mountOptions.propsData = {
+    modelValue: modelValueProp,
+  };
+  const wrapper = shallowMount(yearQuestion, mountOptions);
+
+  //Mock CMS content
+  const cmsContent = {
+    QuestionText: cmsQuestionText
+  };  
+  return { wrapper, cmsContent };
+}

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

@@ -1,5 +1,5 @@
 <template>
-<radioQuestion class="radioQuestion"
+<buttonQuestion class="radioQuestion"
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
@@ -8,22 +8,34 @@
 </template>
 
 <script>
-import radioQuestion from "@/common-components/radio-question/radio-question";
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
 
 export default {
   name: "year-question",
   data() {
     return {
+      questionText: null,
       selectedYear: null,
-    };
+      years: Array,
+    }
   },
   props: {
-    questionText: String,
-    years: Array,
     modelValue: String,
   },
   components: {
-    radioQuestion,
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.GET_VEHICLE_YEARS, {});
+    },
+    initializeComponent(cmsContent, initialData) {
+      this.questionText = cmsContent.QuestionText;
+      this.years = initialData;
+    }
   },
   watch: {
     selectedYear(val) {

src/mixins/base-mixin.js

@@ -1,5 +1,7 @@
+import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; 
 import { widgetNames } from "@/constants/widget-names.js";
 
 export default {
@@ -8,20 +10,13 @@ export default {
     };
   },
   methods: {
-    // dispatchBlockingStoreAction(type, payload) {
+    dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
-    //   // globalMethods.showWaitingModal(true);
-
-    //   return this.dispatchNonBlockingStoreAction(type, payload).finally(() => {
-    //     // globalMethods.showWaitingModal(false);
-    //   });
-    // },
-    dispatchNonBlockingStoreAction(type, payload, encodePayload = false) {
       // Encode the payload if required
       if (encodePayload) {
         encodeUriData(payload);
       }
 
-      return this.$store.dispatch(type, payload);
+      return store.dispatch(type, payload);
     },
   },
   computed: {
@@ -31,6 +26,9 @@ export default {
     storeMutations() {
       return storeMutations;
     },
+    navigationScenarios() {
+      return navigationScenarios;
+    },
     widgetNames() {
       return widgetNames;
     },

src/mixins/base-mixin.spec.js

@@ -1,38 +1,37 @@
 import baseMixin from "@/mixins/base-mixin";
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
 
 describe("baseMixin.js", () => {
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = {};
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 
   test("dispatchNonblockingStoreAction: calls dispatch with type and payload, handles Uri encode", () => {
     const mixIn = getMixInInstance({});
-    const type = {};
+    const type = '';
     const payload = { make: "Alfa Romeo/Chrysler" };
 
     mixIn.methods.dispatchNonBlockingStoreAction(type, payload, true);
 
-    expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
+    expect(store.dispatch).toBeCalledWith(type, payload);
   });
 });
 function getMixInInstance({ isDispatchSuccess = true }) {
   // Mock Store
-  const store = {
+  const storeDispatch = jest.fn();
-    dispatch: jest.fn(),
-  };
 
   if (isDispatchSuccess) {
-    store.dispatch.mockReturnValue(Promise.resolve());
+    storeDispatch.mockReturnValue(Promise.resolve());
   } else {
-    store.dispatch.mockReturnValue(Promise.reject());
+    storeDispatch.mockReturnValue(Promise.reject());
   }
 
   // Mock Route
@@ -45,7 +44,7 @@ function getMixInInstance({ isDispatchSuccess = true }) {
   // Attach mocks to mixin
   const baseMixIn = baseMixin;
   baseMixIn.methods.$route = route;
-  baseMixIn.methods.$store = store;
+  store.dispatch = storeDispatch;
   baseMixIn.methods.storeActions = storeActions;
   baseMixIn.methods.widgetNames = widgetNames;
 

src/router/index.js

@@ -3,8 +3,10 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+
 import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
 import AddressPOC from "@/layouts/address-poc/address-poc.vue";
+
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 

src/router/router-constants/fmgPage-values.js

@@ -1,6 +1,8 @@
 const fmgPageValues = {
   VEHICLE_YEAR: "vehicle-year",
   VEHICLE_MAKE: "vehicle-make",
+  VEHICLE_MODEL: "vehicle-model",
+  VEHICLE_STYLE: "vehicle-style",
 };
 
 export { fmgPageValues };

src/router/router-constants/navigation-scenarios.js

@@ -1,5 +1,9 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MODEL: "SELECTED_MODEL",
+  SELECTED_MAKE: "SELECTED_MAKE",
+  SELECTED_STYLE: "SELECTED_STYLE",
+  CLICKED_BACK: "CLICKED_BACK",
 };
 
 export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -11,6 +11,45 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MAKE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+      }
+    ],
+  },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_MODEL,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_MODEL,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+      }
+    ],
+  },
+  {
+    fmgPageValue: fmgPageValues.VEHICLE_STYLE,
+    maps: [
+      {
+        scenario: navigationScenarios.SELECTED_STYLE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+      }
+    ],
+  },
 ];
 
-export { routingTable };
+export { routingTable };

src/store/index.js

@@ -64,6 +64,18 @@ export default createStore({
     updateYear(state, year) {
       state.order.vehicle.year = year;
     },
+    updateMake(state, make) {
+      state.order.vehicle.make = make;
+    },
+    updateModel(state, model) {
+      state.order.vehicle.model = model;
+    },
+    updateStyle(state, style) {
+      state.order.vehicle.style = style;
+    },
+  },
+  getters: {
+    vehicle: state => state.order.vehicle
   },
   actions: {
     // Vehicle API Actions

src/store/store.spec.js

@@ -118,6 +118,73 @@ describe("Actions", () => {
     // Assert
     expect(pageData).toBe("Page Info Data");
   });
+
+  it("Should return data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2018 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByYmms", { year: "2018", make:  "Honda", model: "Civic", style: "2 Door"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2018 Honda Civic");
+  });
+
+  it("Should return vehicle data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2021 Honda Civic",
+        },
+      });
+    });
+    await store
+      .dispatch("lookupVehicleByVin", { vin: "12345678"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2021 Honda Civic");
+  });
+
+  it("Should return vehicle image data from url retrieved", async () => {
+    // Arrange
+    let returnData = [];
+
+    // Act
+    globalMethods.callMockHttpClient = jest.fn();
+    globalMethods.callMockHttpClient.mockImplementation(() => {
+      return Promise.resolve({
+        data: {
+          Result: "2008_honda_civic.jpg",
+        },
+      });
+    });
+    await store
+      .dispatch("getEvoxImage", { relativeUrl: "evox_image.com"})
+      .then((response) => {
+        returnData = response.data.Result;
+      });
+
+    // Assert
+    expect(returnData).toBe("2008_honda_civic.jpg");
+  });
 });
 
 describe("Mutations", () => {
@@ -128,4 +195,34 @@ describe("Mutations", () => {
     // Assert
     expect(store.state.order.vehicle.year).toBe(2020);
   });
+
+  it("Should update the make property in the store", () => {
+    // Act
+    store.commit("updateMake", "Honda");
+
+    // Assert
+    expect(store.state.order.vehicle.make).toBe("Honda");
+  });
+
+  it("Should update the model property in the store", () => {
+    // Act
+    store.commit("updateModel", "Civic");
+
+    // Assert
+    expect(store.state.order.vehicle.model).toBe("Civic");
+  });
+
+  it("Should update the style property in the store", () => {
+    // Act
+    store.commit("updateStyle", "2 Door");
+
+    // Assert
+    expect(store.state.order.vehicle.style).toBe("2 Door");
+  });
+});
+
+describe("Getters", () => {
+  const vehicle = store.getters.vehicle;
+
+  expect(typeof vehicle).toBe('object');
 });

src/styles/common-button-styles.scss

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

src/styles/common-list-styles.scss

@@ -1,6 +1,7 @@
-.radiogroup {
+.list-group {
-  &.radio-list-button {
+  &.list-button {
-    input[type="radio"] {
+    input[type="radio"],
+    input[type="checkbox"] {
       opacity: 0;
       position: fixed;
       width: 0;
@@ -32,13 +33,6 @@
       + p {
         display: none;
       }
-      &.error {
-        border: 1px solid $danger;
-        + p {
-          display: flex;
-          color: $danger;
-        }
-      }
     }
   }
 }

src/styles/ux-variables.scss

@@ -115,6 +115,12 @@ $font-family-base:            $font-family-sans-serif;
 $font-family-code:            $font-family-monospace;
 $font-size-base:              1rem; // Assumes the browser default, typically `16px`
 
+//Custom Font size (extra small)
+$font-size-xsm:                $font-size-base * .75;
+$font-sizes: (
+  7: $font-size-xsm
+);
+
 //Font weight
 $font-weight-lighter:         lighter;
 $font-weight-light:           300;

src/ux-components/checkbox/checkbox.vue

@@ -0,0 +1,81 @@
+<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" />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "checkbox",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean
+  }
+};
+</script>
+
+<style lang="scss">
+.ui-checkbox {
+  position: relative;
+  input[type='checkbox'] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    + label {
+      display: block;
+      position: relative;
+    }
+    + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: 2px;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 12px;
+      transform: rotate(-45deg);
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
+  }
+}
+</style>

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

@@ -1,16 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import Header from "./header";
-
-describe("Header.vue", () => {
-  it("Should render the 'text' prop value as a span value for the header span text value.", () => {
-    // Act
-    const wrapper = shallowMount(Header, {
-      propsData: {
-        text: "Header Content",
-      },
-    });
-
-    // Assert
-    expect(wrapper.find("h2").text()).toContain("Header Content");
-  });
-});

src/ux-components/header/header.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center">
-      <h2 class="text-center fs-5 d-block fw-normal mb-0">{{ text }}</h2>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Header",
-  props: {
-    text: String,
-  },
-};
-</script>
-
-<style lang="scss">
-  h2 {
-    color: $gray-550;
-  }
-</style>

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

@@ -1,17 +1,17 @@
 import { shallowMount } from "@vue/test-utils";
-import radioHorizontal from "./radio-horizontal";
+import listButtonHorizontal from "./list-button-horizontal";
 
-describe("radio.vue", () => {
+describe("list-button.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
-    const wrapper = shallowMount(radioHorizontal, {
+    const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        radioID: "2023",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
+        loaderEnabled: "true",
         sizeInRem: "1.5",
-        errorMessage: "null",
       },
     });
 
@@ -20,7 +20,7 @@ describe("radio.vue", () => {
     const label = wrapper.find("label");
     const paragraph = wrapper.find("span");
 
-    await label.trigger("click");
+    await input.trigger("click");
 
     expect(input.attributes()).toEqual({
       id: "2023",
@@ -31,9 +31,9 @@ describe("radio.vue", () => {
     });
 
     expect(label.attributes()).toEqual({
-      role: "radio",
       tabindex: "-1",
       for: "2023",
+      "aria-labelledby": "2023",
       class: "d-flex flex-column justify-content-center py-3 px-4 last-item",
       "aria-checked": "false",
     });
@@ -42,6 +42,6 @@ describe("radio.vue", () => {
 
     expect(paragraph.text()).toEqual("2023");
 
-    expect(wrapper.vm.display).toBe(true);
+    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
   });
 });

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

@@ -0,0 +1,118 @@
+<!-- See the component-test.vue page for example implementation -->
+<template>
+  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
+  <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+  </label>
+  </div>
+  <div v-else class="col list-group list-button-horizontal d-flex flex-column mb-2">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick()" @click="handleClick()" />
+    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
+      <loader v-if="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+    </label>
+  </div>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+
+export default {
+  name: "listButtonHorizontal",
+  props: {
+    isMultiSelect: Boolean, /* Defines use as checkbox */
+    groupName: String, /* Required, unique for each button GROUP */
+    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
+    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
+    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
+    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
+    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
+    positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
+    isRequired: Boolean,
+  },
+  data() {
+    return {
+      isLoaderDisplayed: false,
+    };
+  },
+  methods: {
+    displayLoader() {
+      this.isLoaderDisplayed = true;
+    },
+    handleClick() {
+      this.loaderEnabled && this.displayLoader();
+    }
+  },
+  components: {
+    loader,
+  },
+  computed: {
+    isFirstOrLastButton() {
+      let className = "";
+      if (this.positionInGroup == this.totalInGroup) {
+        className = "last-item";
+      } else if (this.positionInGroup == 1) {
+        className = "first-item";
+      }
+      return className;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.list-button-horizontal {
+  input[type="radio"],
+  input[type="checkbox"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:checked + label {
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+    }
+    &:checked + label p:first-child {
+      font-weight: 500;
+    }
+  }
+  label {
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border: 1px solid $gray-500;
+    width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+      cursor: pointer;
+      z-index: 2;
+    }
+    + p {
+      display: none;
+    }
+    &.first-item {
+      border-bottom-left-radius: 0.5rem;
+      border-top-left-radius: 0.5rem;
+    }
+    &.last-item {
+      border-bottom-right-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+    }
+  }
+}
+</style>

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

@@ -1 +1,46 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import listButton from "./list-button";
+
+describe("list-button.vue", () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        buttonID: "2023",
+        groupName: "TestGroup",
+        loaderColor: "blue",
+        loaderPosition: "right",
+        sizeInRem: "1.5",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    const label = wrapper.find("label");
+    const paragraph = wrapper.find("span");
+
+    await label.trigger("click");
+
+    expect(input.attributes()).toEqual({
+      id: "2023",
+      type: "radio",
+      value: "2023",
+      name: "TestGroup",
+      "aria-required": "false",
+    });
+
+    expect(label.attributes()).toEqual({
+      tabindex: "-1",
+      for: "2023",
+      "aria-labelledby": "2023",
+      class: "d-flex flex-column justify-content-center py-3 px-4",
+      "aria-checked": "false",
+    });
+
+    expect(label.text()).toEqual("2023");
+
+    expect(paragraph.text()).toEqual("2023");
+
+    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
+  });
+});

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

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

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

@@ -0,0 +1,188 @@
+import { shallowMount } from "@vue/test-utils";
+import listCard from "./list-card";
+
+describe("list-card.vue", () => {
+
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelect: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "checkbox-demo-1",
+        groupName: "Checkbox 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+  });
+
+  it("Should return input type radio if isRadio is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadio: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+  });
+
+  it("Should return input type checkbox if isMultiSelectHorizontal is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelectHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+
+  });
+
+  it("Should return input type radio if isRadioHorizontal is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+
+  });
+
+  it("Should return primary label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+
+    expect(paragraph.text()).toEqual("Windshield");
+
+  });
+
+  it("Should return secondary (sub) label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p:nth-of-type(2)");
+
+    expect(paragraph.text()).toEqual("Test");
+
+  });
+
+  it("Should return value used for various text settings including the label 'for' and input id", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+
+  });
+
+  it("Should return input group name used for radio or checkbox", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test"
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().name).toEqual("radio 1");
+
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+
+  });
+
+});

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

@@ -0,0 +1,171 @@
+<template>
+  <!-- Heavily documented below -->
+  <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="small m-0 order-3">{{buttonLabel}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
+    </label>
+  </div>
+  <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
+      <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
+    </label>
+  </div>
+  <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <div class="order-2">
+        <p class="m-0 small">{{buttonLabel}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+      </div>
+    </label>
+  </div>
+  <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
+      <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <div class="order-2">
+        <p class="m-0 small">{{buttonLabel}}</p>
+        <p v-if="buttonLabelSubCopy" class="m-0 fs-7">{{buttonLabelSubCopy}}</p>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "listCard",
+  props: {
+    //Must choose one of the following four options
+    isMultiSelect: Boolean, //Defines use as checkbox
+    isRadio: Boolean, //Defines use as radio button
+    isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
+    isRadioHorizontal: Boolean, //Defines use as horizontal radio button
+    //end must choose
+    buttonImage: String,//Required: File name of image
+    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,//Required: Unique
+    buttonLabelSubCopy: String,//Optional: sub tex
+  }
+};
+</script>
+
+<style lang="scss">
+.list-card {
+  border: 1px solid $gray-500;
+  &.invalid { //Red border if invalid
+    border: 1px solid $red;
+  }
+  img {
+    height: auto;
+    width: 2.875rem;
+    margin-bottom: 3rem;
+  }
+  &:hover {
+    box-shadow: 0px 0px 0px 6px $blue-100;
+    border: 1px solid transparent;
+  }
+  input[type='checkbox'],
+  input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+    + label {
+      display: block;
+      position: relative;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2.5px $blue;
+      border-radius: .5rem;
+    }
+    &:checked + label {
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+      border-radius: .5rem;
+    }
+    + label::before {
+      content: "";
+      position: absolute;
+      display: flex;
+      margin: 0 auto;
+      width: 1rem;
+      height: 1rem;
+      margin: 3rem 0 0 0;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+      order: 2;
+    }
+    + label.checkboxTop::before {
+      margin: -1.25rem 0.5rem 0 0 !important;
+    }
+    + label.checkboxTop::after {
+      margin: -1.5rem 0.5rem 0 0 !important;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      margin: 3.2rem 0 0 0;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 11px;
+      transform: rotate(-45deg);
+    }
+  }
+  input[type="radio"] {
+    + label::before {
+      content: "";
+      display: none;
+    }
+    + label::after {
+      content: "";
+      display: none;
+    }
+    + label {
+      img {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &.horizontal {
+    img {
+      margin-bottom: 0;
+    }
+    input[type='checkbox'],
+    input[type="radio"] {
+      + label::before {
+        content: "";
+        position: relative;
+        margin: 0 .5rem 0 0;
+        order: 1;
+      }
+      &:checked + label::after {
+        content: '';
+        margin: -0.25rem 0 0 0;
+        left: .875rem;
+      }
+      + label {
+        img {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/ux-components/loader/loader.vue

@@ -62,6 +62,7 @@ export default {
   &.center {
     position: absolute;
     right: 50%;
+    transform: translateX(50%);
   }
   &.right {
     position: absolute;

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

@@ -1 +0,0 @@
-test.todo("some test to be written in the future");

src/ux-components/radio-card/radio-card.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="col mb-3 d-flex radio-card">
-    <input
-      type="radio"
-      class="position-absolute opacity-0"
-      :class="className"
-      :id="radioID"
-      :name="groupName"
-      :value="radioLabel"
-      v-model="picked"
-      :tabindex="tabIndex"
-    />
-    <label
-      v-bind:for="radioID"
-      class="rounded-3 d-flex flex-column align-items-center w-100"
-    >
-      <img
-        class="px-3 pt-3 pb-2 mt-auto"
-        v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
-        v-bind:alt="altText"
-      />
-      <span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
-    </label>
-  </div>
-</template>
-
-<!-- tabIndex="x" is available on this component if needed -->
-
-<script>
-export default {
-  name: "radioCard",
-  props: [
-    "groupName",
-    "radioLabel",
-    "radioImage",
-    "altText",
-    "radioID",
-    "tabIndex",
-    "className",
-  ],
-  data() {
-    return {
-      picked: "picked",
-    };
-  },
-};
-</script>
-<style lang="scss">
-.radio-card {
-  input[type="radio"] {
-    &:focus + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:focus-visible + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:checked + label {
-      background-color: $blue-100;
-      border: 1px solid $blue;
-    }
-    &.invalid + label {
-      background-color: $white;
-      border: 1px solid $red;
-    }
-  }
-  label {
-    background: $white;
-    border: 1px solid $gray;
-    &:hover {
-      cursor: pointer;
-      box-shadow: 0px 0px 0px 6px $blue-100;
-    }
-  }
-}
-</style>

src/ux-components/radio-horizontal/radio-horizontal.vue

@@ -1,111 +0,0 @@
-<!-- See the component-test.vue page for example implementation -->
-<template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
-  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-    </label>
-    <p class="small">{{ errorMessage }}</p>
-  </div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "radioHorizontal",
-  props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    errorMessage: String, /* Optional, if there is an error message to be displayed */
-    loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
-    loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
-    sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
-  },
-  data() {
-    return {
-      isError: false,
-      display: false,
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  },
-  computed: {
-    isFirstOrLastButton() {
-      let className = "";
-      if (this.positionInGroup == this.totalInGroup) {
-        className = "last-item";
-      } else if (this.positionInGroup == 1) {
-        className = "first-item";
-      }
-      return className;
-    },
-  },
-};
-</script>
-<style lang="scss">
-.radio-horizontal {
-  input[type="radio"] {
-    opacity: 0;
-    position: fixed;
-    width: 0;
-    &:focus-visible + label {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus + label {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:checked + label {
-      background: $blue-100;
-      box-shadow: 0 0 0 1px $blue;
-    }
-    &:checked + label p:first-child {
-      font-weight: 500;
-    }
-  }
-  label {
-    position: relative;
-    background: $white;
-    transition: all 150ms linear;
-    border: 1px solid $gray-500;
-    width: 100%;
-    &:hover {
-      box-shadow: 0 0 0 4px $blue-100;
-      cursor: pointer;
-      z-index: 2;
-    }
-    + p {
-      display: none;
-    }
-    &.error {
-      border: 1px solid $danger;
-      + p {
-        display: flex;
-        color: $danger;
-      }
-    }
-    &.first-item {
-      border-bottom-left-radius: 0.5rem;
-      border-top-left-radius: 0.5rem;
-    }
-    &.last-item {
-      border-bottom-right-radius: 0.5rem;
-      border-top-right-radius: 0.5rem;
-    }
-  }
-}
-</style>

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

@@ -1,47 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import radio from "./radio";
-
-describe("radio.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
-    // Act
-    const wrapper = shallowMount(radio, {
-      propsData: {
-        radioID: "2023",
-        groupName: "TestGroup",
-        loaderColor: "blue",
-        loaderPosition: "right",
-        sizeInRem: "1.5",
-        errorMessage: "null",
-      },
-    });
-
-    // Assert
-    const input = wrapper.find("input");
-    const label = wrapper.find("label");
-    const paragraph = wrapper.find("span");
-
-    await label.trigger("click");
-
-    expect(input.attributes()).toEqual({
-      id: "2023",
-      type: "radio",
-      value: "2023",
-      name: "TestGroup",
-      "aria-required": "false",
-    });
-
-    expect(label.attributes()).toEqual({
-      role: "radio",
-      tabindex: "-1",
-      for: "2023",
-      class: "d-flex flex-column justify-content-center py-3 px-4",
-      "aria-checked": "false",
-    });
-
-    expect(label.text()).toEqual("2023");
-
-    expect(paragraph.text()).toEqual("2023");
-
-    expect(wrapper.vm.display).toBe(true);
-  });
-});

src/ux-components/radio/radio.vue

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

vue.config.js

@@ -17,7 +17,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },

vue.release.config.js

@@ -16,7 +16,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },