Merge branch 'develop' into feature/CSR-222

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

@@ -61,20 +61,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 Checkboxes</h6>
       </div>
     </div>
     <div class="row">
       <!-- 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>
         <listButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -86,6 +84,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -97,6 +96,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -109,23 +109,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 Radio Buttons</h6>
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
+        <listButton
+        groupName="demo-1-checkbox"
+        ariaLabelBy="vehicle-year"
+        buttonID="2018"
+        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 Checkboxes</h6>
       </div>
     </div>
     <div class="row">
       <!-- 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-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-2-radio-group">Select Vehicle Year</h3>
-          Select Vehicle Year
-        </h3>
         <listButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -137,6 +174,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -148,6 +186,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -160,23 +199,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 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">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
+      <div role="radiogroup" aria-labelledby="demo-3-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-3-radio-group">Multi-Line Centered</h3>
-          Multi-Line Centered
-        </h3>
         <listButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -188,6 +264,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -199,6 +276,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
+        isCheckbox
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -211,23 +289,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 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 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>
         <listButtonHorizontal
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -241,6 +358,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -254,6 +372,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
+        isCheckbox
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -268,6 +387,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 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>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>

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/vehicle-make.vue

@@ -0,0 +1,3 @@
+<template>
+<p> Vehicle Make Layout - Do Something Cool Here </p>
+</template>

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,
   };

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">
     <funnelHeader :imageSrc="siteHeaderWidget.LogoImage" />
     <div class="select-car">
@@ -23,6 +23,8 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
 export default {
   name: "vehicle-year",
   data() {
@@ -67,7 +69,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);
     }
   },
 

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) {

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,8 @@
 const navigationScenarios = {
   SELECTED_YEAR: "SELECTED_YEAR",
+  SELECTED_MODEL: "SELECTED_MODEL",
+  SELECTED_MAKE: "SELECTED_MAKE",
+  CLICKED_BACK: "CLICKED_BACK",
 };
 
 export { navigationScenarios };

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 };

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;

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",
@@ -42,6 +41,6 @@ describe("list-button.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

@@ -1,13 +1,22 @@
 <!-- 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">
+  <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <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'>
+    <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>
-      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+  </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 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="isLoaderDisplayed" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
     <p class="small">{{ errorMessage }}</p>
   </div>
@@ -18,6 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
+    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 */
@@ -33,12 +43,12 @@ export default {
   data() {
     return {
       isError: false,
-      display: false,
+      isLoaderDisplayed: false,
     };
   },
   methods: {
-    displayComponent() {
+    displayLoader() {
-      this.display = true;
+      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;

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",
@@ -42,6 +41,6 @@ describe("list-button.vue", () => {
 
     expect(paragraph.text()).toEqual("2023");
 
-    expect(wrapper.vm.display).toBe(true);
+    expect(wrapper.vm.isLoaderDisplayed).toBe(true);
   });
 });

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

@@ -1,12 +1,21 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div 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="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayComponent()">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
       <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
-    <loader v-if="display" :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="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayLoader()">
+    <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
+      <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>
   <p class="small">{{errorMessage}}</p>
 </div>
@@ -17,6 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
+    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 */
@@ -31,12 +41,12 @@ export default {
   data() {
     return {
       isError: false,
-      display: false,
+      isLoaderDisplayed: false,
     };
   },
   methods: {
-    displayComponent() {
+    displayLoader() {
-      this.display = true;
+      this.isLoaderDisplayed = true;
     },
   },
   components: {