Files
atomic-design-poc/docs/project/archive/backlog/WP-11-markup-fidelity.md
T
ehoandClaude Opus 5 12f17d9d73 docs: archive the finished backlogs (RD-30)
Two backlog trees are complete: `docs/project/backlog/` (75 files, every
WP done) and `docs/project/refactor-backlog-setup/` (the arc before it).
Move both under `docs/project/archive/` with `git mv`, so history stays
intact through `git log --follow`. `SHOWCASE-ROADMAP.md` moves with them,
because it points at the now-archived backlog README.

Add `docs/project/archive/README.md`. It states that these trees are
historical and names the two directories that are still live.

Repoint every inbound reference named in RD-30's Files table: CLAUDE.md,
the root README, both backend READMEs, `LetterHtml.cs`, `a11y.mdx`, the
`document-feature` and `new-ssp` skills, and the readable-codebase PLAN,
README, and RD-19 ticket. Fix two upward-relative links inside the moved
WP files (WP-68, WP-69) that gained a directory level and would otherwise
break. Repoint `.prettierignore`'s two agent-prompt exclusions to their
new path, so prettier keeps leaving those files' exact wording alone.

Mark RD-30 done and check off its acceptance criteria; flip its README
row to done.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-08 23:00:38 +02:00

3.8 KiB

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

Status: done (98fd7e4) Phase: 2 — CIBG fidelity

Done as part of the "CIBG UI fidelity pass" (user-requested, out of order). application-link now uses the real .dashboard-block.applications li a chain via a li[app-application-link] attribute selector (native <li> child, axe-clean); the invented .application/.application-title classes are gone (grep gate clean). The dashboard "Mijn aanvragen" renders as the CIBG Aanvragen component. Remaining absent-class triage for non-aanvragen components stays with WP-13's gap register.

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

  1. Rework application-list/link markup; delete .application/.application-title.
  2. Grep the vendored CSS for Foutmelding/Veldvalidatie-ish classes; adopt or mark.
  3. Triage .back and .radio-option: adopt or mark.
  4. Verify breadcrumb; add the "wraps vendored .breadcrumb (CIBG Kruimelpad)" comment.
  5. 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.