ISA-Frontend/libs/ui/notice

@isa/ui/notice

A notice component for displaying prominent notifications and alerts with configurable priority levels.

Installation

import { NoticeComponent, NoticePriority } from '@isa/ui/notice';

Component

NoticeComponent

Figma: ISA Design System - Notice

Priority Levels

Priority	Description	Background
high	Most prominent	Secondary color
medium	Moderate	Neutral color
low	Subtle (no fill)	Transparent

Usage

<!-- High priority (default) -->
<ui-notice>Action Required</ui-notice>

<!-- Medium priority -->
<ui-notice [priority]="NoticePriority.Medium">Secondary message</ui-notice>

<!-- Low priority -->
<ui-notice priority="low">Info message</ui-notice>

Component Example

import { Component } from '@angular/core';
import { NoticeComponent, NoticePriority } from '@isa/ui/notice';

@Component({
  selector: 'app-alert',
  template: `
    <ui-notice [priority]="NoticePriority.High">Action Required</ui-notice>
    <ui-notice [priority]="NoticePriority.Medium">Limited Stock</ui-notice>
  `,
  imports: [NoticeComponent],
})
export class AlertComponent {
  NoticePriority = NoticePriority;
}

API

Input	Type	Default	Description
priority	NoticePriority	NoticePriority.High	Visual priority level

CSS Classes

• .ui-notice - Base class
• .ui-notice--high - High priority (secondary background)
• .ui-notice--medium - Medium priority (neutral background)
• .ui-notice--low - Low priority (transparent)

Accessibility

• role="status" - Indicates status information
• E2E testing attributes (data-what, data-which)

E2E Testing

// Select all notices
page.locator('[data-what="notice"]');

// Select specific priority
page.locator('[data-what="notice"][data-which="priority-high"]');