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:
@@ -5,7 +5,7 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
|
||||
import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
|
||||
import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
|
||||
import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
|
||||
@@ -26,7 +26,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
selector: 'app-dashboard-page',
|
||||
imports: [
|
||||
PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
|
||||
DataRowComponent, CardComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
|
||||
DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
|
||||
ChoiceListComponent, ...ASYNC,
|
||||
RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
|
||||
],
|
||||
@@ -70,13 +70,11 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
|
||||
<div class="app-section">
|
||||
<app-registration-summary [reg]="$any(p).registration" />
|
||||
</div>
|
||||
<app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
|
||||
<dl class="row mb-0">
|
||||
<app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
|
||||
<app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
|
||||
<app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
|
||||
</dl>
|
||||
</app-card>
|
||||
<app-data-block class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
|
||||
<div app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat"></div>
|
||||
<div app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode"></div>
|
||||
<div app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats"></div>
|
||||
</app-data-block>
|
||||
</section>
|
||||
</ng-template>
|
||||
<ng-template appAsyncLoading>
|
||||
|
||||
@@ -122,8 +122,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
[ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
|
||||
</app-form-field>
|
||||
} @else if (draft().beroep) {
|
||||
<dl class="row mb-0 app-section">
|
||||
<app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
|
||||
<dl class="mb-0 app-section">
|
||||
<div app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''"></div>
|
||||
</dl>
|
||||
}
|
||||
|
||||
@@ -162,20 +162,20 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
|
||||
<app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
|
||||
i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
|
||||
<div app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()"></div>
|
||||
<div app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()"></div>
|
||||
<div app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()"></div>
|
||||
@if (draft().correspondentie === 'email') {
|
||||
<app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''" />
|
||||
<div app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''"></div>
|
||||
}
|
||||
</app-review-section>
|
||||
<app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
|
||||
i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
|
||||
(edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
|
||||
<app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''" />
|
||||
<app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()" />
|
||||
<div app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''"></div>
|
||||
<div app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()"></div>
|
||||
@for (item of samenvattingVragen(); track item.vraag) {
|
||||
<app-data-row [key]="item.vraag" [value]="item.antwoord" />
|
||||
<div app-data-row [key]="item.vraag" [value]="item.antwoord"></div>
|
||||
}
|
||||
</app-review-section>
|
||||
}
|
||||
|
||||
@@ -4,38 +4,37 @@ import { Registration } from '@registratie/domain/registration';
|
||||
import { statusColor, statusLabel } from '@registratie/domain/registration.policy';
|
||||
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
|
||||
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
|
||||
import { CardComponent } from '@shared/ui/card/card.component';
|
||||
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
|
||||
|
||||
/** Organism: registration summary card. Composes data-row molecules + status-badge atom. */
|
||||
/** Organism: registration summary in a CIBG Datablock. Composes data-row rows +
|
||||
status-badge atom (no card wrapper — the datablock carries its own surface). */
|
||||
@Component({
|
||||
selector: 'app-registration-summary',
|
||||
imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
|
||||
imports: [DatePipe, DataRowComponent, StatusBadgeComponent, DataBlockComponent],
|
||||
template: `
|
||||
<app-card>
|
||||
<dl class="row mb-0">
|
||||
<app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
|
||||
<app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
|
||||
<app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
|
||||
<app-data-row i18n-key="@@summary.status" key="Status">
|
||||
<app-status-badge [label]="label()" [color]="color()" />
|
||||
</app-data-row>
|
||||
<app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'" />
|
||||
<!-- Each status variant renders only the row its own data supports. -->
|
||||
@switch (reg().status.tag) {
|
||||
@case ('Geregistreerd') {
|
||||
<app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'" />
|
||||
}
|
||||
@case ('Geschorst') {
|
||||
<app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'" />
|
||||
<app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
|
||||
}
|
||||
@case ('Doorgehaald') {
|
||||
<app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'" />
|
||||
<app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
|
||||
}
|
||||
<app-data-block i18n-ariaLabel="@@summary.ariaLabel" ariaLabel="Registratiegegevens">
|
||||
<div app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer"></div>
|
||||
<div app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam"></div>
|
||||
<div app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep"></div>
|
||||
<div app-data-row i18n-key="@@summary.status" key="Status">
|
||||
<app-status-badge [label]="label()" [color]="color()" />
|
||||
</div>
|
||||
<div app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'"></div>
|
||||
<!-- Each status variant renders only the row its own data supports. -->
|
||||
@switch (reg().status.tag) {
|
||||
@case ('Geregistreerd') {
|
||||
<div app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'"></div>
|
||||
}
|
||||
</dl>
|
||||
</app-card>
|
||||
@case ('Geschorst') {
|
||||
<div app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'"></div>
|
||||
<div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
|
||||
}
|
||||
@case ('Doorgehaald') {
|
||||
<div app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'"></div>
|
||||
<div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
|
||||
}
|
||||
}
|
||||
</app-data-block>
|
||||
`,
|
||||
})
|
||||
export class RegistrationSummaryComponent {
|
||||
|
||||
@@ -13,16 +13,11 @@ const base = {
|
||||
const meta: Meta<RegistrationSummaryComponent> = {
|
||||
title: 'Organisms/Registration Summary',
|
||||
component: RegistrationSummaryComponent,
|
||||
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<RegistrationSummaryComponent>;
|
||||
|
||||
// Each story feeds a different union variant; the card renders only the rows
|
||||
// Each story feeds a different union variant; the datablock renders only the rows
|
||||
// that variant's data supports (note Doorgehaald has no herregistratie date).
|
||||
export const Geregistreerd: Story = {
|
||||
args: { reg: { ...base, status: { tag: 'Geregistreerd', herregistratieDatum: '2027-09-01' } } },
|
||||
|
||||
Reference in New Issue
Block a user