From d75675f059ea7c5428119dda6106950c8560eb5e Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Thu, 9 Apr 2026 09:34:24 +0100
Subject: [PATCH] 22541 extract shared case-reference breadcrumb list item
 helper

---
 components/breadcrumbs.js | 56 +++++++++++----------------------------
 memory-bank/change-log.md | 25 +++++++++++++++++
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index 21e36402..7ea706bd 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -100,6 +100,12 @@ const Breadcrumbs = (props) => {
         </li>
     );
 
+    const renderCaseReferenceCrumb = (referenceValue) => (
+        <li className="govuk-breadcrumbs__list-item">
+            {t("common:breadcrumb-case-reference")}: {referenceValue}
+        </li>
+    );
+
     const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
         resolveCaseBreadcrumbState({
             query: router.query,
@@ -419,10 +425,7 @@ const Breadcrumbs = (props) => {
                                         {t("common:breadcrumb-my-portal")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/case/[ticketnumber]") && (
@@ -435,10 +438,7 @@ const Breadcrumbs = (props) => {
                                         {breadcrumbLabel}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {fallbackSearchTitle}
-                                </li>
+                                {renderCaseReferenceCrumb(fallbackSearchTitle)}
                             </>
                         )}
                         {isPath("/case/id/[incident]") && (
@@ -475,10 +475,7 @@ const Breadcrumbs = (props) => {
                                         )}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/myportal/case/id/[incident]") && (
@@ -521,10 +518,7 @@ const Breadcrumbs = (props) => {
                                         )}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/myportal/case/[ticketnumber]") && (
@@ -538,10 +532,7 @@ const Breadcrumbs = (props) => {
                                         {breadcrumbLabel}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {caseReferenceDisplay}
-                                </li>
+                                {renderCaseReferenceCrumb(caseReferenceDisplay)}
                             </>
                         )}
                         {isPath("/myportal/dnsapplications") && (
@@ -564,10 +555,7 @@ const Breadcrumbs = (props) => {
                                         {t("dnsCommon:service-name")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/myportal/dns/[developmentName]") && (
@@ -592,10 +580,7 @@ const Breadcrumbs = (props) => {
                                         {t("dnsCommon:service-name")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {caseReferenceDisplay}
-                                </li>
+                                {renderCaseReferenceCrumb(caseReferenceDisplay)}
                             </>
                         )}
                         {isPath("/case") && (
@@ -623,10 +608,7 @@ const Breadcrumbs = (props) => {
                                         {t("common:breadcrumb-search-results")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/myportal/representation") && (
@@ -758,10 +740,7 @@ const Breadcrumbs = (props) => {
                                         {t("dnsCommon:service-name")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {currentReference}
-                                </li>
+                                {renderCaseReferenceCrumb(currentReference)}
                             </>
                         )}
                         {isPath("/dns/[developmentName]") && (
@@ -779,10 +758,7 @@ const Breadcrumbs = (props) => {
                                         {t("dnsCommon:service-name")}
                                     </Link>
                                 </li>
-                                <li className="govuk-breadcrumbs__list-item">
-                                    {t("common:breadcrumb-case-reference")}:{" "}
-                                    {caseReferenceDisplay}
-                                </li>
+                                {renderCaseReferenceCrumb(caseReferenceDisplay)}
                             </>
                         )}
                         {isPath("/dns/application-process") && (
diff --git a/memory-bank/change-log.md b/memory-bank/change-log.md
index 27ba7296..cc893885 100644
--- a/memory-bank/change-log.md
+++ b/memory-bank/change-log.md
@@ -137,6 +137,31 @@ Follow-ups:
 
 - Next bounded slice can target additional repeated breadcrumb list-item patterns (e.g., repeated case-reference tail item blocks) with same behavior parity approach.
 
+### CL-22541-E: breadcrumbs case-reference crumb helper extraction
+
+date: 2026-04-09  
+author: Cline  
+scope: `components/breadcrumbs.js`  
+type: change  
+rationale: Continue bounded breadcrumbs decomposition by extracting repeated case-reference tail breadcrumb markup into one local helper and replacing repeated inline blocks.
+impact: Refactor-only JSX deduplication in breadcrumb rendering; no intended route/auth/session/API/EN-CY/a11y behavior change.
+status: completed
+
+Summary:
+
+- Added local `renderCaseReferenceCrumb(referenceValue)` helper in `components/breadcrumbs.js`.
+- Replaced repeated `{t("common:breadcrumb-case-reference")}: ...` list-item blocks across case/dns route branches with helper calls.
+- Corrected initial over-wrap by using helper calls directly (so generated `<li>` is not nested in another `<li>`).
+
+Validation:
+
+- `npx eslint components/breadcrumbs.js` -> pass.
+- `node tests/phase22/index.test.cjs` -> pass (combined suite).
+
+Follow-ups:
+
+- Next bounded slice can target remaining repeated linked breadcrumb list-item patterns (e.g., recurring address-search result link pairs) via small local render helpers.
+
 ### CL-00X: 22500 `components/elements/index.js` Phase 1 helper extraction
 
 date: 2026-04-07