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

22541 consolidate remaining inline Link breadcrumb patterns

Browse Source
This commit is contained in:
robbond
2026-04-09 09:41:33 +01:00
parent d576987fcf
commit 30bc729c70
2 changed files with 108 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+79 -157
View File
@@ -140,16 +140,11 @@ const Breadcrumbs = (props) => {
> >
<div className="govuk-breadcrumbs "> <div className="govuk-breadcrumbs ">
<ol className="govuk-breadcrumbs__list"> <ol className="govuk-breadcrumbs__list">
{shouldShowServiceName && ( {shouldShowServiceName &&
<li className="govuk-breadcrumbs__list-item"> renderLinkCrumb(
<Link "/",
href={"/"} t("common:service-name-breadcrumb")
className="govuk-breadcrumbs__link" )}
>
{t("common:service-name-breadcrumb")}
</Link>
</li>
)}
{isPath("/myportal") && ( {isPath("/myportal") && (
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
@@ -359,22 +354,14 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/newappeal/selectappeal") && ( {isPath("/newappeal/selectappeal") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link myPortalHref,
href={myPortalHref} t("newappeal:parent-page-title")
className="govuk-breadcrumbs__link" )}
> {renderLinkCrumb(
{t("newappeal:parent-page-title")} myPortalHref,
</Link> t("newappeal:page-title")
</li> )}
<li className="govuk-breadcrumbs__list-item">
<Link
href={myPortalHref}
className="govuk-breadcrumbs__link"
>
{t("newappeal:page-title")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
Select Appeal Select Appeal
</li> </li>
@@ -401,70 +388,46 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/myportal/case") && ( {isPath("/myportal/case") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? "/" + router.locale + "/fymhorth"
isWelsh : "/myportal",
? "/" + t("common:breadcrumb-my-portal")
router.locale + )}
"/fymhorth"
: "/myportal"
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderCaseReferenceCrumb(currentReference)} {renderCaseReferenceCrumb(currentReference)}
</> </>
)} )}
{isPath("/case/[ticketnumber]") && ( {isPath("/case/[ticketnumber]") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link caseResultsHref,
href={caseResultsHref} breadcrumbLabel
className="govuk-breadcrumbs__link" )}
>
{breadcrumbLabel}
</Link>
</li>
{renderCaseReferenceCrumb(fallbackSearchTitle)} {renderCaseReferenceCrumb(fallbackSearchTitle)}
</> </>
)} )}
{isPath("/case/id/[incident]") && ( {isPath("/case/id/[incident]") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? "/" +
isWelsh router.locale +
? "/" + "/chwiliadcyfeiriadau"
router.locale + : "/addresssearch",
"/chwiliadcyfeiriadau" t("common:breadcrumb-address-search")
: "/addresssearch" )}
} {renderLinkCrumb(
className="govuk-breadcrumbs__link" isWelsh
> ? "/" +
{t("common:breadcrumb-address-search")} router.locale +
</Link> "/canlyniadaucyfeiriadau?" +
</li> nestedSearchString
<li className="govuk-breadcrumbs__list-item"> : "/addresssearchresults?" +
<Link nestedSearchString,
href={ t(
isWelsh "common:breadcrumb-address-search-results"
? "/" + )
router.locale + )}
"/canlyniadaucyfeiriadau?" +
nestedSearchString
: "/addresssearchresults?" +
nestedSearchString
}
className="govuk-breadcrumbs__link"
>
{t(
"common:breadcrumb-address-search-results"
)}
</Link>
</li>
{renderCaseReferenceCrumb(currentReference)} {renderCaseReferenceCrumb(currentReference)}
</> </>
)} )}
@@ -502,14 +465,10 @@ const Breadcrumbs = (props) => {
{isPath("/myportal/case/[ticketnumber]") && ( {isPath("/myportal/case/[ticketnumber]") && (
<> <>
{renderMyPortalCrumb()} {renderMyPortalCrumb()}
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link breadcrumbHref,
href={breadcrumbHref} breadcrumbLabel
className="govuk-breadcrumbs__link" )}
>
{breadcrumbLabel}
</Link>
</li>
{renderCaseReferenceCrumb(caseReferenceDisplay)} {renderCaseReferenceCrumb(caseReferenceDisplay)}
</> </>
)} )}
@@ -532,18 +491,12 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/myportal/dns/[developmentName]") && ( {isPath("/myportal/dns/[developmentName]") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/fymhorth"
isWelsh : "/myportal",
? router.locale + "/fymhorth" t("common:breadcrumb-my-portal")
: "/myportal" )}
}
className="govuk-breadcrumbs__link"
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
{renderLinkCrumb( {renderLinkCrumb(
"/myportal/dnsapplications", "/myportal/dnsapplications",
t("dnsCommon:service-name") t("dnsCommon:service-name")
@@ -643,14 +596,10 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/account/personaldetails") && ( {isPath("/account/personaldetails") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link cyMyPortalHref,
href={cyMyPortalHref} t("common:breadcrumb-my-portal")
className="govuk-breadcrumbs__link" )}
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
{t("account:account-title")} {t("account:account-title")}
</li> </li>
@@ -665,14 +614,10 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/account/changepassword") && ( {isPath("/account/changepassword") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link cyMyPortalHref,
href={cyMyPortalHref} t("common:breadcrumb-my-portal")
className="govuk-breadcrumbs__link" )}
>
{t("common:breadcrumb-my-portal")}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
Update your password Update your password
</li> </li>
@@ -695,37 +640,23 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/dnsdetails") && ( {isPath("/dnsdetails") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/dnsapplications"
isWelsh : "/dnsapplications",
? router.locale + t("dnsCommon:service-name")
"/dnsapplications" )}
: "/dnsapplications"
}
className="govuk-breadcrumbs__link"
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderCaseReferenceCrumb(currentReference)} {renderCaseReferenceCrumb(currentReference)}
</> </>
)} )}
{isPath("/dns/[developmentName]") && ( {isPath("/dns/[developmentName]") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/dnsapplications"
isWelsh : "/dnsapplications",
? router.locale + t("dnsCommon:service-name")
"/dnsapplications" )}
: "/dnsapplications"
}
className="govuk-breadcrumbs__link"
>
{t("dnsCommon:service-name")}
</Link>
</li>
{renderCaseReferenceCrumb(caseReferenceDisplay)} {renderCaseReferenceCrumb(caseReferenceDisplay)}
</> </>
)} )}
@@ -759,21 +690,12 @@ const Breadcrumbs = (props) => {
)} )}
{isPath("/dns/application-view") && ( {isPath("/dns/application-view") && (
<> <>
<li className="govuk-breadcrumbs__list-item"> {renderLinkCrumb(
<Link isWelsh
href={ ? router.locale + "/dns/applications"
isWelsh : "/dns/applications",
? router.locale + t("dnsApplicationView:page-parent-title")
"/dns/applications" )}
: "/dns/applications"
}
className="govuk-breadcrumbs__link"
>
{t(
"dnsApplicationView:page-parent-title"
)}
</Link>
</li>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
TWA - Morlais Demonstration Zone TWA - Morlais Demonstration Zone
</li> </li>
memory-bank/change-log.md
+29
View File
@@ -190,6 +190,35 @@ Follow-ups:
- Next slice recommendation: extract remaining repeated inline link crumbs for case/DNS branches that still hardcode `<li><Link ...>` (e.g., `/myportal/case`, `/myportal/case/[ticketnumber]`, `/dnsdetails`, `/dns/[developmentName]`) to complete link-pattern consolidation. - Next slice recommendation: extract remaining repeated inline link crumbs for case/DNS branches that still hardcode `<li><Link ...>` (e.g., `/myportal/case`, `/myportal/case/[ticketnumber]`, `/dnsdetails`, `/dns/[developmentName]`) to complete link-pattern consolidation.
### CL-22541-G: breadcrumbs inline Link-crumb consolidation bundle
date: 2026-04-09
author: Cline
scope: `components/breadcrumbs.js`
type: change
rationale: Continue the larger bounded breadcrumb refactor cadence by replacing the next batch of repeated inline `<li><Link ...>` crumbs with the shared link helper.
impact: Refactor-only JSX deduplication and consistency improvement in breadcrumb rendering; no intended route/auth/session/API/EN-CY/a11y behavior change.
status: completed
Summary:
- Reused `renderLinkCrumb(href, label, onClick)` for another broad set of previously inline Link crumbs, including:
- service-name crumb in the shared shell
- new appeal select-appeal parent/title crumbs
- case and ticketnumber branches (`/myportal/case`, `/case/[ticketnumber]`, `/case/id/[incident]`, `/myportal/case/[ticketnumber]`)
- additional myportal/dns/account branches (`/myportal/dns/[developmentName]`, `/dnsdetails`, `/dns/[developmentName]`, `/dns/application-view`, account crumbs)
- Kept special behavior intact where needed (e.g., existing callback-based crumbs that already use helper `onClick`).
- Increased consistency of crumb rendering style by routing most link crumbs through one helper.
Validation:
- `npx eslint components/breadcrumbs.js` -> pass.
- `node tests/phase22/index.test.cjs` -> pass (combined suite).
Follow-ups:
- Next slice recommendation: target remaining anchor/back-link duplication (`<a href="#">` and occasional `<a href={...}>`) by introducing a bounded helper for action/back crumbs while preserving existing non-Link semantics.
### 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