sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 2055: feature(ui-label, ahf, warenausgabe, customer-orders): Added and Updated Labe...

Browse Source 
feature(ui-label, ahf, warenausgabe, customer-orders): Added and Updated Label Library and Label to the Views, Updated Positioning

Ref: #5479
This commit is contained in:
Nino Righi
2025-11-28 12:37:11 +00:00
committed by Lorenz Hilpert
parent a5bb8b2895
commit 41630d5d7c
47 changed files with 1830 additions and 1549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.html
View File

@@ -38,7 +38,7 @@
class="w-fit"
[class.row-start-second]="desktopBreakpoint()"
>
<ui-label [type]="Labeltype.Notice">{{ impediment() }}</ui-label>
<ui-notice>{{ impediment() }}</ui-notice>
</ui-item-row-data>
}

11
libs/remission/feature/remission-list/src/lib/remission-list-item/remission-list-item.component.ts
View File

@@ -28,7 +28,7 @@ import { Breakpoint, breakpoint } from '@isa/ui/layout';
import { injectRemissionListType } from '../injects/inject-remission-list-type';
import { RemissionListItemSelectComponent } from './remission-list-item-select.component';
import { RemissionListItemActionsComponent } from './remission-list-item-actions.component';
import { LabelComponent, Labeltype } from '@isa/ui/label';
import { NoticeComponent } from '@isa/ui/notice';
/**
* Component representing a single item in the remission list.
@@ -58,16 +58,10 @@ import { LabelComponent, Labeltype } from '@isa/ui/label';
ItemRowDataImports,
RemissionListItemSelectComponent,
RemissionListItemActionsComponent,
LabelComponent,
NoticeComponent,
],
})
export class RemissionListItemComponent implements OnDestroy {
/**
* Type of label to display for the item.
* Defaults to 'tag', can be changed to 'notice' or other types as needed.
*/
Labeltype = Labeltype;
/**
* Store for managing selected remission quantities.
* @private
@@ -155,6 +149,7 @@ export class RemissionListItemComponent implements OnDestroy {
* Uses the store's selected quantity for the item's ID.
*/
selectedStockToRemit = computed(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
() => this.#store.selectedQuantity()?.[this.item().id!],
);

9
libs/remission/shared/product/src/lib/product-info/product-info.component.html
View File

@@ -13,13 +13,10 @@
/>
@if (tag) {
<ui-label
<ui-prio-label
data-what="remission-label"
[type]="Labeltype.Tag"
[priority]="
tag === RemissionItemTags.Prio2 ? LabelPriority.Low : LabelPriority.High
"
>{{ tag }}</ui-label
[priority]="tag === RemissionItemTags.Prio2 ? 2 : 1"
>{{ tag }}</ui-prio-label
>
}
</div>

6
libs/remission/shared/product/src/lib/product-info/product-info.component.ts
View File

