feat(ui) [Orientation] - Replace buttons by tags + search bar

src/app/form/form-view/structure-form/structure-name-and-address/structure-name-and-address.component.html

@@ -3,7 +3,7 @@
   <div class="title">
     <h3>Quels sont le nom et l'adresse de cette structure&nbsp;?</h3>
   </div>
-  <div class="formGroup">
+  <div class="formGroup" style="max-width: 300px">
     <app-input
       id="name"
       label="Nom"

src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html

@@ -2,15 +2,13 @@
   <h2>Quel est le besoin numérique de la personne ?</h2>
 
   <div class="btn-grid">
-    <span *ngFor="let module of baseSkills">
-      <app-button
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
-        [disabled]="module.disabled"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="module.name"
-        (action)="handleClick(module)"
-      />
-    </span>
+    <app-v3-tag-item
+      *ngFor="let module of baseSkills"
+      [label]="module.name"
+      [disabled]="module.disabled"
+      [color]="isSelectedModule(module.id) ? 'black' : 'white'"
+      [iconName]="isSelectedModule(module.id) ? 'check' : ''"
+      (action)="handleClick(module)"
+    />
   </div>
 </div>

src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html

 <div class="orientationForm">
-  <h2>De quel matériel a-t-il besoin ?</h2>
+  <h2>Quel matériel la personne a-t-elle besoin d'utiliser ?</h2>
 
   <div class="btn-grid">
-    <span *ngFor="let module of equipmentType">
-      <app-button
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="module.name"
-        (action)="handleClick(module)"
-      />
-    </span>
+    <app-v3-tag-item
+      *ngFor="let module of equipmentType"
+      [label]="module.name"
+      [color]="isSelectedModule(module.id) ? 'black' : 'white'"
+      [iconName]="isSelectedModule(module.id) ? 'check' : ''"
+      (action)="handleClick(module)"
+    />
   </div>
 </div>

src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html

 <div class="orientationForm">
-  <h2>Quel matériel souhaite-t-il acheter à tarif solidaire ?</h2>
+  <h2>Quel matériel la personne souhaite-t-elle acheter à tarif solidaire ?</h2>
 
   <div class="btn-grid">
-    <span *ngFor="let module of equipmentType">
-      <app-button
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="module.name"
-        (action)="handleClick(module)"
-      />
-    </span>
+    <app-v3-tag-item
+      *ngFor="let module of equipmentType"
+      [label]="module.name"
+      [color]="isSelectedModule(module.id) ? 'black' : 'white'"
+      [iconName]="isSelectedModule(module.id) ? 'check' : ''"
+      (action)="handleClick(module)"
+    />
   </div>
 </div>

src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html

 <div class="orientationForm">
   <h2>Quelle démarche en ligne la personne a-t-elle besoin de réaliser ?</h2>
-  <div class="btn-grid btnContainer">
-    <span *ngFor="let module of accompanimentType">
-      <app-button
-        *ngIf="module.id !== 'autres'"
-        [ngClass]="{ selectedChoice: true }"
-        [extraClass]="isSelectedModule(module.id) ? 'selected' : ''"
-        [disabled]="module.disabled"
-        [style]="buttonTypeEnum.CheckButton"
-        [text]="module.name"
-        (action)="handleClick(module)"
-      />
-    </span>
+  <div class="btn-grid">
+    <app-v3-tag-item
+      *ngFor="let module of accompanimentType"
+      [label]="module.name"
+      [disabled]="module.disabled"
+      [color]="isSelectedModule(module.id) ? 'black' : 'white'"
+      [iconName]="isSelectedModule(module.id) ? 'check' : ''"
+      (action)="handleClick(module)"
+    />
   </div>
   <app-v3-modal
     [opened]="showStrangersModal"
     [validateLabel]="'J\'ai compris'"
     [singleButton]="true"
-    [title]="'Attention'"
+    [title]="'ATTENTION'"
     (closed)="handleClose()"
   >
-    <div class="modalContent emphasized">
+    <div class="modalContent">
       Les premières demandes de titres de séjour doivent être redirigées vers les associations spécialisées sur les
       droits des étrangers.
     </div>

src/app/form/orientation-form-view/orientation-structure-list/orientation-structure-address/orientation-structure-address.component.html

@@ -3,10 +3,12 @@
     <h3>Autour de quelle adresse cherchez-vous une structure&nbsp;?</h3>
     <p>Facultatif</p>
   </div>
-  <div class="form-group" fxLayout="column">
-    <div class="addressRow" fxLayout="row" fxLayoutGap="13px">
+  <div class="form-group">
+    <div class="addressRow">
       <app-address-autocomplete
         [form]="form"
