style(registratie): WP-34 — BRP address as datablock, phone in grey fieldset

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>
2026-07-23 08:05:40 +02:00
parent 0ea43af7b6
commit 57f6f2f8d8
4 changed files with 94 additions and 55 deletions
@@ -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 ?? '');
@@ -1318,6 +1318,14 @@
          <context context-type="linenumber">40,41</context>
        </context-group>
      </trans-unit>
+      <trans-unit id="changeRequest.contactLegend" datatype="html">
+        <source>Contactgegevens</source>
+        <target datatype="html">Contact details</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">88</context>
+        </context-group>
+      </trans-unit>
      <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
        <source>Adres (BRP)</source>
        <target datatype="html">Address (BRP)</target>
@@ -17,7 +17,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">84,86</context>
+          <context context-type="linenumber">86,88</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/shared/layout/wizard-shell/wizard-shell.component.ts</context>
@@ -1688,7 +1688,7 @@
        <source>Voer een geldig telefoonnummer in, bijv. 0612345678.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/domain/value-objects/telefoonnummer.ts</context>
-          <context context-type="linenumber">18</context>
+          <context context-type="linenumber">21</context>
        </context-group>
      </trans-unit>
      <trans-unit id="validation.uren" datatype="html">
@@ -1753,6 +1753,10 @@
          <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
          <context context-type="linenumber">39,40</context>
        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">147</context>
+        </context-group>
      </trans-unit>
      <trans-unit id="address.postcode" datatype="html">
        <source>Postcode</source>
@@ -1760,6 +1764,10 @@
          <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
          <context context-type="linenumber">55,56</context>
        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">148</context>
+        </context-group>
      </trans-unit>
      <trans-unit id="address.postcodePlaceholder" datatype="html">
        <source>1234 AB</source>
@@ -1774,6 +1782,10 @@
          <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
          <context context-type="linenumber">73,74</context>
        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">149</context>
+        </context-group>
      </trans-unit>
      <trans-unit id="address.legend" datatype="html">
        <source>Adres</source>
@@ -1786,70 +1798,77 @@
        <source> Uw wijziging is ontvangen (referentie <x id="INTERPOLATION" equiv-text="{{ referentie() }}"/>). U ontvangt binnen 5 werkdagen bericht. </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">56,58</context>
+          <context context-type="linenumber">57,59</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.nieuwe" datatype="html">
        <source>Nieuwe wijziging doorgeven</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">64,66</context>
+          <context context-type="linenumber">65,67</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.heading" datatype="html">
        <source>Contactgegevens wijzigen</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">68,70</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
-        <source>Adres (BRP)</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">72,73</context>
+          <context context-type="linenumber">69,71</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.brpAdresBron" datatype="html">
        <source> Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig het bij uw gemeente. </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">75,78</context>
+          <context context-type="linenumber">78,82</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="changeRequest.contactLegend" datatype="html">
+        <source>Contactgegevens</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">90,92</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.telefoonLabel" datatype="html">
        <source>Telefoonnummer</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">89,91</context>
+          <context context-type="linenumber">93,95</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.telefoonPlaceholder" datatype="html">
        <source>0612345678</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">101,102</context>
+          <context context-type="linenumber">105,106</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.failed" datatype="html">
        <source>Het indienen is niet gelukt:</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">108,109</context>
+          <context context-type="linenumber">113,114</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.submit" datatype="html">
        <source>Wijziging indienen</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">141</context>
        </context-group>
      </trans-unit>
      <trans-unit id="changeRequest.submitBezig" datatype="html">
        <source>Bezig met indienen…</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">137</context>
+          <context context-type="linenumber">142</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
+        <source>Adres (BRP)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">146</context>
        </context-group>
      </trans-unit>
      <trans-unit id="dashboard.heading" datatype="html">