@@ -4,7 +4,7 @@ import { RemissionItem } from '@isa/remission/data-access';
import { ProductImageDirective } from '@isa/shared/product-image';
import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
import { ProductFormatComponent } from '@isa/shared/product-format';
import { LabelComponent, LabelPriority, Labeltype } from '@isa/ui/label';
import { PrioLabelComponent } from '@isa/ui/label';
export type ProductInfoItem = Pick<
RemissionItem,
@@ -28,7 +28,7 @@ export const RemissionItemTags = {
ProductRouterLinkDirective,
CurrencyPipe,
ProductFormatComponent,
LabelComponent,
PrioLabelComponent,
],
host: {
'[class]': 'classList',
@@ -38,8 +38,6 @@ export const RemissionItemTags = {
},
})
export class ProductInfoComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
RemissionItemTags = RemissionItemTags;
readonly classList: ReadonlyArray<string> = [
'grid',

839
libs/ui/label/README.md
View File

@@ -1,813 +1,88 @@
# @isa/ui/label
A flexible label component for displaying tags and notices with configurable priority levels across Angular applications.
Label components for displaying tags, categories, and priority indicators.
## Overview
The Label UI library provides a standalone Angular component for displaying visual labels with semantic meaning. It supports two distinct label types (Tag and Notice) and three priority levels (High, Medium, Low), enabling consistent visual communication of information status, categorization, and importance throughout the ISA application.
## Table of Contents
- [Features](#features)
- [Quick Start](#quick-start)
- [Core Concepts](#core-concepts)
- [API Reference](#api-reference)
- [Usage Examples](#usage-examples)
- [Styling and Customization](#styling-and-customization)
- [Testing](#testing)
- [Architecture Notes](#architecture-notes)
## Features
- **Two label types** - Tag and Notice for different semantic contexts
- **Three priority levels** - High, Medium, and Low for visual hierarchy
- **Standalone component** - Modern Angular architecture with explicit imports
- **Signal-based reactivity** - Uses Angular signals for efficient updates
- **Type-safe API** - TypeScript enums for label type and priority configuration
- **CSS class composition** - Dynamic class generation based on type and priority
- **OnPush change detection** - Optimized rendering performance
- **ViewEncapsulation.None** - Flexible styling with global CSS classes
- **Content projection** - Full control over label content via ng-content
- **Computed classes** - Reactive CSS class computation using Angular signals
## Quick Start
### 1. Import the Component
## Installation
```typescript
import { Component } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
@Component({
selector: 'app-product-status',
template: `
<ui-label [type]="Labeltype.Tag" [priority]="LabelPriority.High">
In Stock
</ui-label>
`,
imports: [LabelComponent]
})
export class ProductStatusComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
}
import { LabelComponent, PrioLabelComponent } from '@isa/ui/label';
```
### 2. Basic Tag Label
```typescript
@Component({
template: `
<ui-label [type]="Labeltype.Tag" [priority]="LabelPriority.Medium">
New Arrival
</ui-label>
`,
imports: [LabelComponent]
})
export class ProductBadgeComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
}
```
### 3. Notice Label
```typescript
@Component({
template: `
<ui-label [type]="Labeltype.Notice" [priority]="LabelPriority.High">
Action Required
</ui-label>
`,
imports: [LabelComponent]
})
export class AlertComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
}
```
## Core Concepts
### Label Types
The component supports two distinct label types, each with specific semantic meaning:
#### 1. Tag (Default)
- **Purpose**: Categorization, status indication, metadata display
- **Use Cases**: Product categories, order status, item tags, filters
- **Visual Style**: Typically compact, pill-shaped design
- **CSS Class**: `ui-label__tag`
#### 2. Notice
- **Purpose**: Notifications, alerts, important messages
- **Use Cases**: Error messages, warnings, system notifications, user alerts
- **Visual Style**: Typically more prominent, attention-grabbing design
- **CSS Class**: `ui-label__notice`
### Priority Levels
Each label type can have one of three priority levels that control visual hierarchy:
#### 1. High Priority (Default)
- **Purpose**: Critical information, urgent status, primary actions
- **Visual Characteristics**: Most prominent styling, often with bold colors
- **Use Cases**: Error states, critical alerts, primary status
- **CSS Classes**:
- `ui-label__tag-priority-high` (for Tag type)
- `ui-label__notice-priority-high` (for Notice type)
#### 2. Medium Priority
- **Purpose**: Important but non-critical information
- **Visual Characteristics**: Moderate emphasis, balanced contrast
- **Use Cases**: Warnings, secondary status, informational notices
- **CSS Classes**:
- `ui-label__tag-priority-medium` (for Tag type)
- `ui-label__notice-priority-medium` (for Notice type)
#### 3. Low Priority
- **Purpose**: Supplementary information, subtle indicators
- **Visual Characteristics**: Minimal emphasis, subtle colors
- **Use Cases**: Hints, optional metadata, background information
- **CSS Classes**:
- `ui-label__tag-priority-low` (for Tag type)
- `ui-label__notice-priority-low` (for Notice type)
### Signal-Based Reactivity
The component uses Angular signals for reactive CSS class computation:
```typescript
// Signal inputs
type = input<Labeltype>(Labeltype.Tag);
priority = input<LabelPriority>(LabelPriority.High);
// Computed signal for type class
typeClass = computed(() => `ui-label__${this.type()}`);
// Computed signal for priority class (combines type and priority)
priorityClass = computed(() => `${this.typeClass()}-priority-${this.priority()}`);
```
This approach provides:
- **Automatic updates** - Classes update when inputs change
- **Efficient rendering** - Only recomputes when dependencies change
- **Type safety** - TypeScript ensures valid type/priority combinations
### CSS Class Structure
The component applies a hierarchical class structure:
```
ui-label (base class)
├── ui-label__tag (type class for Tag)
│ ├── ui-label__tag-priority-high (Tag + High priority)
│ ├── ui-label__tag-priority-medium (Tag + Medium priority)
│ └── ui-label__tag-priority-low (Tag + Low priority)
└── ui-label__notice (type class for Notice)
├── ui-label__notice-priority-high (Notice + High priority)
├── ui-label__notice-priority-medium (Notice + Medium priority)
└── ui-label__notice-priority-low (Notice + Low priority)
```
## API Reference
## Components
### LabelComponent
Standalone component for displaying labels with type and priority.
A badge-style label for tags, filters, and reward indicators.
#### Selector
```html
<ui-label>Content</ui-label>
```
**Figma:** [ISA Design System - Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev)
#### Inputs
##### `type`
- **Type**: `Labeltype`
- **Default**: `Labeltype.Tag`
- **Description**: The semantic type of the label
- **Values**:
- `Labeltype.Tag` - For categorization and status
- `Labeltype.Notice` - For notifications and alerts
**Example:**
```html
<ui-label [type]="Labeltype.Notice">Important Notice</ui-label>
```
##### `priority`
- **Type**: `LabelPriority`
- **Default**: `LabelPriority.High`
- **Description**: The visual priority level of the label
- **Values**:
- `LabelPriority.High` - Highest visual emphasis
- `LabelPriority.Medium` - Moderate visual emphasis
- `LabelPriority.Low` - Subtle visual emphasis
**Example:**
```html
<ui-label [priority]="LabelPriority.Medium">Optional Info</ui-label>
```
#### Computed Properties
##### `typeClass()`
- **Type**: `Signal<string>`
- **Returns**: CSS class string based on current type
- **Format**: `ui-label__${type}`
- **Example**: `"ui-label__tag"` or `"ui-label__notice"`
##### `priorityClass()`
- **Type**: `Signal<string>`
- **Returns**: CSS class string combining type and priority
- **Format**: `ui-label__${type}-priority-${priority}`
- **Example**: `"ui-label__tag-priority-high"`
#### Host Classes
The component automatically applies the following classes to its host element:
```typescript
['ui-label', typeClass(), priorityClass()]
```
Example rendered classes:
```html
<ui-label class="ui-label ui-label__tag ui-label__tag-priority-high">
Content
</ui-label>
```
### Type Definitions
#### Labeltype
TypeScript enum for label type values:
```typescript
export const Labeltype = {
Tag: 'tag',
Notice: 'notice',
} as const;
export type Labeltype = (typeof Labeltype)[keyof typeof Labeltype];
```
**Usage:**
```typescript
import { Labeltype } from '@isa/ui/label';
// In template
[type]="Labeltype.Tag"
[type]="Labeltype.Notice"
// In component class
readonly labelType = Labeltype.Tag;
```
#### LabelPriority
TypeScript enum for priority level values:
```typescript
export const LabelPriority = {
High: 'high',
Medium: 'medium',
Low: 'low',
} as const;
export type LabelPriority = (typeof LabelPriority)[keyof typeof LabelPriority];
```
**Usage:**
```typescript
import { LabelPriority } from '@isa/ui/label';
// In template
[priority]="LabelPriority.High"
[priority]="LabelPriority.Medium"
[priority]="LabelPriority.Low"
// In component class
readonly priority = LabelPriority.Medium;
```
## Usage Examples
### Product Status Tags
```typescript
import { Component } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
@Component({
selector: 'app-product-card',
template: `
<div class="product-card">
<h3>{{ product.name }}</h3>
<!-- In Stock - High priority tag -->
<ui-label
[type]="Labeltype.Tag"
[priority]="LabelPriority.High">
In Stock
</ui-label>
<!-- Category - Medium priority tag -->
<ui-label
[type]="Labeltype.Tag"
[priority]="LabelPriority.Medium">
Electronics
</ui-label>
<!-- Condition - Low priority tag -->
<ui-label
[type]="Labeltype.Tag"
[priority]="LabelPriority.Low">
New
</ui-label>
</div>
`,
imports: [LabelComponent]
})
export class ProductCardComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
product = {
name: 'Wireless Headphones',
inStock: true,
category: 'Electronics'
};
}
```
### Order Status Indicators
```typescript
import { Component, input, computed } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
@Component({
selector: 'app-order-status',
template: `
<ui-label
[type]="Labeltype.Tag"
[priority]="statusPriority()">
{{ statusText() }}
</ui-label>
`,
imports: [LabelComponent]
})
export class OrderStatusComponent {
Labeltype = Labeltype;
status = input.required<'pending' | 'processing' | 'shipped' | 'delivered'>();
statusText = computed(() => {
const statusMap = {
pending: 'Pending',
processing: 'Processing',
shipped: 'Shipped',
delivered: 'Delivered'
};
return statusMap[this.status()];
});
statusPriority = computed(() => {
const priorityMap = {
pending: LabelPriority.High,
processing: LabelPriority.High,
shipped: LabelPriority.Medium,
delivered: LabelPriority.Low
};
return priorityMap[this.status()];
});
}
```
### System Notifications
```typescript
import { Component, input } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
interface Notification {
id: number;
message: string;
type: 'error' | 'warning' | 'info';
}
@Component({
selector: 'app-notification-item',
template: `
<div class="notification">
<ui-label
[type]="Labeltype.Notice"
[priority]="getNotificationPriority()">
{{ getNotificationLabel() }}
</ui-label>
<p>{{ notification().message }}</p>
</div>
`,
imports: [LabelComponent]
})
export class NotificationItemComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
notification = input.required<Notification>();
getNotificationPriority(): LabelPriority {
const type = this.notification().type;
switch (type) {
case 'error':
return LabelPriority.High;
case 'warning':
return LabelPriority.Medium;
case 'info':
return LabelPriority.Low;
}
}
getNotificationLabel(): string {
const type = this.notification().type;
return type.charAt(0).toUpperCase() + type.slice(1);
}
}
```
### Dynamic Labels with NgFor
```typescript
import { Component } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
@Component({
selector: 'app-product-tags',
template: `
<div class="tags-container">
@for (tag of tags; track tag.id) {
<ui-label
[type]="Labeltype.Tag"
[priority]="tag.priority">
{{ tag.label }}
</ui-label>
}
</div>
`,
imports: [LabelComponent]
})
export class ProductTagsComponent {
Labeltype = Labeltype;
tags = [
{ id: 1, label: 'Sale', priority: LabelPriority.High },
{ id: 2, label: 'Free Shipping', priority: LabelPriority.Medium },
{ id: 3, label: 'Eco-Friendly', priority: LabelPriority.Low },
];
}
```
### Conditional Label Display
```typescript
import { Component, input, computed } from '@angular/core';
import { LabelComponent, Labeltype, LabelPriority } from '@isa/ui/label';
@Component({
selector: 'app-inventory-status',
template: `
@if (showStockLabel()) {
<ui-label
[type]="Labeltype.Tag"
[priority]="stockPriority()">
{{ stockLabel() }}
</ui-label>
}
`,
imports: [LabelComponent]
})
export class InventoryStatusComponent {
Labeltype = Labeltype;
LabelPriority = LabelPriority;
stockQuantity = input.required<number>();
showStockLabel = computed(() => this.stockQuantity() < 10);
stockLabel = computed(() => {
const qty = this.stockQuantity();
if (qty === 0) return 'Out of Stock';
if (qty < 5) return 'Low Stock';
return 'Limited Stock';
});
stockPriority = computed(() => {
const qty = this.stockQuantity();
if (qty === 0) return LabelPriority.High;
if (qty < 5) return LabelPriority.High;
return LabelPriority.Medium;
});
}
```
## Styling and Customization
### CSS Class Hierarchy
The component generates a predictable class structure for styling:
```css
/* Base class applied to all labels */
.ui-label {
display: inline-block;
font-family: var(--isa-font-family);
/* Base styles */
}
/* Type-specific base styles */
.ui-label__tag {
/* Tag-specific base styles */
}
.ui-label__notice {
/* Notice-specific base styles */
}
/* Priority-specific styles for Tags */
.ui-label__tag-priority-high {
background-color: var(--isa-accent-red);
color: white;
font-weight: 600;
}
.ui-label__tag-priority-medium {
background-color: var(--isa-accent-yellow);
color: var(--isa-text-primary);
font-weight: 500;
}
.ui-label__tag-priority-low {
background-color: var(--isa-neutral-200);
color: var(--isa-text-secondary);
font-weight: 400;
}
/* Priority-specific styles for Notices */
.ui-label__notice-priority-high {
border-left: 4px solid var(--isa-accent-red);
background-color: var(--isa-accent-red-light);
padding: 0.5rem 1rem;
}
.ui-label__notice-priority-medium {
border-left: 4px solid var(--isa-accent-yellow);
background-color: var(--isa-accent-yellow-light);
padding: 0.5rem 1rem;
}
.ui-label__notice-priority-low {
border-left: 4px solid var(--isa-neutral-300);
background-color: var(--isa-neutral-100);
padding: 0.5rem 1rem;
}
```
### Custom Styling Example
```scss
// Override specific label styles
.product-card {
ui-label {
border-radius: 4px;
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
// Custom high-priority tag style
.ui-label__tag-priority-high {
animation: pulse 2s infinite;
}
// Custom notice styles
.ui-label__notice {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
```
### Tailwind CSS Integration
The component works seamlessly with Tailwind's design system:
#### Usage
```html
<!-- Using Tailwind utility classes alongside the component -->
<ui-label
[type]="Labeltype.Tag"
[priority]="LabelPriority.High"
class="rounded-full px-3 py-1 text-xs font-semibold">
Featured
</ui-label>
<!-- Basic label -->
<ui-label>Prämie</ui-label>
<!-- Active state (hover/pressed) -->
<ui-label [active]="true">Selected</ui-label>
```
## Testing
#### API
The library uses **Vitest** with **Angular Testing Utilities** for testing.
| Input | Type | Default | Description |
| -------- | --------- | ------- | ------------------------------------ |
| `active` | `boolean` | `false` | Active state (adds background color) |
### Running Tests
### PrioLabelComponent
```bash
# Run tests for this library
npx nx test label --skip-nx-cache
A priority indicator label with two priority levels.
# Run tests with coverage
npx nx test label --code-coverage --skip-nx-cache
**Figma:** [ISA Design System - Prio Label](https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev)
# Run tests in watch mode
npx nx test label --watch
#### 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>
```
### Test Structure
#### API
The library includes comprehensive unit tests covering:
| Input | Type | Default | Description |
| ---------- | -------- | ------- | ----------------------------------- |
| `priority` | `1 \| 2` | `1` | Priority level (1 = high, 2 = low ) |
- **Type input** - Validates correct CSS class generation for each type
- **Priority input** - Validates correct CSS class generation for each priority
- **Default values** - Tests default type and priority behavior
- **Content projection** - Tests ng-content rendering
- **Signal reactivity** - Tests computed class updates when inputs change
- **Class composition** - Tests correct combination of base, type, and priority classes
## CSS Classes
### Example Test
### 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
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { describe, it, expect, beforeEach } from 'vitest';
import { LabelComponent, Labeltype, LabelPriority } from './label.component';
// Select all labels
page.locator('[data-what="label"]');
describe('LabelComponent', () => {
let component: LabelComponent;
let fixture: ComponentFixture<LabelComponent>;
// Select all priority labels
page.locator('[data-what="prio-label"]');
beforeEach(() => {
TestBed.configureTestingModule({
imports: [LabelComponent]
});
fixture = TestBed.createComponent(LabelComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have default type as Tag', () => {
expect(component.type()).toBe(Labeltype.Tag);
});
it('should have default priority as High', () => {
expect(component.priority()).toBe(LabelPriority.High);
});
it('should generate correct type class for Tag', () => {
fixture.componentRef.setInput('type', Labeltype.Tag);
expect(component.typeClass()).toBe('ui-label__tag');
});
it('should generate correct priority class', () => {
fixture.componentRef.setInput('type', Labeltype.Tag);
fixture.componentRef.setInput('priority', LabelPriority.Medium);
expect(component.priorityClass()).toBe('ui-label__tag-priority-medium');
});
it('should apply all classes to host element', () => {
fixture.componentRef.setInput('type', Labeltype.Notice);
fixture.componentRef.setInput('priority', LabelPriority.Low);
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
expect(element.classList.contains('ui-label')).toBe(true);
expect(element.classList.contains('ui-label__notice')).toBe(true);
expect(element.classList.contains('ui-label__notice-priority-low')).toBe(true);
});
});
// Select specific priority
page.locator('[data-what="prio-label"][data-which="priority-1"]');
```
## Architecture Notes
### Current Architecture
The library follows Angular standalone component architecture:
```
LabelComponent (Standalone)
├── Signal Inputs
│ ├── type: Signal<Labeltype>
│ └── priority: Signal<LabelPriority>
├── Computed Signals
│ ├── typeClass(): string
│ └── priorityClass(): string
└── Host Binding
└── [class]: computed classes array
```
### Design Decisions
#### 1. Standalone Component Architecture
**Decision**: Use standalone component instead of NgModule
**Rationale**:
- Aligns with Angular 20.1.2 best practices
- Reduces boilerplate and complexity
- Improves tree-shaking and bundle optimization
- Enables explicit, localized imports
**Impact**: Simpler consumption in feature modules
#### 2. Signal-Based Reactivity
**Decision**: Use `input()` and `computed()` signals instead of traditional inputs
**Rationale**:
- Modern Angular reactivity model
- Automatic dependency tracking
- Better performance with change detection
- Type-safe reactive transformations
**Impact**: Efficient CSS class updates without manual change detection
#### 3. ViewEncapsulation.None
**Decision**: Use ViewEncapsulation.None instead of Emulated or ShadowDOM
**Rationale**:
- Enables global styling through BEM-like class naming
- Consistent with ISA design system approach
- Easier integration with Tailwind CSS
- Flexible theming capabilities
**Impact**: Requires careful CSS class naming to avoid conflicts
#### 4. OnPush Change Detection
**Decision**: Use OnPush change detection strategy
**Rationale**:
- Optimal performance with signal-based inputs
- Reduces unnecessary change detection cycles
- Signals automatically trigger required updates
- Best practice for presentational components
**Impact**: Better performance, especially in large lists
#### 5. TypeScript Const Assertions for Enums
**Decision**: Use const objects with type inference instead of traditional enums
**Rationale**:
- Better type safety with literal types
- Improved autocomplete in IDEs
- Smaller JavaScript bundle size
- More flexible than traditional TypeScript enums
**Impact**: Type-safe API with minimal runtime overhead
### Performance Considerations
1. **Signal-based inputs** - Only recompute classes when inputs actually change
2. **OnPush change detection** - Minimal change detection overhead
3. **Computed signals** - Efficient memoization of class strings
4. **No template logic** - All computation in component class
5. **Lightweight DOM** - Simple ng-content projection with no wrapper elements
### Future Enhancements
Potential improvements identified:
1. **Icon Support** - Add optional icon input for visual enhancement
2. **Dismissible Labels** - Add optional close button with output event
3. **Animation Support** - Add entry/exit animations for dynamic labels
4. **Theme Variants** - Support custom color themes via injection tokens
5. **Size Variants** - Add size input (small, medium, large)
6. **Accessibility Improvements** - Add ARIA attributes for screen readers
7. **Tooltip Integration** - Built-in tooltip support for truncated content
## Dependencies
### Required Libraries
- `@angular/core` - Angular framework (20.1.2)
- `@angular/common` - CommonModule for basic directives
### Optional Libraries
None - this is a pure presentation component with no external dependencies.
### Path Alias
Import from: `@isa/ui/label`
## License
Internal ISA Frontend library - not for external distribution.

4
libs/ui/label/eslint.config.cjs
View File

@@ -12,7 +12,7 @@ module.exports = [
'error',
{
type: 'attribute',
prefix: 'lib',
prefix: 'ui',
style: 'camelCase',
},
],
@@ -20,7 +20,7 @@ module.exports = [
'error',
{
type: 'element',
prefix: 'lib',
prefix: 'ui',
style: 'kebab-case',
},
],

58
libs/ui/label/project.json
View File

@@ -1,30 +1,28 @@
{
"name": "label",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/ui/label/src",
"prefix": "lib",
"projectType": "library",
"tags": [],
"targets": {
"test": {
"executor": "@nx/vite:test",
"outputs": [
"{options.reportsDirectory}"
],
"options": {
"reportsDirectory": "../../../coverage/libs/ui/label"
},
"configurations": {
"ci": {
"mode": "run",
"coverage": {
"enabled": true
}
}
}
},
"lint": {
"executor": "@nx/eslint:lint"
}
}
}
{
"name": "ui-label",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/ui/label/src",
"prefix": "ui",
"projectType": "library",
"tags": [],
"targets": {
"test": {
"executor": "@nx/vite:test",
"outputs": ["{options.reportsDirectory}"],
"options": {
"reportsDirectory": "../../../coverage/libs/ui/label"
},
"configurations": {
"ci": {
"mode": "run",
"coverage": {
"enabled": true
}
}
}
},
"lint": {
"executor": "@nx/eslint:lint"
}
}
}

2
libs/ui/label/src/index.ts
View File

@@ -1,2 +1,2 @@
export * from './lib/label.component';
export * from './lib/types';
export * from './lib/prio-label.component';

1
libs/ui/label/src/label.scss
View File

@@ -1 +1,2 @@
@use "lib/label";
@use "lib/prio-label";

29
libs/ui/label/src/lib/_label.scss
View File

@@ -1,31 +1,8 @@
.ui-label {
@apply flex items-center justify-center text-ellipsis whitespace-nowrap;
@apply bg-isa-white px-3 py-[0.125rem] min-w-16 rounded-[3.125rem] isa-text-caption-regular text-isa-neutral-900 border border-solid border-isa-neutral-900;
}
.ui-label__tag {
@apply px-3 py-[0.125rem] min-w-14 rounded-[3.125rem] isa-text-caption-regular;
}
.ui-label__tag-priority-high {
@apply bg-isa-neutral-700 text-isa-neutral-400;
}
.ui-label__tag-priority-low {
@apply bg-isa-neutral-300 text-isa-neutral-600;
}
.ui-label__notice {
@apply p-2 min-w-48 rounded-lg isa-text-body-2-bold text-isa-neutral-900;
}
.ui-label__notice-priority-high {
@apply bg-isa-secondary-100;
}
.ui-label__notice-priority-medium {
@apply bg-isa-neutral-100;
}
.ui-label__notice-priority-low {
@apply bg-transparent;
.ui-label--active {
@apply bg-isa-neutral-200;
}

12
libs/ui/label/src/lib/_prio-label.scss Normal file
View File

@@ -0,0 +1,12 @@
.ui-prio-label {
@apply flex items-center justify-center text-ellipsis whitespace-nowrap;
@apply px-3 py-[0.125rem] min-w-14 rounded-[3.125rem] isa-text-caption-regular;
}
.ui-prio-label--1 {
@apply bg-isa-neutral-700 text-isa-neutral-400;
}
.ui-prio-label--2 {
@apply bg-isa-neutral-300 text-isa-neutral-600;
}

195
libs/ui/label/src/lib/label.component.spec.ts
View File

@@ -1,7 +1,6 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LabelComponent } from './label.component';
import { LabelPriority, Labeltype } from './types';
describe('LabelComponent', () => {
let component: LabelComponent;
@@ -22,127 +21,47 @@ describe('LabelComponent', () => {
expect(component).toBeTruthy();
});
it('should have default type as tag', () => {
expect(component.type()).toBe(Labeltype.Tag);
it('should have default active as false', () => {
expect(component.active()).toBe(false);
});
it('should have default priority as high', () => {
expect(component.priority()).toBe(LabelPriority.High);
});
it('should accept notice type', () => {
fixture.componentRef.setInput('type', Labeltype.Notice);
it('should accept active input', () => {
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
expect(component.type()).toBe(Labeltype.Notice);
expect(component.active()).toBe(true);
});
it('should accept different priority levels', () => {
fixture.componentRef.setInput('priority', LabelPriority.Medium);
fixture.detectChanges();
expect(component.priority()).toBe(LabelPriority.Medium);
fixture.componentRef.setInput('priority', LabelPriority.Low);
fixture.detectChanges();
expect(component.priority()).toBe(LabelPriority.Low);
it('should return null for activeClass when not active', () => {
expect(component.activeClass()).toBeNull();
});
it('should have correct CSS classes for default type and priority', () => {
expect(component.typeClass()).toBe('ui-label__tag');
expect(component.priorityClass()).toBe('ui-label__tag-priority-high');
});
it('should have correct CSS classes for notice type', () => {
fixture.componentRef.setInput('type', Labeltype.Notice);
it('should return active class when active is true', () => {
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
expect(component.typeClass()).toBe('ui-label__notice');
expect(component.priorityClass()).toBe('ui-label__notice-priority-high');
});
it('should have correct CSS classes for different priorities', () => {
fixture.componentRef.setInput('priority', LabelPriority.Medium);
fixture.detectChanges();
expect(component.priorityClass()).toBe('ui-label__tag-priority-medium');
fixture.componentRef.setInput('priority', LabelPriority.Low);
fixture.detectChanges();
expect(component.priorityClass()).toBe('ui-label__tag-priority-low');
});
it('should set host classes correctly', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-label')).toBe(true);
expect(hostElement.classList.contains('ui-label__tag')).toBe(true);
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(true);
expect(component.activeClass()).toBe('ui-label--active');
});
});
describe('Template Rendering', () => {
it('should display content with default type and priority classes', () => {
const labelElement = fixture.debugElement.nativeElement;
expect(labelElement.classList.contains('ui-label')).toBe(true);
expect(labelElement.classList.contains('ui-label__tag')).toBe(true);
expect(
labelElement.classList.contains('ui-label__tag-priority-high'),
).toBe(true);
it('should display content with default classes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-label')).toBe(true);
});
it('should display content with notice type', () => {
fixture.componentRef.setInput('type', Labeltype.Notice);
it('should display active class when active is true', () => {
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const labelElement = fixture.debugElement.nativeElement;
expect(labelElement.classList.contains('ui-label')).toBe(true);
expect(labelElement.classList.contains('ui-label__notice')).toBe(true);
expect(
labelElement.classList.contains('ui-label__notice-priority-high'),
).toBe(true);
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-label--active')).toBe(true);
});
it('should display content with different priority levels', () => {
fixture.componentRef.setInput('priority', LabelPriority.Low);
it('should not display active class when active is false', () => {
fixture.componentRef.setInput('active', false);
fixture.detectChanges();
const labelElement = fixture.debugElement.nativeElement;
expect(labelElement.classList.contains('ui-label')).toBe(true);
expect(labelElement.classList.contains('ui-label__tag')).toBe(true);
expect(
labelElement.classList.contains('ui-label__tag-priority-low'),
).toBe(true);
});
});
describe('Input Validation', () => {
it('should handle type input changes', () => {
fixture.componentRef.setInput('type', Labeltype.Tag);
fixture.detectChanges();
expect(component.type()).toBe(Labeltype.Tag);
expect(component.typeClass()).toBe('ui-label__tag');
expect(component.priorityClass()).toBe('ui-label__tag-priority-high');
fixture.componentRef.setInput('type', Labeltype.Notice);
fixture.detectChanges();
expect(component.type()).toBe(Labeltype.Notice);
expect(component.typeClass()).toBe('ui-label__notice');
expect(component.priorityClass()).toBe('ui-label__notice-priority-high');
});
it('should handle priority input changes', () => {
fixture.componentRef.setInput('priority', LabelPriority.High);
fixture.detectChanges();
expect(component.priority()).toBe(LabelPriority.High);
expect(component.priorityClass()).toBe('ui-label__tag-priority-high');
fixture.componentRef.setInput('priority', LabelPriority.Medium);
fixture.detectChanges();
expect(component.priority()).toBe(LabelPriority.Medium);
expect(component.priorityClass()).toBe('ui-label__tag-priority-medium');
fixture.componentRef.setInput('priority', LabelPriority.Low);
fixture.detectChanges();
expect(component.priority()).toBe(LabelPriority.Low);
expect(component.priorityClass()).toBe('ui-label__tag-priority-low');
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-label--active')).toBe(false);
});
});
@@ -150,72 +69,36 @@ describe('LabelComponent', () => {
it('should have proper host class binding', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-label')).toBe(true);
expect(hostElement.classList.length).toBeGreaterThan(0);
});
it('should update classes when type changes', () => {
it('should have E2E testing attributes', () => {
const hostElement = fixture.debugElement.nativeElement;
// Initial state
expect(hostElement.classList.contains('ui-label__tag')).toBe(true);
expect(hostElement.classList.contains('ui-label__notice')).toBe(false);
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(true);
// Change to notice
fixture.componentRef.setInput('type', Labeltype.Notice);
fixture.detectChanges();
expect(hostElement.classList.contains('ui-label__tag')).toBe(false);
expect(hostElement.classList.contains('ui-label__notice')).toBe(true);
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(false);
expect(
hostElement.classList.contains('ui-label__notice-priority-high'),
).toBe(true);
expect(hostElement.getAttribute('data-what')).toBe('label');
expect(hostElement.getAttribute('data-which')).toBe('label');
});
it('should update classes when priority changes', () => {
it('should have accessibility role', () => {
const hostElement = fixture.debugElement.nativeElement;
// Initial state
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(true);
expect(
hostElement.classList.contains('ui-label__tag-priority-medium'),
).toBe(false);
// Change to medium priority
fixture.componentRef.setInput('priority', LabelPriority.Medium);
fixture.detectChanges();
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(false);
expect(
hostElement.classList.contains('ui-label__tag-priority-medium'),
).toBe(true);
expect(hostElement.getAttribute('role')).toBe('status');
});
it('should maintain both type and priority classes simultaneously', () => {
it('should update classes when active changes', () => {
const hostElement = fixture.debugElement.nativeElement;
fixture.componentRef.setInput('type', Labeltype.Notice);
fixture.componentRef.setInput('priority', LabelPriority.Low);
// Initial state (not active)
expect(hostElement.classList.contains('ui-label--active')).toBe(false);
// Change to active
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
expect(hostElement.classList.contains('ui-label')).toBe(true);
expect(hostElement.classList.contains('ui-label__notice')).toBe(true);
expect(
hostElement.classList.contains('ui-label__notice-priority-low'),
).toBe(true);
expect(hostElement.classList.contains('ui-label__tag')).toBe(false);
expect(
hostElement.classList.contains('ui-label__tag-priority-high'),
).toBe(false);
expect(hostElement.classList.contains('ui-label--active')).toBe(true);
// Change back to not active
fixture.componentRef.setInput('active', false);
fixture.detectChanges();
expect(hostElement.classList.contains('ui-label--active')).toBe(false);
});
});
});

36
libs/ui/label/src/lib/label.component.ts
View File

@@ -5,35 +5,35 @@ import {
input,
ViewEncapsulation,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { LabelPriority, Labeltype } from './types';
/**
* A component that displays a label with a specific type and priority.
* The label can be used to indicate tags or notices with different priorities.
* A component that displays a label badge.
* Used for tags, filters, and reward indicators.
*
* @example
* ```html
* <ui-label>Prämie</ui-label>
* <ui-label [active]="isSelected">Selected</ui-label>
* ```
*
* @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2806-8052&m=dev
*/
@Component({
selector: 'ui-label',
imports: [CommonModule],
templateUrl: './label.component.html',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': '["ui-label", typeClass(), priorityClass()]',
'[class]': '["ui-label", activeClass()]',
'data-what': 'label',
'data-which': 'label',
'role': 'status',
},
})
export class LabelComponent {
/** The type of the label. */
type = input<Labeltype>(Labeltype.Tag);
/** Whether the label is active (hover/pressed state). */
active = input<boolean>(false);
/** A computed CSS class based on the current type. */
typeClass = computed(() => `ui-label__${this.type()}`);
/** The priority of the label. */
priority = input<LabelPriority>(LabelPriority.High);
/** A computed CSS class based on the current priority and typeClass. */
priorityClass = computed(
() => `${this.typeClass()}-priority-${this.priority()}`,
);
/** A computed CSS class for the active state of the label. */
activeClass = computed(() => (this.active() ? 'ui-label--active' : null));
}

102
libs/ui/label/src/lib/prio-label.component.spec.ts Normal file
View File

@@ -0,0 +1,102 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PrioLabelComponent } from './prio-label.component';
describe('PrioLabelComponent', () => {
let component: PrioLabelComponent;
let fixture: ComponentFixture<PrioLabelComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PrioLabelComponent],
}).compileComponents();
fixture = TestBed.createComponent(PrioLabelComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
describe('Component Setup and Initialization', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have default priority as 1', () => {
expect(component.priority()).toBe(1);
});
it('should accept priority 2', () => {
fixture.componentRef.setInput('priority', 2);
fixture.detectChanges();
expect(component.priority()).toBe(2);
});
it('should have correct CSS class for priority 1', () => {
expect(component.priorityClass()).toBe('ui-prio-label--1');
});
it('should have correct CSS class for priority 2', () => {
fixture.componentRef.setInput('priority', 2);
fixture.detectChanges();
expect(component.priorityClass()).toBe('ui-prio-label--2');
});
});
describe('Template Rendering', () => {
it('should display content with priority 1 classes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true);
});
it('should display content with priority 2 classes', () => {
fixture.componentRef.setInput('priority', 2);
fixture.detectChanges();
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true);
});
it('should update classes when priority changes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-prio-label--1')).toBe(true);
expect(hostElement.classList.contains('ui-prio-label--2')).toBe(false);
fixture.componentRef.setInput('priority', 2);
fixture.detectChanges();
expect(hostElement.classList.contains('ui-prio-label--1')).toBe(false);
expect(hostElement.classList.contains('ui-prio-label--2')).toBe(true);
});
});
describe('Component Structure', () => {
it('should have proper host class binding', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-prio-label')).toBe(true);
});
it('should have E2E testing attributes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('data-what')).toBe('prio-label');
expect(hostElement.getAttribute('data-which')).toBe('priority-1');
});
it('should have correct data-which for different priorities', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('data-which')).toBe('priority-1');
fixture.componentRef.setInput('priority', 2);
fixture.detectChanges();
expect(hostElement.getAttribute('data-which')).toBe('priority-2');
});
it('should have accessibility role', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('role')).toBe('status');
});
});
});

39
libs/ui/label/src/lib/prio-label.component.ts Normal file
View File

@@ -0,0 +1,39 @@
import {
ChangeDetectionStrategy,
Component,
computed,
input,
ViewEncapsulation,
} from '@angular/core';
/**
* Priority label component for displaying priority indicators.
* Supports priority levels 1 (high) and 2 (low) with custom text content.
*
* @example
* ```html
* <ui-prio-label [priority]="1">Pflicht</ui-prio-label>
* <ui-prio-label [priority]="2">Prio 2</ui-prio-label>
* ```
*
* @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=682-2836&m=dev
*/
@Component({
selector: 'ui-prio-label',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': '["ui-prio-label", priorityClass()]',
'data-what': 'prio-label',
'[attr.data-which]': '"priority-" + priority()',
'role': 'status',
},
})
export class PrioLabelComponent {
/** The priority level of the label (1 = high, 2 = low). */
priority = input<1 | 2>(1);
/** A computed CSS class based on the current priority. */
priorityClass = computed(() => `ui-prio-label--${this.priority()}`);
}

14
libs/ui/label/src/lib/types.ts
View File

@@ -1,14 +0,0 @@
export const Labeltype = {
Tag: 'tag',
Notice: 'notice',
} as const;
export type Labeltype = (typeof Labeltype)[keyof typeof Labeltype];
export const LabelPriority = {
High: 'high',
Medium: 'medium',
Low: 'low',
} as const;
export type LabelPriority = (typeof LabelPriority)[keyof typeof LabelPriority];

83
libs/ui/notice/README.md Normal file
View File

@@ -0,0 +1,83 @@
# @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"]');
```

34
libs/ui/notice/eslint.config.cjs Normal file
View File

@@ -0,0 +1,34 @@
const nx = require('@nx/eslint-plugin');
const baseConfig = require('../../../eslint.config.js');
module.exports = [
...baseConfig,
...nx.configs['flat/angular'],
...nx.configs['flat/angular-template'],
{
files: ['**/*.ts'],
rules: {
'@angular-eslint/directive-selector': [
'error',
{
type: 'attribute',
prefix: 'ui',
style: 'camelCase',
},
],
'@angular-eslint/component-selector': [
'error',
{
type: 'element',
prefix: 'ui',
style: 'kebab-case',
},
],
},
},
{
files: ['**/*.html'],
// Override or add rules here
rules: {},
},
];

20
libs/ui/notice/project.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "ui-notice",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "libs/ui/notice/src",
"prefix": "ui",
"projectType": "library",
"tags": ["scope:ui", "type:ui"],
"targets": {
"test": {
"executor": "@nx/vite:test",
"outputs": ["{options.reportsDirectory}"],
"options": {
"reportsDirectory": "../../../coverage/libs/ui/notice"
}
},
"lint": {
"executor": "@nx/eslint:lint"
}
}
}

2
libs/ui/notice/src/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './lib/notice/notice.component';
export * from './lib/notice/types';

16
libs/ui/notice/src/lib/notice/_notice.scss Normal file
View File

@@ -0,0 +1,16 @@
.ui-notice {
@apply inline-flex flex-col items-start;
@apply p-2 min-w-48 rounded-lg isa-text-body-2-bold text-isa-neutral-900;
}
.ui-notice--high {
@apply bg-isa-secondary-100;
}
.ui-notice--medium {
@apply bg-isa-neutral-100;
}
.ui-notice--low {
@apply bg-transparent;
}

1
libs/ui/notice/src/lib/notice/notice.component.html Normal file
View File

@@ -0,0 +1 @@
<ng-content></ng-content>

128
libs/ui/notice/src/lib/notice/notice.component.spec.ts Normal file
View File

@@ -0,0 +1,128 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NoticeComponent } from './notice.component';
import { NoticePriority } from './types';
describe('NoticeComponent', () => {
let component: NoticeComponent;
let fixture: ComponentFixture<NoticeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NoticeComponent],
}).compileComponents();
fixture = TestBed.createComponent(NoticeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
describe('Component Setup and Initialization', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have default priority as high', () => {
expect(component.priority()).toBe(NoticePriority.High);
});
it('should accept medium priority', () => {
fixture.componentRef.setInput('priority', NoticePriority.Medium);
fixture.detectChanges();
expect(component.priority()).toBe(NoticePriority.Medium);
});
it('should accept low priority', () => {
fixture.componentRef.setInput('priority', NoticePriority.Low);
fixture.detectChanges();
expect(component.priority()).toBe(NoticePriority.Low);
});
it('should have correct CSS class for high priority', () => {
expect(component.priorityClass()).toBe('ui-notice--high');
});
it('should have correct CSS class for medium priority', () => {
fixture.componentRef.setInput('priority', NoticePriority.Medium);
fixture.detectChanges();
expect(component.priorityClass()).toBe('ui-notice--medium');
});
it('should have correct CSS class for low priority', () => {
fixture.componentRef.setInput('priority', NoticePriority.Low);
fixture.detectChanges();
expect(component.priorityClass()).toBe('ui-notice--low');
});
});
describe('Template Rendering', () => {
it('should display content with high priority classes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-notice')).toBe(true);
expect(hostElement.classList.contains('ui-notice--high')).toBe(true);
});
it('should display content with medium priority classes', () => {
fixture.componentRef.setInput('priority', NoticePriority.Medium);
fixture.detectChanges();
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-notice')).toBe(true);
expect(hostElement.classList.contains('ui-notice--medium')).toBe(true);
});
it('should display content with low priority classes', () => {
fixture.componentRef.setInput('priority', NoticePriority.Low);
fixture.detectChanges();
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-notice')).toBe(true);
expect(hostElement.classList.contains('ui-notice--low')).toBe(true);
});
it('should update classes when priority changes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-notice--high')).toBe(true);
expect(hostElement.classList.contains('ui-notice--medium')).toBe(false);
fixture.componentRef.setInput('priority', NoticePriority.Medium);
fixture.detectChanges();
expect(hostElement.classList.contains('ui-notice--high')).toBe(false);
expect(hostElement.classList.contains('ui-notice--medium')).toBe(true);
});
});
describe('Component Structure', () => {
it('should have proper host class binding', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.classList.contains('ui-notice')).toBe(true);
});
it('should have E2E testing attributes', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('data-what')).toBe('notice');
expect(hostElement.getAttribute('data-which')).toBe('priority-high');
});
it('should have correct data-which for different priorities', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('data-which')).toBe('priority-high');
fixture.componentRef.setInput('priority', NoticePriority.Medium);
fixture.detectChanges();
expect(hostElement.getAttribute('data-which')).toBe('priority-medium');
fixture.componentRef.setInput('priority', NoticePriority.Low);
fixture.detectChanges();
expect(hostElement.getAttribute('data-which')).toBe('priority-low');
});
it('should have accessibility role', () => {
const hostElement = fixture.debugElement.nativeElement;
expect(hostElement.getAttribute('role')).toBe('status');
});
});
});

