mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
41630d5d7c
feature(ui-label, ahf, warenausgabe, customer-orders): Added and Updated Label Library and Label to the Views, Updated Positioning Ref: #5479
89 lines
2.1 KiB
Markdown
89 lines
2.1 KiB
Markdown
# @isa/ui/label
|
|
|
|
Label components for displaying tags, categories, and priority indicators.
|
|
|
|
## Installation
|
|
|
|
```typescript
|
|
import { LabelComponent, PrioLabelComponent } from '@isa/ui/label';
|
|
```
|
|
|
|
## Components
|
|
|
|
### LabelComponent
|
|
|
|
A badge-style label for tags, filters, and reward indicators.
|
|
|
|
**Figma:** [ISA Design System - Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev)
|
|
|
|
#### Usage
|
|
|
|
```html
|
|
<!-- Basic label -->
|
|
<ui-label>Prämie</ui-label>
|
|
|
|
<!-- Active state (hover/pressed) -->
|
|
<ui-label [active]="true">Selected</ui-label>
|
|
```
|
|
|
|
#### API
|
|
|
|
| Input | Type | Default | Description |
|
|
| -------- | --------- | ------- | ------------------------------------ |
|
|
| `active` | `boolean` | `false` | Active state (adds background color) |
|
|
|
|
### PrioLabelComponent
|
|
|
|
A priority indicator label with two priority levels.
|
|
|
|
**Figma:** [ISA Design System - Prio Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev)
|
|
|
|
#### Usage
|
|
|
|
```html
|
|
<!-- Priority 1 (high) - default -->
|
|
<ui-prio-label [priority]="1">Pflicht</ui-prio-label>
|
|
|
|
<!-- Priority 2 (low) -->
|
|
<ui-prio-label [priority]="2">Prio 2</ui-prio-label>
|
|
```
|
|
|
|
#### API
|
|
|
|
| Input | Type | Default | Description |
|
|
| ---------- | -------- | ------- | ----------------------------------- |
|
|
| `priority` | `1 \| 2` | `1` | Priority level (1 = high, 2 = low ) |
|
|
|
|
## CSS Classes
|
|
|
|
### LabelComponent
|
|
|
|
- `.ui-label` - Base class
|
|
- `.ui-label--active` - Active state
|
|
|
|
### PrioLabelComponent
|
|
|
|
- `.ui-prio-label` - Base class
|
|
- `.ui-prio-label--1` - Priority 1 (dark background)
|
|
- `.ui-prio-label--2` - Priority 2 (light background)
|
|
|
|
## Accessibility
|
|
|
|
Both components include:
|
|
|
|
- `role="status"` - Indicates status information
|
|
- E2E testing attributes (`data-what`, `data-which`)
|
|
|
|
## E2E Testing
|
|
|
|
```typescript
|
|
// Select all labels
|
|
page.locator('[data-what="label"]');
|
|
|
|
// Select all priority labels
|
|
page.locator('[data-what="prio-label"]');
|
|
|
|
// Select specific priority
|
|
page.locator('[data-what="prio-label"][data-which="priority-1"]');
|
|
```
|