From 549a8b359319b32217ab348ce226e04f39f1596f Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 7 Jan 2022 16:00:34 -0500
Subject: [PATCH] CSR-254: create form-test page and begin testing validation

---
 package.json                                  |   1 +
 src/layouts/form-test/form-test.vue           | 162 ++++++++++++++++++
 src/router/index.js                           |   6 +
 .../list-button-horizontal.vue                |  60 ++++++-
 src/ux-components/list-card/list-card.vue     | 104 +++++++++--
 5 files changed, 317 insertions(+), 16 deletions(-)
 create mode 100644 src/layouts/form-test/form-test.vue

diff --git a/package.json b/package.json
index 58b8837dd..50a9b5760 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
     "jest-junit": "^13.0.0",
+    "vee-validate": "^4.5.7",
     "vue": "^3.0.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
new file mode 100644
index 000000000..96bc9bd33
--- /dev/null
+++ b/src/layouts/form-test/form-test.vue
@@ -0,0 +1,162 @@
+<template>
+<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
+  <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">How many chips are we repairing?</h6>
+    <div role="radiogroup" aria-labelledby="demo-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-group">
+        How many chips are we repairing?
+      </h3>
+      <listButtonHorizontal
+      groupName="demo"
+      ariaLabelBy="vehicle-model"
+      buttonID="1"
+      value="1"
+      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"
+      ariaLabelBy="vehicle-model"
+      buttonID="2"
+      value="2"
+      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"
+      ariaLabelBy="vehicle-model"
+      buttonID="3"
+      value="3"
+      buttonLabelSubCopy=""
+      textPosition="text-center"
+      loaderColor="blue"
+      loaderPosition="right"
+      sizeInRem="1"
+      v-bind:totalInGroup="3"
+      v-bind:positionInGroup="3"
+      screenReaderOnlyText=" opens new window"
+      />
+    </div>
+    <div class="row px-3">
+      <error-message name="demo"></error-message>
+    </div>
+  </div>
+
+  <div class="row g-2">
+    <div class="col">
+      <h6 class="mx-2 my-4">Which windshield part needs fixed?</h6>
+      <fieldset>
+        <legend class="sr-only">Which windshield part needs fixed?</legend>
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Single Windshield"
+        value="Single Windshield"
+        altText=""
+        buttonID="List Card Horizontal Checkbox a"
+        groupName="demo2"
+        />
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Driver Side"
+        value="Driver Side"
+        altText=""
+        buttonID="List Card Horizontal Checkbox b"
+        groupName="demo2"
+        />
+        <listCard
+        isMultiSelectHorizontal
+        buttonImage="windshield-damage.svg"
+        buttonLabel="Passenger Side"
+        value="Passenger Side"
+        altText=""
+        buttonID="List Card Horizontal Checkbox c"
+        groupName="demo2"
+        />
+      </fieldset>
+    </div>
+    <div class="row px-3">
+      <error-message name="demo2"></error-message>
+    </div>
+  </div>
+  
+  <div class="g-2 mx-2 my-4">
+    <button>Get your estimate</button>
+    <p>Values</p>
+    <pre>{{ values }}</pre>
+  </div>
+
+</Form>
+</template>
+
+<script>
+
+import { Form, ErrorMessage } from 'vee-validate';
+
+
+import buttonPrimary from "@/ux-components/button-primary/button-primary";
+import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
+import buttonBack from "@/common-components/button-back/button-back";
+import listCard from "@/ux-components/list-card/list-card";
+import listButton from "@/ux-components/list-button/list-button";
+import alert from "@/ux-components/alert/alert";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import checkbox from "@/ux-components/checkbox/checkbox";
+export default {
+  name: "App",
+  data() {
+    return {
+      schema: { // VALIDATION SETUP
+        demo: (value) => {
+          if (value && value.length > 0) {
+            return true;
+          }
+          return 'Please select chip(s)';
+        },
+        demo2: (value) => {
+          if (value && value.length > 0) {
+            return true;
+          }
+          return 'Please select a windshield part';
+        }
+      }
+    }
+  },
+  components: {
+    // buttonPrimary,
+    // buttonSecondary,
+    // buttonBack,
+    listCard,
+    // listButton,
+    // alert,
+    // vehicleBanner,
+    listButtonHorizontal,
+    Form,
+    ErrorMessage,
+    // checkbox,
+    // funnelHeader,
+  },
+  methods: {
+    onSubmit(values) {
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+  },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index c135d60c1..2f4f0daad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+import FormTest from "@/layouts/form-test/form-test.vue";
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -17,6 +18,11 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/form-test", // This is a temporary route for testing.
+    name: "FormTest",
+    component: FormTest,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {
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 97642d2c1..ef5632b5a 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -2,16 +2,46 @@
 <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">
-    <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">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired"
+      @keyup.space="handleClick(value)"
+      @click="handleClick(value)"
+    />
+    <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>
   </label>
   </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()" @click="handleClick()" />
-    <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">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      aria-required="true"
+      @keyup.space="handleClick(value)"
+      @click="handleClick(value)"
+    />
+    <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>
@@ -21,6 +51,8 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
 import loader from "@/ux-components/loader/loader";
 
 export default {
@@ -39,9 +71,14 @@ export default {
     totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
     positionInGroup: Number, /* Required, position of button in group. Example, 1,2,3 */
     isRequired: Boolean,
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
+      hasError: false,
       isLoaderDisplayed: false,
     };
   },
@@ -49,8 +86,9 @@ export default {
     displayLoader() {
       this.isLoaderDisplayed = true;
     },
-    handleClick() {
+    handleClick(value) {
       this.loaderEnabled && this.displayLoader();
+      this.handleChange(value);
     }
   },
   components: {
@@ -67,6 +105,18 @@ export default {
       return className;
     },
   },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: inputType,
+      checkedValue: value
+    });
+    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 68b1c80b0..6d06651f4 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,24 +1,61 @@
 <template>
   <!-- Heavily documented below -->
   <div v-if="isMultiSelect" class="list-card w-100 rounded-3 d-flex align-items-center">
-    <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">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <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>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isRadio" class="list-card w-100 rounded-3 d-flex align-items-center">
-    <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">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonID"
+      :aria-required="isRequired" 
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <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>
       <p v-if="buttonLabelSubCopy" class="fs-7 m-0 order-3">{{buttonLabelSubCopy}}</p>
     </label>
   </div>
   <div v-else-if="isMultiSelectHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
-    <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}">
+    <input
+      type="checkbox"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <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">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -27,8 +64,21 @@
     </label>
   </div>
   <div v-else-if="isRadioHorizontal" class="list-card horizontal w-100 rounded-3 d-flex align-items-center">
-    <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}">
+    <input
+      type="radio"
+      :id="buttonID"
+      :name="groupName"
+      :value="buttonLabel"
+      :aria-required="isRequired"
+      @keyup.space="handleChange(value)"
+      @click="handleChange(value)"
+    />
+    <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">
         <p class="m-0 small">{{buttonLabel}}</p>