41
libs/ui/notice/src/lib/notice/notice.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import {
ChangeDetectionStrategy,
Component,
computed,
input,
ViewEncapsulation,
} from '@angular/core';
import { NoticePriority } from './types';
/**
* Notice component for displaying prominent notifications and alerts.
* Supports high, medium, and low priority variants.
*
* @example
* ```html
* <ui-notice>Important message</ui-notice>
* <ui-notice [priority]="NoticePriority.Medium">Secondary message</ui-notice>
* <ui-notice [priority]="NoticePriority.Low">Info message</ui-notice>
* ```
*
* @see https://www.figma.com/design/bK0IW6akzSjHxmMwQfVPRW/ISA-DESIGN-SYSTEM?node-id=2551-4407&m=dev
*/
@Component({
selector: 'ui-notice',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': '["ui-notice", priorityClass()]',
'data-what': 'notice',
'[attr.data-which]': '"priority-" + priority()',
'role': 'status',
},
})
export class NoticeComponent {
/** The priority level of the notice (high, medium, low). */
priority = input<NoticePriority>(NoticePriority.High);
/** A computed CSS class based on the current priority. */
priorityClass = computed(() => `ui-notice--${this.priority()}`);
}

7
libs/ui/notice/src/lib/notice/types.ts Normal file
View File

