EQ: add texts and stepper component

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;
 }
+
+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%;
+}

eqlair/src/app/pages/home/home.html

@@ -1,68 +1,81 @@
 <div id="home">
 
-  page d'accueil
+  <!--  page d'accueil-->
+
+  <!--  stepper-->
+  <sae-stepper [currentStep]="1" [maxStep]="2"></sae-stepper>
 
-  <sae-wip-block>
-    stepper
-  </sae-wip-block>
-  <sae-wip-block>
-    formulaire
-    <br>
   <h2>
     Saisir vos critères
   </h2>
-    <sae-wip-block>
-      fiche résumé
-    </sae-wip-block>
+  <p>
+    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.
+  </p>
+
+  <sae-m-button kind="primary" label="Chercher un EQ" size="medium"></sae-m-button>
+  <sae-m-button kind="secondary" label="Poser une question" size="medium"></sae-m-button>
+  <textarea
+    [(ngModel)]="fromText"
+    cols="30"
+    placeholder="Posez votre question"
+    rows="5"
+  ></textarea>
 
-    <sae-m-button kind="secondary" label="do something"></sae-m-button>
-    <sae-m-button kind="primary" label="do something"></sae-m-button>
-    <textarea [(ngModel)]="fromText"></textarea>
-  </sae-wip-block>
-  <sae-wip-block>
-    filtres
   <div class="optionnal">
     (optionnels)
   </div>
   <br>
   <div class="filter-grid">
-      <select name="a" id="a">
+    <select id="a" name="a">
+      <option disabled selected value="">Select your option</option>
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
-      <select name="a" id="a">
+    <select id="a" name="a">
       <option value="1">1</option>
     </select>
 
 
   </div>
-    <input type="text" name="keywords" [(ngModel)]="keywords">
-  </sae-wip-block>
+  <input
+    [(ngModel)]="keywords"
+    name="keywords"
+    placeholder="Saisir des mots clés pour affiner votre rechrche"
+    type="text">
   <sae-wip-block>
     rechercher
     <br>
-    <sae-m-button kind="secondary" label="réinitialiser" [disabled]="disableSearch"></sae-m-button>
-    <sae-m-button kind="primary" label="Rechercher des cas similaires"  [disabled]="disableSearch"></sae-m-button>
+    <sae-m-button
+      [disabled]="disableSearch"
+      kind="secondary"
+      label="Réinitialiser"
+    ></sae-m-button>
+    <sae-m-button
+      [disabled]="disableSearch"
+      kind="primary"
+      label="Rechercher des cas similaires"
+    ></sae-m-button>
 
   </sae-wip-block>
 </div>

eqlair/src/app/pages/home/home.scss

@@ -0,0 +1,6 @@
+:host {
+  textarea {
+    margin: 1rem 0;
+    width: 100%;
+  }
+}

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'

my-workspace/projects/sae-lib/sae-stepper/sae-stepper.html

@@ -0,0 +1 @@
+<p>sae-stepper works!</p>

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<SaeStepper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SaeStepper]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SaeStepper);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

my-workspace/projects/sae-lib/stepper/stepper.html

@@ -0,0 +1,7 @@
+<div class="stepper">
+  @for (ii of stepArray; track ii) {
+    <div class="step {{ currentStep >= ii ? 'is-active' : 'is-inactive'}}">
+      {{ ii }}
+    </div>
+  }
+</div>

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;
+    }
+  }
+}

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<Stepper>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Stepper]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Stepper);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<number> = [1, 2, 3];
+  @Output() changedStep: EventEmitter<any> = 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)
+  }
+}