ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { Component, input } from '@angular/core';
|
|
|
|
type AlertType = 'info' | 'ok' | 'warning' | 'error';
|
|
|
|
// 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).
|
|
Errors are `role="alert"` (assertive — interrupts) since they need immediate
|
|
attention; other variants stay `role="status"` (polite) so success/info banners
|
|
don't interrupt what the user is doing. */
|
|
@Component({
|
|
selector: 'app-alert',
|
|
styles: [
|
|
`
|
|
.feedback > div {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
<div
|
|
class="feedback"
|
|
[class.feedback-info]="type() === 'info'"
|
|
[class.feedback-success]="type() === 'ok'"
|
|
[class.feedback-warning]="type() === 'warning'"
|
|
[class.feedback-error]="type() === 'error'"
|
|
[attr.role]="type() === 'error' ? 'alert' : '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;
|
|
}
|