finished inital styling of input component; added temporary input mixins from external styleguide to help migration

webapp/components/LoginForm/LoginForm.vue

@@ -100,5 +100,9 @@ export default {
     margin-top: $space-large;
     margin-bottom: $space-small;
   }
+
+  .input-wrapper {
+    margin-bottom: $space-small;
+  }
 }
 </style>

webapp/components/_new/generic/BaseInput/BaseInput.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="input-wrapper">
+   <div class="input-wrapper" :class="[focus]">
       <base-icon class="input-icon" v-if="icon" :name="icon" /> 
       
       <input
@@ -10,6 +10,7 @@
             iconRightSecondary && `input-has-icon-right-secondary`
          ]"
          type="type"
+         :autofocus="autofocus"
          :placeholder="placeholder"
          :name="name ? name : model"
          :disabled="disabled"
@@ -33,6 +34,7 @@
 <script>
 
 import BaseIcon from '../BaseIcon/BaseIcon'
+import inputMixin from '~/mixins/tempMixins-styleguide/input'
 
 export default {
    components: {
@@ -79,7 +81,7 @@ export default {
    },
    methods: {
       handleInput(event) {
-       this.input(event.target.value)
+         this.input(event.target.value)
       },
       input(value) {
          this.innerValue = value
@@ -109,48 +111,57 @@ export default {
       display: flex;
       appearance: none;
       box-sizing: border-box;
-      font-size: $input-font-size-base;
-      line-height: $line-height-base;
-      font-family: $font-family-text;
       width: 100%;
       padding: $input-padding-vertical $space-x-small;
       height: $input-height;
    
       color: $text-color-base;
-      background: $background-color-base;
+      background: $background-color-disabled;
    
-      border: $input-border-size solid $border-color-base;
+      border: $input-border-size solid $border-color-softer;
       border-radius: $border-radius-base;
       outline: none;
       transition: all $duration-short $ease-out;
 
-      
-   } 
+      &:focus-within {
+         background-color: $background-color-base;
+         border: $input-border-size solid $border-color-active;
 
-   .base-input {
-      border: none;
-      width: 76%;
-
-      &::placeholder {
-         color: $text-color-disabled;
+         .input-icon {
+            color: $text-color-base;
+         }
       }
+    
 
-      .input-has-focus &,
-      &:focus {
-         border-color: $border-color-active;
-         background: $background-color-base;
-      }
-
-      .input-is-disabled &,
-      &:disabled {
-         color: $text-color-disabled;
-         opacity: $opacity-disabled;
-         pointer-events: none;
-         cursor: not-allowed;
+      .base-input {
+         border: none;
+         width: 76%;
          background-color: $background-color-disabled;
+         font-size: $input-font-size-base;
+         line-height: $line-height-base;
+         font-family: $font-family-text;
+         padding: $input-padding-vertical $space-x-small;
+      
+         &::placeholder {
+            color: $text-color-disabled;
+         }
+
+         &:focus {
+            background: $background-color-base;
+
+            .input-wrapper {
+               background-color: $background-color-base;
+               border: $input-border-size solid $border-color-active;
+            }
+         }
+
+         /* .input-is-disabled &, */
+      
       }
    }
 
+
+
    .base-input:focus {
       outline-width: 0;
    }
@@ -160,7 +171,7 @@ export default {
       top: 0;
       bottom: 0;
       left: 0;
-      width: 6%;
+      /* width: 10%; */
       align-items: center;
       justify-content: center;
       width: $input-height;

webapp/mixins/tempMixins-styleguide/input.js

@@ -0,0 +1,181 @@
+import dotProp from 'dot-prop'
+import Schema from 'async-validator'
+
+
+// Temporary Mixins from external styleguide
+/**
+ * @mixin
+ */
+export default {
+  inject: {
+    $parentForm: {
+      default: null
+    }
+  },
+  provide() {
+    return {
+      $parentInput: this
+    }
+  },
+  props: {
+    /**
+     * The value of the input. Can be passed via v-model.
+     */
+    value: {
+      type: [String, Object, Number, Array],
+      default: null
+    },
+    /**
+     * The model name when used within a form component. Uses dot notation.
+     */
+    model: {
+      type: String,
+      default: null
+    },
+    /**
+     * Name to use on the input for accessibility
+     */
+    name: {
+      type: String,
+      default: null
+    },
+    /**
+     * The label of the input.
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * The id of the input.
+     */
+    id: {
+      type: String,
+      default: null
+    },
+    /**
+     * Whether the input is disabled or not.
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the input should be read-only
+     */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The async-validator schema used for the input.
+     * @default null
+     */
+    schema: {
+      type: Object,
+      default: () => null
+    },
+    /**
+     * The input's size.
+     * @options small|base|large
+     */
+    size: {
+      type: String,
+      default: 'base',
+      validator: value => {
+        return value.match(/(small|base|large)/)
+      }
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      innerValue: null,
+      error: null,
+      focus: false
+    }
+  },
+  computed: {
+    stateClasses() {
+      return [
+        this.size && `ds-input-size-${this.size}`,
+        this.disabled && 'ds-input-is-disabled',
+        this.readonly && 'ds-input-is-readonly',
+        this.error && 'ds-input-has-error',
+        this.focus && 'ds-input-has-focus'
+      ]
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        this.innerValue = value
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (this.$parentForm) {
+      this.$parentForm.subscribe(this.handleFormUpdate)
+    }
+  },
+  beforeDestroy() {
+    if (this.$parentForm) {
+      this.$parentForm.unsubscribe(this.handleFormUpdate)
+    }
+  },
+  methods: {
+    handleInput(event) {
+      this.input(event.target.value)
+    },
+    input(value) {
+      this.innerValue = value
+      if (this.$parentForm) {
+        this.$parentForm.update(this.model, value)
+      } else {
+        /**
+         * Fires after user input.
+         * Receives the value as the only argument.
+         *
+         * @event input
+         */
+        this.$emit('input', value)
+        this.validate(value)
+      }
+    },
+    handleFormUpdate(data, errors) {
+      this.innerValue = dotProp.get(data, this.model)
+      this.error = errors ? errors[this.model] : null
+    },
+    validate(value) {
+      if (!this.schema) {
+        return
+      }
+      const validator = new Schema({ input: this.schema })
+      // Prevent validator from printing to console
+      // eslint-disable-next-line
+      const warn = console.warn;
+      // eslint-disable-next-line
+      console.warn = () => {};
+      validator.validate({ input: value }, errors => {
+        if (errors) {
+          this.error = errors[0].message
+        } else {
+          this.error = null
+        }
+        // eslint-disable-next-line
+        console.warn = warn;
+      })
+    },
+    handleFocus() {
+      this.focus = true
+    },
+    handleBlur() {
+      this.focus = false
+    }
+  }
+}