@@ -0,0 +1,7 @@
export const NoticePriority = {
High: 'high',
Medium: 'medium',
Low: 'low',
} as const;
export type NoticePriority = (typeof NoticePriority)[keyof typeof NoticePriority];

1
libs/ui/notice/src/notice.scss Normal file
View File

@@ -0,0 +1 @@
@use "lib/notice/notice";

13
libs/ui/notice/src/test-setup.ts Normal file
View File

@@ -0,0 +1,13 @@
import '@angular/compiler';
import '@analogjs/vitest-angular/setup-zone';
import {
BrowserTestingModule,
platformBrowserTesting,
} from '@angular/platform-browser/testing';
import { getTestBed } from '@angular/core/testing';
getTestBed().initTestEnvironment(
BrowserTestingModule,
platformBrowserTesting(),
);

30
libs/ui/notice/tsconfig.json Normal file
View File

@@ -0,0 +1,30 @@
{
"extends": "../../../tsconfig.base.json",
"compilerOptions": {
"importHelpers": true,
"moduleResolution": "bundler",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"module": "preserve"
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"typeCheckHostBindings": true,
"strictTemplates": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

27
libs/ui/notice/tsconfig.lib.json Normal file
View File

@@ -0,0 +1,27 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": []
},
"exclude": [
"src/**/*.spec.ts",
"src/test-setup.ts",
"jest.config.ts",
"src/**/*.test.ts",
"vite.config.ts",
"vite.config.mts",
"vitest.config.ts",
"vitest.config.mts",
"src/**/*.test.tsx",
"src/**/*.spec.tsx",
"src/**/*.test.js",
"src/**/*.spec.js",
"src/**/*.test.jsx",
"src/**/*.spec.jsx"
],
"include": ["src/**/*.ts"]
}

