From 3c10f75b670fff86e50d5fb85c99e4115166f63b Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 11 Jan 2022 14:32:57 -0500
Subject: [PATCH] CSR-254: grey out button if not validated

---
 src/layouts/form-test/form-test.vue | 144 ++++++++++++++++------------
 1 file changed, 83 insertions(+), 61 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 4d0ef09bd..778e796ed 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -1,5 +1,5 @@
 <template>
-<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}">
+<Form :validation-schema="schema" @submit="onSubmit" v-slot="{ values, meta }">
   <div class="row px-3 mt-4">
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
     <h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
@@ -9,46 +9,46 @@
         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"
+        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"
+        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"
+        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 form-test-error">
@@ -62,31 +62,31 @@
       <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"
+          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"
+          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"
+          isMultiSelectHorizontal
+          buttonImage="windshield-damage.svg"
+          buttonLabel="Passenger Side"
+          value="Passenger Side"
+          altText=""
+          buttonID="List Card Horizontal Checkbox c"
+          groupName="demo2"
         />
       </fieldset>
     </div>
@@ -103,15 +103,29 @@
         type="text"
         label="VIN (Required)"
         :isRequired="true"
-        />
+      />
+    </div>
+    <!-- Here, the error block is included in the component level textInput -->
+  </div>
+
+  <div class="row g-2 mt-4">
+    <div class="col">
+      <h3 class="mx-2 mt-4 mb-0">Optional field</h3>
+      <textInput
+        name="demo4"
+        type="text"
+        label="Optional field (Not Required)"
+      />
     </div>
     <!-- Here, the error block is included in the component level textInput -->
   </div>
   
   <div class="g-2 mx-2 mt-6">
-    <button>Get your estimate</button>
-    <p>Values</p>
+    <button :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
+    <p>Values:</p>
     <pre>{{ values }}</pre>
+    <p>Meta.valid:</p>
+    <pre>{{ meta.valid }}</pre>
   </div>
 
 </Form>
@@ -180,6 +194,11 @@ export default {
     onSubmit(values) {
       console.log('submitted: ', JSON.stringify(values, null ,2));
     },
+    // onInvalidSubmit({ values, errors, results }) {
+    //   console.log("values: ", values);
+    //   console.log("errors: ", errors);
+    //   console.log("results: ", results);
+    // }
   },
 };
 </script>
@@ -189,4 +208,7 @@ export default {
     color: red;
     font-weight: bold;
   }
+  .form-test-invalid {
+    opacity: 0.5;
+  }
 </style>
\ No newline at end of file