From 65e9cee019b7e12d3c77eb7d91b1d26af1aa6b6e Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 5 Feb 2024 10:17:06 -0800
Subject: [PATCH] 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 | 79 +++++++++++----------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index f105e1137..f48708a26 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -1,44 +1,40 @@
 <template>
-  <div>
-    <label
-      v-if="label"
-      :for="name"
-      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
-      :class="{ 'text-red-500': hasError }"
-    >
-      {{ label }}
-      <slot />
-    </label>
-    <div class="mt-1">
-      <input
-        :id="name"
-        :name="name"
-        :type="type"
-        autocomplete="off"
-        :required="required"
-        :placeholder="placeholder"
-        :data-testid="dataTestid"
-        :value="value"
-        :class="{
-          'focus:ring-red-600 ring-red-600': hasError,
-          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
-            !hasError,
-        }"
-        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"
-        @blur="$emit('blur')"
-      />
-      <span
-        v-if="errorMessage && hasError"
-        class="text-xs leading-2 text-red-400"
-      >
-        {{ errorMessage }}
-      </span>
-    </div>
-  </div>
+  <with-label
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <input
+      :id="name"
+      :name="name"
+      :type="type"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :class="{
+        'focus:ring-red-600 ring-red-600': hasError,
+        'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+      }"
+      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"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
 </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) {