From 89e613d44557233b75eddeadf2d1ee346a2dd523 Mon Sep 17 00:00:00 2001
From: dandds <dan-ctr@friends.dds.mil>
Date: Tue, 6 Nov 2018 15:27:42 -0500
Subject: [PATCH] control error display for options input component

---
 js/components/options_input.js          | 18 +++++++++++++++++-
 styles/elements/_inputs.scss            |  4 ++--
 templates/components/options_input.html | 22 ++++++++++++----------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/js/components/options_input.js b/js/components/options_input.js
index eb16f706..5c965bd7 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -2,15 +2,31 @@ export default {
   name: 'optionsinput',
 
   props: {
-    name: String
+    name: String,
+    initialErrors: {
+      type: Array,
+      default: () => []
+    },
   },
 
+
+  data: function () {
+    return {
+      showError: (this.initialErrors && this.initialErrors.length) || false,
+      showValid: false,
+      validationError: this.initialErrors.join(' ')
+    }
+  },
+
+
   methods: {
     onInput: function (e) {
       this.$root.$emit('field-change', {
         value: e.target.value,
         name: this.name
       })
+      this.showError = false
+      this.showValid = true
     }
   }
 }
diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index 2be9f2fe..d1cf89eb 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -46,13 +46,13 @@
   fieldset {
     input[type='radio'] {
       + label::before {
-        box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red;
+        box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $state-color;
       }
     }
 
     input[type='checkbox'] {
       + label::before {
-        box-shadow: 0 0 0 2px $color-red;
+        box-shadow: 0 0 0 2px $state-color;
       }
     }
   }
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index 34c9a0da..0c3bd36a 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -2,8 +2,13 @@
 {% from "components/tooltip.html" import Tooltip %}
 
 {% macro OptionsInput(field, tooltip, inline=False) -%}
-  <optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
-    <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
+  <optionsinput
+    name='{{ field.name }}'
+    inline-template
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
+    key='{{ field.name }}'>
+    <div
+      v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
         <legend>
@@ -16,18 +21,15 @@
             <span class='usa-input__help'>{{ field.description | safe }}</span>
           {% endif %}
 
-          {% if field.errors %}
-            {{ Icon('alert',classes="icon-validation") }}
-          {% endif %}
+          <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+          <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
         </legend>
 
         {{ field() }}
 
-        {% if field.errors %}
-          {% for error in field.errors %}
-            <span class='usa-input__message'>{{ error }}</span>
-          {% endfor %}
-        {% endif %}
+        <template v-if='showError'>
+          <span class='usa-input__message' v-html='validationError'></span>
+        </template>
 
       </fieldset>
     </div>