CSR-254: fix error styling

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -154,9 +154,9 @@ export default {
       console.log("values: ", values);
       console.log("errors: ", errors);
       console.log("results: ", results);
-      // get errorEls and order by alpha
-      const errorEls = errors ? Object.keys(errors) : [];
-      const firstErrorEl = errorEls[0];
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
       if (firstErrorEl) {
         console.log('firstErrorEl: ', firstErrorEl);
         const qsString = "[data-focus-target='" + firstErrorEl + "']";

src/styles/common-error-styles.scss

@@ -1,7 +1,7 @@
 .has-error {
-  .list-button,
-  .list-card,
-  .list-button-horizontal {
+  &.list-button,
+  &.list-card,
+  &.list-button-horizontal {
     color: $red;
     label {
       border: 1px solid $red;

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

@@ -2,7 +2,7 @@
   <div :class="'col' + colLength">
     <div 
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="isWide ? 'horizontal' : ''"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -31,7 +31,7 @@
           class="small order-3"
           :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
         >
-          {{buttonLabel}}
+          {{buttonLabel}} - {{errors.length}}
         </p>
         <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
           {{buttonLabelSubCopy}}
@@ -113,6 +113,7 @@ export default {
     const { 
         value: inputValue,
         handleChange,
+        errors,
     } = useField(groupName, props.validationRules, 
     {
       type: inputType,
@@ -120,8 +121,14 @@ export default {
     });
     return {
       handleChange,
+      errors,
     };
   },
+  watch: {
+    errors() {
+      console.log('HEADS UP; ERRORS CHANGED, errors.length: ', this.errors.length)
+    },
+  },
 };
 </script>