CSR-186 Add radio/checkbox toggle to existing list-buttons.

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
+      <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
+        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
+      <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
+        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
+      <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
+        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
+      <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
+        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>

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.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">
+  <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="displayComponent"/>
+    <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='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="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() {
+    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.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">
+  <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="displayComponent()">
+    <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='displayComponent()'>
+    <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() {
+    displayLoader() {
-      this.display = true;
+      this.isLoaderDisplayed = true;
     },
   },
   components: {