Edwin van den Houdt
82fc3c493d
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>
24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
TypeScript
import { Component, input } from '@angular/core';
|
|
|
|
/** Molecule: one key/value row inside a CIBG Huisstijl **Datablock** (see
|
|
`data-block.component.ts`) — the row primitive of the datablock/`controlestap`
|
|
data summary. Used on a `<div>` so the `<dl>`'s direct child is a native element
|
|
(the HTML5.1 `dl > div > dt + dd` grouping), which keeps 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`. The host is the Bootstrap
|
|
`.row`; `dt.col-md-4`/`dd.col-md-8` give the label/value widths. Wrap several in a
|
|
`<dl class="mb-0">` (a `<app-data-block>`). Project custom content (e.g. a badge)
|
|
into the `<dd>` via `<ng-content>`. */
|
|
@Component({
|
|
selector: 'div[app-data-row]',
|
|
host: { class: 'row' },
|
|
template: `
|
|
<dt class="col-md-4">{{ key() }}</dt>
|
|
<dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>
|
|
`,
|
|
})
|
|
export class DataRowComponent {
|
|
key = input.required<string>();
|
|
value = input<string | null>('');
|
|
}
|