22541 add semantic back crumb helper and consolidate edge breadcrumb branches
This commit is contained in:
+61
-96
@@ -139,6 +139,11 @@ const Breadcrumbs = (props) => {
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const renderBackCrumb = (
|
||||||
|
onClick,
|
||||||
|
listItemClass = "govuk-breadcrumbs__link-item backChevron"
|
||||||
|
) => renderAnchorCrumb("#", t("common:back-link"), onClick, listItemClass);
|
||||||
|
|
||||||
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
||||||
resolveCaseBreadcrumbState({
|
resolveCaseBreadcrumbState({
|
||||||
query: router.query,
|
query: router.query,
|
||||||
@@ -302,57 +307,38 @@ const Breadcrumbs = (props) => {
|
|||||||
{isPath("/newappeal/[appealtypes]") && (
|
{isPath("/newappeal/[appealtypes]") && (
|
||||||
<>
|
<>
|
||||||
{appealType.currentSection > 1 &&
|
{appealType.currentSection > 1 &&
|
||||||
(appealType.currentSection === 9999 ? (
|
(appealType.currentSection === 9999
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
? renderLinkCrumb(
|
||||||
<Link
|
"/",
|
||||||
href={"/"}
|
t(
|
||||||
className="govuk-breadcrumbs__link"
|
"common:service-name-breadcrumb"
|
||||||
>
|
)
|
||||||
{t(
|
)
|
||||||
"common:service-name-breadcrumb"
|
: renderBackCrumb(
|
||||||
)}
|
() =>
|
||||||
</Link>
|
setCurrentSection(
|
||||||
</li>
|
appealType.currentSection -
|
||||||
) : (
|
1
|
||||||
renderAnchorCrumb(
|
),
|
||||||
"#",
|
"govuk-breadcrumbs__link-item"
|
||||||
t("common:back-link"),
|
))}
|
||||||
() =>
|
|
||||||
setCurrentSection(
|
|
||||||
appealType.currentSection -
|
|
||||||
1
|
|
||||||
),
|
|
||||||
"govuk-breadcrumbs__link-item"
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{isPath("/myportal/[appealtypes]") && (
|
{isPath("/myportal/[appealtypes]") && (
|
||||||
<>
|
<>
|
||||||
{appealType.currentSection > 1 &&
|
{appealType.currentSection > 1 &&
|
||||||
(appealType.currentSection === 9999 ? (
|
(appealType.currentSection === 9999
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
? renderLinkCrumb(
|
||||||
<Link
|
"/",
|
||||||
href={"/"}
|
t(
|
||||||
className="govuk-breadcrumbs__link"
|
"common:service-name-breadcrumb"
|
||||||
>
|
)
|
||||||
{t(
|
)
|
||||||
"common:service-name-breadcrumb"
|
: renderBackCrumb(() =>
|
||||||
)}
|
setCurrentSection(
|
||||||
</Link>
|
appealType.currentSection - 1
|
||||||
</li>
|
)
|
||||||
) : (
|
))}
|
||||||
renderAnchorCrumb(
|
|
||||||
"#",
|
|
||||||
t("common:back-link"),
|
|
||||||
() =>
|
|
||||||
setCurrentSection(
|
|
||||||
appealType.currentSection -
|
|
||||||
1
|
|
||||||
),
|
|
||||||
"govuk-breadcrumbs__list-item backChevron"
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{isPath("/newappeal/selectappeal") && (
|
{isPath("/newappeal/selectappeal") && (
|
||||||
@@ -509,29 +495,23 @@ const Breadcrumbs = (props) => {
|
|||||||
)}
|
)}
|
||||||
{isPath("/case") && (
|
{isPath("/case") && (
|
||||||
<>
|
<>
|
||||||
<li className="govuk-breadcrumbs__list-item">
|
{renderLinkCrumb(
|
||||||
<Link
|
isWelsh
|
||||||
href={
|
? router.locale +
|
||||||
isWelsh
|
"/searchresults?q=" +
|
||||||
? router.locale +
|
router.query.q +
|
||||||
"/searchresults?q=" +
|
"&page=" +
|
||||||
router.query.q +
|
router.query.page
|
||||||
"&page=" +
|
: "/searchresults?q=" +
|
||||||
router.query.page
|
router.query.q +
|
||||||
: "/searchresults?q=" +
|
"&page=" +
|
||||||
router.query.q +
|
router.query.page,
|
||||||
"&page=" +
|
t("common:breadcrumb-search-results"),
|
||||||
router.query.page
|
() => {
|
||||||
}
|
// spinnerState();
|
||||||
onClick={() => {
|
router.back();
|
||||||
// spinnerState();
|
}
|
||||||
router.back();
|
)}
|
||||||
}}
|
|
||||||
className="govuk-breadcrumbs__link"
|
|
||||||
>
|
|
||||||
{t("common:breadcrumb-search-results")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{renderCaseReferenceCrumb(currentReference)}
|
{renderCaseReferenceCrumb(currentReference)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -540,42 +520,27 @@ const Breadcrumbs = (props) => {
|
|||||||
{currentView.representationSubmit === true &&
|
{currentView.representationSubmit === true &&
|
||||||
currentView.representationSubmitConfirmation !==
|
currentView.representationSubmitConfirmation !==
|
||||||
true &&
|
true &&
|
||||||
renderAnchorCrumb(
|
renderBackCrumb(() => {
|
||||||
"#",
|
setRepresentationSubmit(qcount);
|
||||||
t("common:back-link"),
|
})}
|
||||||
() => {
|
|
||||||
setRepresentationSubmit(qcount);
|
|
||||||
},
|
|
||||||
"govuk-breadcrumbs__link-item backChevron"
|
|
||||||
)}
|
|
||||||
{currentView.representationSubmit !== true &&
|
{currentView.representationSubmit !== true &&
|
||||||
hasRepDetails &&
|
hasRepDetails &&
|
||||||
repDetails?.representationType !==
|
repDetails?.representationType !==
|
||||||
"Questionnaire" &&
|
"Questionnaire" &&
|
||||||
renderAnchorCrumb(
|
renderBackCrumb(() => {
|
||||||
"#",
|
setRepresentationSubmit(false);
|
||||||
t("common:back-link"),
|
})}
|
||||||
() => {
|
|
||||||
setRepresentationSubmit(false);
|
|
||||||
},
|
|
||||||
"govuk-breadcrumbs__link-item backChevron"
|
|
||||||
)}
|
|
||||||
{currentView.representationSubmit !== true &&
|
{currentView.representationSubmit !== true &&
|
||||||
hasRepDetails &&
|
hasRepDetails &&
|
||||||
repDetails?.representationType ===
|
repDetails?.representationType ===
|
||||||
"Questionnaire" &&
|
"Questionnaire" &&
|
||||||
showQuestionnaireSection > 1 &&
|
showQuestionnaireSection > 1 &&
|
||||||
renderAnchorCrumb(
|
renderBackCrumb(() => {
|
||||||
"#",
|
setShowQuestionnaireSection(
|
||||||
t("common:back-link"),
|
showQuestionnaireSection - 1
|
||||||
() => {
|
);
|
||||||
setShowQuestionnaireSection(
|
setRepresentationSubmit(false);
|
||||||
showQuestionnaireSection - 1
|
})}
|
||||||
);
|
|
||||||
setRepresentationSubmit(false);
|
|
||||||
},
|
|
||||||
"govuk-breadcrumbs__link-item backChevron"
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{isPath("/account/personaldetails") && (
|
{isPath("/account/personaldetails") && (
|
||||||
|
|||||||
@@ -247,6 +247,34 @@ Follow-ups:
|
|||||||
|
|
||||||
- Next slice recommendation: consolidate remaining one-off inline breadcrumb `<li><Link ...>` blocks still present in edge branches (e.g., `/newappeal/[appealtypes]`, `/myportal/[appealtypes]`, `/case`) and consider introducing an optional `renderBackCrumb(...)` semantic wrapper for readability.
|
- Next slice recommendation: consolidate remaining one-off inline breadcrumb `<li><Link ...>` blocks still present in edge branches (e.g., `/newappeal/[appealtypes]`, `/myportal/[appealtypes]`, `/case`) and consider introducing an optional `renderBackCrumb(...)` semantic wrapper for readability.
|
||||||
|
|
||||||
|
### CL-22541-I: breadcrumbs edge branch consolidation + semantic back-crumb wrapper
|
||||||
|
|
||||||
|
date: 2026-04-09
|
||||||
|
author: Cline
|
||||||
|
scope: `components/breadcrumbs.js`
|
||||||
|
type: change
|
||||||
|
rationale: Continue the same bounded breadcrumbs refactor cadence by consolidating remaining edge inline Link/back crumbs and introducing a semantic back-crumb wrapper for readability.
|
||||||
|
impact: Refactor-only JSX deduplication/readability improvement; no intended route/auth/session/API/EN-CY/a11y behavior change.
|
||||||
|
status: completed
|
||||||
|
|
||||||
|
Summary:
|
||||||
|
|
||||||
|
- Added semantic helper `renderBackCrumb(onClick, listItemClass?)` that delegates to `renderAnchorCrumb(...)` with existing back-link text.
|
||||||
|
- Replaced remaining one-off inline edge crumbs in:
|
||||||
|
- `/newappeal/[appealtypes]` and `/myportal/[appealtypes]` (`currentSection === 9999` service-name link and back-link branch)
|
||||||
|
- `/case` search-results link crumb (including existing `router.back()` callback)
|
||||||
|
- `/myportal/representation` back-link branches now use `renderBackCrumb(...)`.
|
||||||
|
- Preserved existing href targets, callback behavior, and class semantics (including special `govuk-breadcrumbs__link-item` usage).
|
||||||
|
|
||||||
|
Validation:
|
||||||
|
|
||||||
|
- `npx eslint components/breadcrumbs.js` -> pass.
|
||||||
|
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
|
||||||
|
|
||||||
|
Follow-ups:
|
||||||
|
|
||||||
|
- Next slice recommendation: consider extracting a small, route-keyed breadcrumb branch map/helper grouping in `components/breadcrumbs.js` (purely structural) to reduce the long inline conditional chain while keeping one-slice behavior parity.
|
||||||
|
|
||||||
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
|
### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
|
||||||
|
|
||||||
date: 2026-04-07
|
date: 2026-04-07
|
||||||
|
|||||||
Reference in New Issue
Block a user