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
This commit is contained in:
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user