+        [wide]="true"
+        [required]="false"
         [address]="form.get('address').valid ? form.get('address').value : null"
         (inputAddress)="setAddressStructure()"
         (selectedAddress)="setAddressStructure($event)"

src/app/shared/components/address-autocomplete/address-autocomplete.component.html

-<div class="search-bar">
-  <app-input
-    id="search-address"
-    label="Adresse"
-    placeholder="Exemple : 20 rue du lac, Lyon"
-    autocomplete="off"
-    size="large"
-    [status]="form.get('address').invalid ? null : 'success'"
-    [statusText]="form.get('address').invalid ? null : 'Adresse sélectionnée'"
-    [value]="displayedAddress"
-    (valueChange)="onSearchChange($event)"
-  />
-  <div *ngIf="!isAlreadySearching" class="autocomplete-items">
-    <p *ngFor="let hit of data" tabindex="0" (click)="selectedResult(hit)" (keyup.enter)="selectedResult(hit)">
-      {{ hit.displayedName }}
-    </p>
-  </div>
+<app-input
+  id="search-address"
+  label="Adresse"
+  placeholder="Exemple : 20 rue du lac, Lyon"
+  autocomplete="off"
+  size="large"
+  [wide]="wide"
+  [status]="!required || form.get('address').invalid ? null : 'success'"
+  [statusText]="form.get('address').invalid ? null : 'Adresse sélectionnée'"
+  [value]="searchString"
+  (valueChange)="onSearchChange($event)"
+/>
+<div *ngIf="!isAlreadySearching" class="autocomplete-items">
+  <p *ngFor="let hit of data" tabindex="0" (click)="selectedResult(hit)" (keyup.enter)="selectedResult(hit)">
+    {{ hit.displayedName }}
+  </p>
 </div>

src/app/shared/components/address-autocomplete/address-autocomplete.component.ts

@@ -9,16 +9,25 @@ import { AddressService } from '../../service/address.service';
   styleUrls: ['./address-autocomplete.component.scss'],
 })
 export class AddressAutocompleteComponent implements OnInit {
+  /** The form to complete with an 'address' element */
   @Input() form: UntypedFormGroup;
+
+  /** The address object */
   @Input() private address?: Address;
+
+  /** If true, removes the max-width of the component to take 100% width */
+  @Input() wide? = false;
+
+  /** If true, will show a statusText */
+  @Input() required? = true;
+
+  /** Triggers when input changes */
   @Output() selectedAddress = new EventEmitter<Address>();
   @Output() inputAddress = new EventEmitter<any>();
 
-  public readonly AUTOCOMPLETE_NBR = 5;
   public data = [];
   public isAlreadySearching = false;
-  public displayedAddress: string;
-  private searchString: string;
+  public searchString: string;
 
   constructor(private addressService: AddressService) {}
 
@@ -34,7 +43,7 @@ export class AddressAutocompleteComponent implements OnInit {
       } else {
         address_str = this.address.street + ', ' + this.address.commune;
       }
-      this.displayedAddress = address_str;
+      this.searchString = address_str;
     }
   }
 
@@ -47,7 +56,7 @@ export class AddressAutocompleteComponent implements OnInit {
           el.displayedName = this.parseHitToAddress(el);
           return el;
         });
-        // Filtering duplicate displayed string. This duplication is caused by the API used for gathering addresse info.
+        // Filtering duplicate displayed string. This duplication is caused by the API used for gathering addresses info.
         this.data = [...new Map(data.features.map((item) => [item.displayedName, item])).values()];
         this.isAlreadySearching = false;
 
@@ -73,10 +82,10 @@ export class AddressAutocompleteComponent implements OnInit {
     }
     const value = this.parseHitToAddress(hit);
     // Set input value
-    this.displayedAddress = value;
+    this.searchString = value;
     // Reset autocomplete
     this.data = [];
-    // Emit choosen value
+    // Emit chosen value
     this.selectedAddress.emit(address);
   }
 

src/app/shared/components/v3/search-bar/search-bar.component.scss

@@ -3,8 +3,8 @@
 
 .search-bar {
   display: flex;
-  align-items: center;
   flex-direction: row;
+  align-items: center;
   gap: 0;
 
   input {

src/styles.scss

@@ -188,7 +188,6 @@ form p.notRequired {
 .formView {
   form {
     padding-bottom: 1rem;
-    min-width: 600px;
     @media #{$tablet} {
       min-width: auto;
     }
@@ -397,7 +396,7 @@ button {
 // AUTOCOMPLETE
 
 .autocomplete-items {
-  width: 600px;
+  width: 100%;
   padding-right: 16px;
   border-radius: 8px;
   border: 0.0625rem solid #d4d4d4;