feat(frontend): design système - tokens, composants ui et restylage des pages

Centralise les couleurs/rayons/espacements dispersés en dur dans chaque page (login, change-password, dashboard) en tokens CSS partagés, ajoute un petit set de composants standalone réutilisables (ev-button, ev-card, ev-alert, ev-badge) et intègre le logo EnerVision en en-tête des pages ainsi que dans Swagger/ReDoc côté backend. Refs #91
2026-09-17 11:14:02 +02:00
parent 3692d486c6
commit 9c78c6dc38
35 changed files with 724 additions and 288 deletions
@@ -0,0 +1 @@
+<ng-content></ng-content>
@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+:host.ev-alert--success {
+  background: var(--color-success-bg);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+:host.ev-alert--warning {
+  background: var(--color-warning-bg);
+  border-color: var(--color-warning);
+  color: #92400e;
+}
+
+:host.ev-alert--danger {
+  background: var(--color-danger-bg);
+  border-color: var(--color-danger-border);
+  color: var(--color-danger);
+}
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Alert } from './alert';
+
+@Component({
+  standalone: true,
+  imports: [Alert],
+  template: `<ev-alert severity="success">C'est fait</ev-alert>`,
+})
+class AlertHost {}
+
+describe('Alert', () => {
+  it('applique la classe danger par défaut', async () => {
+    await TestBed.configureTestingModule({ imports: [Alert] }).compileComponents();
+    const fixture = TestBed.createComponent(Alert);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.classList).toContain('ev-alert--danger');
+  });
+
+  it('applique la sévérité demandée et projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [AlertHost] }).compileComponents();
+    const fixture = TestBed.createComponent(AlertHost);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement.querySelector('.ev-alert');
+    expect(el.classList).toContain('ev-alert--success');
+    expect(el.textContent).toContain("C'est fait");
+  });
+});
@@ -0,0 +1,21 @@
+import { Component, HostBinding, input } from '@angular/core';
+
+export type AlertSeverity = 'success' | 'warning' | 'danger';
+
+@Component({
+  selector: 'ev-alert',
+  standalone: true,
+  templateUrl: './alert.html',
+  styleUrl: './alert.scss',
+})
+export class Alert {
+  severity = input<AlertSeverity>('danger');
+
+  @HostBinding('class')
+  get hostClass(): string {
+    return `ev-alert ev-alert--${this.severity()}`;
+  }
+
+  @HostBinding('attr.role')
+  readonly role = 'alert';
+}
@@ -0,0 +1,3 @@
+<span class="ev-badge" [class]="'ev-badge--' + tone()">
+  <ng-content></ng-content>
+</span>
@@ -0,0 +1,27 @@
+.ev-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--radius-pill);
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.ev-badge--success {
+  background: var(--color-success);
+}
+
+.ev-badge--warning {
+  background: var(--color-warning);
+}
+
+.ev-badge--danger {
+  background: var(--color-danger);
+}
+
+.ev-badge--neutral {
+  background: var(--color-text-muted);
+}
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Badge } from './badge';
+
+@Component({
+  standalone: true,
+  imports: [Badge],
+  template: `<ev-badge tone="danger">critique</ev-badge>`,
+})
+class BadgeHost {}
+
+describe('Badge', () => {
+  it('applique le ton neutral par défaut', async () => {
+    await TestBed.configureTestingModule({ imports: [Badge] }).compileComponents();
+    const fixture = TestBed.createComponent(Badge);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.ev-badge').classList).toContain('ev-badge--neutral');
+  });
+
+  it('applique le ton demandé et projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [BadgeHost] }).compileComponents();
+    const fixture = TestBed.createComponent(BadgeHost);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement.querySelector('.ev-badge');
+    expect(el.classList).toContain('ev-badge--danger');
+    expect(el.textContent).toContain('critique');
+  });
+});
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+export type BadgeTone = 'success' | 'warning' | 'danger' | 'neutral';
+
+@Component({
+  selector: 'ev-badge',
+  standalone: true,
+  templateUrl: './badge.html',
+  styleUrl: './badge.scss',
+})
+export class Badge {
+  tone = input<BadgeTone>('neutral');
+}
@@ -0,0 +1,3 @@
+<button [type]="type()" class="ev-button" [class]="'ev-button--' + variant()" [disabled]="disabled()">
+  <ng-content></ng-content>
+</button>
@@ -0,0 +1,51 @@
+.ev-button {
+  width: 100%;
+  padding: 0.7rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: var(--font-family);
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+.ev-button--primary {
+  background: var(--color-primary);
+  color: #fff;
+
+  &:disabled {
+    background: var(--color-disabled);
+  }
+
+  &:not(:disabled):hover {
+    background: var(--color-primary-hover);
+  }
+}
+
+.ev-button--secondary {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-label);
+
+  &:not(:disabled):hover {
+    background: var(--color-bg);
+  }
+}
+
+.ev-button--danger {
+  background: var(--color-danger);
+  color: #fff;
+
+  &:disabled {
+    background: var(--color-disabled);
+  }
+
+  &:not(:disabled):hover {
+    background: #b91c1c;
+  }
+}
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Button } from './button';
+
+@Component({
+  standalone: true,
+  imports: [Button],
+  template: `<ev-button>Valider</ev-button>`,
+})
+class ButtonHost {}
+
+describe('Button', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Button] }).compileComponents();
+  });
+
+  it('applique la classe de la variante primary par défaut', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('ev-button--primary');
+  });
+
+  it('applique la classe de la variante demandée', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.componentRef.setInput('variant', 'danger');
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('ev-button--danger');
+  });
+
+  it('désactive le bouton natif quand disabled est vrai', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.disabled).toBe(true);
+  });
+
+  it('projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [ButtonHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ButtonHost);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button').textContent).toContain('Valider');
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+
+@Component({
+  selector: 'ev-button',
+  standalone: true,
+  templateUrl: './button.html',
+  styleUrl: './button.scss',
+})
+export class Button {
+  variant = input<ButtonVariant>('primary');
+  type = input<'button' | 'submit'>('button');
+  disabled = input(false);
+}
@@ -0,0 +1 @@
+<ng-content></ng-content>
@@ -0,0 +1,10 @@
+:host {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-card);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Card } from './card';
+
+@Component({
+  standalone: true,
+  imports: [Card],
+  template: `<ev-card><p>Contenu</p></ev-card>`,
+})
+class CardHost {}
+
+describe('Card', () => {
+  it('projette son contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [CardHost] }).compileComponents();
+    const fixture = TestBed.createComponent(CardHost);
+    fixture.detectChanges();
+
+    const card = fixture.nativeElement.querySelector('ev-card');
+    expect(card).toBeTruthy();
+    expect(card.textContent).toContain('Contenu');
+  });
+});
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ev-card',
+  standalone: true,
+  templateUrl: './card.html',
+  styleUrl: './card.scss',
+})
+export class Card {}