# 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-row`s 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-row`s (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

1. Build the molecule (standard + stacked variants), stories for both (axe-gated).
2. Migrate the three data views; keep copy/i18n ids untouched.
3. Fold review-section onto the molecule; delete its duplicated class carrying.
4. Optional `aria-label` on the `dl` where the block has no visible heading.
5. 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.