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

feat(dashboard): render a lopende aanvraag as a CIBG melding

Browse Source 
A Concept status now renders as a CIBG "melding" (warning) with its own
verwijderen/openen actions, matching the real CIBG pattern for an in-progress
application, instead of sharing the keuzelijst card shape used by resolved
statuses. Alert atom switches from a hand-rolled surface to the vendored
`.feedback` classes with a visually-hidden icon label per CIBG's a11y
requirement.
This commit is contained in:
Edwin van den Houdt
2026-07-02 17:08:04 +02:00
parent f769242f76
commit b4fb0be769
4 changed files with 83 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/shared/ui/alert/alert.component.ts
View File

@@ -2,35 +2,36 @@ import { Component, input } from '@angular/core';
type AlertType = 'info' | 'ok' | 'warning' | 'error';
/** Atom: alert/message banner. CIBG's Bootstrap build drops the stock `.alert`, so this
is a hand-rolled surface styled from the (CIBG-valued) token bridge — no raw hex. */
// visually-hidden alternative for the status icon (CIBG a11y requirement).
const ICON_LABELS: Record<AlertType, string> = {
info: $localize`:@@alert.icon.info:Informatie`,
ok: $localize`:@@alert.icon.ok:Gelukt`,
warning: $localize`:@@alert.icon.warning:Waarschuwing`,
error: $localize`:@@alert.icon.error:Foutmelding`,
};
/** Atom: alert/message banner — the CIBG Huisstijl "melding"
(designsystem.cibg.nl/componenten/meldingen). Thin wrapper over the vendored
`.feedback feedback-*` classes: the design system owns surface + icon; we add
only the icon's a11y label and a content wrapper (`.feedback` is a flex row). */
@Component({
selector: 'app-alert',
styles: [`
.alert-box{
border:var(--rhc-border-width-sm) solid;
border-inline-start-width:var(--rhc-border-width-md);
border-radius:var(--rhc-border-radius-md);
padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
color:var(--rhc-color-foreground-default);
}
.alert-info{background:var(--rhc-color-hemelblauw-100);border-color:var(--rhc-color-foreground-link)}
.alert-ok{background:var(--rhc-color-groen-300);border-color:var(--rhc-color-groen-500)}
.alert-warning{background:var(--rhc-color-geel-100);border-color:var(--rhc-color-geel-600)}
.alert-error{background:var(--rhc-color-rood-100);border-color:var(--rhc-color-rood-500)}
`],
styles: [`.feedback>div{flex:1 1 auto;min-width:0}`],
template: `
<div
class="alert-box"
[class.alert-info]="type() === 'info'"
[class.alert-ok]="type() === 'ok'"
[class.alert-warning]="type() === 'warning'"
[class.alert-error]="type() === 'error'"
role="status">
<ng-content />
class="feedback"
[class.feedback-info]="type() === 'info'"
[class.feedback-success]="type() === 'ok'"
[class.feedback-warning]="type() === 'warning'"
[class.feedback-error]="type() === 'error'"
role="status"
aria-atomic="true">
<span class="icon"><span class="visually-hidden">{{ iconLabels[type()] }}</span></span>
<div><ng-content /></div>
</div>
`,
})
export class AlertComponent {
type = input<AlertType>('info');
protected readonly iconLabels = ICON_LABELS;
}