feat: Form input component to use with onboarding form (#8850)

* feat: Form input component to use with onboarding form

* Update Input.vue

* Update WithLabel.vue

* Review fixes

app/javascript/v3/components/Form/Input.vue

@@ -1,44 +1,40 @@
 <template>
-  <div>
+  <with-label
-    <label
+    :label="label"
-      v-if="label"
+    :icon="icon"
-      :for="name"
+    :name="name"
-      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+    :has-error="hasError"
-      :class="{ 'text-red-500': hasError }"
+    :error-message="errorMessage"
-    >
+  >
-      {{ label }}
+    <input
-      <slot />
+      :id="name"
-    </label>
+      :name="name"
-    <div class="mt-1">
+      :type="type"
-      <input
+      autocomplete="off"
-        :id="name"
+      :required="required"
-        :name="name"
+      :placeholder="placeholder"
-        :type="type"
+      :data-testid="dataTestid"
-        autocomplete="off"
+      :value="value"
-        :required="required"
+      :class="{
-        :placeholder="placeholder"
+        'focus:ring-red-600 ring-red-600': hasError,
-        :data-testid="dataTestid"
+        'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
-        :value="value"
+          !hasError,
-        :class="{
+        'px-3 py-3': spacing === 'base',
-          'focus:ring-red-600 ring-red-600': hasError,
+        'px-3 py-2 mb-0': spacing === 'compact',
-          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
+        'pl-9': icon,
-            !hasError,
+      }"
-        }"
+      class="block w-full border-none rounded-xl shadow-sm appearance-none outline outline-1 outline-slate-200 dark:outline-slate-800 focus:outline-none focus:outline-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-800"
-        class="block w-full rounded-md border-0 px-3 py-3 appearance-none shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700"
+      @input="onInput"
-        @input="onInput"
+      @blur="$emit('blur')"
-        @blur="$emit('blur')"
+    />
-      />
+  </with-label>
-      <span
-        v-if="errorMessage && hasError"
-        class="text-xs leading-2 text-red-400"
-      >
-        {{ errorMessage }}
-      </span>
-    </div>
-  </div>
 </template>
 <script>
+import WithLabel from './WithLabel.vue';
 export default {
+  components: {
+    WithLabel,
+  },
   props: {
     label: {
       type: String,
@@ -64,6 +60,10 @@ export default {
       type: [String, Number],
       default: '',
     },
+    icon: {
+      type: String,
+      default: '',
+    },
     hasError: {
       type: Boolean,
       default: false,
@@ -76,6 +76,11 @@ export default {
       type: String,
       default: '',
     },
+    spacing: {
+      type: String,
+      default: 'base',
+      validator: value => ['base', 'compact'].includes(value),
+    },
   },
   methods: {
     onInput(e) {