CSR-222: refactor with emit for click event

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -6,10 +6,10 @@
           {{ text }}
         </span>
         <buttonBack
-        v-if="hasBackButton"
+          v-if="hasBackButton"
-        :backButtonAction="backButtonAction"
+          :backButtonAccessibleText="backButtonAccessibleText"
-        :backButtonAccessibleText="backButtonAccessibleText"
+          @click-event="clickEvent"
-      />
+        />
     </h5>
     </div>
   </div>
@@ -24,11 +24,15 @@ export default {
     text: String,
     hasBackButton: Boolean,
     backButtonAccessibleText: String,
-    backButtonAction: Function,
   },
   components: {
     buttonBack,
-  }
+  },
+  methods: {
+    clickEvent() {
+      this.$emit('click-event');
+    }
+  },
 };
 </script>
 

src/layouts/vehicle-make/vehicle-make.vue

@@ -8,7 +8,7 @@
             :text="funnelSubHeaderWidget.HeaderText"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
-            :backButtonAction="backButtonAction"
+            @click-event="backButtonAction"
             class="Header"
         />
         <makeQuestion v-model="selectedMake" ref="makeQuestion" />
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }

src/layouts/vehicle-model/vehicle-model.vue

@@ -8,7 +8,7 @@
           :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Make"
-          :backButtonAction="backButtonAction"
+          @click-event="backButtonAction"
           class="Header"
         />
         <modelQuestion v-model="selectedModel" ref="modelQuestion" />
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }

src/layouts/vehicle-style/vehicle-style.vue

@@ -8,7 +8,7 @@
           :text="funnelSubHeaderWidget.HeaderText"
           :hasBackButton="true"
           backButtonAccessibleText="Change Vehicle Model"
-          :backButtonAction="backButtonAction"
+          @click-event="backButtonAction"
           class="Header"
         />
         <styleQuestion v-model="selectedStyle" ref="styleQuestion" />
@@ -67,7 +67,7 @@ export default {
   },
 
   methods: {
-    backButtonAction: function () {
+    backButtonAction() {
       // route to move backwards
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     }

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

@@ -1,7 +1,6 @@
 <template>
   <button
-    v-if="backButtonAction"
+    @click="handleClick"
-    @click="backButtonAction"
     class="back-button-wrapper p-3" 
     :aria-label="backButtonAccessibleText"
   >
@@ -20,12 +19,13 @@ export default {
       type: String,
       required: true,
       default: "",
-    },
-    backButtonAction: {
-      type: Function,
-      default: null,
     }
   },
+  methods: {
+    handleClick() {
+      this.$emit('click-event');
+    }
+  }
 };
 </script>
 

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -10,6 +10,7 @@ describe("list-button.vue", () => {
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",
+        loaderEnabled: "true",
         sizeInRem: "1.5",
         errorMessage: "null",
       },
@@ -20,7 +21,7 @@ describe("list-button.vue", () => {
     const label = wrapper.find("label");
     const paragraph = wrapper.find("span");
 
-    await label.trigger("click");
+    await input.trigger("click");
 
     expect(input.attributes()).toEqual({
       id: "2023",

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

@@ -2,7 +2,7 @@
 <template>
   <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div v-if="isMultiSelect" 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">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)">
     <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="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>
@@ -11,8 +11,8 @@
   <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()"/>
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)" />
-    <label tabindex="-1" aria-checked="false" :for="buttonID" :aria-labelledby="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" :aria-labelledby="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>
@@ -23,7 +23,10 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
+
 export default {
   name: "listButtonHorizontal",
   props: {
@@ -34,15 +37,17 @@ export default {
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */
+    loaderEnabled: Boolean, /* Optional, need to include this for loader to be used at all */
     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)) */
     totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
+    positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
+    isRequired: Boolean,
   },
   data() {
     return {
-      isError: false,
+      hasError: false,
       isLoaderDisplayed: false,
     };
   },
@@ -50,6 +55,10 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
+    handleClick(value) {
+      this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
+    }
   },
   components: {
     loader,
@@ -65,8 +74,20 @@ export default {
       return className;
     },
   },
+  setup(props) {
+    const { groupName, buttonID } = toRefs(props);
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: props.isMultiSelect ? "checkbox" : "radio",
+      checkedValue: buttonID
+    });
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>
+
 <style lang="scss">
 .list-button-horizontal {
   input[type="radio"],

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

@@ -1,7 +1,7 @@
 <template>
   <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
@@ -9,7 +9,7 @@
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@@ -17,7 +17,7 @@
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -27,7 +27,7 @@
     </label>
   </div>
   <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center" :class="{'error': hasError}">
-    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
     <label :for="buttonID" class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8" tabindex="1" :class="{'checkboxTop': buttonLabelSubCopy}">
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <div class="order-2">
@@ -39,14 +39,16 @@
 </template>
 
 <script>
+import { useField } from 'vee-validate';
+
 export default {
   name: "listCard",
   props: {
     //Must choose one of the following four options
-    isMultiSelect: Boolean,//Defines use as checkbox
+    isMultiSelect: Boolean, //Defines use as checkbox
-    isRadio: Boolean,//Defines use as radio button
+    isRadio: Boolean, //Defines use as radio button
-    isMultiSelectHorizontal: Boolean,//Defines use as horizontal checkbox
+    isMultiSelectHorizontal: Boolean, //Defines use as horizontal checkbox
-    isRadioHorizontal: Boolean,//Defines use as horizontal radio button
+    isRadioHorizontal: Boolean, //Defines use as horizontal radio button
     //end must choose
     buttonImage: String,//Optional: File name of image
     buttonLabel: String,//Required: Label text
@@ -55,7 +57,18 @@ export default {
     groupName: String,//Rquired: Unique
     buttonLabelSubCopy: String,//Optional: sub text
     hasError: Boolean//Used to show error state
-  }
+  },
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  // setup({ groupName, value }) {
+  //   const { checked, handleChange } = useField(groupName, undefined, {
+  //     type: "radio",
+  //     checkedValue: value
+  //   });
+  //   return {
+  //     checked,
+  //     handleChange,
+  //   };
+  // },
 };
 </script>