29
libs/ui/notice/tsconfig.spec.json Normal file
View File

@@ -0,0 +1,29 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": [
"vitest/globals",
"vitest/importMeta",
"vite/client",
"node",
"vitest"
]
},
"include": [
"vite.config.ts",
"vite.config.mts",
"vitest.config.ts",
"vitest.config.mts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.test.tsx",
"src/**/*.spec.tsx",
"src/**/*.test.js",
"src/**/*.spec.js",
"src/**/*.test.jsx",
"src/**/*.spec.jsx",
"src/**/*.d.ts"
],
"files": ["src/test-setup.ts"]
}

29
libs/ui/notice/vite.config.mts Normal file
View File

@@ -0,0 +1,29 @@
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import angular from '@analogjs/vite-plugin-angular';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
export default
// @ts-expect-error - Vitest reporter tuple types have complex inference issues
defineConfig(() => ({
root: __dirname,
cacheDir: '../../../node_modules/.vite/libs/ui/notice',
plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
test: {
watch: false,
globals: true,
environment: 'jsdom',
include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
setupFiles: ['src/test-setup.ts'],
reporters: [
'default',
['junit', { outputFile: '../../../testresults/junit-ui-notice.xml' }],
],
coverage: {
reportsDirectory: '../../../coverage/libs/ui/notice',
provider: 'v8' as const,
reporter: ['text', 'cobertura'],
},
},
}));