base flow for representations

2021-08-09 10:16:54 +01:00
parent f9f36bd065
commit b3fe6bf5f5
31 changed files with 2494 additions and 64 deletions
@@ -0,0 +1,194 @@
+import { Field, reduxForm } from "redux-form";
+import router from "next/router";
+import React, { useState } from "react";
+
+export const RenderRadioList = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={name + "-hint"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div className="govuk-radios govuk-radios--small">
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    className="govuk-radios__input"
+                                    value={options[key]}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {options[key]}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+export const RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    optionsArr,
+    meta: { touched, errorStr },
+}) => {
+    return (
+        <div>
+            <select {...input} className="govuk-select " id={name} name={name}>
+                <option>Select...</option>
+                {Object.keys(optionsArr).map((key, index) => {
+                    return (
+                        <option key={key} value={optionsArr[key]}>
+                            {optionsArr[key]}
+                        </option>
+                    );
+                })}
+            </select>
+
+            {touched && errorStr && <span>{errorStr}</span>}
+        </div>
+    );
+};
+
+export const RenderTextfield = ({
+    id,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    type,
+    className,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                {label}
+            </label>
+            {touched && error && (
+                <span id={id + "-error"} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span>{" "}
+                    {errorMsg}
+                </span>
+            )}
+            <input
+                {...input}
+                className={className}
+                name={name}
+                id={id}
+                type={type}
+            />
+        </>
+    );
+};
+
+export const RenderMultiline = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <textarea
+                {...input}
+                id={id}
+                name={name}
+                rows={rows}
+                className={className}
+            ></textarea>
+        </>
+    );
+};
+
+export function MultiLinefield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <h1 className="govuk-label-wrapper">
+                <label className="govuk-label" htmlFor={props.name}>
+                    {props.label}
+                </label>
+            </h1>
+            <div
+                id={props.name + "-hint"}
+                className="govuk-hint govuk-!-font-size-14"
+            >
+                Do not include personal or financial information, like your
+                National Insurance number or credit card details.
+            </div>
+
+            <Field
+                name={props.name}
+                id={props.name}
+                component={RenderMultiline}
+                type="text"
+                rows="5"
+                className="govuk-textarea govuk-input--width-30"
+                aria-describedby={props.name + "-hint"}
+            />
+        </div>
+    );
+}