feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)
Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.
- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
(4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
(no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
/ `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
procesnavigatie button row. Back-navigation wired into all three wizard machines
(registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
.app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
that no longer exist) and document the CIBG-value token bridge.
Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
39
src/app/shared/ui/review-section/review-section.component.ts
Normal file
39
src/app/shared/ui/review-section/review-section.component.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
|
||||
/** 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
|
||||
heading and decides what "Wijzigen" does (typically jump back to a step). */
|
||||
@Component({
|
||||
selector: 'app-review-section',
|
||||
template: `
|
||||
<div class="d-flex">
|
||||
<h2>{{ heading() }}</h2>
|
||||
@if (showEdit()) {
|
||||
<div class="ms-auto">
|
||||
<a href="#" [attr.aria-label]="editAriaLabel() || editLabel()" (click)="onEdit($event)">{{ editLabel() }}</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="data-block">
|
||||
<div class="block-wrapper">
|
||||
<dl class="row mb-0">
|
||||
<ng-content />
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ReviewSectionComponent {
|
||||
heading = input.required<string>();
|
||||
editLabel = input($localize`:@@reviewSection.wijzigen:Wijzigen`);
|
||||
editAriaLabel = input('');
|
||||
showEdit = input(true);
|
||||
|
||||
edit = output<void>();
|
||||
|
||||
protected onEdit(ev: Event) {
|
||||
ev.preventDefault(); // fragment href resolves against <base href>, not the route
|
||||
this.edit.emit();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user