Edwin van den Houdt
05314afd98
The CIBG UI fidelity pass completed WP-11 (aanvragen/application-link) and WP-12 (Datablock), and reworked the upload suite to wrap vendored CIBG classes rather than mark it as a gap (WP-13's assumption corrected). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
86 lines
3.8 KiB
Markdown
86 lines
3.8 KiB
Markdown
# 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.
|