Merge pull request #432 from dod-ccpo/options-input-errors-#161717158

control error display for options input component

js/components/options_input.js

@@ -2,15 +2,33 @@ export default {
   name: 'optionsinput',
 
   props: {
-    name: String
+    name: String,
+    initialErrors: {
+      type: Array,
+      default: () => []
+    },
+    initialValue: String,
   },
 
+
+  data: function () {
+    const showError = (this.initialErrors && this.initialErrors.length) || false
+    return {
+      showError: showError,
+      showValid: !showError && !!this.initialValue,
+      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
     }
   }
 }

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;
       }
     }
   }

templates/components/options_input.html

@@ -2,8 +2,14 @@
 {% 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 %}
+    {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% 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 +22,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>