From f32aa4b517c221d0c6f08b254dcf7d361f9196e9 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 4 Dec 2023 14:54:17 +0530
Subject: [PATCH] feat: add text area

---
 .../v3/components/Form/TextArea.vue           | 93 +++++++++++++++++++
 .../v3/views/auth/start/SetupProfile.vue      |  5 +-
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/v3/components/Form/TextArea.vue

diff --git a/app/javascript/v3/components/Form/TextArea.vue b/app/javascript/v3/components/Form/TextArea.vue
new file mode 100644
index 000000000..8d5121d4f
--- /dev/null
+++ b/app/javascript/v3/components/Form/TextArea.vue
@@ -0,0 +1,93 @@
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #label> {{ label }} <slot /> </template>
+
+    <textarea
+      :id="name"
+      :name="name"
+      autocomplete="off"
+      :required="required"
+      :placeholder="placeholder"
+      :data-testid="dataTestid"
+      :value="value"
+      :rows="rows"
+      :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': spacing === 'compact',
+        'resize-none': !allowResize,
+      }"
+      class="block w-full border-0 rounded-md shadow-sm outline-none appearance-none 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 dark:bg-slate-700"
+      @input="onInput"
+      @blur="$emit('blur')"
+    />
+  </with-label>
+</template>
+<script>
+import WithLabel from './WithLabel.vue';
+
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    rows: {
+      type: Number,
+      default: 3,
+    },
+    allowResize: {
+      type: Boolean,
+      default: true,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    dataTestid: {
+      type: String,
+      default: '',
+    },
+    spacing: {
+      type: String,
+      default: 'base',
+      validator: value => ['base', 'compact'].includes(value),
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/views/auth/start/SetupProfile.vue b/app/javascript/v3/views/auth/start/SetupProfile.vue
index 04fe45469..5a15f3ce6 100644
--- a/app/javascript/v3/views/auth/start/SetupProfile.vue
+++ b/app/javascript/v3/views/auth/start/SetupProfile.vue
@@ -27,10 +27,11 @@
           :label="$t('ONBOARDING.PROFILE.PHONE_NUMBER.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.PHONE_NUMBER.PLACEHOLDER')"
         />
-        <form-input
+        <form-text-area
           v-model="signature"
           name="signature"
           spacing="compact"
+          :allow-resize="false"
           :label="$t('ONBOARDING.PROFILE.SIGNATURE.LABEL')"
           :placeholder="$t('ONBOARDING.PROFILE.SIGNATURE.PLACEHOLDER')"
         />
@@ -45,6 +46,7 @@
 
 <script>
 import FormInput from '../../../components/Form/Input.vue';
+import FormTextArea from '../../../components/Form/TextArea.vue';
 import SubmitButton from '../../../components/Button/SubmitButton';
 import ModalLayout from './components/ModalLayout.vue';
 
@@ -53,6 +55,7 @@ export default {
     FormInput,
     SubmitButton,
     ModalLayout,
+    FormTextArea,
   },
   data() {
     return {