KAW-7706 Add textarea

Netcentric · Aug 9, 2024 · 55eab99 · 55eab99
1 parent b716ffa
commit 55eab99
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/blocks/form/form-fields.js b/blocks/form/form-fields.js
@@ -163,6 +163,21 @@ const createSubmit = (fd) => {
   return { field: button, fieldWrapper };
 };
 
+const createTextArea = (fd) => {
+  const field = document.createElement('textarea');
+  setCommonAttributes(field, fd);
+
+  const fieldWrapper = createFieldWrapper(fd);
+  const label = createLabel(fd);
+  field.setAttribute('aria-labelledby', label.id);
+  field.setAttribute('rows', 5);
+  fieldWrapper.append(field);
+  fieldWrapper.prepend(label);
+  fieldWrapper.append(createErrorMessage());
+
+  return { field, fieldWrapper };
+};
+
 const createInput = (fd) => {
   const field = document.createElement('input');
   field.type = fd.Type;
@@ -196,6 +211,7 @@ const FIELD_CREATOR_FUNCTIONS = {
   submit: createSubmit,
   confirmation: createConfirmation,
   checkbox: createCheckbox,
+  textarea: createTextArea,
 };
 
 export default async function createField(fd, form) {

diff --git a/blocks/form/form.css b/blocks/form/form.css
@@ -7,11 +7,13 @@
 }
 
 .form .text-wrapper label,
+.form .textarea-wrapper label,
 .form .field-wrapper.email-wrapper label {
   display: none;
 }
 
-.form input {
+.form input,
+.form textarea {
   box-sizing: border-box;
   height: 40px;
   max-width: 100%;
@@ -27,6 +29,10 @@
   font-family: var(--body-font-family);
 }
 
+.form textarea {
+  height: auto;
+}
+
 .form input[type="checkbox"] {
   width: 16px;
   height: 16px;
@@ -39,7 +45,8 @@
   border-color: red;
 }
 
-input::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: #1d1d1b;
 }
 
@@ -65,7 +72,8 @@ input::placeholder {
   justify-content: center;
 }
 
-.form .field-wrapper.error input {
+.form .field-wrapper.error input,
+.form .field-wrapper.error textarea {
   border-color: red;
 }