22500 Phase 2: extract text and multiline leaf renderers

components/elements/fields/renderMultiline.js

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const RenderMultiline = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <textarea
+                    id={id}
+                    name={id}
+                    rows={rows}
+                    className={className}
+                    {...input}
+                    maxLength={
+                        custom.hasOwnProperty("maxFieldLength")
+                            ? custom.maxFieldLength
+                                ? custom.maxFieldLength
+                                : 800
+                            : 800
+                    }
+                ></textarea>
+            </div>
+        </>
+    );
+};

components/elements/fields/renderTextfield.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { useRouter } from "next/router";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {translatedLabel}
+                </label>
+                {!custom.hasOwnProperty("showErrorBottom")
+                    ? touched &&
+                      error && (
+                          <span
+                              id={id + "-error"}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
+                <input
+                    {...input}
+                    type={custom.type}
+                    className={className}
+                    name={name}
+                    id={id}
+                    maxLength={
+                        custom.hasOwnProperty("maxFieldLength")
+                            ? custom.maxFieldLength
+                                ? custom.maxFieldLength
+                                : 100
+                            : 200
+                    }
+                    pattern={
+                        custom.hasOwnProperty("pattern")
+                            ? custom.pattern
+                            : undefined
+                    }
+                />
+                {custom.hasOwnProperty("showErrorBottom")
+                    ? touched &&
+                      error && (
+                          <span
+                              id={id + "-error"}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
+            </div>
+        </>
+    );
+};