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

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

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

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

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

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

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

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

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

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

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

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

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

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

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