From 7761ad879db31f461dacb13d02f72e219421e446 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 6 Jan 2022 11:23:40 -0500
Subject: [PATCH] CSR-222: undo accidental code collusion

---
 .../list-button-horizontal.vue                | 21 ++-----------------
 src/ux-components/list-card/list-card.vue     | 21 ++++---------------
 2 files changed, 6 insertions(+), 36 deletions(-)

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 da7483f34..65c2270d2 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/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" @keyup.space="handleClick(buttonID)" @click="handleClick(buttonID)">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <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,7 +11,7 @@
   <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="handleClick(buttonID)" @click="handleClick(buttonID)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayLoader()" @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>
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { toRefs } from 'vue';
-import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 
 export default {
@@ -53,10 +51,6 @@ export default {
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
-    },
-    handleClick(value) {
-      this.loaderEnabled && this.displayLoader();
-      this.handleChange(value);
     }
   },
   components: {
@@ -73,17 +67,6 @@ 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>
 
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f51c7425a..fe17af9db 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" />
     <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <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" @keyup.space="handleChange(buttonLabel)" @click="handleChange(buttonLabel)" />
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
     <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,8 +39,6 @@
 </template>
 
 <script>
-import { useField } from 'vee-validate';
-
 export default {
   name: "listCard",
   props: {
@@ -58,17 +56,6 @@ export default {
     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>