feat(cibg): WP-12 — CIBG Datablock for application data

Adopt the vendored CIBG Datablock (.data-block / .block-wrapper) as the way to
show application data:
- New app-data-block molecule (grey surface + white panel + projected rows,
  optional heading, stacked variant, aria-label) + stories.
- data-row switches to a `div[app-data-row]` attribute selector so the <dl>'s
  direct child is a native <div> (HTML5.1 dl > div > dt+dd). This makes the
  definition list axe-clean — a bare custom element between <dl> and its dt/dd
  trips axe's definition-list rule regardless of display:contents, a defect the
  dashboard shipped live. Re-enables a11y on the data-row / review-section /
  registration-summary stories (previously disabled pending this rework).
- review-section folds onto app-data-block (drops its hand-carried classes).
- registration-summary + dashboard "Persoonsgegevens (BRP)" drop app-card and
  render as datablocks; both wizards' review rows + the beroep row convert to
  the div selector.

GREEN: lint, check:tokens, 178 tests, build, build-storybook, 136 axe stories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
eho
2026-07-02 21:25:57 +02:00
co-authored by Claude Opus 4.8
parent 947d5fa90a
commit 82fc3c493d
12 changed files with 798 additions and 654 deletions
@@ -1,11 +1,13 @@
import { Component, input, output } from '@angular/core';
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
/** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
`.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a CIBG
Datablock (composes `<app-data-block>`). Domain-free; the caller supplies the
heading and decides what "Wijzigen" does (typically jump back to a step). */
@Component({
selector: 'app-review-section',
imports: [DataBlockComponent],
template: `
<div class="d-flex">
<h2>{{ heading() }}</h2>
@@ -15,13 +17,7 @@ import { Component, input, output } from '@angular/core';
</div>
}
</div>
<div class="data-block">
<div class="block-wrapper">
<dl class="row mb-0">
<ng-content />
</dl>
</div>
</div>
<app-data-block><ng-content /></app-data-block>
`,
})
export class ReviewSectionComponent {
@@ -11,16 +11,11 @@ const meta: Meta<ReviewSectionComponent> = {
props: args,
template: `
<app-review-section [heading]="heading" [editLabel]="editLabel" [editAriaLabel]="editAriaLabel" [showEdit]="showEdit">
<app-data-row key="Straat en huisnummer" value="Dorpsstraat 1" />
<app-data-row key="Postcode" value="1234 AB" />
<app-data-row key="Woonplaats" value="Utrecht" />
<div app-data-row key="Straat en huisnummer" value="Dorpsstraat 1"></div>
<div app-data-row key="Postcode" value="1234 AB"></div>
<div app-data-row key="Woonplaats" value="Utrecht"></div>
</app-review-section>`,
}),
parameters: {
// Structural: app-data-row's host sits between the <dl> and its <dt>/<dd> —
// fixed by the WP-12 Datablock rework. See docs/backlog/WP-12-datablock.md.
a11y: { disable: true },
},
};
export default meta;
type Story = StoryObj<ReviewSectionComponent>;