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] 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 */