Files

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

Raw Blame History

WP-12 — CIBG Datablock for application data

Status: done (82fc3c4) Phase: 2 — CIBG fidelity

Done as part of the "CIBG UI fidelity pass" (user-requested, out of order). New app-data-block molecule wraps .data-block/.block-wrapper; data-row moved to a div[app-data-row] attribute selector so the <dl>'s child is a native <div> (axe-clean — fixed a live definition-list defect). review-section folded on; registration-summary + dashboard BRP block dropped app-card for the datablock.

Why

CIBG documents Datablock (designsystem.cibg.nl/componenten/datablock/) as THE way to display user/application data: a grey dl/dt/dd container, .data-block + .block-wrapper, Bootstrap grid for label/value widths, a --stacked variant, and optional expandable help text (.dt-item, .dt-help-btn-open/-close, .dt-help-panel). All classes are verified present in public/cibg-huisstijl/css/huisstijl.min.css. The app currently renders application data with bare data-rows inside a custom card — adopting Datablock makes the data views design-system-native.

Read first

https://designsystem.cibg.nl/componenten/datablock/
public/cibg-huisstijl/css/huisstijl.min.css (grep .data-block)
src/app/shared/ui/data-row/data-row.component.ts
src/app/shared/ui/review-section/review-section.component.ts (already uses .data-block/.block-wrapper ad hoc)
Consumers: src/app/registratie/ui/dashboard.page.ts ("Persoonsgegevens (BRP)" card), registration-summary/registration-summary.component.ts, registration-detail.page.ts

Decisions (pre-made, don't relitigate)

New data-block molecule in shared/ui wrapping the vendored classes: inputs for optional heading and stacked variant; content = projected data-rows (or a typed rows input — match how review-section projects today; prefer projection for composability).
data-row stays as the row primitive inside the datablock (document that role in its header comment) — don't fork a second row component.
review-section aligns onto the new molecule instead of hand-carrying the classes.
Expandable help text (.dt-item + help button/panel) only if a real field needs it — if built, follow CIBG's focus management (focus into panel on open, back to trigger on close) and the documented aria-* state on the trigger.

Files

New src/app/shared/ui/data-block/data-block.component.ts + data-block.stories.ts
src/app/shared/ui/review-section/review-section.component.ts
src/app/registratie/ui/dashboard.page.ts (Persoonsgegevens card → datablock)
registration-summary.component.ts, registration-detail.page.ts
src/app/shared/ui/data-row/data-row.component.ts (header comment; possibly minor class alignment)

Steps

Build the molecule (standard + stacked variants), stories for both (axe-gated).
Migrate the three data views; keep copy/i18n ids untouched.
Fold review-section onto the molecule; delete its duplicated class carrying.
Optional aria-label on the dl where the block has no visible heading.
Visual review dashboard + registration pages.

Acceptance criteria

Application data (BRP card, registration summary/detail, wizard review) renders in CIBG datablocks.
data-row documented as the datablock row primitive; no duplicate dl styling anywhere.
Stories for standard + stacked; axe green.

Verification

GREEN + npm run test-storybook:ci. Manual: npm start → dashboard + /registratie detail; wizard review step still renders.

Out of scope

The help-panel variant unless a real field needs it; table views (registration-table stays a CIBG Tabel).

Risks

The grey datablock surface may double up visually inside the custom .app-card — decide per view whether the card wrapper drops (datablock replaces it) and note the choice in the component comment.

3.8 KiB Raw Blame History