eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(registratie): WP-34 — BRP address as datablock, phone in grey fieldset
CI / frontend (push) Successful in 1m53s
Details
CI / storybook-a11y (push) Successful in 4m51s
Details
CI / backend (push) Successful in 1m26s
Details
CI / e2e (push) Successful in 2m51s
Details
CI / semgrep (push) Failing after 28s
Details
CI / api-client-drift (push) Successful in 2m10s
Details

Browse Source 
Restyle the contact-change form with house CIBG surfaces instead of hand-rolled
markup: the read-only BRP address now uses app-data-block/app-data-row (grey
datablock), and the phone field sits in a plain <fieldset> inside the existing
.form-horizontal form (inherits the CIBG grey box). No new CSS surfaces; row keys
reuse the address.* i18n ids. Logic/machine/specs unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
eho
2026-07-23 08:05:40 +02:00
co-authored by Claude Opus 4.8
parent 0ea43af7b6
commit 57f6f2f8d8
4 changed files with 94 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/registratie/ui/change-request-form/change-request-form.component.ts
+48 -36
View File
@@ -5,6 +5,8 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
import { Adres } from '@registratie/domain/person';
import { createStore } from '@shared/application/store';
import { whenTag } from '@shared/kernel/fp';
@@ -32,21 +34,20 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
AlertComponent,
FormFieldComponent,
TextInputComponent,
DataBlockComponent,
DataRowComponent,
],
styles: [
`
.brp {
margin-block-end: var(--rhc-space-max-lg);
}
.brp dt {
font-weight: var(--rhc-text-font-weight-semi-bold);
}
.brp dd {
margin: 0 0 var(--rhc-space-max-sm) 0;
}
.brp .source {
.source {
color: var(--rhc-color-grijs-700);
font-size: var(--rhc-text-font-size-sm);
margin-block-end: var(--rhc-space-max-lg);
}
legend {
padding: 0;
font-weight: var(--rhc-text-font-weight-semi-bold);
margin-block-end: var(--rhc-space-max-md);
}
`,
],
@@ -68,14 +69,15 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
<app-heading [level]="2" i18n="@@changeRequest.heading">Contactgegevens wijzigen</app-heading>
@if (brpAdres(); as a) {
<dl class="brp app-section">
<dt i18n="@@changeRequest.brpAdresLabel">Adres (BRP)</dt>
<dd>{{ a.straat }}<br />{{ a.postcode }} {{ a.woonplaats }}</dd>
<dd class="source" i18n="@@changeRequest.brpAdresBron">
Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig
het bij uw gemeente.
</dd>
</dl>
<app-data-block class="app-section" [heading]="brpHeading" [level]="2">
<div app-data-row [key]="straatLabel" [value]="a.straat"></div>
<div app-data-row [key]="postcodeLabel" [value]="a.postcode"></div>
<div app-data-row [key]="woonplaatsLabel" [value]="a.woonplaats"></div>
</app-data-block>
<p class="source" i18n="@@changeRequest.brpAdresBron">
Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig
het bij uw gemeente.
</p>
}
<form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
@@ -84,24 +86,27 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
<span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
</div>
</div>
<app-form-field
i18n-label="@@changeRequest.telefoonLabel"
label="Telefoonnummer"
fieldId="cr-telefoon"
required
[error]="errors().telefoon"
>
<app-text-input
inputId="cr-telefoon"
[invalid]="!!errors().telefoon"
[ngModel]="telefoon()"
(ngModelChange)="dispatch({ tag: 'SetField', key: 'telefoon', value: $event })"
name="telefoon"
i18n-placeholder="@@changeRequest.telefoonPlaceholder"
placeholder="0612345678"
[ngModelOptions]="{ standalone: true }"
/>
</app-form-field>
<fieldset>
<legend i18n="@@changeRequest.contactLegend">Contactgegevens</legend>
<app-form-field
i18n-label="@@changeRequest.telefoonLabel"
label="Telefoonnummer"
fieldId="cr-telefoon"
required
[error]="errors().telefoon"
>
<app-text-input
inputId="cr-telefoon"
[invalid]="!!errors().telefoon"
[ngModel]="telefoon()"
(ngModelChange)="dispatch({ tag: 'SetField', key: 'telefoon', value: $event })"
name="telefoon"
i18n-placeholder="@@changeRequest.telefoonPlaceholder"
placeholder="0612345678"
[ngModelOptions]="{ standalone: true }"
/>
</app-form-field>
</fieldset>
@if (failedError()) {
<app-alert type="error"
@@ -136,6 +141,13 @@ export class ChangeRequestFormComponent {
protected readonly submitLabel = $localize`:@@changeRequest.submit:Wijziging indienen`;
protected readonly submitBezigLabel = $localize`:@@changeRequest.submitBezig:Bezig met indienen…`;
// Datablock heading + row keys (data-block/data-row take plain string inputs, so these
// are $localize fields, not template i18n). Row keys reuse the existing address.* ids.
protected readonly brpHeading = $localize`:@@changeRequest.brpAdresLabel:Adres (BRP)`;
protected readonly straatLabel = $localize`:@@address.straat:Straat en huisnummer`;
protected readonly postcodeLabel = $localize`:@@address.postcode:Postcode`;
protected readonly woonplaatsLabel = $localize`:@@address.woonplaats:Woonplaats`;
private editing = computed(() => whenTag(this.state(), 'Editing'));
protected errors = computed(() => this.editing()?.errors ?? {});
protected failedError = computed(() => whenTag(this.state(), 'Failed')?.error ?? '');