# @isa/ui/notice

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

## Installation

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

## Component

### NoticeComponent

**Figma:** [ISA Design System - Notice](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2551-4407&m=dev)

## Priority Levels

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

## Usage

```html
<!-- 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

```typescript
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

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

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