Upload feature (c): atomic UI components (atoms/molecules/organisms) + stories
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
import { Component, computed, input } from '@angular/core';
|
||||
import { AlertComponent } from '@shared/ui/alert/alert.component';
|
||||
|
||||
type BannerType = 'info' | 'warning' | 'error';
|
||||
type AlertType = 'info' | 'ok' | 'warning' | 'error';
|
||||
|
||||
/** Molecule: a polite, announced status banner. Wraps the alert atom and maps the
|
||||
banner type to an alert type. Pure UI: the container computes the message. */
|
||||
@Component({
|
||||
selector: 'app-upload-status-banner',
|
||||
imports: [AlertComponent],
|
||||
template: `
|
||||
<div aria-live="polite">
|
||||
<app-alert [type]="alertType()">{{ message() }}</app-alert>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class UploadStatusBannerComponent {
|
||||
message = input.required<string>();
|
||||
type = input<BannerType>('info');
|
||||
|
||||
protected readonly alertType = computed<AlertType>(() => (this.type() === 'info' ? 'info' : this.type()));
|
||||
}
|
||||
Reference in New Issue
Block a user