Files

Edwin van den Houdt f769242f76 docs: replace SHOWCASE-ROADMAP.md with docs/backlog/ (17 WPs)

Turns the prior roadmap sketch into ordered, gated work packages (enforcement
gates, FP/DDD consistency, CIBG fidelity, Storybook curriculum, a11y) from the
2026-07-02 showcase-hardening audit.

2026-07-02 17:07:59 +02:00

3.3 KiB

Raw Blame History

WP-11 — CIBG markup fidelity: application-link + absent-class triage

Status: todo Phase: 2 — CIBG fidelity

Why

application-link.component.ts invents .application / .application-title — absent from the vendored CSS. The real "aanvragen" pattern styles .dashboard-block.applications li a with h3/.h3, and .subtitle/.status/.cta scoped inside .applications. The invented classes mean the rows only look right by accident of parent scoping, and .application-title is dead. A few other components use classes that don't exist in the vendored build.

Read first

https://designsystem.cibg.nl/componenten/aanvragen/
public/cibg-huisstijl/css/huisstijl.min.css (grep .applications, .breadcrumb, error-summary candidates)
src/app/shared/ui/application-link/application-link.component.ts + application-list/application-list.component.ts
src/app/shared/layout/page-shell/page-shell.component.ts (.back), wizard-shell/wizard-shell.component.ts (.es-list/.es-title), src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.component.ts (.radio-option), shared/layout/breadcrumb/breadcrumb.component.ts

Decisions (pre-made, don't relitigate)

application-list/link: rework markup to the documented .dashboard-block.applications scoping chain; keep the component API (heading/subtitle/cta/to) unchanged.
For each remaining absent class: adopt a vendored pattern if one exists, else mark as CIBG-gap extension (marker format per WP-13; define inline if WP-13 hasn't run). This fallback is explicit so the WP can't stall on a missing upstream pattern.
Wizard error summary: check whether CIBG's Foutmelding/Veldvalidatie pattern classes are vendored; adopt if so, else mark as gap (the current behavior/a11y stays — role="alert", focus management).
Breadcrumb: .breadcrumb IS vendored — verify usage against CIBG Kruimelpad and annotate only; no rework expected.

Files

application-link.component.ts, application-list.component.ts (+ stories)
page-shell.component.ts, wizard-shell.component.ts, delivery-channel-toggle.component.ts, breadcrumb.component.ts (annotations/markers or adopted patterns)
src/app/registratie/ui/dashboard.page.ts (visual consumer — no code change expected)

Steps

Rework application-list/link markup; delete .application/.application-title.
Grep the vendored CSS for Foutmelding/Veldvalidatie-ish classes; adopt or mark.
Triage .back and .radio-option: adopt or mark.
Verify breadcrumb; add the "wraps vendored .breadcrumb (CIBG Kruimelpad)" comment.
Eyeball the dashboard — a visual diff on "Wat wilt u doen?" is intended.

Acceptance criteria

grep -rn '"application"\|application-title' src/app → empty (component selector aside).
Every invented class either replaced by a vendored pattern or carries the gap marker.
Dashboard + wizard stories reviewed; axe green.

Verification

GREEN + npm run test-storybook:ci. Manual: npm start → dashboard ("Wat wilt u doen?" list) + a wizard validation error (error summary).

Out of scope

Datablock adoption (WP-12); the full gap register (WP-13).

Risks

The intended dashboard visual diff needs human eyes — flag it in the session summary for the user.

3.3 KiB Raw Blame History