@@ -39,6 +89,9 @@
 </template>
 
 <script>
+import { toRefs } from 'vue';
+import { useField } from 'vee-validate';
+
 export default {
   name: "listCard",
   props: {
@@ -53,9 +106,38 @@ export default {
     isRequired: Boolean, //Required: is aria-required required or not?
     altText: String,//Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
     buttonID: String,//Required: Unique
-    groupName: String,//Required: Unique
-    buttonLabelSubCopy: String,//Optional: sub tex
-  }
+    groupName: String,//Rquired: Unique
+    buttonLabelSubCopy: String,//Optional: sub text
+    value: { // Field initial value
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const { groupName, value } = toRefs(props);
+    const inputType = () => { // TODO: refactor props to streamline this logic for the whole component
+      if (props.isMultiSelect) {
+        return "checkbox";
+      } else if (props.isRadio) {
+        return "radio";
+      } else if (props.isMultiSelectHorizontal) {
+        return "checkbox";
+      } else if (props.isRadioHorizontal) {
+        return "radio";
+      }
+    }
+    
+    props.isMultiSelect ? "checkbox" : "radio";
+    const { checked, handleChange } = useField(groupName, undefined, {
+      type: inputType(),
+      checkedValue: value,
+    });
+
+    return {
+      checked,
+      handleChange,
+    };
+  },
 };
 </script>