robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

22500 Phase 2: extract text and multiline leaf renderers

Browse Source
This commit is contained in:
robbond
2026-04-07 09:45:19 +01:00
parent 5b9498b3ef
commit aa4d1fad1e
4 changed files with 168 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/fields/renderMultiline.js
+51
View File
@@ -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
+91
View File
@@ -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>
</>
);
};
components/elements/index.js
+2 -129
View File
@@ -46,82 +46,8 @@ import {
getPickListTranslation getPickListTranslation
} from "./helpers/translationHelpers"; } from "./helpers/translationHelpers";
import { RenderRichMultiline } from "./fields/renderRichMultiline"; import { RenderRichMultiline } from "./fields/renderRichMultiline";
import { RenderTextfield } from "./fields/renderTextfield";
const RenderTextfield = ({ import { RenderMultiline } from "./fields/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 "
}
>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
{FieldsTranslations(label)}
</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>
</>
);
};
export function Textfield(props) { export function Textfield(props) {
const { const {
@@ -284,59 +210,6 @@ export function Textfield(props) {
} }
} }
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 "
}
>
{/* <label className="govuk-label " htmlFor={id} id={id + "_label"}>
{FieldsTranslations(label)}s
</label> */}
{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>
</>
);
};
export function MultiLinefield(props) { export function MultiLinefield(props) {
const { const {
name, name,
memory-bank/change-log.md
+24
View File
@@ -76,6 +76,30 @@ Follow-ups:
- Continue Phase 2 in bounded slices by extracting additional low-risk leaf renderers (e.g., `RenderMultiline` / `RenderTextfield`) with no behavior change. - Continue Phase 2 in bounded slices by extracting additional low-risk leaf renderers (e.g., `RenderMultiline` / `RenderTextfield`) with no behavior change.
### CL-00Z: 22500 `components/elements/index.js` Phase 2 leaf renderer extraction (Text + Multiline)
date: 2026-04-07
author: Cline
scope: `components/elements/index.js`, `components/elements/fields/renderTextfield.js`, `components/elements/fields/renderMultiline.js`
type: change
rationale: Complete the requested next bounded phase by extracting the additional low-risk leaf renderers (`RenderTextfield`, `RenderMultiline`) from the elements monolith into dedicated field modules while preserving existing wiring and behavior.
impact: Refactor-only move of two renderer components; no intended changes to auth/API/security and no intended EN/CY behavior change.
status: completed
Summary:
- Added `components/elements/fields/renderTextfield.js` and `components/elements/fields/renderMultiline.js`.
- Updated `components/elements/index.js` to import the extracted renderers.
- Removed inline `RenderTextfield` and `RenderMultiline` implementations from `index.js`.
Validation:
- `npx eslint components/elements/index.js components/elements/fields/renderTextfield.js components/elements/fields/renderMultiline.js` -> pass
Follow-ups:
- Continue Phase 2 by selecting the next lowest-risk leaf renderer extraction in a separate commit.
### CL-001: TASK22211 endpoint search-document contract consistency slice ### CL-001: TASK22211 endpoint search-document contract consistency slice
date: 2026-03-23 date: 2026-03-23