CSR-254: update list-button w/ vee validate and add to form-test layout

src/layouts/form-test/form-test.vue

@@ -66,31 +66,22 @@
       <h4 class="mx-2 mt-4 mb-0">Which windshield part needs fixed? (Required)</h4>
       <fieldset>
         <legend class="sr-only">Which windshield part needs fixed?</legend>
-        <listCard
+        <listButton
-          isMultiSelectHorizontal
+          isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonID="Single Windshield"
-          buttonLabel="Single Windshield"
           value="Single Windshield"
-          altText=""
-          buttonID="List Card Horizontal Checkbox a"
           groupName="demo2"
         />
-        <listCard
+        <listButton
-          isMultiSelectHorizontal
+          isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonID="Driver Side"
-          buttonLabel="Driver Side"
           value="Driver Side"
-          altText=""
-          buttonID="List Card Horizontal Checkbox b"
           groupName="demo2"
         />
-        <listCard
+        <listButton
-          isMultiSelectHorizontal
+          isMultiSelect
-          buttonImage="windshield-damage.svg"
+          buttonID="Passenger Side"
-          buttonLabel="Passenger Side"
           value="Passenger Side"
-          altText=""
-          buttonID="List Card Horizontal Checkbox c"
           groupName="demo2"
         />
       </fieldset>
@@ -127,7 +118,6 @@
   <div class="row g-2 mt-6 mx-4">
     <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
     <div
-      role="radiogroup"
       aria-labelledby="demo5-group"
       class="d-flex flex-row p-0"
     >
@@ -145,7 +135,7 @@
         />
         <listCard
           isMultiSelect
-          buttonImage="side-window-damage.svg"
+          buttonImage="side-window-damage-left-all.svg"
           buttonLabel="Side Door"
           value="Side Door"
           altText=""
@@ -251,6 +241,7 @@ import * as Yup from "yup";
 
 import listCard from "@/ux-components/list-card/list-card";
 import textInput from "@/common-components/text-input/text-input";
+import listButton from "@/ux-components/list-button/list-button";
 import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 
 export default {
@@ -304,6 +295,7 @@ export default {
   },
   components: {
     listCard,
+    listButton,
     listButtonHorizontal,
     textInput,
     Form,

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

@@ -1,16 +1,42 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
   <div v-if="isMultiSelect" 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">
+    <input
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @click="handleClick(value)"
+      :data-focus-target="groupName"
+    >
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="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>
   </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()">
+    <input
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" @click="displayLoader()">
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @click="handleClick(value)"
+      :data-focus-target="groupName"
+    >
+    <label
+      tabindex="-1"
+      :for="buttonID"
+      :aria-labelledby="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>
@@ -20,6 +46,8 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
@@ -35,6 +63,10 @@ export default {
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
     loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
     sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
@@ -45,12 +77,38 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick() {
+    handleClick(value) {
       this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
     }
   },
   components: {
     loader,
-  }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange, errorMessage } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    return {
+      checked,
+      handleChange,
+      errorMessage,
+    };
+  },
 };
 </script>
+
+<style lang="scss">
+.list-group {
+  &.list-button {
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: static !important; //override bootstrap
+      height: 0;
+    }
+  }
+}
+</style>