diff --git a/eqlair/src/app/app.scss b/eqlair/src/app/app.scss index 3b0af72..9f8997a 100644 --- a/eqlair/src/app/app.scss +++ b/eqlair/src/app/app.scss @@ -1,9 +1,11 @@ // Styles globaux supplémentaires html, body { + font-family: Barlow, Calibri, SansSerif; height: 80vw; width: 100%; margin: 0; } + main { padding: 100px; width: 80vw; @@ -18,8 +20,56 @@ main { a { cursor: pointer; } + app-main-nav { position: fixed; width: 100vw; z-index: 200; -} \ No newline at end of file +} + +label { + color: var(--Colors-Principal-500, #153451); + + /* AERO Typo/Body/B18/SemiBold */ + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 28px; /* 155.556% */ +} + +textarea { + padding: 10px 16px; + border: solid 1px #A8ACC2; + color: #585E7E; + background: white; + border-radius: 6px; +} + +// forms +select, input { + padding: 10px 16px; + border: solid 1px #A8ACC2; + color: #585E7E; + background: white; + border-radius: 6px; + + /* AERO Typo/Body/B16/Regular */ + font-family: var(--font-family-title, Barlow); + font-size: var(--font-size-body-B16, 16px); + font-style: normal; + font-weight: 400; + line-height: var(--font-line-height-body-B16, 24px); /* 150% */ + letter-spacing: var(--font-tracking-none, 0); + margin-bottom: 14px; + + + + select { + margin-bottom: 14px; + margin-right: 14px; + } +} + +input { + width: 100%; +} diff --git a/eqlair/src/app/pages/home/home.html b/eqlair/src/app/pages/home/home.html index b445a00..6256b56 100644 --- a/eqlair/src/app/pages/home/home.html +++ b/eqlair/src/app/pages/home/home.html @@ -1,68 +1,81 @@
- page d'accueil + - - stepper - - - formulaire -
-

- Saisir vos critères -

- - fiche résumé - + + - - - - - - filtres -
- (optionnels) -
-
-
- - - - - - - - - +

+ Saisir vos critères +

+

+ Saisissez un événement qualité ou poser une question, pour explorer les cas déjà traités. Vous pourrez ainsi + gagner du temps et vous appuyer sur des retours d’expérience concrets. +

+ + + + + +
+ (optionnels) +
+
+
+ + + + + + + + + -
- - +
+ rechercher
- - + +
diff --git a/eqlair/src/app/pages/home/home.scss b/eqlair/src/app/pages/home/home.scss index e69de29..1c268f9 100644 --- a/eqlair/src/app/pages/home/home.scss +++ b/eqlair/src/app/pages/home/home.scss @@ -0,0 +1,6 @@ +:host { + textarea { + margin: 1rem 0; + width: 100%; + } +} diff --git a/eqlair/src/app/pages/home/home.ts b/eqlair/src/app/pages/home/home.ts index 9d8ee2b..ab78719 100644 --- a/eqlair/src/app/pages/home/home.ts +++ b/eqlair/src/app/pages/home/home.ts @@ -3,6 +3,7 @@ import {Component} from '@angular/core'; import {MainButton} from 'sae-lib/buttons/main-button/main-button'; import {WipBlock} from 'sae-lib/layouts/wip-block/wip-block'; import {FormsModule} from '@angular/forms'; +import {Stepper} from 'sae-lib/stepper/stepper'; @Component({ selector: 'app-home', @@ -10,7 +11,8 @@ import {FormsModule} from '@angular/forms'; MainButton, WipBlock, CommonModule, - FormsModule + FormsModule, + Stepper ], templateUrl: './home.html', styleUrl: './home.scss' diff --git a/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.css b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.css new file mode 100644 index 0000000..e69de29 diff --git a/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.html b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.html new file mode 100644 index 0000000..f5ea004 --- /dev/null +++ b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.html @@ -0,0 +1 @@ +

sae-stepper works!

diff --git a/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.spec.ts b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.spec.ts new file mode 100644 index 0000000..f5e3975 --- /dev/null +++ b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SaeStepper } from './sae-stepper'; + +describe('SaeStepper', () => { + let component: SaeStepper; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SaeStepper] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SaeStepper); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts new file mode 100644 index 0000000..4feefa7 --- /dev/null +++ b/my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sae-sae-stepper', + imports: [], + templateUrl: './sae-stepper.html', + styleUrl: './sae-stepper.css' +}) +export class SaeStepper { + +} diff --git a/my-workspace/projects/sae-lib/stepper/stepper.html b/my-workspace/projects/sae-lib/stepper/stepper.html new file mode 100644 index 0000000..b3e2954 --- /dev/null +++ b/my-workspace/projects/sae-lib/stepper/stepper.html @@ -0,0 +1,7 @@ +
+ @for (ii of stepArray; track ii) { +
+ {{ ii }} +
+ } +
diff --git a/my-workspace/projects/sae-lib/stepper/stepper.scss b/my-workspace/projects/sae-lib/stepper/stepper.scss new file mode 100644 index 0000000..11e5ac9 --- /dev/null +++ b/my-workspace/projects/sae-lib/stepper/stepper.scss @@ -0,0 +1,17 @@ +:host { + .step { + border-radius: 1px solid grey; + padding: 1rem; + background: white; + + &.is-active { + color: black; + border-color: blue; + } + + &.is-inactive { + background: grey; + color: white; + } + } +} diff --git a/my-workspace/projects/sae-lib/stepper/stepper.spec.ts b/my-workspace/projects/sae-lib/stepper/stepper.spec.ts new file mode 100644 index 0000000..9224f38 --- /dev/null +++ b/my-workspace/projects/sae-lib/stepper/stepper.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Stepper } from './stepper'; + +describe('Stepper', () => { + let component: Stepper; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Stepper] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Stepper); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/my-workspace/projects/sae-lib/stepper/stepper.ts b/my-workspace/projects/sae-lib/stepper/stepper.ts new file mode 100644 index 0000000..d71d021 --- /dev/null +++ b/my-workspace/projects/sae-lib/stepper/stepper.ts @@ -0,0 +1,30 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {JsonPipe} from '@angular/common'; + +@Component({ + selector: 'sae-stepper', + imports: [ + JsonPipe + ], + templateUrl: './stepper.html', + styleUrl: './stepper.scss' +}) +export class Stepper { + @Input() currentStep: number = 1; + @Input() minStep: number = 1; + @Input() maxStep: number = 3; + @Input() stepArray: Array = [1, 2, 3]; + @Output() changedStep: EventEmitter = new EventEmitter(); + + constructor() { + this.stepArray = [] + for (let ii = this.currentStep; ii < this.maxStep; ii++) { + + this.stepArray.push(ii) + } + } + + onClickStep(newValue: number) { + this.changedStep.emit(newValue) + } +}