From 4c7962dd28e105f5f0ba232e5d75c3225fe8c19e Mon Sep 17 00:00:00 2001 From: Etienne LOUPIAS <eloupias@grandlyon.com> Date: Wed, 14 Feb 2024 11:44:50 +0100 Subject: [PATCH] refactor: remove v3 in components names --- .../manage-employers.component.html | 8 +- .../manage-jobs/manage-jobs.component.html | 12 +- .../manage-users/manage-users.component.html | 24 +- .../components/nav-bar/nav-bar.component.html | 18 +- .../annuaire-header.component.html | 6 +- .../annuaire-header.component.ts | 2 - .../filter-modal/filter-modal.component.html | 6 +- .../result-list/result-list.component.html | 8 +- src/app/carto/carto.component.html | 2 +- src/app/contact/contact.component.html | 4 +- .../footer-form/footer-form.component.html | 6 +- .../form/form-view/form-view.component.html | 4 +- .../information-step.component.html | 10 +- .../profile-job-selection.component.html | 2 +- .../profile-structure-choice.component.html | 4 +- ...gital-helping-accompaniment.component.html | 2 +- ...digital-helping-accompaniment.component.ts | 3 - .../structure-equipments.component.html | 8 +- ...structure-public-target-other.component.ts | 3 - .../structure-public-target.component.html | 8 +- .../structure-public-target.component.ts | 3 - ...ructure-solidarity-material.component.html | 2 +- ...structure-solidarity-material.component.ts | 3 - .../base-skills-choice.component.html | 2 +- .../equipment-access-choice.component.html | 2 +- .../equipment-buy-type.component.html | 2 +- .../navigation/navigation.component.html | 8 +- .../select/select.component.ts | 2 - .../online-demarch.component.html | 6 +- .../online-demarch.component.ts | 2 - .../orientation-form-view.component.html | 8 +- src/app/header/header.component.html | 8 +- src/app/login/login.component.html | 8 +- .../newsletter-subscription.component.html | 4 +- .../post-card/post-card.component.html | 2 +- .../post-details/post-details.component.html | 4 +- .../post-header/post-header.component.html | 2 +- .../post-list/post-list.component.html | 2 +- .../post-publish/post-publish.component.html | 4 +- src/app/profile/edit/edit.component.html | 30 +- src/app/profile/edit/edit.component.ts | 2 - .../personal-offer-edition.component.html | 12 +- .../personal-offer.component.html | 4 +- .../profile-structure.component.html | 18 +- .../profile-structure.component.scss | 8 - .../profile-structure.component.ts | 2 +- src/app/profile/profile.component.html | 14 +- .../structure-add-member-modal.component.html | 4 +- .../structure-edition-summary.component.html | 114 +++--- ...tructure-members-management.component.html | 14 +- .../structures-management.component.html | 20 +- .../reset-password.component.html | 4 +- .../accompaniment-picker.component.html | 2 +- .../accompaniment-picker.component.ts | 2 - .../{v3 => }/button/Button.stories.ts | 10 +- .../components/button/button.component.html | 323 +-------------- .../components/button/button.component.scss | 369 +++++++----------- .../components/button/button.component.ts | 63 ++- .../components/button/buttonType.enum.ts | 17 - .../button/icon-button/IconButton.stories.ts | 10 +- .../icon-button/icon-button.component.html | 0 .../icon-button/icon-button.component.ts | 10 +- .../checkbox-form.component.html | 2 +- .../checkbox-form/checkbox-form.stories.ts | 4 +- .../{v3 => }/checkbox/check-grey.svg | 0 .../components/{v3 => }/checkbox/check.svg | 0 .../{v3 => }/checkbox/checkbox.component.html | 0 .../{v3 => }/checkbox/checkbox.component.scss | 0 .../{v3 => }/checkbox/checkbox.component.ts | 4 +- .../{v3 => }/checkbox/checkbox.stories.ts | 10 +- .../{v3 => }/checkbox/indeterminate-grey.svg | 0 .../{v3 => }/checkbox/indeterminate.svg | 0 .../collapse-content.component.ts | 0 .../collapse-header.component.scss | 0 .../collapse-header.component.ts | 0 .../{v3 => }/collapse/collapse.component.scss | 0 .../{v3 => }/collapse/collapse.component.ts | 0 .../{v3 => }/collapse/collapse.stories.ts | 2 +- .../{v3 => }/collapse/collapse.type.ts | 0 .../data-share-consent.component.html | 4 +- .../components/go-back/go-back.component.ts | 2 +- .../hour-picker/hour-picker.component.html | 4 +- src/app/shared/components/index.ts | 56 ++- .../{v3 => }/input/input.component.html | 0 .../{v3 => }/input/input.component.scss | 0 .../{v3 => }/input/input.component.ts | 2 +- .../{v3 => }/input/input.stories.ts | 8 +- .../label-checkbox.component.html | 2 +- .../label-checkbox.component.scss | 0 .../label-checkbox.component.ts | 4 +- .../label-checkbox/label-checkbox.stories.ts | 14 +- .../{v3 => }/modal/modal.component.html | 4 +- .../{v3 => }/modal/modal.component.scss | 3 - .../{v3 => }/modal/modal.component.ts | 4 +- .../{v3 => }/modal/modal.stories.ts | 20 +- .../password-form.component.html | 4 +- .../radio-option/radio-option.stories.ts | 4 +- .../{v3 => }/radio/radio.component.html | 0 .../{v3 => }/radio/radio.component.scss | 0 .../{v3 => }/radio/radio.component.ts | 2 +- .../{v3 => }/radio/radio.stories.ts | 8 +- .../{v3 => }/scrollbar/scrollbar.stories.ts | 0 .../search-bar/search-bar.component.html | 2 +- .../search-bar/search-bar.component.scss | 2 +- .../search-bar/search-bar.component.ts | 4 +- .../{v3 => }/search-bar/search-bar.stories.ts | 16 +- .../structure-type-picker.component.html | 6 +- .../structure-type-picker.component.ts | 2 - .../{v3 => }/switch/switch.component.html | 0 .../{v3 => }/switch/switch.component.scss | 0 .../{v3 => }/switch/switch.component.ts | 0 .../{v3 => }/switch/switch.stories.ts | 6 +- .../{v3 => }/tag-item/tag-item.component.html | 0 .../{v3 => }/tag-item/tag-item.component.scss | 0 .../{v3 => }/tag-item/tag-item.component.ts | 6 +- .../{v3 => }/tag-item/tag-item.stories.ts | 16 +- .../{v3 => }/textarea/textarea.component.html | 0 .../{v3 => }/textarea/textarea.component.scss | 0 .../{v3 => }/textarea/textarea.component.ts | 2 +- .../{v3 => }/textarea/textarea.stories.ts | 8 +- .../training-type-picker.component.html | 4 +- .../training-type-picker.component.ts | 2 - .../v3/button/button.component.html | 17 - .../v3/button/button.component.scss | 180 --------- .../components/v3/button/button.component.ts | 57 --- .../components/yes-no/yes-no.component.html | 4 +- .../components/yes-no/yes-no.stories.ts | 4 +- src/app/shared/shared.module.ts | 12 +- .../components/card/card.component.html | 10 +- .../more-filters/more-filters.component.html | 10 +- .../structure-details.component.html | 45 +-- .../structure-list-search.component.html | 8 +- .../structure-list-search.component.ts | 3 - .../structure-list.component.html | 4 +- .../structure-join.component.html | 4 +- 135 files changed, 595 insertions(+), 1272 deletions(-) rename src/app/shared/components/{v3 => }/button/Button.stories.ts (88%) delete mode 100644 src/app/shared/components/button/buttonType.enum.ts rename src/app/shared/components/{v3 => }/button/icon-button/IconButton.stories.ts (77%) rename src/app/shared/components/{v3 => }/button/icon-button/icon-button.component.html (100%) rename src/app/shared/components/{v3 => }/button/icon-button/icon-button.component.ts (78%) rename src/app/shared/components/{v3 => }/checkbox/check-grey.svg (100%) rename src/app/shared/components/{v3 => }/checkbox/check.svg (100%) rename src/app/shared/components/{v3 => }/checkbox/checkbox.component.html (100%) rename src/app/shared/components/{v3 => }/checkbox/checkbox.component.scss (100%) rename src/app/shared/components/{v3 => }/checkbox/checkbox.component.ts (90%) rename src/app/shared/components/{v3 => }/checkbox/checkbox.stories.ts (82%) rename src/app/shared/components/{v3 => }/checkbox/indeterminate-grey.svg (100%) rename src/app/shared/components/{v3 => }/checkbox/indeterminate.svg (100%) rename src/app/shared/components/{v3 => }/collapse/collapse-content/collapse-content.component.ts (100%) rename src/app/shared/components/{v3 => }/collapse/collapse-header/collapse-header.component.scss (100%) rename src/app/shared/components/{v3 => }/collapse/collapse-header/collapse-header.component.ts (100%) rename src/app/shared/components/{v3 => }/collapse/collapse.component.scss (100%) rename src/app/shared/components/{v3 => }/collapse/collapse.component.ts (100%) rename src/app/shared/components/{v3 => }/collapse/collapse.stories.ts (97%) rename src/app/shared/components/{v3 => }/collapse/collapse.type.ts (100%) rename src/app/shared/components/{v3 => }/input/input.component.html (100%) rename src/app/shared/components/{v3 => }/input/input.component.scss (100%) rename src/app/shared/components/{v3 => }/input/input.component.ts (97%) rename src/app/shared/components/{v3 => }/input/input.stories.ts (90%) rename src/app/shared/components/{v3 => }/label-checkbox/label-checkbox.component.html (96%) rename src/app/shared/components/{v3 => }/label-checkbox/label-checkbox.component.scss (100%) rename src/app/shared/components/{v3 => }/label-checkbox/label-checkbox.component.ts (91%) rename src/app/shared/components/{v3 => }/label-checkbox/label-checkbox.stories.ts (74%) rename src/app/shared/components/{v3 => }/modal/modal.component.html (95%) rename src/app/shared/components/{v3 => }/modal/modal.component.scss (96%) rename src/app/shared/components/{v3 => }/modal/modal.component.ts (94%) rename src/app/shared/components/{v3 => }/modal/modal.stories.ts (76%) rename src/app/shared/components/{v3 => }/radio/radio.component.html (100%) rename src/app/shared/components/{v3 => }/radio/radio.component.scss (100%) rename src/app/shared/components/{v3 => }/radio/radio.component.ts (96%) rename src/app/shared/components/{v3 => }/radio/radio.stories.ts (85%) rename src/app/shared/components/{v3 => }/scrollbar/scrollbar.stories.ts (100%) rename src/app/shared/components/{v3 => }/search-bar/search-bar.component.html (94%) rename src/app/shared/components/{v3 => }/search-bar/search-bar.component.scss (94%) rename src/app/shared/components/{v3 => }/search-bar/search-bar.component.ts (89%) rename src/app/shared/components/{v3 => }/search-bar/search-bar.stories.ts (55%) rename src/app/shared/components/{v3 => }/switch/switch.component.html (100%) rename src/app/shared/components/{v3 => }/switch/switch.component.scss (100%) rename src/app/shared/components/{v3 => }/switch/switch.component.ts (100%) rename src/app/shared/components/{v3 => }/switch/switch.stories.ts (86%) rename src/app/shared/components/{v3 => }/tag-item/tag-item.component.html (100%) rename src/app/shared/components/{v3 => }/tag-item/tag-item.component.scss (100%) rename src/app/shared/components/{v3 => }/tag-item/tag-item.component.ts (89%) rename src/app/shared/components/{v3 => }/tag-item/tag-item.stories.ts (82%) rename src/app/shared/components/{v3 => }/textarea/textarea.component.html (100%) rename src/app/shared/components/{v3 => }/textarea/textarea.component.scss (100%) rename src/app/shared/components/{v3 => }/textarea/textarea.component.ts (96%) rename src/app/shared/components/{v3 => }/textarea/textarea.stories.ts (87%) delete mode 100644 src/app/shared/components/v3/button/button.component.html delete mode 100644 src/app/shared/components/v3/button/button.component.scss delete mode 100644 src/app/shared/components/v3/button/button.component.ts diff --git a/src/app/admin/components/manage-employers/manage-employers.component.html b/src/app/admin/components/manage-employers/manage-employers.component.html index c39a858e2..31d21f4ab 100644 --- a/src/app/admin/components/manage-employers/manage-employers.component.html +++ b/src/app/admin/components/manage-employers/manage-employers.component.html @@ -44,16 +44,16 @@ </form> </div> -<app-v3-modal +<app-modal *ngIf="employerToDelete" [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteEmployer(employerToDelete, $event)" > Voulez-vous vraiment supprimer l'employeur <b>{{ employerToDelete.name }}</b> ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="mergeOpe.newEmployer" [opened]="mergeEmployerModalOpened" [title]="'ATTENTION'" @@ -61,4 +61,4 @@ > Voulez-vous vraiment fusionner cet employeur avec <b>{{ mergeOpe.newEmployer.name }}</b > ? -</app-v3-modal> +</app-modal> diff --git a/src/app/admin/components/manage-jobs/manage-jobs.component.html b/src/app/admin/components/manage-jobs/manage-jobs.component.html index edd4f9fc4..a155df8b6 100644 --- a/src/app/admin/components/manage-jobs/manage-jobs.component.html +++ b/src/app/admin/components/manage-jobs/manage-jobs.component.html @@ -68,29 +68,29 @@ </form> </div> -<app-v3-modal +<app-modal *ngIf="jobToDelete" [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteJob(jobToDelete, $event)" > Voulez-vous vraiment supprimer la fonction {{ jobToDelete.name }} ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="mergeOpe.newJob" [title]="'ATTENTION'" [opened]="mergeJobModalOpened" (closed)="mergeJob(mergeOpe.newJob._id, mergeOpe.formerId, $event, contextRow)" > Voulez-vous vraiment fusionner cette fonction avec {{ mergeOpe.newJob.name }} ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="jobsGroupToDelete" [title]="'ATTENTION'" [opened]="deleteJobsGroupModalOpened" (closed)="deleteJobsGroup(jobsGroupToDelete, $event)" > Voulez-vous vraiment supprimer le groupe de fonctions {{ jobsGroupToDelete.name }} ? -</app-v3-modal> +</app-modal> diff --git a/src/app/admin/components/manage-users/manage-users.component.html b/src/app/admin/components/manage-users/manage-users.component.html index 11b7be9f0..4549c91f7 100644 --- a/src/app/admin/components/manage-users/manage-users.component.html +++ b/src/app/admin/components/manage-users/manage-users.component.html @@ -25,7 +25,7 @@ <h3 *ngIf="unAttachedUsers" class="title inline"> Utilisateurs non rattachés ({{ unAttachedUsers.length }}) - <app-v3-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('unattached')" /> + <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('unattached')" /> </h3> <ag-grid-angular @@ -44,7 +44,7 @@ <h3 *ngIf="attachedUsers" class="title inline"> Utilisateurs rattachés ({{ attachedUsers.length }}) - <app-v3-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('attached')" /> + <app-button [label]="'Exporter'" [variant]="'tertiary'" [size]="'small'" (click)="exportUsers('attached')" /> </h3> <ag-grid-angular *ngIf="validatedJobs && validatedEmployers" @@ -75,16 +75,16 @@ /> </div> -<app-v3-modal +<app-modal *ngIf="userToDelete" [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteUser(userToDelete, $event)" > Voulez-vous vraiment supprimer l'utilisateur <b>{{ userToDelete.email }}</b> ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="changingJobs && changingJobs[0] !== null" [title]="'ATTENTION'" [opened]="editJobModalOpened" @@ -92,18 +92,18 @@ > Voulez-vous vraiment changer la fonction de cet utilisateur ({{ changingJobs[1].name }}) par {{ changingJobs[0].name }} ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="changingJobs && changingJobs[0] === null" [title]="'ATTENTION'" [opened]="editJobModalOpened" (closed)="editJob(changingJobs[0], changingJobs[1], $event, contextRow)" > Voulez-vous vraiment supprimer la fonction de cet utilisateur ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="changingEmployers && changingEmployers[0] !== null" [title]="'ATTENTION'" [opened]="editEmployerModalOpened" @@ -111,13 +111,13 @@ > Voulez-vous vraiment changer l'employeur de cet utilisateur ({{ changingEmployers[1].name }}) par {{ changingEmployers[0].name }} ? -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="changingEmployers && changingEmployers[0] === null" [title]="'ATTENTION'" [opened]="editEmployerModalOpened" (closed)="editEmployer(changingEmployers[0], changingEmployers[1], $event, contextRow)" > Voulez-vous vraiment supprimer l'employeur de cet utilisateur ? -</app-v3-modal> +</app-modal> diff --git a/src/app/admin/components/nav-bar/nav-bar.component.html b/src/app/admin/components/nav-bar/nav-bar.component.html index 682ffd516..ab692b563 100644 --- a/src/app/admin/components/nav-bar/nav-bar.component.html +++ b/src/app/admin/components/nav-bar/nav-bar.component.html @@ -1,42 +1,42 @@ <header> <h1>Administration</h1> <nav> - <app-v3-button + <app-button [label]="'Revendication structure'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.pendingStructures.link)" /> - <app-v3-button + <app-button [label]="'Liste structures'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.structuresList.link)" /> - <app-v3-button + <app-button [label]="'Structures supprimées'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.deletedStructures.link)" /> - <app-v3-button + <app-button [label]="'Gestion des utilisateurs'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.manageUsers.link)" /> - <app-v3-button [label]="'Fonctions'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.jobsList.link)" /> - <app-v3-button + <app-button [label]="'Fonctions'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.jobsList.link)" /> + <app-button [label]="'Employeurs'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.employersList.link)" /> - <app-v3-button + <app-button [label]="'CNFS Espace Coop'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.espaceCoopCNFS.link)" /> - <app-v3-button + <app-button [label]="'Infos covid'" [variant]="'secondary'" (click)="router.navigateByUrl(routes.lockdownInfo.link)" /> - <app-v3-button [variant]="'tertiary'" [label]="'Ghost'" (click)="openGhost()" /> + <app-button [variant]="'tertiary'" [label]="'Ghost'" (click)="openGhost()" /> </nav> </header> diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.html b/src/app/annuaire/annuaire-header/annuaire-header.component.html index f8c6fd8bf..0511ca325 100644 --- a/src/app/annuaire/annuaire-header/annuaire-header.component.html +++ b/src/app/annuaire/annuaire-header/annuaire-header.component.html @@ -1,6 +1,6 @@ <div class="searchContainer"> <div class="searchBarAndFilters"> - <app-v3-search-bar [(value)]="searchInput" (search)="applyFilter()" /> + <app-search-bar [(value)]="searchInput" (search)="applyFilter()" /> <div class="filters isntPhoneContent" (appClickOutside)="closeModal()"> <app-collapsable-filter [label]="'Fonction'" @@ -27,7 +27,7 @@ </div> <div *ngIf="searchService.checkedFilterList.length" class="filterTags isntPhoneContent"> <div class="title">Filtres :</div> - <app-v3-tag-item + <app-tag-item *ngFor="let filter of searchService.checkedFilterList" [label]="filter" [size]="'small'" @@ -37,7 +37,7 @@ [clickable]="true" (action)="removeFilter(filter)" /> - <app-v3-tag-item + <app-tag-item [label]="'Réinitialiser les filtres'" [size]="'small'" [color]="'white'" diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.ts b/src/app/annuaire/annuaire-header/annuaire-header.component.ts index 201682041..f8178e77c 100644 --- a/src/app/annuaire/annuaire-header/annuaire-header.component.ts +++ b/src/app/annuaire/annuaire-header/annuaire-header.component.ts @@ -1,7 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { forkJoin, lastValueFrom } from 'rxjs'; -import { ButtonType } from '../../shared/components/button/buttonType.enum'; import { SearchService } from '../../structure-list/services/search.service'; import { TypeModal } from '../enums/TypeModal.enum'; import { SearchQuery } from '../models/searchQuery.model'; @@ -18,7 +17,6 @@ export class AnnuaireHeaderComponent implements OnInit, OnChanges { @Output() shouldLoad = new EventEmitter<boolean>(); public addStructureFormModal = false; - public buttonTypeEnum = ButtonType; public modalTypeOpened: TypeModal; public employersFiltersActive = false; public jobsFiltersActive = false; diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html index 788d795f6..e25bf4cb1 100644 --- a/src/app/annuaire/filter-modal/filter-modal.component.html +++ b/src/app/annuaire/filter-modal/filter-modal.component.html @@ -1,7 +1,7 @@ <div *ngIf="modalType" [ngClass]="['filterModal', getModalType()]"> <div class="filterModalContainer"> <div class="modalContent"> - <app-v3-label-checkbox + <app-label-checkbox *ngFor="let filter of filtersTypes" [label]="filter" [for]="filter" @@ -12,8 +12,8 @@ </div> <div class="modalFooter"> - <app-v3-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" /> - <app-v3-button [variant]="'primary'" [label]="'Appliquer'" (click)="onSubmitFilters()" /> + <app-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" /> + <app-button [variant]="'primary'" [label]="'Appliquer'" (click)="onSubmitFilters()" /> </div> </div> </div> diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html index dd525d0b5..9bb0da439 100644 --- a/src/app/annuaire/result-list/result-list.component.html +++ b/src/app/annuaire/result-list/result-list.component.html @@ -22,7 +22,7 @@ /> <div *ngIf="showPagination" class="pagination"> <p>{{ userList.length }} membres affichés sur {{ totalUserResult }}</p> - <app-v3-button + <app-button [label]="'Voir plus'" [variant]="'primaryBlack'" [size]="'medium'" @@ -34,7 +34,7 @@ <ng-container *ngIf="userList.length === 0"> <p class="noResult">Aucun résultat ne correspond à vos filtres</p> <p class="filtersInfo">Merci de réinitialiser ou modifier les filtres afin d'élargir votre recherche</p> - <app-v3-button + <app-button tabindex="0" [variant]="'primary'" [wide]="true" @@ -60,8 +60,8 @@ veuillez vous connecter ou vous créer un compte. </div> <div class="buttons"> - <app-v3-button [label]="'Créer un compte'" [variant]="'secondary'" (action)="goRegister()" /> - <app-v3-button [label]="'Se connecter'" [variant]="'primary'" (action)="goLogin()" /> + <app-button [label]="'Créer un compte'" [variant]="'secondary'" (action)="goRegister()" /> + <app-button [label]="'Se connecter'" [variant]="'primary'" (action)="goLogin()" /> </div> </div> </ng-container> diff --git a/src/app/carto/carto.component.html b/src/app/carto/carto.component.html index c62610750..929cb0409 100644 --- a/src/app/carto/carto.component.html +++ b/src/app/carto/carto.component.html @@ -20,7 +20,7 @@ (structureRDVSelected)="selectStructureRDV($event)" /> <div class="btnSwitch"> - <app-v3-button + <app-button [variant]="'primaryBlack'" [label]="isMapPhone ? 'Liste' : 'Carte'" [size]="'large'" diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html index 8a8fb5e00..1dc13668e 100644 --- a/src/app/contact/contact.component.html +++ b/src/app/contact/contact.component.html @@ -111,8 +111,8 @@ </div> </div> <div class="buttons"> - <app-v3-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" /> + <app-button [type]="'submit'" [variant]="'primary'" [label]="'Envoyer'" diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html index 162289ed8..1c4f56c76 100644 --- a/src/app/form/footer-form/footer-form.component.html +++ b/src/app/form/footer-form/footer-form.component.html @@ -1,5 +1,5 @@ <div class="footerForm"> - <app-v3-button + <app-button *ngIf="!isLastFormStep && !isNextFormTransition && !isStructureLastPage() && !isPersonalOfferFirstPage()" [variant]="'secondary'" [label]="!isEditMode ? 'Précédent' : 'Annuler'" @@ -7,7 +7,7 @@ (action)="prevPage()" /> - <app-v3-button + <app-button *ngIf="!isLastFormStep && !isNextFormTransition && !isEditMode" [variant]="'primary'" [label]="'Suivant'" @@ -18,7 +18,7 @@ (action)="nextPage()" /> - <app-v3-button + <app-button *ngIf="isEditMode" [variant]="'primary'" [label]="'Valider'" diff --git a/src/app/form/form-view/form-view.component.html b/src/app/form/form-view/form-view.component.html index 24b0e342e..509253eb8 100644 --- a/src/app/form/form-view/form-view.component.html +++ b/src/app/form/form-view/form-view.component.html @@ -1,5 +1,5 @@ <div class="formView"> - <app-v3-modal + <app-modal [title]="'Attention'" [opened]="showConfirmationModal" [validateLabel]="'Quitter'" @@ -9,7 +9,7 @@ <div class="modalContent emphasized"> Si vous quittez le formulaire maintenant, toutes les informations saisies seront perdues </div> - </app-v3-modal> + </app-modal> <app-progress-bar *ngIf="!isEditMode" [formType]="formType[routeParam]" diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.html b/src/app/form/form-view/global-components/information-step/information-step.component.html index 7d593af00..393a4038e 100644 --- a/src/app/form/form-view/global-components/information-step/information-step.component.html +++ b/src/app/form/form-view/global-components/information-step/information-step.component.html @@ -5,7 +5,7 @@ <img src="../../assets/form/emailVerification.svg" alt="" /> <h3>Un email vous a été envoyé afin de finaliser votre inscription</h3> <div class="btnContainer"> - <app-v3-button [variant]="'primary'" [wide]="true" [label]="'Terminer'" (click)="goToHome()" /> + <app-button [variant]="'primary'" [wide]="true" [label]="'Terminer'" (click)="goToHome()" /> </div> </div> </ng-container> @@ -17,8 +17,8 @@ <h3>Pour compléter votre profil, nous aimerions vous poser quelques questions</h3> <div class="btnContainer"> <div class="btnGroup"> - <app-v3-button [label]="'Plus tard'" [variant]="'secondary'" (click)="goToHome()" /> - <app-v3-button [label]="'C\'est parti !'" [variant]="'primary'" (click)="goToNextPage()" /> + <app-button [label]="'Plus tard'" [variant]="'secondary'" (click)="goToHome()" /> + <app-button [label]="'C\'est parti !'" [variant]="'primary'" (click)="goToNextPage()" /> </div> </div> </div> @@ -76,7 +76,7 @@ donner accès au numérique </p> <div class="btnContainer"> - <app-v3-button [variant]="'primary'" [wide]="true" [label]="'J\'ai compris'" (click)="goBackProfile()" /> + <app-button [variant]="'primary'" [wide]="true" [label]="'J\'ai compris'" (click)="goBackProfile()" /> </div> </div> </ng-container> @@ -98,7 +98,7 @@ <img src="../../assets/form/profileUpdated.svg" alt="" /> <h3>Merci, les informations de votre profil ont été mises à jour</h3> <div class="btnContainer"> - <app-v3-button [variant]="'primary'" [wide]="true" [label]="'Voir mon compte'" (click)="goBackProfile()" /> + <app-button [variant]="'primary'" [wide]="true" [label]="'Voir mon compte'" (click)="goBackProfile()" /> </div> </div> </ng-container> diff --git a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html index 423bc9fec..9702b1ebe 100644 --- a/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html +++ b/src/app/form/form-view/profile-form/profile-job-selection/profile-job-selection.component.html @@ -5,7 +5,7 @@ </div> <div fxLayout="column" fxLayoutGap="32px"> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let job of jobs" [iconFolder]="'ico'" [iconName]="isSelectedJob(job) ? 'check' : null" diff --git a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html index 00b1dcccd..787245ba6 100644 --- a/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html +++ b/src/app/form/form-view/profile-form/profile-structure-choice/profile-structure-choice.component.html @@ -1,7 +1,7 @@ <form> <h2 class="title">Dans quelle structure travaillez-vous ?</h2> <div class="content"> - <app-v3-search-bar + <app-search-bar placeholder="Rechercher une structure" [(value)]="searchString" (valueChange)="onSearchChange($event)" @@ -55,7 +55,7 @@ Cette structure n’existe pas encore sur Rés'in.<br /> <span class="question">Souhaitez-vous la référencer ?</span> </div> - <app-v3-button + <app-button [label]="'Créer une structure'" [variant]="'primaryBlack'" [wide]="true" diff --git a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html index 589eb83ad..e0ceac620 100644 --- a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html +++ b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.html @@ -5,7 +5,7 @@ <p>Facultatif - Plusieurs choix possibles</p> </div> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let accompaniment of onlineProcedures.modules" [iconName]="isInArray(accompaniment.id) ? 'check' : null" [label]="accompaniment.name" diff --git a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.ts b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.ts index 8bc10c094..d04a20883 100644 --- a/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.ts +++ b/src/app/form/form-view/structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; import { Category } from '../../../../structure-list/models/category.model'; @Component({ @@ -14,8 +13,6 @@ export class StructureDigitalHelpingAccompanimentComponent implements OnInit { @Output() updateChoice = new EventEmitter<any>(); @Output() validateForm = new EventEmitter<any>(); - public buttonTypeEnum = ButtonType; - ngOnInit(): void { this.validateForm.emit(); } diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html index 1e2ceb645..142abc474 100644 --- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html +++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html @@ -11,7 +11,7 @@ <div class="inputSection"> <ng-container *ngIf="equipment.module.id === 'computer'"> - <app-v3-icon-button + <app-icon-button [variant]="'primaryBlack'" [iconFolder]="'form'" [iconName]="'hide'" @@ -32,7 +32,7 @@ /> </ng-container> <ng-container *ngIf="equipment.module.id === 'printer'"> - <app-v3-icon-button + <app-icon-button [variant]="'primaryBlack'" [iconFolder]="'form'" [iconName]="'hide'" @@ -53,7 +53,7 @@ /> </ng-container> <ng-container *ngIf="equipment.module.id === 'scanner'"> - <app-v3-icon-button + <app-icon-button [variant]="'primaryBlack'" [iconFolder]="'form'" [iconName]="'hide'" @@ -73,7 +73,7 @@ (input)="setValidationsForm()" /> </ng-container> - <app-v3-icon-button + <app-icon-button [variant]="'primaryBlack'" [iconFolder]="'form'" [iconName]="'show'" diff --git a/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.ts b/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.ts index d5950865f..4b162a461 100644 --- a/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.ts +++ b/src/app/form/form-view/structure-form/structure-public-target-other/structure-public-target-other.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { AbstractControl, UntypedFormGroup } from '@angular/forms'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; @Component({ selector: 'app-structure-public-target-other', @@ -12,8 +11,6 @@ export class StructureDigitalHelpingAccompanimentOtherComponent implements OnIni @Output() updateChoice = new EventEmitter<any>(); @Output() validateForm = new EventEmitter<any>(); - public buttonTypeEnum = ButtonType; - ngOnInit(): void { this.validateForm.emit(); } diff --git a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html index 8593e5649..373342379 100644 --- a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html +++ b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.html @@ -18,7 +18,7 @@ <div *ngIf="languageAndIlliteracy" class="title" style="gap: 12px"> <h4>Langue et illettrisme</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let choice of languageAndIlliteracy.modules" [iconName]="isInArray(choice.id, 'languageAndIlliteracy') ? 'check' : null" [label]="choice.name" @@ -31,7 +31,7 @@ <div *ngIf="handicaps" class="title" style="gap: 12px"> <h4>Handicaps</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let choice of handicaps.modules" [iconName]="isInArray(choice.id, 'handicaps') ? 'check' : null" [label]="choice.name" @@ -44,7 +44,7 @@ <div *ngIf="genre" class="title" style="gap: 12px"> <h4>Genre</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let choice of genre.modules" [iconName]="isInArray(choice.id, 'genre') ? 'check' : null" [label]="choice.name" @@ -60,7 +60,7 @@ <div *ngIf="age" class="title" style="gap: 12px"> <h4>Âge</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let choice of age.modules" [iconName]="isInArray(choice.id, 'age') ? 'check' : null" [label]="choice.name" diff --git a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts index 79560c5ed..09d86a0c3 100644 --- a/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts +++ b/src/app/form/form-view/structure-form/structure-public-target/structure-public-target.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; import { Category } from '../../../../structure-list/models/category.model'; @Component({ @@ -18,8 +17,6 @@ export class StructurePublicTargetComponent implements OnInit, OnChanges { @Output() updateChoice = new EventEmitter<any>(); @Output() validateForm = new EventEmitter<any>(); - public buttonTypeEnum = ButtonType; - ngOnInit(): void { this.validateForm.emit(); } diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html index 2058d4253..94d8f1747 100644 --- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html +++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.html @@ -6,7 +6,7 @@ </div> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let material of solidarityMaterial.modules" [iconName]="isInArray(material.id) ? 'check' : null" [label]="material.name" diff --git a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts index 3a860cd0b..4fd5b441c 100644 --- a/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts +++ b/src/app/form/form-view/structure-form/structure-solidarity-material/structure-solidarity-material.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { UntypedFormGroup } from '@angular/forms'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; import { Category } from '../../../../structure-list/models/category.model'; @Component({ @@ -14,8 +13,6 @@ export class StructureSolidarityMaterialComponent implements OnInit { @Output() updateChoice = new EventEmitter<any>(); @Output() validateForm = new EventEmitter<any>(); - public buttonTypeEnum = ButtonType; - ngOnInit(): void { this.validateForm.emit(); } diff --git a/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html b/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html index a4a8701d0..724a7d322 100644 --- a/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html +++ b/src/app/form/orientation-form-view/base-skills/base-skills-choice/base-skills-choice.component.html @@ -2,7 +2,7 @@ <h2>Quel est le besoin numérique de la personne ?</h2> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of baseSkills" [label]="module.name" [disabled]="module.disabled" diff --git a/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html b/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html index af9b46e97..267d3dd2e 100644 --- a/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html +++ b/src/app/form/orientation-form-view/equipment-access/equipment-access-choice/equipment-access-choice.component.html @@ -2,7 +2,7 @@ <h2>Quel matériel la personne a-t-elle besoin d'utiliser ?</h2> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of equipmentType" [label]="module.name" [color]="isSelectedModule(module.id) ? 'black' : 'white'" diff --git a/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html b/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html index ee797a06f..a286936cd 100644 --- a/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html +++ b/src/app/form/orientation-form-view/equipment-buy/equipment-buy-type/equipment-buy-type.component.html @@ -2,7 +2,7 @@ <h2>Quel matériel la personne souhaite-t-elle acheter à tarif solidaire ?</h2> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of equipmentType" [label]="module.name" [color]="isSelectedModule(module.id) ? 'black' : 'white'" diff --git a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html index 6b81610cd..6fba5574a 100644 --- a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html +++ b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html @@ -1,13 +1,13 @@ <div class="footerForm"> <ng-container *ngIf="!shouldResetOrientation"> - <app-v3-button + <app-button *ngIf="currentStep !== null && !(isLastStep && needType === 'onlineDemarch')" [variant]="'secondary'" [label]="'Précédent'" [iconName]="'arrowBack'" (action)="prevPage()" /> - <app-v3-button + <app-button *ngIf="!hideNavButtons" [variant]="'primary'" [label]="isLastStep ? 'Terminer' : 'Suivant'" @@ -18,7 +18,7 @@ /> </ng-container> <ng-container *ngIf="shouldResetOrientation"> - <app-v3-button [variant]="'secondary'" [label]="'Cartographie'" (action)="goCarto()" /> - <app-v3-button [variant]="'primary'" [label]="'Recommencer'" (action)="resetOrientation()" /> + <app-button [variant]="'secondary'" [label]="'Cartographie'" (action)="goCarto()" /> + <app-button [variant]="'primary'" [label]="'Recommencer'" (action)="resetOrientation()" /> </ng-container> </div> diff --git a/src/app/form/orientation-form-view/global-components/select/select.component.ts b/src/app/form/orientation-form-view/global-components/select/select.component.ts index 77b517417..aa11c141e 100644 --- a/src/app/form/orientation-form-view/global-components/select/select.component.ts +++ b/src/app/form/orientation-form-view/global-components/select/select.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { FormGroup } from '@angular/forms'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; import { Module } from '../../../../structure-list/models/module.model'; @Component({ template: `` }) @@ -9,7 +8,6 @@ export class SelectComponent { @Output() checkValidation = new EventEmitter<any>(); public equipmentType: Module[] = []; public selectedModules: Module[] = []; - public buttonTypeEnum = ButtonType; public handleClick(module: Module): void { if (this.isSelectedModule(module.id)) { diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html index 17b6d2548..a407c1423 100644 --- a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html +++ b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html @@ -1,7 +1,7 @@ <div class="orientationForm"> <h2>Quelle démarche en ligne la personne a-t-elle besoin de réaliser ?</h2> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of accompanimentType" [label]="module.name" [disabled]="module.disabled" @@ -11,7 +11,7 @@ (action)="handleClick(module)" /> </div> - <app-v3-modal + <app-modal [opened]="showStrangersModal" [validateLabel]="'J\'ai compris'" [singleButton]="true" @@ -22,5 +22,5 @@ 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> - </app-v3-modal> + </app-modal> </div> diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.ts b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.ts index d7f6ce570..343423694 100644 --- a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.ts +++ b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.ts @@ -4,7 +4,6 @@ import { CategoryEnum } from 'src/app/shared/enum/category.enum'; import { OrientationService } from '../../../../services/orientation.service'; import { PersonalOfferService } from '../../../../services/personal-offer.service'; import { StructureService } from '../../../../services/structure.service'; -import { ButtonType } from '../../../../shared/components/button/buttonType.enum'; import { Category } from '../../../../structure-list/models/category.model'; import { Module } from '../../../../structure-list/models/module.model'; import { SearchService } from '../../../../structure-list/services/search.service'; @@ -26,7 +25,6 @@ export class OnlineDemarchComponent implements OnInit { ) {} public orientationUtils = new OrientationUtils(); public accompanimentType: Module[]; - public buttonTypeEnum = ButtonType; public selectedModules: Module[] = []; public showStrangersModal = false; diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.html b/src/app/form/orientation-form-view/orientation-form-view.component.html index 54e600aa1..b0cc37f06 100644 --- a/src/app/form/orientation-form-view/orientation-form-view.component.html +++ b/src/app/form/orientation-form-view/orientation-form-view.component.html @@ -58,7 +58,7 @@ (goPrev)="prevPage()" (goReset)="reset()" /> - <app-v3-modal + <app-modal [opened]="showConfirmationModal" [title]="'Attention'" [validateLabel]="'Quitter'" @@ -68,9 +68,9 @@ <div class="modalContent emphasized"> Si vous quittez le formulaire maintenant, toutes les informations saisies seront perdues </div> - </app-v3-modal> + </app-modal> - <app-v3-modal + <app-modal [opened]="showLoginModal" [title]="'Se connecter'" [validateLabel]="'Se connecter'" @@ -80,5 +80,5 @@ <img src="../../../../../assets/img/resin-login.svg" alt="resin-login-image" /> <h3>Pour pré-remplir ce formulaire, gagnez du temps en vous connectant !</h3> </div> - </app-v3-modal> + </app-modal> </div> diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 25394e744..5e4269474 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -43,7 +43,7 @@ Annuaire </a> <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a> - <app-v3-button + <app-button *ngIf="isLoggedIn" class="connected" [variant]="'primary'" @@ -51,7 +51,7 @@ [size]="'small'" (action)="openProfileMenu()" /> - <app-v3-button + <app-button *ngIf="!isLoggedIn" [variant]="'primaryBlack'" [label]="'Se connecter'" @@ -102,8 +102,8 @@ <span class="name">{{ displayFullName }}</span> </div> <div class="profileMenuButtons"> - <app-v3-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (click)="goToProfile()" /> - <app-v3-button [label]="'Se déconnecter'" [variant]="'secondary'" [size]="'small'" (action)="logout()" /> + <app-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (click)="goToProfile()" /> + <app-button [label]="'Se déconnecter'" [variant]="'secondary'" [size]="'small'" (action)="logout()" /> </div> </div> </div> diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index 71e4d3396..01e3984b6 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -18,7 +18,7 @@ [value]="f.email.value" (valueChange)="onChange(); f.email.setValue($event)" /> - <app-v3-button + <app-button *ngIf="isUnverifiedEmail" label="Renvoyer le mail de confirmation" size="small" @@ -42,15 +42,15 @@ /> </div> <div class="footer"> - <app-v3-button [variant]="'secondary'" [label]="'Mot de passe oublié'" (action)="switchToResetPassword()" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Mot de passe oublié'" (action)="switchToResetPassword()" /> + <app-button [variant]="'primary'" [type]="'submit'" [label]="'Se connecter'" [disabled]="loginForm.invalid || loading" /> </div> - <app-v3-button + <app-button class="goSignup" [variant]="'tertiary'" [label]="'Je n’ai pas encore de compte'" diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.html b/src/app/newsletter-subscription/newsletter-subscription.component.html index ed185b316..7522a0069 100644 --- a/src/app/newsletter-subscription/newsletter-subscription.component.html +++ b/src/app/newsletter-subscription/newsletter-subscription.component.html @@ -21,8 +21,8 @@ </div> </div> <div class="button" fxLayout="row" fxLayoutAlign="space-around center"> - <app-v3-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Annuler'" [routerLink]="'/home'" /> + <app-button [variant]="'primary'" [label]="subscriptionMod ? 'S\'inscrire' : 'Se désinscrire'" [type]="'submit'" diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html index 99ed08f76..741bf7fe8 100644 --- a/src/app/post/components/post-card/post-card.component.html +++ b/src/app/post/components/post-card/post-card.component.html @@ -16,7 +16,7 @@ </div> <div class="informations"> <div class="inline"> - <app-v3-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" /> + <app-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" /> </div> <h2 fxLayout="row" class="title"> {{ post.title }} diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html index b86bb600e..598bdf4e4 100644 --- a/src/app/post/components/post-details/post-details.component.html +++ b/src/app/post/components/post-details/post-details.component.html @@ -1,5 +1,5 @@ <div *ngIf="post" class="postContainer"> - <app-v3-button + <app-button [label]="'Retour'" [variant]="'tertiary'" [iconFolder]="'ico'" @@ -9,7 +9,7 @@ <div class="gh-canvas"> <div class="inline"> - <app-v3-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" /> + <app-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" /> </div> <h1 class="title">{{ post.title }}</h1> <div class="details"> diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html index 8bf8fcd8a..68406fc43 100644 --- a/src/app/post/components/post-header/post-header.component.html +++ b/src/app/post/components/post-header/post-header.component.html @@ -18,7 +18,7 @@ {{ tag.name }} </span> </nav> - <app-v3-button + <app-button class="publish-button hide-on-mobile" [variant]="'primaryBlack'" [label]="'Publier'" diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html index 5546494fb..211cbfa70 100644 --- a/src/app/post/components/post-list/post-list.component.html +++ b/src/app/post/components/post-list/post-list.component.html @@ -12,7 +12,7 @@ <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt /> </div> <div *ngIf="!isLastPage && !isLoading" class="loadMore"> - <app-v3-button + <app-button class="loadMoreB" [variant]="'primaryBlack'" [label]="'Voir plus d\'actualités'" diff --git a/src/app/post/components/post-publish/post-publish.component.html b/src/app/post/components/post-publish/post-publish.component.html index 7eba0c6e8..d17fe0bd7 100644 --- a/src/app/post/components/post-publish/post-publish.component.html +++ b/src/app/post/components/post-publish/post-publish.component.html @@ -1,7 +1,7 @@ <div class="section-container no-padding news"> <div class="container"> <div class="goBack"> - <app-v3-button + <app-button [label]="'Retour'" [variant]="'tertiary'" [iconFolder]="'ico'" @@ -23,7 +23,7 @@ <p>Si votre actualité existe déjà sur un autre site, envoyez-nous simplement son adresse URL</p> </div> <div> - <app-v3-button + <app-button routerLink="'mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer&body=' + bodyMail" [label]="'Envoyer votre actu par mail'" [variant]="'primary'" diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html index 5406da31f..820dcb31f 100644 --- a/src/app/profile/edit/edit.component.html +++ b/src/app/profile/edit/edit.component.html @@ -6,7 +6,7 @@ <div class="title"> <h1>Modifier mon profil</h1> </div> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondaryDelete'" [label]="'Supprimer mon compte'" @@ -15,7 +15,7 @@ [wide]="true" (action)="showDeleteAccountModal()" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondaryDelete'" [iconName]="'delete'" @@ -103,7 +103,7 @@ </div> </div> <div class="buttons"> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Modifier mon email'" [iconName]="'email'" @@ -111,7 +111,7 @@ [wide]="true" (action)="showEmailModal()" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Modifier mon mot de passe'" [iconName]="'lock'" @@ -152,7 +152,7 @@ <p class="subTitle">Fonction</p> <div fxLayout="column" fxLayoutGap="32px"> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let job of jobs" [iconName]="isSelectedJob(job) ? 'check' : null" [label]="job.name" @@ -180,7 +180,7 @@ /> </div> - <app-v3-modal + <app-modal [title]="'ATTENTION'" [opened]="showConfirmationModal" [validateLabel]="'OK'" @@ -188,7 +188,7 @@ > Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et fonction'. - </app-v3-modal> + </app-modal> <div *ngIf="currentTab === tabsEnum.description" class="descriptionTab"> <app-textarea @@ -202,13 +202,13 @@ <!-- Footer --> <div *ngIf="currentTab !== tabsEnum.credentials" class="footer"> - <app-v3-button *ngIf="profileChanged()" [variant]="'secondary'" [label]="'Annuler'" (action)="cancel()" /> - <app-v3-button [variant]="'primary'" [label]="'Valider'" [disabled]="!isPageValid()" (action)="confirm()" /> + <app-button *ngIf="profileChanged()" [variant]="'secondary'" [label]="'Annuler'" (action)="cancel()" /> + <app-button [variant]="'primary'" [label]="'Valider'" [disabled]="!isPageValid()" (action)="confirm()" /> </div> </div> <!-- Modal: Email change --> - <app-v3-modal + <app-modal [title]="'Modifier mon email'" [opened]="emailModal" [validateLabel]="'Valider'" @@ -225,10 +225,10 @@ [(value)]="newEmailConfirm" /> </div> - </app-v3-modal> + </app-modal> <!-- Modal: Password change --> - <app-v3-modal + <app-modal [title]="'Modifier mon mot de passe'" [opened]="passwordModal" [validateDisabled]="!isPageValid()" @@ -268,10 +268,10 @@ /> </div> </div> - </app-v3-modal> + </app-modal> <!-- Modal: Delete account --> - <app-v3-modal + <app-modal [title]="'Supprimer mon compte'" [opened]="deleteAccountModal" [validateLabel]="'Valider'" @@ -302,5 +302,5 @@ </div> </div> </div> - </app-v3-modal> + </app-modal> </div> diff --git a/src/app/profile/edit/edit.component.ts b/src/app/profile/edit/edit.component.ts index f3fc46f43..3f9c18914 100644 --- a/src/app/profile/edit/edit.component.ts +++ b/src/app/profile/edit/edit.component.ts @@ -8,7 +8,6 @@ import { Job } from '../../models/job.model'; import { User } from '../../models/user.model'; import { AuthService } from '../../services/auth.service'; import { NotificationService } from '../../services/notification.service'; -import { ButtonType } from '../../shared/components/button/buttonType.enum'; import { CustomRegExp } from '../../utils/CustomRegExp'; import { Utils } from '../../utils/utils'; import { ProfileService } from '../services/profile.service'; @@ -36,7 +35,6 @@ type passwordStatuses = 'error' | 'info' | 'success'; }) export class EditComponent implements OnInit { public tabsEnum = tabsEnum; - public buttonTypeEnum = ButtonType; public currentTab: tabsEnum = tabsEnum.details; @Input() userProfile: User; diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html index d4a09f509..607c7bcf8 100644 --- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html +++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html @@ -8,7 +8,7 @@ <h2 *ngIf="structureName" class="overtitle">{{ structureName }}</h2> </div> </div> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondaryDelete'" [label]="'Supprimer mon offre'" @@ -17,7 +17,7 @@ [size]="'small'" (action)="showDeleteOfferModal()" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondaryDelete'" [iconName]="'delete'" @@ -66,13 +66,13 @@ <!-- Footer --> <div class="footer"> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Annuler'" [disabled]="personalOfferForm?.pristine" (action)="cancel()" /> - <app-v3-button + <app-button [variant]="'primary'" [label]="'Valider'" [disabled]="personalOfferForm?.pristine" @@ -82,7 +82,7 @@ </div> <!-- Modal : Delete offer --> - <app-v3-modal + <app-modal [title]="'Supprimer mon offre'" [opened]="deleteOfferModal" [validateLabel]="'Supprimer'" @@ -92,5 +92,5 @@ <p *ngIf="structureName" class="emphasized">{{ structureName }}</p> <p>Vous êtes sur le point de supprimer votre offre d’accompagnements, veuillez confirmer pour poursuivre</p> </div> - </app-v3-modal> + </app-modal> </div> diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html index 4dc5c3b19..43f7c529c 100644 --- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html +++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html @@ -1,7 +1,7 @@ <div *ngIf="this.personalOffer.categoriesDisplay" class="container"> <div class="header"> <h2 class="uppercase">Mon offre d'accompagnements</h2> - <app-v3-button + <app-button *ngIf="!isPublic" class="hide-on-mobile" [state]="{ structureName: this.structureName }" @@ -12,7 +12,7 @@ [size]="'small'" [wide]="true" /> - <app-v3-icon-button + <app-icon-button *ngIf="!isPublic" class="hide-on-desktop" routerLink="./edit-personal-offer/{{ this.personalOffer._id }}" diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html index 541e6c8ec..28ab4710a 100644 --- a/src/app/profile/profile-structure/profile-structure.component.html +++ b/src/app/profile/profile-structure/profile-structure.component.html @@ -12,7 +12,7 @@ <img alt="" height="80px" width="80px" [src]="'../../../../../assets/ico/' + getStructureTypeIcon() + '.svg'" /> <div class="structureInfos"> <p class="structureName">{{ structure.structureName }}</p> - <app-v3-tag-item + <app-tag-item *ngIf="structure.structureType?.name" [label]="structure.structureType?.name" [size]="'small'" @@ -27,7 +27,7 @@ </div> </div> <div class="right"> - <app-v3-button + <app-button *ngIf="isPending && !isPublic" class="hide-on-mobile" [variant]="'secondary'" @@ -43,7 +43,7 @@ <div class="sectionHeader"> <p class="sectionTitle uppercase">informations</p> <div class="sectionButtons"> - <app-v3-button + <app-button class="hide-on-mobile" routerLink="./" tabindex="none" @@ -55,7 +55,7 @@ [size]="'small'" [queryParams]="{ id: structure._id }" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" routerLink="./" tabindex="none" @@ -65,7 +65,7 @@ [iconName]="'eye'" [queryParams]="{ id: structure._id }" /> - <app-v3-button + <app-button *ngIf="!isPublic && !isPending" class="hide-on-mobile" tabindex="none" @@ -75,7 +75,7 @@ [label]="'Modifier la structure'" [size]="'small'" /> - <app-v3-icon-button + <app-icon-button *ngIf="!isPublic && !isPending" class="hide-on-desktop" tabindex="none" @@ -113,7 +113,7 @@ <div *ngIf="membersWithJobWithPO.length > 0" class="section"> <div class="sectionHeader"> <p class="sectionTitle uppercase">Accompagnant·es numériques</p> - <app-v3-button + <app-button *ngIf="!isPublic && !isPending" class="hide-on-mobile" routerLink="./structure-members-management/{{ structure._id }}" @@ -124,7 +124,7 @@ [size]="'small'" [wide]="true" /> - <app-v3-icon-button + <app-icon-button *ngIf="!isPublic && !isPending" class="hide-on-desktop" routerLink="./structure-members-management/{{ structure._id }}" @@ -147,7 +147,7 @@ *ngIf="!isPublic && !this.personalOffer && userProfile.job?.hasPersonalOffer && !isPending" class="call-to-action" > - <app-v3-button + <app-button [routerLinkActive]="'active'" [variant]="'primaryBlack'" [label]="'Ajouter une offre'" diff --git a/src/app/profile/profile-structure/profile-structure.component.scss b/src/app/profile/profile-structure/profile-structure.component.scss index f4fe6eb0a..84b6d4d25 100644 --- a/src/app/profile/profile-structure/profile-structure.component.scss +++ b/src/app/profile/profile-structure/profile-structure.component.scss @@ -92,14 +92,6 @@ margin-bottom: 1rem; } -// V3REMOVE -::ng-deep app-button.warning button { - color: $orange-warning; - .text { - border: 1px solid $orange-warning !important; - } -} - .row { display: flex; gap: 8px; diff --git a/src/app/profile/profile-structure/profile-structure.component.ts b/src/app/profile/profile-structure/profile-structure.component.ts index 4243456cc..47d9a0a49 100644 --- a/src/app/profile/profile-structure/profile-structure.component.ts +++ b/src/app/profile/profile-structure/profile-structure.component.ts @@ -5,7 +5,7 @@ import { DateTime } from 'luxon'; import { structureFormStep } from '../../form/form-view/structure-form/structureFormStep.enum'; import { Structure } from '../../models/structure.model'; import { StructureWithOwners } from '../../models/structureWithOwners.model'; -import { CollapseType } from '../../shared/components/v3/collapse/collapse.type'; +import { CollapseType } from '../../shared/components/collapse/collapse.type'; import { SearchService } from '../../structure-list/services/search.service'; import { FormUtils } from '../../utils/formUtils'; import { Utils } from '../../utils/utils'; diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index fae79edae..433906834 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -6,7 +6,7 @@ <section> <div class="header"> <h1 class="uppercase">Profil</h1> - <app-v3-button + <app-button *ngIf="isPublic && userProfile.withAppointment" class="hide-on-mobile rdv" tabindex="none" @@ -19,7 +19,7 @@ [size]="'small'" [wide]="true" /> - <app-v3-button + <app-button *ngIf="!isPublic" class="hide-on-mobile" tabindex="none" @@ -31,7 +31,7 @@ [size]="'small'" [wide]="true" /> - <app-v3-icon-button + <app-icon-button *ngIf="!isPublic" class="hide-on-desktop" tabindex="none" @@ -66,7 +66,7 @@ <div *ngIf="userProfile.description" class="description">{{ userProfile.description }}</div> </div> </div> - <app-v3-button + <app-button *ngIf="!isPublic && !userProfile.description" class="centerButton" tabindex="none" @@ -89,7 +89,7 @@ <ng-template ngPluralCase="other">Structures</ng-template> </h1> <!-- Do NOT pluralize this button, it's weird for the UX otherwise --> - <app-v3-button + <app-button *ngIf="userProfile.structuresLink.length > 0" class="hide-on-mobile" routerLink="./structures-management" @@ -101,7 +101,7 @@ [size]="'small'" [wide]="true" /> - <app-v3-icon-button + <app-icon-button *ngIf="userProfile.structuresLink.length > 0" class="hide-on-desktop" tabindex="none" @@ -132,7 +132,7 @@ [isPublic]="this.isPublic" /> </div> - <app-v3-button + <app-button class="centerButton" tabindex="none" routerLink="/form/structure" diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html index 471af23d3..9db4feffb 100644 --- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html +++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html @@ -1,4 +1,4 @@ -<app-v3-modal +<app-modal [title]="'Ajouter un membre'" [opened]="opened" [validateLabel]="'Ajouter'" @@ -19,4 +19,4 @@ </div> </div> </form> -</app-v3-modal> +</app-modal> diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html index 7ba60273d..8b77f7e68 100644 --- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html +++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html @@ -17,7 +17,7 @@ <section class="nameAndAddress"> <div class="sectionHeader"> <h3 class="uppercase">Nom et adresse</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -25,7 +25,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureNameAndAddress)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -54,7 +54,7 @@ <h3 class="uppercase">Type de structure</h3> <app-missing-information *ngIf="!isFieldValid('structureType')" /> </div> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -62,7 +62,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureType)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -83,7 +83,7 @@ <section class="description"> <div class="sectionHeader"> <h3 class="uppercase">Description</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -91,7 +91,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureDescription)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -110,7 +110,7 @@ <h3 class="uppercase">Téléphone et email</h3> <app-missing-information *ngIf="requiredPhoneOrMailError()" /> </div> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -118,7 +118,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureContact)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -146,7 +146,7 @@ <section class="webAndSocialNetworks"> <div class="sectionHeader"> <h3 class="uppercase">Présence sur internet</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -154,7 +154,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureWebAndSocialNetwork)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -229,7 +229,7 @@ <section class="hours"> <div class="sectionHeader"> <h3 class="uppercase">Horaires</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -237,7 +237,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureHours)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -262,7 +262,7 @@ <section class="proceduresAccompaniment"> <div class="sectionHeader"> <h3 class="uppercase">Aides aux démarches en ligne</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -270,14 +270,14 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment)" /> </div> - <app-v3-tag-item + <app-tag-item *ngIf="containsDigitalHelp()" label="Accompagnements gratuits" size="small" @@ -287,7 +287,7 @@ <div class="content"> <app-no-information *ngIf="!containsDigitalHelp()" /> <div *ngIf="containsDigitalHelp()" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let digitalHelp of structure.categoriesDisplay.onlineProcedures" [label]="digitalHelp" [color]="'red'" @@ -300,7 +300,7 @@ <section class="proceduresAccompaniment"> <div class="sectionHeader"> <h3 class="uppercase">Autres démarches en ligne</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -308,7 +308,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -327,7 +327,7 @@ <section class="learning" id="learning"> <div class="sectionHeader"> <h3 class="uppercase">Accompagnements aux usages numériques</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -335,14 +335,14 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureTrainingType)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" (action)="goToEdit(structureFormStep.structureTrainingType)" /> </div> - <app-v3-tag-item + <app-tag-item *ngIf="containsDigitalLearning()" wa [label]="structure.getFreeWorkshopLabel()" @@ -394,7 +394,7 @@ > <div class="sectionHeader"> <h3 class="uppercase">Gratuité des accompagnements aux usages numériques</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -402,7 +402,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureTrainingPrice)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -418,7 +418,7 @@ <section class="wifi"> <div class="sectionHeader"> <h3 class="uppercase">Wifi</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -426,7 +426,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureWifi)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -443,7 +443,7 @@ <section class="equipements"> <div class="sectionHeader"> <h3 class="uppercase">Matériel en accès libre</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -451,7 +451,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureEquipments)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -461,19 +461,19 @@ <div class="content"> <app-no-information *ngIf="!hasEquipments(structure)" /> <div *ngIf="!!filterOnlyEquipments(structure.categories.selfServiceMaterial)" class="list"> - <app-v3-tag-item + <app-tag-item [label]="getEquipmentsLabelAndValue(equipmentEnum.computer, structure.nbComputers)" [color]="'red'" [size]="'small'" /> - <app-v3-tag-item + <app-tag-item [label]="getEquipmentsLabelAndValue(equipmentEnum.printer, structure.nbPrinters)" [color]="'red'" [size]="'small'" /> - <app-v3-tag-item + <app-tag-item [label]="getEquipmentsLabelAndValue(equipmentEnum.scanner, structure.nbScanners)" [color]="'red'" [size]="'small'" @@ -485,7 +485,7 @@ <section class="solidarityMaterial"> <div class="sectionHeader"> <h3 class="uppercase">Achat de matériel à tarif solidaire</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -493,7 +493,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureSolidarityMaterial)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -503,7 +503,7 @@ <div class="content"> <app-no-information *ngIf="structure.categoriesDisplay.solidarityMaterial.length === 0" /> <div class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let material of structure.categoriesDisplay.solidarityMaterial" [label]="material" [color]="'red'" @@ -516,7 +516,7 @@ <section class="accessModality" [ngClass]="{ warningBorder: !isFieldValid('accessModality', 'categories') }"> <div class="sectionHeader"> <h3 class="uppercase">Modalité d’accès</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -524,7 +524,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureAccessModality)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -534,7 +534,7 @@ <div class="content"> <app-missing-information *ngIf="!isFieldValid('accessModality', 'categories')" /> <div *ngIf="isFieldValid('accessModality', 'categories')" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let accessModality of structure.categoriesDisplay.accessModality" [label]="accessModality" [color]="'red'" @@ -550,7 +550,7 @@ > <div class="sectionHeader"> <h3 class="uppercase">Publics accueillis</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -558,7 +558,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structurePublicTarget)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -567,7 +567,7 @@ </div> <div class="content"> <div *ngIf="isFieldValid('age', 'categories') && structure.categoriesDisplay.age" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let public of structure.categoriesDisplay.age" [label]="public" [color]="'red'" @@ -585,7 +585,7 @@ <section class="publics"> <div class="sectionHeader"> <h3 class="uppercase">Public spécifique admis</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -593,7 +593,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structurePublicTargetOptional)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -604,7 +604,7 @@ <h4>Langue et illettrisme</h4> <app-no-information *ngIf="structure.categoriesDisplay.languageAndIlliteracy.length === 0" /> <div *ngIf="structure.categoriesDisplay.languageAndIlliteracy.length" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let public of structure.categoriesDisplay.languageAndIlliteracy" [label]="public" [color]="'red'" @@ -616,7 +616,7 @@ <h4>Handicaps</h4> <app-no-information *ngIf="structure.categoriesDisplay.handicaps.length === 0" /> <div *ngIf="structure.categoriesDisplay.handicaps.length" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let public of structure.categoriesDisplay.handicaps" [label]="public" [color]="'red'" @@ -628,7 +628,7 @@ <h4>Genre</h4> <app-no-information *ngIf="structure.categoriesDisplay.genre.length === 0" /> <div *ngIf="structure.categoriesDisplay.genre.length" class="list"> - <app-v3-tag-item + <app-tag-item *ngFor="let public of structure.categoriesDisplay.genre" [label]="public" [color]="'red'" @@ -655,7 +655,7 @@ <h3 class="uppercase">Accessibilité pour les personnes à mobilité réduite</h3> <app-missing-information *ngIf="structure.pmrAccess === null" /> </div> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -663,7 +663,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structurePmr)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -681,7 +681,7 @@ <section class="members"> <div class="sectionHeader"> <h3 class="uppercase">Membres</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -689,7 +689,7 @@ [size]="'small'" (action)="goToManageMembers()" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -706,7 +706,7 @@ <section class="labels"> <div class="sectionHeader"> <h3 class="uppercase">Labellisations</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -714,7 +714,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureLabels)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -732,7 +732,7 @@ <section class="covid"> <div class="sectionHeader"> <h3 class="uppercase">Informations spécifiques à la période COVID</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -740,7 +740,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureCovidInfo)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -756,7 +756,7 @@ <section class="dataShare"> <div class="sectionHeader"> <h3 class="uppercase">Partage de données sur data.grandlyon.com</h3> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'secondary'" [label]="'Modifier'" @@ -764,7 +764,7 @@ [size]="'small'" (action)="goToEdit(structureFormStep.structureConsent)" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'secondary'" [iconName]="'edit'" @@ -783,8 +783,8 @@ Vous pourrez valider après avoir renseigné l’intégralité des champs obligatoires. </p> <div class="buttons"> - <app-v3-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" /> + <app-button [variant]="'primary'" [label]="'Valider'" [disabled]="!isFormValid()" @@ -795,7 +795,7 @@ </ng-container> <ng-container *ngIf="!isUpdateStructure"> <div class="buttons"> - <app-v3-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" /> + <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" /> </div> </ng-container> </div> diff --git a/src/app/profile/structure-members-management/structure-members-management.component.html b/src/app/profile/structure-members-management/structure-members-management.component.html index 9f146a4bf..18fcb9ff2 100644 --- a/src/app/profile/structure-members-management/structure-members-management.component.html +++ b/src/app/profile/structure-members-management/structure-members-management.component.html @@ -5,7 +5,7 @@ <h1>Gérer les membres de</h1> <h2>{{ structure.structureName }}</h2> </div> - <app-v3-button + <app-button tabindex="0" [variant]="'primaryBlack'" [label]="'Ajouter un membre'" @@ -35,7 +35,7 @@ <p *ngIf="displayJobEmployer(member)" class="job">{{ displayJobEmployer(member) }}</p> </div> </div> - <app-v3-button + <app-button *ngIf="currentProfile._id !== member._id" tabindex="0" [variant]="'secondaryDelete'" @@ -58,7 +58,7 @@ </div> <div class="pendingContainer"> <p class="text">Demande de rattachement envoyée le {{ member.updatedAt | date: 'dd/MM/YYYY' }}</p> - <app-v3-button + <app-button tabindex="0" [variant]="'secondary'" [label]="'Annuler la demande'" @@ -76,7 +76,7 @@ (closed)="closeAddMemberModal($event)" /> -<app-v3-modal +<app-modal *ngIf="memberToExclude" [opened]="excludeModalOpened" [title]="'Exclure un membre'" @@ -85,9 +85,9 @@ <div class="modalContent emphasized"> Souhaitez-vous exclure le membre {{ displayMemberName(memberToExclude) }} de la structure ? </div> -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal *ngIf="tempUserToCancel" [opened]="cancelAddTempUserModalOpened" [title]="'Annuler la demande'" @@ -97,4 +97,4 @@ Souhaitez-vous vraiment annuler la demande d’ajout à la structure de : <br /> {{ tempUserToCancel.email }} ? </div> -</app-v3-modal> +</app-modal> diff --git a/src/app/profile/structures-management/structures-management.component.html b/src/app/profile/structures-management/structures-management.component.html index 43abba578..379d2dc70 100644 --- a/src/app/profile/structures-management/structures-management.component.html +++ b/src/app/profile/structures-management/structures-management.component.html @@ -6,7 +6,7 @@ <ng-template ngPluralCase="1">Gestion des structures</ng-template> <ng-template ngPluralCase="other">Gérer mes structures</ng-template> </h1> - <app-v3-button + <app-button routerLink="/form/structure" tabindex="0" [variant]="'primaryBlack'" @@ -25,7 +25,7 @@ <!-- TODO link to structure --> <div class="structureDetails"> <h2 class="structureName">{{ elt.structure.structureName }}</h2> - <app-v3-tag-item + <app-tag-item *ngIf="elt.structure.structureType?.name" [label]="elt.structure.structureType.name" [size]="'small'" @@ -40,20 +40,20 @@ </div> </div> <div class="buttons"> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Quitter la structure'" [size]="'small'" (click)="selectedStructure = elt.structure; leaveModalOpened = true" /> - <app-v3-button + <app-button *ngIf="!isBeingDeleted(elt.structure)" [variant]="'secondaryDelete'" [label]="'Supprimer la structure'" [size]="'small'" (click)="selectedStructure = elt.structure; deleteModalOpened = true" /> - <app-v3-button + <app-button *ngIf="isBeingDeleted(elt.structure)" [variant]="'primary'" [label]="'Annuler suppression'" @@ -66,7 +66,7 @@ </div> </div> -<app-v3-modal +<app-modal [opened]="leaveModalOpened" [validateLabel]="'Oui'" [cancelLabel]="'Non'" @@ -74,7 +74,7 @@ (closed)="leaveStructure(selectedStructure, $event)" /> -<app-v3-modal +<app-modal [opened]="deleteModalOpened" [title]="'Supprimer la structure'" (closed)="deleteStructure(selectedStructure, $event)" @@ -83,9 +83,9 @@ Si vous êtes le seul membre de cette structure, celle-ci est supprimée immédiatement. Si plusieurs membres sont présents dans cette structure, ils seront avertis et auront jusqu'à 5 semaines pour s'opposer à la suppression. </div> -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal [opened]="cancelDeleteModalOpened" [validateLabel]="'Oui'" [cancelLabel]="'Non'" @@ -93,4 +93,4 @@ (closed)="cancelDelete(selectedStructure, $event)" > <div class="modalContent emphasized">Souhaitez-vous vraiment annuler la suppression de la structure ?</div> -</app-v3-modal> +</app-modal> diff --git a/src/app/reset-password/reset-password.component.html b/src/app/reset-password/reset-password.component.html index 80afd89e5..de0851ff6 100644 --- a/src/app/reset-password/reset-password.component.html +++ b/src/app/reset-password/reset-password.component.html @@ -22,8 +22,8 @@ </div> </div> <div class="footer" fxLayout="row" fxLayoutAlign="space-between center"> - <app-v3-button [variant]="'secondary'" [label]="'Annuler'" (action)="goLogin()" /> - <app-v3-button [variant]="'primary'" [label]="'Envoyer'" [type]="'submit'" [disabled]="loading" /> + <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="goLogin()" /> + <app-button [variant]="'primary'" [label]="'Envoyer'" [type]="'submit'" [disabled]="loading" /> </div> </form> </div> diff --git a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html index 87d0ed662..6c3b55509 100644 --- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html +++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.html @@ -1,5 +1,5 @@ <div *ngIf="onlineProcedures" class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of onlineProcedures.modules" [iconName]="isSelectedModule(module) ? 'check' : null" [label]="module.name" diff --git a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.ts b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.ts index 90b0d7ad0..955eaca86 100644 --- a/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.ts +++ b/src/app/shared/components/accompaniment-picker/accompaniment-picker.component.ts @@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angu import { UntypedFormGroup } from '@angular/forms'; import { Category } from '../../../structure-list/models/category.model'; import { Module } from '../../../structure-list/models/module.model'; -import { ButtonType } from '../button/buttonType.enum'; @Component({ selector: 'app-accompaniment-picker', @@ -14,7 +13,6 @@ export class AccompanimentPickerComponent implements OnInit, OnChanges { @Input() onlineProcedures: Category; @Output() validateForm = new EventEmitter<any>(); - public buttonTypeEnum = ButtonType; public selectedModules: Module[] = []; ngOnInit(): void { diff --git a/src/app/shared/components/v3/button/Button.stories.ts b/src/app/shared/components/button/Button.stories.ts similarity index 88% rename from src/app/shared/components/v3/button/Button.stories.ts rename to src/app/shared/components/button/Button.stories.ts index bcea2ac93..4c17d6646 100644 --- a/src/app/shared/components/v3/button/Button.stories.ts +++ b/src/app/shared/components/button/Button.stories.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { ButtonV3Component } from './button.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { ButtonComponent } from './button.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<ButtonV3Component> = { +const meta: Meta<ButtonComponent> = { title: 'Components/Button', - component: ButtonV3Component, + component: ButtonComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -19,7 +19,7 @@ const meta: Meta<ButtonV3Component> = { }; export default meta; -type Story = StoryObj<ButtonV3Component>; +type Story = StoryObj<ButtonComponent>; export const Primary: Story = { args: { diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html index 99a54b7ef..a73644d7c 100644 --- a/src/app/shared/components/button/button.component.html +++ b/src/app/shared/components/button/button.component.html @@ -1,306 +1,17 @@ -<ng-container *ngIf="style === buttonTypeEnum.Regular"> - <button class="btn-regular" type="{{ type }}" [disabled]="disabled" (click)="doAction()"> - <div *ngIf="!iconBtn" class="text">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - class="text withIcon left" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span>{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text withIcon right" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <span>{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.searchIcon"> - <button class="searchIcon" aria-label="Rechercher" type="{{ type }}" (click)="doAction()"> - <div fxLayout="row center" class="searchIcon withIcon" fxLayoutAlign="space-between center"> - <app-svg-icon [folder]="'ico'" [icon]="iconBtn" [iconColor]="'currentColor'" [iconClass]="'icon-30'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.Primary"> - <button - class="btn-regular primary" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="extraClass" - (click)="doAction()" - > - <div *ngIf="!iconBtn" class="text">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - class="text withIcon left" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span [ngClass]="extraClass">{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text withIcon right" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <span [ngClass]="extraClass">{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.modalPrimary"> - <button class="btn-regular modal-primary" type="{{ type }}" [disabled]="disabled" (click)="doAction()"> - <div *ngIf="!iconBtn" class="text" [ngClass]="variant">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - class="text" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span>{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <span>{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.modalSecondary"> - <button - class="btn-regular modal-secondary" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="{ disabled: disabled }" - (click)="doAction()" - > - <div *ngIf="!iconBtn" class="text" [ngClass]="variant">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - class="text" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span>{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <span>{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.Secondary || style === buttonTypeEnum.SecondaryWide"> - <button - [ngClass]="{ - 'btn-regular secondary': true, - wide: style === buttonTypeEnum.SecondaryWide - }" - type="{{ type }}" - [disabled]="disabled" - (click)="doAction()" - > - <div *ngIf="!iconBtn" class="text" [ngClass]="[variant, extraClass || '']">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - fxLayoutAlign="space-around center" - class="text withIcon left" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span>{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text withIcon right" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <span>{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.SecondaryUltraWide"> - <button class="btn-regular secondary ultrawide" type="{{ type }}" [disabled]="disabled" (click)="doAction()"> - <div *ngIf="!iconBtn" class="text" [ngClass]="[variant, extraClass || '']">{{ text }}</div> - <div - *ngIf="iconBtn && iconPos === 'left'" - fxLayout="row center" - class="text withIcon left" - fxLayoutAlign="center center" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - <span>{{ text }}</span> - </div> - <div - *ngIf="iconBtn && iconPos === 'right'" - fxLayout="row center" - class="text withIcon right" - fxLayoutAlign="center center" - [ngClass]="variant" - > - <span>{{ text }}</span> - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.SecondaryOnlyIcon"> - <button class="btn-regular secondary" type="{{ type }}" [disabled]="disabled" (click)="doAction()"> - <div - *ngIf="iconBtn" - fxLayout="row center" - class="text withIcon center" - fxLayoutAlign="space-around center" - [ngClass]="variant" - > - <app-svg-icon [folder]="iconType" [icon]="iconBtn" [iconColor]="'currentColor'" /> - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.ButtonPhone"> - <button class="btn-switch-phone" [disabled]="disabled" type="{{ type }}" (click)="doAction()"> - <div *ngIf="!iconBtn" class="text" [ngClass]="variant">{{ text }}</div> - <div - *ngIf="iconBtn" - fxLayout="center" - class="text withIcon" - fxLayoutAlign="space-around center" - fxLayoutGap="13px" - [ngClass]="variant" - > - <app-svg-icon - class="iconBtn" - [folder]="'ico'" - [iconClass]="'icon-32'" - [icon]="iconBtn" - [iconColor]="'currentColor'" - /> - {{ text }} - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.Filter"> - <button - class="btn-filter-phone" - [disabled]="disabled" - type="{{ type }}" - [ngClass]="{ disabled: disabled }" - (click)="doAction()" - > - <div *ngIf="!iconBtn" class="text" [ngClass]="variant">{{ text }}</div> - <div - *ngIf="iconBtn" - fxLayout="row center" - class="text withIcon" - fxLayoutAlign="space-around center" - fxLayoutGap="13px" - > - <app-svg-icon [folder]="'ico'" [iconClass]="'icon-32'" [icon]="iconBtn" [iconColor]="'currentColor'" /> - {{ text }} - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.Tertiary"> - <button - class="btn-regular tertiary" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="extraClass" - (click)="doAction()" - > - <div>{{ text }}</div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.TertiaryRounded"> - <button - class="btn-regular tertiary rounded" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="extraClass" - (click)="doAction()" - > - <div>{{ text }}</div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.CheckButton"> - <button - class="btn-regular tertiary rounded checkButton" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="extraClass" - (click)="doAction()" - > - <div fxLayout="row center" fxLayoutAlign="space-around center" fxLayoutGap="13px"> - <app-svg-icon - *ngIf="extraClass" - [folder]="'ico'" - [icon]="'check'" - [iconClass]="'icon-28'" - [iconColor]="'currentColor'" - /> - {{ text }} - </div> - </button> -</ng-container> - -<ng-container *ngIf="style === buttonTypeEnum.IconOnly"> - <button - class="btn-regular icon-only" - type="{{ type }}" - [disabled]="disabled" - [ngClass]="{ active: active }" - (click)="doAction()" - > - <div *ngIf="iconBtn" class="text withIcon" [ngClass]="variant"> - <app-svg-icon - *ngIf="iconBtn" - [folder]="iconType" - [icon]="iconBtn" - [iconClass]="'icon-28'" - [iconColor]="active ? 'green' : 'currentColor'" - /> - </div> - </button> -</ng-container> +<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)"> + <app-svg-icon + *ngIf="iconName && iconPosition === 'left'" + [folder]="iconFolder" + [icon]="iconName" + [iconColor]="iconColor" + [iconClass]="'icon-20'" + /> + {{ label }} + <app-svg-icon + *ngIf="iconName && iconPosition === 'right'" + [folder]="iconFolder" + [icon]="iconName" + [iconColor]="iconColor" + [iconClass]="'icon-20'" + /> +</button> diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss index 929f321f8..ea5b1c040 100644 --- a/src/app/shared/components/button/button.component.scss +++ b/src/app/shared/components/button/button.component.scss @@ -1,279 +1,180 @@ -@import 'typography'; @import 'color'; -@import 'breakpoint'; -@import 'shapes'; +@import 'typography'; -@mixin btn-bold { - @include font-bold-13; - line-height: 18px; -} -@mixin btn-bold-underline { - @include btn-bold; - text-decoration: underline; -} -@mixin btn-regular { - @include font-regular-13; - line-height: 19px; -} button { - outline: none; border-radius: 4px; cursor: pointer; - border: 1px solid; - padding: 0; -} -.searchIcon { - background: transparent; - border: none; - & > svg { - width: 30px; - height: 30px; - } -} + border: 1px solid transparent; + transition: + background-color 0.2s ease-in-out, + border 0.2s ease-out; + + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; -.btn-regular { - background: $grey-9; - border-radius: 5px 5px 4px 5px; - border: 0; - transition: all 0.1s; - div:first-child { - width: 125px; - } - &:hover { - box-shadow: -2px 2px; - } &:focus-visible { - box-shadow: 0 0 0 5px $grey-5; + outline-offset: 2px; + outline: 2px solid $blue-focus; } - .searchButton { - background: $grey-6; + // WIDTH + width: 150px; + &.wide { + width: 250px; } - &.primary { - border: 0; - @include btn-bold; - .text { - background: $primary-color; - border: 1px solid $grey-1; - line-height: 15px; - color: $white; - &.withIcon { - color: $white; - } + // SIZES + &.small { + height: 32px; + font-size: $font-size-xsmall; + padding-inline: 4px; + &.icon-only { + width: 32px; } } - &.modal-primary { - border: none; - width: 100%; - @include btn-bold; - .text { - display: flex; - text-align: center; - align-items: center; - justify-content: center; - background: $primary-color; - margin: auto; - color: $white; - width: auto; - line-height: 15px; - &.withIcon { - color: $white; - } + &.medium { + height: 40px; + font-size: $font-size-small; + padding-inline: 4px; + &.icon-only { + width: 40px; } } - &.modal-secondary { - border: none; - width: 100%; - @include btn-regular; - .text { - display: flex; - text-align: center; - align-items: center; - justify-content: center; - margin: auto; - color: $grey-1; - width: auto; - line-height: 15px; - &.withIcon { - color: $grey-1; - } - } + &.large { + height: 48px; + font-size: $font-size-smedium; + padding-inline: 4px; } - &.secondary { - div:first-child { - width: unset; + + // VARIANT + &.primary { + background-color: $red; + color: $white; + &:hover { + background-color: $red-dark; + } + &:disabled { + background-color: $grey-8; + color: $grey-3; } - border: 0; - background: $white; - @include btn-regular; - .text { - background: $white; - border: 1px solid $grey-1; - color: $grey-1; - font-size: 14px; - line-height: 15px; - &.withIcon { - color: $grey-1; - } + &:active { + background-color: $red-pressed; } - &.wide { - div:first-child { - min-width: 50px; - width: 184px; - } + } + + &.primaryBlack { + background-color: $grey-1; + color: $white; + &:hover { + background-color: $grey-2; } - &.ultrawide { - div:first-child { - min-width: 50px; - width: 400px; - @media #{$tablet} { - width: 200px; - } - span { - padding-inline: 4px; - } - } + &:disabled { + background-color: $grey-8; + color: $grey-3; } - .small-text { - height: 22px !important; + &:active { + background-color: $grey-3; } } - &.tertiary { - div:first-child { - min-width: 50px; - width: unset; - } + + &.primaryWarning { + background-color: $info-warning; + color: $white; &:hover { - border: 1px solid $grey-5; - box-shadow: none; + background-color: $warning-hover; } - border: 1px solid transparent; - background: $grey-8; - height: 36px; - color: $black; - padding: 0px 16px; - min-width: 50px; - - @include btn-regular; - &.selected { - background-color: $green-1 !important; - color: white !important; - &:hover { - background-color: $green-1 !important; - } + &:disabled { + background-color: $grey-8; + color: $grey-3; } - &.checkButton { - padding: 0px 14px; - font-weight: bold; - div:first-child { - padding: 0 14px; - } - &.selected { - padding: unset; - } + &:active { + background-color: $warning-pressed; } } - &.icon-only { - div:first-child { - width: unset; + &.primarySuccess { + background-color: $info-success; + color: $white; + &:hover { + background-color: $success-hover; } - &.active { - .text { - border-color: $green-1; - } - &:hover { - background: unset !important; - } + &:disabled { + background-color: $grey-8; + color: $grey-3; } - &.center { - padding-left: 6px !important; - padding-right: 6px !important; + &:active { + background-color: $success-pressed; } } - &.rounded { - border-radius: 20px; - transition: unset; - } - .text { - // position: relative; - // top: -1px; - // right: -1px; - border: 1px solid $grey-1; - background: $white; - height: 31px; + &.secondary { + background-color: $white; color: $grey-1; - padding: 3px 15px; - display: table-cell; - vertical-align: middle; - border-radius: 4px; - font-size: 14px; - line-height: 15px; - &.small { - height: 26px; + border-color: $grey-1; + &:hover { + background-color: $grey-3-15; } - &.medium { - height: 32px; + &:disabled { + background-color: $white; + color: $grey-5; + border-color: $grey-5; } - &.large { - height: 37px; + &:active { + background-color: $grey-3-20; } + } - &.withIcon { - color: $black; - height: 36px; - &.left { - padding-left: 8px !important; - } - &.right { - padding-right: 8px !important; - } - &.center { - padding-left: 6px !important; - padding-right: 6px !important; - } + &.secondarySuccess { + background-color: $white; + color: $info-success; + border-color: $info-success; + &:hover { + background-color: rgba($info-success, 0.15); + color: $success-hover; + border-color: $success-hover; + } + &:disabled { + background-color: $white; + color: $grey-4; + border-color: $grey-4; + } + &:active { + background-color: rgba($success-pressed, 0.2); + color: $success-pressed; + border-color: $success-pressed; } } -} -.btn-switch-phone { - background: $black; - height: 40px; - width: 124px; - color: $white; - padding: 0 28px; - border-radius: 20px; - .iconBtn { - margin-right: 6px; + &.secondaryDelete { + background-color: $white; + color: $red; + border-color: $red; + &:hover { + background-color: $grey-3-15; + } + &:disabled { + background-color: $white; + color: $grey-5; + border-color: $grey-5; + } + &:active { + background-color: $grey-3-20; + } } -} -.btn-filter-phone { - background: $white; - height: 40px; - color: $grey-1; - padding: 4px 37px 4px 37px; - border-color: $grey-5; - @include btn-normal; - &.containCheckedFilters { - border-color: $primary-color; - } -} -.fullButton { - width: 125px !important; -} -.fullWidth { - width: 100% !important; -} -.bigButton { - width: 280px !important; - .text { - width: inherit !important; + &.tertiary { + background-color: $white; + color: $grey-1; + &:hover { + border-color: $grey-3; + } + &:disabled { + color: $grey-3; + } + &:active { + background-color: $grey-9; + } } } -button:disabled { - opacity: 0.4; - cursor: not-allowed; -} diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts index d504461e3..7b2438ca3 100644 --- a/src/app/shared/components/button/button.component.ts +++ b/src/app/shared/components/button/button.component.ts @@ -1,6 +1,16 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { SpriteFolderType } from '../svg-icon/SpriteFolder.type'; -import { ButtonType } from './buttonType.enum'; + +/** values will be used for css selectors */ +export type ButtonType = + | 'primary' + | 'primaryBlack' + | 'primaryWarning' + | 'primarySuccess' + | 'secondary' + | 'secondarySuccess' + | 'secondaryDelete' + | 'tertiary'; @Component({ selector: 'app-button', @@ -8,21 +18,40 @@ import { ButtonType } from './buttonType.enum'; styleUrls: ['./button.component.scss'], }) export class ButtonComponent { - @Input() public style: ButtonType = ButtonType.Regular; - @Input() public text: string; - @Input() public type = 'button'; - @Input() public variant: 'small' | 'medium' | 'large' = 'medium'; - @Input() public iconType: SpriteFolderType = 'ico'; - @Input() public iconBtn: string; - @Input() public iconPos = 'left'; - @Input() public extraClass: string; - @Input() public disabled = false; - @Input() public active = false; - @Output() public action = new EventEmitter(); - - public buttonTypeEnum = ButtonType; - - public doAction(): void { - this.action.emit(); + /** Button label */ + @Input({ required: true }) label: string; + + /** HTML type of the button */ + @Input() type: 'submit' | 'button' | 'reset' = 'button'; + + /** What variant should be the button ? */ + @Input({ required: true }) variant: ButtonType; + + /** Affects the height of the button */ + @Input() size?: 'small' | 'medium' | 'large' = 'medium'; + + /** Should the button be wide ? (250px) */ + @Input() wide = false; + + /** Should the button be disabled ? */ + @Input() disabled = false; + + /** Sets the position of the icon if one provided */ + @Input() iconPosition: 'left' | 'right' = 'left'; + + /** Folder of the icon ex: assets/ico */ + @Input() iconFolder: SpriteFolderType = 'ico'; + + /** Icon name */ + @Input() iconName?: string; + + /** Icon color, defaults to none as the svg-icon does */ + @Input() iconColor = 'none'; + + /** Click handler */ + @Output() action = new EventEmitter<Event>(); + + public get classes(): string[] { + return [this.variant, this.size, this.wide ? 'wide' : '']; } } diff --git a/src/app/shared/components/button/buttonType.enum.ts b/src/app/shared/components/button/buttonType.enum.ts deleted file mode 100644 index c2bbb517f..000000000 --- a/src/app/shared/components/button/buttonType.enum.ts +++ /dev/null @@ -1,17 +0,0 @@ -export enum ButtonType { - Regular, - Primary, - Secondary, - SecondaryWide, - SecondaryUltraWide, - SecondaryOnlyIcon, - Tertiary, - TertiaryRounded, - ButtonPhone, - Filter, - IconOnly, - CheckButton, - searchIcon, - modalPrimary, - modalSecondary, -} diff --git a/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts b/src/app/shared/components/button/icon-button/IconButton.stories.ts similarity index 77% rename from src/app/shared/components/v3/button/icon-button/IconButton.stories.ts rename to src/app/shared/components/button/icon-button/IconButton.stories.ts index 6119d7119..18cff3dfb 100644 --- a/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts +++ b/src/app/shared/components/button/icon-button/IconButton.stories.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../../svg-icon/svg-icon.component'; -import { IconButtonV3Component } from './icon-button.component'; +import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; +import { IconButtonComponent } from './icon-button.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<IconButtonV3Component> = { +const meta: Meta<IconButtonComponent> = { title: 'Components/IconButton', - component: IconButtonV3Component, + component: IconButtonComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -19,7 +19,7 @@ const meta: Meta<IconButtonV3Component> = { }; export default meta; -type Story = StoryObj<IconButtonV3Component>; +type Story = StoryObj<IconButtonComponent>; export const Primary: Story = { args: { diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.html b/src/app/shared/components/button/icon-button/icon-button.component.html similarity index 100% rename from src/app/shared/components/v3/button/icon-button/icon-button.component.html rename to src/app/shared/components/button/icon-button/icon-button.component.html diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts b/src/app/shared/components/button/icon-button/icon-button.component.ts similarity index 78% rename from src/app/shared/components/v3/button/icon-button/icon-button.component.ts rename to src/app/shared/components/button/icon-button/icon-button.component.ts index 66e9cb9d2..d66d2c79d 100644 --- a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts +++ b/src/app/shared/components/button/icon-button/icon-button.component.ts @@ -1,13 +1,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { SpriteFolderType } from '../../../svg-icon/SpriteFolder.type'; -import { ButtonTypeV3 } from '../button.component'; +import { SpriteFolderType } from '../../svg-icon/SpriteFolder.type'; +import { ButtonType } from '../button.component'; @Component({ - selector: 'app-v3-icon-button', + selector: 'app-icon-button', templateUrl: './icon-button.component.html', styleUrls: ['../button.component.scss'], }) -export class IconButtonV3Component { +export class IconButtonComponent { /** Icon name */ @Input({ required: true }) iconName: string; @@ -15,7 +15,7 @@ export class IconButtonV3Component { @Input() type: 'submit' | 'button' | 'reset' = 'button'; /** What variant should the button be ? */ - @Input({ required: true }) variant: ButtonTypeV3; + @Input({ required: true }) variant: ButtonType; /** Affects the height of the button */ @Input() size?: 'small' | 'medium' = 'small'; diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html index 5b91f1292..784e822f6 100644 --- a/src/app/shared/components/checkbox-form/checkbox-form.component.html +++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html @@ -1,5 +1,5 @@ <button type="button" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()"> - <app-v3-checkbox [checked]="isChecked" /> + <app-checkbox [checked]="isChecked" /> <svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType"> <use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg" /> diff --git a/src/app/shared/components/checkbox-form/checkbox-form.stories.ts b/src/app/shared/components/checkbox-form/checkbox-form.stories.ts index 360f6271a..60d9b9728 100644 --- a/src/app/shared/components/checkbox-form/checkbox-form.stories.ts +++ b/src/app/shared/components/checkbox-form/checkbox-form.stories.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; -import { CheckboxV3Component } from '../v3/checkbox/checkbox.component'; +import { CheckboxComponent } from '../checkbox/checkbox.component'; import { CheckboxFormComponent } from './checkbox-form.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction @@ -11,7 +11,7 @@ const meta: Meta<CheckboxFormComponent> = { tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [CheckboxV3Component], + declarations: [CheckboxComponent], imports: [CommonModule], }), ], diff --git a/src/app/shared/components/v3/checkbox/check-grey.svg b/src/app/shared/components/checkbox/check-grey.svg similarity index 100% rename from src/app/shared/components/v3/checkbox/check-grey.svg rename to src/app/shared/components/checkbox/check-grey.svg diff --git a/src/app/shared/components/v3/checkbox/check.svg b/src/app/shared/components/checkbox/check.svg similarity index 100% rename from src/app/shared/components/v3/checkbox/check.svg rename to src/app/shared/components/checkbox/check.svg diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.html b/src/app/shared/components/checkbox/checkbox.component.html similarity index 100% rename from src/app/shared/components/v3/checkbox/checkbox.component.html rename to src/app/shared/components/checkbox/checkbox.component.html diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.scss b/src/app/shared/components/checkbox/checkbox.component.scss similarity index 100% rename from src/app/shared/components/v3/checkbox/checkbox.component.scss rename to src/app/shared/components/checkbox/checkbox.component.scss diff --git a/src/app/shared/components/v3/checkbox/checkbox.component.ts b/src/app/shared/components/checkbox/checkbox.component.ts similarity index 90% rename from src/app/shared/components/v3/checkbox/checkbox.component.ts rename to src/app/shared/components/checkbox/checkbox.component.ts index 6328818c2..04cc9244c 100644 --- a/src/app/shared/components/v3/checkbox/checkbox.component.ts +++ b/src/app/shared/components/checkbox/checkbox.component.ts @@ -1,11 +1,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ - selector: 'app-v3-checkbox', + selector: 'app-checkbox', templateUrl: './checkbox.component.html', styleUrls: ['./checkbox.component.scss'], }) -export class CheckboxV3Component { +export class CheckboxComponent { /** HTML id associated with for */ @Input() id: string; diff --git a/src/app/shared/components/v3/checkbox/checkbox.stories.ts b/src/app/shared/components/checkbox/checkbox.stories.ts similarity index 82% rename from src/app/shared/components/v3/checkbox/checkbox.stories.ts rename to src/app/shared/components/checkbox/checkbox.stories.ts index fca45a411..6816dd265 100644 --- a/src/app/shared/components/v3/checkbox/checkbox.stories.ts +++ b/src/app/shared/components/checkbox/checkbox.stories.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { CheckboxV3Component } from './checkbox.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { CheckboxComponent } from './checkbox.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<CheckboxV3Component> = { +const meta: Meta<CheckboxComponent> = { title: 'Components/Checkbox', - component: CheckboxV3Component, + component: CheckboxComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -19,7 +19,7 @@ const meta: Meta<CheckboxV3Component> = { }; export default meta; -type Story = StoryObj<CheckboxV3Component>; +type Story = StoryObj<CheckboxComponent>; export const CheckBoxSmall: Story = { args: { diff --git a/src/app/shared/components/v3/checkbox/indeterminate-grey.svg b/src/app/shared/components/checkbox/indeterminate-grey.svg similarity index 100% rename from src/app/shared/components/v3/checkbox/indeterminate-grey.svg rename to src/app/shared/components/checkbox/indeterminate-grey.svg diff --git a/src/app/shared/components/v3/checkbox/indeterminate.svg b/src/app/shared/components/checkbox/indeterminate.svg similarity index 100% rename from src/app/shared/components/v3/checkbox/indeterminate.svg rename to src/app/shared/components/checkbox/indeterminate.svg diff --git a/src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts b/src/app/shared/components/collapse/collapse-content/collapse-content.component.ts similarity index 100% rename from src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts rename to src/app/shared/components/collapse/collapse-content/collapse-content.component.ts diff --git a/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss b/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss similarity index 100% rename from src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss rename to src/app/shared/components/collapse/collapse-header/collapse-header.component.scss diff --git a/src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts b/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts similarity index 100% rename from src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts rename to src/app/shared/components/collapse/collapse-header/collapse-header.component.ts diff --git a/src/app/shared/components/v3/collapse/collapse.component.scss b/src/app/shared/components/collapse/collapse.component.scss similarity index 100% rename from src/app/shared/components/v3/collapse/collapse.component.scss rename to src/app/shared/components/collapse/collapse.component.scss diff --git a/src/app/shared/components/v3/collapse/collapse.component.ts b/src/app/shared/components/collapse/collapse.component.ts similarity index 100% rename from src/app/shared/components/v3/collapse/collapse.component.ts rename to src/app/shared/components/collapse/collapse.component.ts diff --git a/src/app/shared/components/v3/collapse/collapse.stories.ts b/src/app/shared/components/collapse/collapse.stories.ts similarity index 97% rename from src/app/shared/components/v3/collapse/collapse.stories.ts rename to src/app/shared/components/collapse/collapse.stories.ts index 6e84843a3..b8c1e4b1b 100644 --- a/src/app/shared/components/v3/collapse/collapse.stories.ts +++ b/src/app/shared/components/collapse/collapse.stories.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; import { CollapseContentComponent } from './collapse-content/collapse-content.component'; import { CollapseHeaderComponent } from './collapse-header/collapse-header.component'; import { CollapseComponent } from './collapse.component'; diff --git a/src/app/shared/components/v3/collapse/collapse.type.ts b/src/app/shared/components/collapse/collapse.type.ts similarity index 100% rename from src/app/shared/components/v3/collapse/collapse.type.ts rename to src/app/shared/components/collapse/collapse.type.ts diff --git a/src/app/shared/components/data-share-consent/data-share-consent.component.html b/src/app/shared/components/data-share-consent/data-share-consent.component.html index 5475a4c27..9a69793f9 100644 --- a/src/app/shared/components/data-share-consent/data-share-consent.component.html +++ b/src/app/shared/components/data-share-consent/data-share-consent.component.html @@ -1,4 +1,4 @@ -<app-v3-modal +<app-modal [opened]="opened" [validateLabel]="'Valider'" [singleButton]="true" @@ -61,4 +61,4 @@ de vos interlocuteurs de la Métropole de Lyon. </p> </form> -</app-v3-modal> +</app-modal> diff --git a/src/app/shared/components/go-back/go-back.component.ts b/src/app/shared/components/go-back/go-back.component.ts index 772eba5a9..f608c6a6c 100644 --- a/src/app/shared/components/go-back/go-back.component.ts +++ b/src/app/shared/components/go-back/go-back.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-go-back', - template: `<app-v3-button + template: `<app-button [label]="'Retour'" [variant]="'tertiary'" [iconFolder]="'ico'" diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html index 88c47c207..6149db74b 100644 --- a/src/app/shared/components/hour-picker/hour-picker.component.html +++ b/src/app/shared/components/hour-picker/hour-picker.component.html @@ -36,7 +36,7 @@ (valueChange)="submitForm()" /> - <app-v3-button + <app-button *ngIf="day.hours.length === 2 && index === 1" [variant]="'secondary'" [label]="'Supprimer'" @@ -45,7 +45,7 @@ /> </div> - <app-v3-button + <app-button *ngIf="day.hours.length === 1" [variant]="'primaryBlack'" [label]="'Ajouter un horaire'" diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts index 7b96c64b3..53992d236 100644 --- a/src/app/shared/components/index.ts +++ b/src/app/shared/components/index.ts @@ -5,53 +5,51 @@ import { AccompanimentPickerComponent } from './accompaniment-picker/accompanime import { AddressAutocompleteComponent } from './address-autocomplete/address-autocomplete.component'; import { AppointmentChoiceComponent } from './appointment-choice/appointment-choice.component'; import { ButtonComponent } from './button/button.component'; +import { IconButtonComponent } from './button/icon-button/icon-button.component'; import { CheckboxFilterComponent } from './checkbox-filter/checkbox-filter.component'; import { CheckboxFormComponent } from './checkbox-form/checkbox-form.component'; +import { CheckboxComponent } from './checkbox/checkbox.component'; import { CollapsableFilterComponent } from './collapsable-filter/collapsable-filter.component'; +import { CollapseContentComponent } from './collapse/collapse-content/collapse-content.component'; +import { CollapseHeaderComponent } from './collapse/collapse-header/collapse-header.component'; +import { CollapseComponent } from './collapse/collapse.component'; import { GoBackComponent } from './go-back/go-back.component'; import { HourPickerComponent } from './hour-picker/hour-picker.component'; +import { InputComponent } from './input/input.component'; +import { LabelCheckboxComponent } from './label-checkbox/label-checkbox.component'; import { LogoCardComponent } from './logo-card/logo-card.component'; import { MemberCardComponent } from './member-card/member-card.component'; +import { ModalComponent } from './modal/modal.component'; import { PasswordFormComponent } from './password-form/password-form.component'; import { RadioOptionComponent } from './radio-option/radio-option.component'; +import { RadioComponent } from './radio/radio.component'; +import { SearchBarComponent } from './search-bar/search-bar.component'; import { StructureDetailPrintComponent } from './structure-detail-print/structure-detail-print.component'; import { StructureHoursListComponent } from './structure-hours/structure-hours-list.component'; import { StructurePmrComponent } from './structure-pmr/structure-pmr.component'; import { StructureTypePickerComponent } from './structure-type-picker/structure-type-picker.component'; import { SvgIconComponent } from './svg-icon/svg-icon.component'; +import { SwitchComponent } from './switch/switch.component'; +import { TagItemComponent } from './tag-item/tag-item.component'; +import { TextareaComponent } from './textarea/textarea.component'; import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component'; -import { ButtonV3Component } from './v3/button/button.component'; -import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component'; -import { CheckboxV3Component } from './v3/checkbox/checkbox.component'; -import { CollapseContentComponent } from './v3/collapse/collapse-content/collapse-content.component'; -import { CollapseHeaderComponent } from './v3/collapse/collapse-header/collapse-header.component'; -import { CollapseComponent } from './v3/collapse/collapse.component'; -import { InputV3Component } from './v3/input/input.component'; -import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component'; -import { ModalV3Component } from './v3/modal/modal.component'; -import { RadioV3Component } from './v3/radio/radio.component'; -import { SearchBarV3Component } from './v3/search-bar/search-bar.component'; -import { SwitchComponent } from './v3/switch/switch.component'; -import { TagItemV3Component } from './v3/tag-item/tag-item.component'; -import { TextareaV3Component } from './v3/textarea/textarea.component'; export { AccompanimentPickerComponent, AddressAutocompleteComponent, ButtonComponent, - ButtonV3Component, + CheckboxComponent, CheckboxFormComponent, - CheckboxV3Component, CollapseComponent, CollapseContentComponent, CollapseHeaderComponent, GoBackComponent, HourPickerComponent, InformationStepComponent, - LabelCheckboxV3Component, + LabelCheckboxComponent, LogoCardComponent, MemberCardComponent, - ModalV3Component, + ModalComponent, PasswordFormComponent, ProgressBarComponent, RadioOptionComponent, @@ -62,7 +60,7 @@ export { StructureTypePickerComponent, SvgIconComponent, SwitchComponent, - TagItemV3Component, + TagItemComponent, TrainingTypePickerComponent, }; @@ -71,35 +69,35 @@ export const SharedComponents = [ AddressAutocompleteComponent, AppointmentChoiceComponent, ButtonComponent, - ButtonV3Component, + ButtonComponent, CheckboxFilterComponent, CheckboxFormComponent, - CheckboxV3Component, + CheckboxComponent, CollapsableFilterComponent, CollapseComponent, CollapseContentComponent, CollapseHeaderComponent, HourPickerComponent, - IconButtonV3Component, + IconButtonComponent, InformationStepComponent, - InputV3Component, - LabelCheckboxV3Component, + InputComponent, + LabelCheckboxComponent, MemberCardComponent, LogoCardComponent, - ModalV3Component, + ModalComponent, PasswordFormComponent, ProgressBarComponent, RadioOptionComponent, - RadioV3Component, - SearchBarV3Component, + RadioComponent, + SearchBarComponent, StructureDetailPrintComponent, StructurePmrComponent, StructurePublicTargetComponent, StructureTypePickerComponent, SvgIconComponent, - TagItemV3Component, + TagItemComponent, TrainingTypePickerComponent, - TextareaV3Component, + TextareaComponent, StructureHoursListComponent, GoBackComponent, SwitchComponent, diff --git a/src/app/shared/components/v3/input/input.component.html b/src/app/shared/components/input/input.component.html similarity index 100% rename from src/app/shared/components/v3/input/input.component.html rename to src/app/shared/components/input/input.component.html diff --git a/src/app/shared/components/v3/input/input.component.scss b/src/app/shared/components/input/input.component.scss similarity index 100% rename from src/app/shared/components/v3/input/input.component.scss rename to src/app/shared/components/input/input.component.scss diff --git a/src/app/shared/components/v3/input/input.component.ts b/src/app/shared/components/input/input.component.ts similarity index 97% rename from src/app/shared/components/v3/input/input.component.ts rename to src/app/shared/components/input/input.component.ts index 69c94e0da..8eb9ce890 100644 --- a/src/app/shared/components/v3/input/input.component.ts +++ b/src/app/shared/components/input/input.component.ts @@ -5,7 +5,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; templateUrl: './input.component.html', styleUrls: ['./input.component.scss'], }) -export class InputV3Component implements OnInit { +export class InputComponent implements OnInit { /** HTML id associated with for */ @Input() id: string; diff --git a/src/app/shared/components/v3/input/input.stories.ts b/src/app/shared/components/input/input.stories.ts similarity index 90% rename from src/app/shared/components/v3/input/input.stories.ts rename to src/app/shared/components/input/input.stories.ts index 47180bbae..1327c3e9e 100644 --- a/src/app/shared/components/v3/input/input.stories.ts +++ b/src/app/shared/components/input/input.stories.ts @@ -1,12 +1,12 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { InputV3Component } from './input.component'; +import { InputComponent } from './input.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<InputV3Component> = { +const meta: Meta<InputComponent> = { title: 'Components/Input', - component: InputV3Component, + component: InputComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -18,7 +18,7 @@ const meta: Meta<InputV3Component> = { }; export default meta; -type Story = StoryObj<InputV3Component>; +type Story = StoryObj<InputComponent>; export const Input: Story = { args: { diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html b/src/app/shared/components/label-checkbox/label-checkbox.component.html similarity index 96% rename from src/app/shared/components/v3/label-checkbox/label-checkbox.component.html rename to src/app/shared/components/label-checkbox/label-checkbox.component.html index 837b9044c..4befd4ab0 100644 --- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.html +++ b/src/app/shared/components/label-checkbox/label-checkbox.component.html @@ -1,6 +1,6 @@ <div> <div class="row"> - <app-v3-checkbox + <app-checkbox [id]="for" [size]="size" [checked]="checked" diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss b/src/app/shared/components/label-checkbox/label-checkbox.component.scss similarity index 100% rename from src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss rename to src/app/shared/components/label-checkbox/label-checkbox.component.scss diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts b/src/app/shared/components/label-checkbox/label-checkbox.component.ts similarity index 91% rename from src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts rename to src/app/shared/components/label-checkbox/label-checkbox.component.ts index 5e8b003d5..4e9189c5b 100644 --- a/src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts +++ b/src/app/shared/components/label-checkbox/label-checkbox.component.ts @@ -1,11 +1,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ - selector: 'app-v3-label-checkbox', + selector: 'app-label-checkbox', templateUrl: './label-checkbox.component.html', styleUrls: ['./label-checkbox.component.scss'], }) -export class LabelCheckboxV3Component { +export class LabelCheckboxComponent { /** Label text to display */ @Input({ required: true }) label: string; diff --git a/src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts b/src/app/shared/components/label-checkbox/label-checkbox.stories.ts similarity index 74% rename from src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts rename to src/app/shared/components/label-checkbox/label-checkbox.stories.ts index 4d816b80c..f8d6e896d 100644 --- a/src/app/shared/components/v3/label-checkbox/label-checkbox.stories.ts +++ b/src/app/shared/components/label-checkbox/label-checkbox.stories.ts @@ -1,18 +1,18 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { CheckboxV3Component } from '../checkbox/checkbox.component'; -import { LabelCheckboxV3Component } from './label-checkbox.component'; +import { CheckboxComponent } from '../checkbox/checkbox.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { LabelCheckboxComponent } from './label-checkbox.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<LabelCheckboxV3Component> = { +const meta: Meta<LabelCheckboxComponent> = { title: 'Components/Label checkbox', - component: LabelCheckboxV3Component, + component: LabelCheckboxComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [SvgIconComponent, CheckboxV3Component], + declarations: [SvgIconComponent, CheckboxComponent], imports: [CommonModule], }), ], @@ -20,7 +20,7 @@ const meta: Meta<LabelCheckboxV3Component> = { }; export default meta; -type Story = StoryObj<LabelCheckboxV3Component>; +type Story = StoryObj<LabelCheckboxComponent>; export const Label: Story = { args: { diff --git a/src/app/shared/components/v3/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html similarity index 95% rename from src/app/shared/components/v3/modal/modal.component.html rename to src/app/shared/components/modal/modal.component.html index eeb4e472b..eb393e445 100644 --- a/src/app/shared/components/v3/modal/modal.component.html +++ b/src/app/shared/components/modal/modal.component.html @@ -14,14 +14,14 @@ </div> <p><ng-content /></p> <div class="footerModal"> - <app-v3-button + <app-button *ngIf="!singleButton" [label]="cancelLabel" [variant]="'secondary'" [size]="'medium'" (action)="closeModal(false)" /> - <app-v3-button + <app-button [label]="validateLabel" [variant]="'primary'" [wide]="singleButton" diff --git a/src/app/shared/components/v3/modal/modal.component.scss b/src/app/shared/components/modal/modal.component.scss similarity index 96% rename from src/app/shared/components/v3/modal/modal.component.scss rename to src/app/shared/components/modal/modal.component.scss index 033ccb481..4f00e6cdc 100644 --- a/src/app/shared/components/v3/modal/modal.component.scss +++ b/src/app/shared/components/modal/modal.component.scss @@ -61,9 +61,6 @@ margin-top: 8px; gap: 0.75rem; justify-content: center; - app-button { - flex: 1; - } } } } diff --git a/src/app/shared/components/v3/modal/modal.component.ts b/src/app/shared/components/modal/modal.component.ts similarity index 94% rename from src/app/shared/components/v3/modal/modal.component.ts rename to src/app/shared/components/modal/modal.component.ts index e046e7f11..55d0b7993 100644 --- a/src/app/shared/components/v3/modal/modal.component.ts +++ b/src/app/shared/components/modal/modal.component.ts @@ -1,11 +1,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ - selector: 'app-v3-modal', + selector: 'app-modal', templateUrl: './modal.component.html', styleUrls: ['./modal.component.scss'], }) -export class ModalV3Component { +export class ModalComponent { /* Is modal opened ? */ @Input({ required: true }) public opened: boolean; diff --git a/src/app/shared/components/v3/modal/modal.stories.ts b/src/app/shared/components/modal/modal.stories.ts similarity index 76% rename from src/app/shared/components/v3/modal/modal.stories.ts rename to src/app/shared/components/modal/modal.stories.ts index fcf67c8c4..56b393d3d 100644 --- a/src/app/shared/components/v3/modal/modal.stories.ts +++ b/src/app/shared/components/modal/modal.stories.ts @@ -1,18 +1,18 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { ButtonV3Component } from '../button/button.component'; -import { ModalV3Component } from './modal.component'; +import { ButtonComponent } from '../button/button.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { ModalComponent } from './modal.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<ModalV3Component> = { +const meta: Meta<ModalComponent> = { title: 'Components/Modal', - component: ModalV3Component, + component: ModalComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [SvgIconComponent, ButtonV3Component], + declarations: [SvgIconComponent, ButtonComponent], imports: [CommonModule], }), ], @@ -20,7 +20,7 @@ const meta: Meta<ModalV3Component> = { }; export default meta; -type Story = StoryObj<ModalV3Component>; +type Story = StoryObj<ModalComponent>; export const SingleButton: Story = { args: { @@ -31,15 +31,15 @@ export const SingleButton: Story = { cancelLabel: 'Annuler', singleButton: true, }, - render: (args: Partial<ModalV3Component>) => ({ - template: `<app-v3-modal [opened]="${args.opened}" + render: (args: Partial<ModalComponent>) => ({ + template: `<app-modal [opened]="${args.opened}" [validateLabel]="'${args.validateLabel}'" [cancelLabel]="'${args.cancelLabel}'" [title]="'${args.title}'" [singleButton]="${args.singleButton}" > ${args.content} - </app-v3-modal>`, + </app-modal>`, }), }; diff --git a/src/app/shared/components/password-form/password-form.component.html b/src/app/shared/components/password-form/password-form.component.html index 3b6a59b25..b1dec7137 100644 --- a/src/app/shared/components/password-form/password-form.component.html +++ b/src/app/shared/components/password-form/password-form.component.html @@ -194,8 +194,8 @@ </div> </div> <div class="form-group" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px"> - <app-v3-button [variant]="'secondary'" [label]="'Annuler'" (action)="goHome()" /> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Annuler'" (action)="goHome()" /> + <app-button [type]="'submit'" [disabled]=" accountForm.get('confirmPassword').invalid || diff --git a/src/app/shared/components/radio-option/radio-option.stories.ts b/src/app/shared/components/radio-option/radio-option.stories.ts index 9b0703e9d..c91b65fb8 100644 --- a/src/app/shared/components/radio-option/radio-option.stories.ts +++ b/src/app/shared/components/radio-option/radio-option.stories.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; +import { RadioComponent } from '../radio/radio.component'; import { SvgIconComponent } from '../svg-icon/svg-icon.component'; -import { RadioV3Component } from '../v3/radio/radio.component'; import { RadioOptionComponent } from './radio-option.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction @@ -12,7 +12,7 @@ const meta: Meta<RadioOptionComponent> = { tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [SvgIconComponent, RadioV3Component], + declarations: [SvgIconComponent, RadioComponent], imports: [CommonModule], }), ], diff --git a/src/app/shared/components/v3/radio/radio.component.html b/src/app/shared/components/radio/radio.component.html similarity index 100% rename from src/app/shared/components/v3/radio/radio.component.html rename to src/app/shared/components/radio/radio.component.html diff --git a/src/app/shared/components/v3/radio/radio.component.scss b/src/app/shared/components/radio/radio.component.scss similarity index 100% rename from src/app/shared/components/v3/radio/radio.component.scss rename to src/app/shared/components/radio/radio.component.scss diff --git a/src/app/shared/components/v3/radio/radio.component.ts b/src/app/shared/components/radio/radio.component.ts similarity index 96% rename from src/app/shared/components/v3/radio/radio.component.ts rename to src/app/shared/components/radio/radio.component.ts index 3ee99023f..ee4010b2d 100644 --- a/src/app/shared/components/v3/radio/radio.component.ts +++ b/src/app/shared/components/radio/radio.component.ts @@ -5,7 +5,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; templateUrl: './radio.component.html', styleUrls: ['./radio.component.scss'], }) -export class RadioV3Component { +export class RadioComponent { /** HTML id associated with for */ @Input() id: string; diff --git a/src/app/shared/components/v3/radio/radio.stories.ts b/src/app/shared/components/radio/radio.stories.ts similarity index 85% rename from src/app/shared/components/v3/radio/radio.stories.ts rename to src/app/shared/components/radio/radio.stories.ts index fed1d1a97..383d9e13c 100644 --- a/src/app/shared/components/v3/radio/radio.stories.ts +++ b/src/app/shared/components/radio/radio.stories.ts @@ -1,12 +1,12 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { RadioV3Component } from './radio.component'; +import { RadioComponent } from './radio.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<RadioV3Component> = { +const meta: Meta<RadioComponent> = { title: 'Components/Radio', - component: RadioV3Component, + component: RadioComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -18,7 +18,7 @@ const meta: Meta<RadioV3Component> = { }; export default meta; -type Story = StoryObj<RadioV3Component>; +type Story = StoryObj<RadioComponent>; export const Radio: Story = { args: { diff --git a/src/app/shared/components/v3/scrollbar/scrollbar.stories.ts b/src/app/shared/components/scrollbar/scrollbar.stories.ts similarity index 100% rename from src/app/shared/components/v3/scrollbar/scrollbar.stories.ts rename to src/app/shared/components/scrollbar/scrollbar.stories.ts diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.html b/src/app/shared/components/search-bar/search-bar.component.html similarity index 94% rename from src/app/shared/components/v3/search-bar/search-bar.component.html rename to src/app/shared/components/search-bar/search-bar.component.html index 682164dc7..32d7dcbac 100644 --- a/src/app/shared/components/v3/search-bar/search-bar.component.html +++ b/src/app/shared/components/search-bar/search-bar.component.html @@ -7,7 +7,7 @@ (ngModelChange)="onChange()" (keyup.enter)="handleSearch()" /> - <app-v3-icon-button + <app-icon-button [iconFolder]="'ico'" [iconName]="'search'" [iconColor]="'currentColor'" diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.scss b/src/app/shared/components/search-bar/search-bar.component.scss similarity index 94% rename from src/app/shared/components/v3/search-bar/search-bar.component.scss rename to src/app/shared/components/search-bar/search-bar.component.scss index c871e6b76..18bc89006 100644 --- a/src/app/shared/components/v3/search-bar/search-bar.component.scss +++ b/src/app/shared/components/search-bar/search-bar.component.scss @@ -31,7 +31,7 @@ border: 1px solid $grey-1; } } - ::ng-deep app-v3-icon-button button { + ::ng-deep app-icon-button button { border-radius: 0 4px 4px 0; } } diff --git a/src/app/shared/components/v3/search-bar/search-bar.component.ts b/src/app/shared/components/search-bar/search-bar.component.ts similarity index 89% rename from src/app/shared/components/v3/search-bar/search-bar.component.ts rename to src/app/shared/components/search-bar/search-bar.component.ts index f6f3c3dbe..524248dcf 100644 --- a/src/app/shared/components/v3/search-bar/search-bar.component.ts +++ b/src/app/shared/components/search-bar/search-bar.component.ts @@ -1,11 +1,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ - selector: 'app-v3-search-bar', + selector: 'app-search-bar', templateUrl: './search-bar.component.html', styleUrls: ['./search-bar.component.scss'], }) -export class SearchBarV3Component { +export class SearchBarComponent { @Input() placeholder = 'Rechercher'; @Input({ required: true }) value = ''; diff --git a/src/app/shared/components/v3/search-bar/search-bar.stories.ts b/src/app/shared/components/search-bar/search-bar.stories.ts similarity index 55% rename from src/app/shared/components/v3/search-bar/search-bar.stories.ts rename to src/app/shared/components/search-bar/search-bar.stories.ts index 33043de81..f6dc049d3 100644 --- a/src/app/shared/components/v3/search-bar/search-bar.stories.ts +++ b/src/app/shared/components/search-bar/search-bar.stories.ts @@ -1,19 +1,19 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { ButtonV3Component } from '../button/button.component'; -import { IconButtonV3Component } from '../button/icon-button/icon-button.component'; -import { SearchBarV3Component } from './search-bar.component'; +import { ButtonComponent } from '../button/button.component'; +import { IconButtonComponent } from '../button/icon-button/icon-button.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { SearchBarComponent } from './search-bar.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<SearchBarV3Component> = { +const meta: Meta<SearchBarComponent> = { title: 'Components/Search bar', - component: SearchBarV3Component, + component: SearchBarComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [IconButtonV3Component, ButtonV3Component, SvgIconComponent], + declarations: [IconButtonComponent, ButtonComponent, SvgIconComponent], imports: [CommonModule], }), ], @@ -21,7 +21,7 @@ const meta: Meta<SearchBarV3Component> = { }; export default meta; -type Story = StoryObj<SearchBarV3Component>; +type Story = StoryObj<SearchBarComponent>; export const Default: Story = { args: {}, diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html index 71bad38b6..e8a401150 100644 --- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html +++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html @@ -2,7 +2,7 @@ <div class="title" style="gap: 12px"> <h4>{{ structureTypeCategoryEnum.public }}</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let type of publicTypes" [iconName]="type._id === pickedTypeId ? 'check' : null" [label]="type.name" @@ -16,7 +16,7 @@ <div class="title" style="gap: 12px"> <h4>{{ structureTypeCategoryEnum.private }}</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let type of privateTypes" [iconName]="type._id === pickedTypeId ? 'check' : null" [label]="type.name" @@ -30,7 +30,7 @@ <div class="title" style="gap: 12px"> <h4>{{ structureTypeCategoryEnum.privateLucrative }}</h4> <div class="btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let type of privateLucrativeTypes" [iconName]="type._id === pickedTypeId ? 'check' : null" [label]="type.name" diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts index e2991ec4e..95b8ae49b 100644 --- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts +++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts @@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { StructureType } from '../../../models/structureType.model'; import { StructureTypeService } from '../../../services/structure-type.service'; import { StructureCategoryEnum } from '../../enum/structureCategory.enum'; -import { ButtonType } from '../button/buttonType.enum'; @Component({ selector: 'app-structure-type-picker', @@ -15,7 +14,6 @@ export class StructureTypePickerComponent implements OnInit { @Input() public pickedTypeId?: string; @Output() selectedType: EventEmitter<string> = new EventEmitter<string>(); - public buttonTypeEnum = ButtonType; public structureTypeCategoryEnum = StructureCategoryEnum; constructor(private structureTypeService: StructureTypeService) {} diff --git a/src/app/shared/components/v3/switch/switch.component.html b/src/app/shared/components/switch/switch.component.html similarity index 100% rename from src/app/shared/components/v3/switch/switch.component.html rename to src/app/shared/components/switch/switch.component.html diff --git a/src/app/shared/components/v3/switch/switch.component.scss b/src/app/shared/components/switch/switch.component.scss similarity index 100% rename from src/app/shared/components/v3/switch/switch.component.scss rename to src/app/shared/components/switch/switch.component.scss diff --git a/src/app/shared/components/v3/switch/switch.component.ts b/src/app/shared/components/switch/switch.component.ts similarity index 100% rename from src/app/shared/components/v3/switch/switch.component.ts rename to src/app/shared/components/switch/switch.component.ts diff --git a/src/app/shared/components/v3/switch/switch.stories.ts b/src/app/shared/components/switch/switch.stories.ts similarity index 86% rename from src/app/shared/components/v3/switch/switch.stories.ts rename to src/app/shared/components/switch/switch.stories.ts index 147a35106..2401ad57d 100644 --- a/src/app/shared/components/v3/switch/switch.stories.ts +++ b/src/app/shared/components/switch/switch.stories.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { CheckboxV3Component } from '../checkbox/checkbox.component'; +import { CheckboxComponent } from '../checkbox/checkbox.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; import { SwitchComponent } from './switch.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction @@ -12,7 +12,7 @@ const meta: Meta<SwitchComponent> = { tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [SvgIconComponent, SvgIconComponent, CheckboxV3Component], + declarations: [SvgIconComponent, SvgIconComponent, CheckboxComponent], imports: [CommonModule], }), ], diff --git a/src/app/shared/components/v3/tag-item/tag-item.component.html b/src/app/shared/components/tag-item/tag-item.component.html similarity index 100% rename from src/app/shared/components/v3/tag-item/tag-item.component.html rename to src/app/shared/components/tag-item/tag-item.component.html diff --git a/src/app/shared/components/v3/tag-item/tag-item.component.scss b/src/app/shared/components/tag-item/tag-item.component.scss similarity index 100% rename from src/app/shared/components/v3/tag-item/tag-item.component.scss rename to src/app/shared/components/tag-item/tag-item.component.scss diff --git a/src/app/shared/components/v3/tag-item/tag-item.component.ts b/src/app/shared/components/tag-item/tag-item.component.ts similarity index 89% rename from src/app/shared/components/v3/tag-item/tag-item.component.ts rename to src/app/shared/components/tag-item/tag-item.component.ts index 81bf378e7..d9a01369d 100644 --- a/src/app/shared/components/v3/tag-item/tag-item.component.ts +++ b/src/app/shared/components/tag-item/tag-item.component.ts @@ -1,12 +1,12 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { SpriteFolderType } from '../../svg-icon/SpriteFolder.type'; +import { SpriteFolderType } from '../svg-icon/SpriteFolder.type'; @Component({ - selector: 'app-v3-tag-item', + selector: 'app-tag-item', templateUrl: './tag-item.component.html', styleUrls: ['./tag-item.component.scss'], }) -export class TagItemV3Component { +export class TagItemComponent { /** Tag label */ @Input({ required: true }) label: string; diff --git a/src/app/shared/components/v3/tag-item/tag-item.stories.ts b/src/app/shared/components/tag-item/tag-item.stories.ts similarity index 82% rename from src/app/shared/components/v3/tag-item/tag-item.stories.ts rename to src/app/shared/components/tag-item/tag-item.stories.ts index 00bc172cc..ddfd2f5dd 100644 --- a/src/app/shared/components/v3/tag-item/tag-item.stories.ts +++ b/src/app/shared/components/tag-item/tag-item.stories.ts @@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'; import { EventEmitter } from '@angular/core'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { SvgIconComponent } from '../../svg-icon/svg-icon.component'; -import { TagItemV3Component } from './tag-item.component'; +import { SvgIconComponent } from '../svg-icon/svg-icon.component'; +import { TagItemComponent } from './tag-item.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<TagItemV3Component> = { +const meta: Meta<TagItemComponent> = { title: 'Components/Tag item', - component: TagItemV3Component, + component: TagItemComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -20,7 +20,7 @@ const meta: Meta<TagItemV3Component> = { }; export default meta; -type Story = StoryObj<TagItemV3Component>; +type Story = StoryObj<TagItemComponent>; export const Small: Story = { args: { @@ -94,9 +94,9 @@ export const MultipleTags: Story = { props: args, template: ` <div class="btn-grid"> - <app-v3-tag-item label="test 1" /> - <app-v3-tag-item label="test 2" /> - <app-v3-tag-item label="test 3" /> + <app-tag-item label="test 1" /> + <app-tag-item label="test 2" /> + <app-tag-item label="test 3" /> </div>`, }), }; diff --git a/src/app/shared/components/v3/textarea/textarea.component.html b/src/app/shared/components/textarea/textarea.component.html similarity index 100% rename from src/app/shared/components/v3/textarea/textarea.component.html rename to src/app/shared/components/textarea/textarea.component.html diff --git a/src/app/shared/components/v3/textarea/textarea.component.scss b/src/app/shared/components/textarea/textarea.component.scss similarity index 100% rename from src/app/shared/components/v3/textarea/textarea.component.scss rename to src/app/shared/components/textarea/textarea.component.scss diff --git a/src/app/shared/components/v3/textarea/textarea.component.ts b/src/app/shared/components/textarea/textarea.component.ts similarity index 96% rename from src/app/shared/components/v3/textarea/textarea.component.ts rename to src/app/shared/components/textarea/textarea.component.ts index 28fe1f149..c4f6233b9 100644 --- a/src/app/shared/components/v3/textarea/textarea.component.ts +++ b/src/app/shared/components/textarea/textarea.component.ts @@ -5,7 +5,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; templateUrl: './textarea.component.html', styleUrls: ['./textarea.component.scss'], }) -export class TextareaV3Component { +export class TextareaComponent { /** HTML id associated with for */ @Input({ required: true }) id: string; diff --git a/src/app/shared/components/v3/textarea/textarea.stories.ts b/src/app/shared/components/textarea/textarea.stories.ts similarity index 87% rename from src/app/shared/components/v3/textarea/textarea.stories.ts rename to src/app/shared/components/textarea/textarea.stories.ts index e60a1a3c4..b0aa48015 100644 --- a/src/app/shared/components/v3/textarea/textarea.stories.ts +++ b/src/app/shared/components/textarea/textarea.stories.ts @@ -1,12 +1,12 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; -import { TextareaV3Component } from './textarea.component'; +import { TextareaComponent } from './textarea.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction -const meta: Meta<TextareaV3Component> = { +const meta: Meta<TextareaComponent> = { title: 'Components/Textarea', - component: TextareaV3Component, + component: TextareaComponent, tags: ['autodocs'], decorators: [ moduleMetadata({ @@ -18,7 +18,7 @@ const meta: Meta<TextareaV3Component> = { }; export default meta; -type Story = StoryObj<TextareaV3Component>; +type Story = StoryObj<TextareaComponent>; export const Textarea: Story = { args: { diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html index 45b303d0a..ad26b9d12 100644 --- a/src/app/shared/components/training-type-picker/training-type-picker.component.html +++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html @@ -2,7 +2,7 @@ <app-collapse *ngFor="let category of categories" [expanded]="isCategorieExpanded(category.id)"> <app-collapse-header> <div class="collapseHeader"> - <app-v3-checkbox + <app-checkbox [checked]="getCategoryCheckboxStatus(category) === 'checked'" [indeterminate]="getCategoryCheckboxStatus(category) === 'halfChecked'" (action)="pickAllCategory(category); $event.stopPropagation()" @@ -12,7 +12,7 @@ </app-collapse-header> <app-collapse-content> <div class="inputSection btn-grid"> - <app-v3-tag-item + <app-tag-item *ngFor="let module of category.modules" [iconName]="isModulePicked(category, module) ? 'check' : null" [label]="module.name" diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.ts b/src/app/shared/components/training-type-picker/training-type-picker.component.ts index 48e734fed..373ab003d 100644 --- a/src/app/shared/components/training-type-picker/training-type-picker.component.ts +++ b/src/app/shared/components/training-type-picker/training-type-picker.component.ts @@ -4,7 +4,6 @@ import { CategoriesToggle } from 'src/app/models/categoriesToggle.model'; import { Category } from '../../../structure-list/models/category.model'; import { Module } from '../../../structure-list/models/module.model'; import { CategoryEnum } from '../../enum/category.enum'; -import { ButtonType } from '../button/buttonType.enum'; @Component({ selector: 'app-training-type-picker', @@ -17,7 +16,6 @@ export class TrainingTypePickerComponent implements OnInit, OnChanges { @Input() public trainingCategories: CategoriesToggle[]; @Output() selectedType: EventEmitter<Category[]> = new EventEmitter<Category[]>(); - public buttonTypeEnum = ButtonType; public categories: Category[] = []; public selectedChoices: Category[] = []; diff --git a/src/app/shared/components/v3/button/button.component.html b/src/app/shared/components/v3/button/button.component.html deleted file mode 100644 index a73644d7c..000000000 --- a/src/app/shared/components/v3/button/button.component.html +++ /dev/null @@ -1,17 +0,0 @@ -<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)"> - <app-svg-icon - *ngIf="iconName && iconPosition === 'left'" - [folder]="iconFolder" - [icon]="iconName" - [iconColor]="iconColor" - [iconClass]="'icon-20'" - /> - {{ label }} - <app-svg-icon - *ngIf="iconName && iconPosition === 'right'" - [folder]="iconFolder" - [icon]="iconName" - [iconColor]="iconColor" - [iconClass]="'icon-20'" - /> -</button> diff --git a/src/app/shared/components/v3/button/button.component.scss b/src/app/shared/components/v3/button/button.component.scss deleted file mode 100644 index ea5b1c040..000000000 --- a/src/app/shared/components/v3/button/button.component.scss +++ /dev/null @@ -1,180 +0,0 @@ -@import 'color'; -@import 'typography'; - -button { - border-radius: 4px; - cursor: pointer; - border: 1px solid transparent; - transition: - background-color 0.2s ease-in-out, - border 0.2s ease-out; - - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - - &:focus-visible { - outline-offset: 2px; - outline: 2px solid $blue-focus; - } - - // WIDTH - width: 150px; - &.wide { - width: 250px; - } - - // SIZES - &.small { - height: 32px; - font-size: $font-size-xsmall; - padding-inline: 4px; - &.icon-only { - width: 32px; - } - } - &.medium { - height: 40px; - font-size: $font-size-small; - padding-inline: 4px; - &.icon-only { - width: 40px; - } - } - &.large { - height: 48px; - font-size: $font-size-smedium; - padding-inline: 4px; - } - - // VARIANT - &.primary { - background-color: $red; - color: $white; - &:hover { - background-color: $red-dark; - } - &:disabled { - background-color: $grey-8; - color: $grey-3; - } - &:active { - background-color: $red-pressed; - } - } - - &.primaryBlack { - background-color: $grey-1; - color: $white; - &:hover { - background-color: $grey-2; - } - &:disabled { - background-color: $grey-8; - color: $grey-3; - } - &:active { - background-color: $grey-3; - } - } - - &.primaryWarning { - background-color: $info-warning; - color: $white; - &:hover { - background-color: $warning-hover; - } - &:disabled { - background-color: $grey-8; - color: $grey-3; - } - &:active { - background-color: $warning-pressed; - } - } - - &.primarySuccess { - background-color: $info-success; - color: $white; - &:hover { - background-color: $success-hover; - } - &:disabled { - background-color: $grey-8; - color: $grey-3; - } - &:active { - background-color: $success-pressed; - } - } - - &.secondary { - background-color: $white; - color: $grey-1; - border-color: $grey-1; - &:hover { - background-color: $grey-3-15; - } - &:disabled { - background-color: $white; - color: $grey-5; - border-color: $grey-5; - } - &:active { - background-color: $grey-3-20; - } - } - - &.secondarySuccess { - background-color: $white; - color: $info-success; - border-color: $info-success; - &:hover { - background-color: rgba($info-success, 0.15); - color: $success-hover; - border-color: $success-hover; - } - &:disabled { - background-color: $white; - color: $grey-4; - border-color: $grey-4; - } - &:active { - background-color: rgba($success-pressed, 0.2); - color: $success-pressed; - border-color: $success-pressed; - } - } - - &.secondaryDelete { - background-color: $white; - color: $red; - border-color: $red; - &:hover { - background-color: $grey-3-15; - } - &:disabled { - background-color: $white; - color: $grey-5; - border-color: $grey-5; - } - &:active { - background-color: $grey-3-20; - } - } - - &.tertiary { - background-color: $white; - color: $grey-1; - &:hover { - border-color: $grey-3; - } - &:disabled { - color: $grey-3; - } - &:active { - background-color: $grey-9; - } - } -} diff --git a/src/app/shared/components/v3/button/button.component.ts b/src/app/shared/components/v3/button/button.component.ts deleted file mode 100644 index e074b2b3f..000000000 --- a/src/app/shared/components/v3/button/button.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { SpriteFolderType } from '../../svg-icon/SpriteFolder.type'; - -/** values will be used for css selectors */ -export type ButtonTypeV3 = - | 'primary' - | 'primaryBlack' - | 'primaryWarning' - | 'primarySuccess' - | 'secondary' - | 'secondarySuccess' - | 'secondaryDelete' - | 'tertiary'; - -@Component({ - selector: 'app-v3-button', - templateUrl: './button.component.html', - styleUrls: ['./button.component.scss'], -}) -export class ButtonV3Component { - /** Button label */ - @Input({ required: true }) label: string; - - /** HTML type of the button */ - @Input() type: 'submit' | 'button' | 'reset' = 'button'; - - /** What variant should be the button ? */ - @Input({ required: true }) variant: ButtonTypeV3; - - /** Affects the height of the button */ - @Input() size?: 'small' | 'medium' | 'large' = 'medium'; - - /** Should the button be wide ? (250px) */ - @Input() wide = false; - - /** Should the button be disabled ? */ - @Input() disabled = false; - - /** Sets the position of the icon if one provided */ - @Input() iconPosition: 'left' | 'right' = 'left'; - - /** Folder of the icon ex: assets/ico */ - @Input() iconFolder: SpriteFolderType = 'ico'; - - /** Icon name */ - @Input() iconName?: string; - - /** Icon color, defaults to none as the svg-icon does */ - @Input() iconColor = 'none'; - - /** Click handler */ - @Output() action = new EventEmitter<Event>(); - - public get classes(): string[] { - return [this.variant, this.size, this.wide ? 'wide' : '']; - } -} diff --git a/src/app/shared/components/yes-no/yes-no.component.html b/src/app/shared/components/yes-no/yes-no.component.html index d077aed57..d5291e02f 100644 --- a/src/app/shared/components/yes-no/yes-no.component.html +++ b/src/app/shared/components/yes-no/yes-no.component.html @@ -1,12 +1,12 @@ <div class="content"> - <app-v3-tag-item + <app-tag-item [iconName]="selected ? 'check' : null" [label]="'Oui'" [color]="selected ? 'black' : 'white'" [clickable]="true" (action)="selected = true; clicked()" /> - <app-v3-tag-item + <app-tag-item [iconName]="selected !== null && !selected ? 'check' : null" [label]="'Non'" [color]="selected !== null && !selected ? 'black' : 'white'" diff --git a/src/app/shared/components/yes-no/yes-no.stories.ts b/src/app/shared/components/yes-no/yes-no.stories.ts index b943a2ade..9248f5b9e 100644 --- a/src/app/shared/components/yes-no/yes-no.stories.ts +++ b/src/app/shared/components/yes-no/yes-no.stories.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; import { SvgIconComponent } from '../svg-icon/svg-icon.component'; -import { TagItemV3Component } from '../v3/tag-item/tag-item.component'; +import { TagItemComponent } from '../tag-item/tag-item.component'; import { YesNoComponent } from './yes-no.component'; // More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction @@ -12,7 +12,7 @@ const meta: Meta<YesNoComponent> = { tags: ['autodocs'], decorators: [ moduleMetadata({ - declarations: [TagItemV3Component, SvgIconComponent], + declarations: [TagItemComponent, SvgIconComponent], imports: [CommonModule], }), ], diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 81b2f0536..21c196a47 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -7,10 +7,10 @@ import { SharedComponents } from './components'; import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component'; import { AppointmentChoiceComponent } from './components/appointment-choice/appointment-choice.component'; import { HourPickerComponent } from './components/hour-picker/hour-picker.component'; +import { InputComponent } from './components/input/input.component'; import { RadioOptionComponent } from './components/radio-option/radio-option.component'; -import { InputV3Component } from './components/v3/input/input.component'; -import { RadioV3Component } from './components/v3/radio/radio.component'; -import { TextareaV3Component } from './components/v3/textarea/textarea.component'; +import { RadioComponent } from './components/radio/radio.component'; +import { TextareaComponent } from './components/textarea/textarea.component'; import { YesNoComponent } from './components/yes-no/yes-no.component'; import { SharedDirectives } from './directives'; import { SharedPipes } from './pipes'; @@ -22,10 +22,10 @@ import { SharedPipes } from './pipes'; ...SharedDirectives, AddressAutocompleteComponent, HourPickerComponent, - RadioV3Component, + RadioComponent, AppointmentChoiceComponent, - InputV3Component, - TextareaV3Component, + InputComponent, + TextareaComponent, RadioOptionComponent, YesNoComponent, ], diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html index c13067223..2562d3793 100644 --- a/src/app/structure-list/components/card/card.component.html +++ b/src/app/structure-list/components/card/card.component.html @@ -15,7 +15,7 @@ <span class="structureName" [ngClass]="{ notClaimed: structure.hasNoUserDN && profileService.isAdmin() }"> {{ structure.structureName }} </span> - <app-v3-tag-item + <app-tag-item *ngIf="structure.structureType?.name" [label]="structure.structureType.name" [color]="'red'" @@ -41,14 +41,14 @@ <div class="right"> <div *ngIf="isOrientation && !isOrientationRdv"> - <app-v3-button + <app-button *ngIf="!isSelected" [variant]="'secondary'" [label]="'Ajouter'" [iconName]="'add'" (action)="cardAddToList(); $event.stopPropagation()" /> - <app-v3-button + <app-button *ngIf="isSelected" [variant]="'secondarySuccess'" [label]="'Ajouté'" @@ -57,14 +57,14 @@ /> </div> <ng-container *ngIf="isOrientation && isOrientationRdv"> - <app-v3-button + <app-button class="hide-on-mobile" [variant]="'primary'" [label]="'Prendre RDV'" [iconName]="'calendar'" (click)="cardRDV(); $event.stopPropagation()" /> - <app-v3-icon-button + <app-icon-button class="hide-on-desktop" [variant]="'primary'" [iconName]="'calendar'" diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html index 38860ebda..16adea495 100644 --- a/src/app/structure-list/components/more-filters/more-filters.component.html +++ b/src/app/structure-list/components/more-filters/more-filters.component.html @@ -9,7 +9,7 @@ </div> <!-- Filter with single category --> <div *ngIf="categories.length === 1" class="modalContent"> - <app-v3-label-checkbox + <app-label-checkbox *ngFor="let module of categories[0].modules" [label]="module.name" [for]="module.id" @@ -23,7 +23,7 @@ <app-collapse *ngFor="let c of categories"> <app-collapse-header> <div class="collapseHeader"> - <app-v3-checkbox + <app-checkbox [size]="'medium'" [checked]="getCategoryCheckboxStatus(c) === 'checked'" [indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'" @@ -34,7 +34,7 @@ </app-collapse-header> <app-collapse-content> <div class="collapseContent"> - <app-v3-label-checkbox + <app-label-checkbox *ngFor="let module of c.modules" [label]="module.name" [for]="c.id + '-' + module.id" @@ -47,8 +47,8 @@ </app-collapse> </div> <div class="modalFooter"> - <app-v3-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" /> - <app-v3-button [variant]="'primary'" [label]="'Appliquer'" (click)="emitModules(checkedModules)" /> + <app-button [variant]="'secondary'" [label]="'Effacer'" (click)="clearFilters()" /> + <app-button [variant]="'primary'" [label]="'Appliquer'" (click)="emitModules(checkedModules)" /> </div> </div> </div> diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html index 5eafe1494..c58d595a4 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.html +++ b/src/app/structure-list/components/structure-details/structure-details.component.html @@ -13,7 +13,7 @@ <img alt [src]="'../../../../assets/ico/' + structure?.getTypeStructureIcon() + '.svg'" /> <div class="details"> <h1>{{ structure.structureName }}</h1> - <app-v3-tag-item + <app-tag-item *ngIf="structure.structureType?.name" [label]="structure.structureType.name" [color]="'red'" @@ -183,7 +183,7 @@ > <h2>Modalités d'accès</h2> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let access of structure.categoriesDisplay.accessModality" [label]="access" [color]="'red'" @@ -202,7 +202,7 @@ <ng-container *ngIf="structure.categoriesDisplay.age && structure.categoriesDisplay.age.length"> <h4>Âge</h4> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let label of structure.categoriesDisplay.age.sort()" [label]="label" [color]="'red'" @@ -219,7 +219,7 @@ > <h4>Langue et illettrisme</h4> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let label of structure.categoriesDisplay.languageAndIlliteracy.sort()" [label]="label" [color]="'red'" @@ -232,7 +232,7 @@ <ng-container *ngIf="structure.categoriesDisplay.handicaps && structure.categoriesDisplay.handicaps.length"> <h4>Handicaps</h4> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let label of structure.categoriesDisplay.handicaps.sort()" [label]="label" [color]="'red'" @@ -245,7 +245,7 @@ <ng-container *ngIf="structure.categoriesDisplay.genre && structure.categoriesDisplay.genre.length"> <h4>Genre</h4> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let label of structure.categoriesDisplay.genre.sort()" [label]="label" [color]="'red'" @@ -286,7 +286,7 @@ class="onlineDemarch" > <h2>Aides aux démarches en ligne</h2> - <app-v3-tag-item + <app-tag-item *ngIf="structure.categoriesDisplay.onlineProcedures.length > 0" label="Accompagnements gratuits" size="small" @@ -308,12 +308,7 @@ <!-- Compétences numériques --> <section *ngIf="hasBaseSkills() || hasAdvancedSkills()" class="digitalSkills"> <h2>Compétences numériques</h2> - <app-v3-tag-item - [label]="structure.getFreeWorkshopLabel()" - [size]="'small'" - [color]="'red'" - [clickable]="false" - /> + <app-tag-item [label]="structure.getFreeWorkshopLabel()" [size]="'small'" [color]="'red'" [clickable]="false" /> <!-- BaseSkills--> <div *ngIf="hasBaseSkills()" class="skillsContainer"> @@ -337,7 +332,7 @@ <!-- Matériel et wifi --> <section *ngIf="structure.hasEquipments()" class="equipments"> <h2>Matériel et wifi</h2> - <app-v3-tag-item + <app-tag-item *ngIf="structure.categories.selfServiceMaterial.includes('wifiEnAccesLibre')" [label]="getEquipmentsLabel(Equipment.wifi)" [color]="'red'" @@ -372,7 +367,7 @@ > <h2>Vente de matériel a prix solidaire</h2> <div class="inline"> - <app-v3-tag-item + <app-tag-item *ngFor="let equipment of structure.categoriesDisplay.solidarityMaterial" [label]="equipment" [color]="'red'" @@ -409,25 +404,25 @@ </div> </div> -<app-v3-modal [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteStructure($event)"> +<app-modal [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteStructure($event)"> Voulez-vous vraiment supprimer cette structure ? -</app-v3-modal> +</app-modal> -<app-v3-modal [title]="'Travaillez-vous ici ?'" [opened]="claimModalOpened" (closed)="claimStructure($event)"> +<app-modal [title]="'Travaillez-vous ici ?'" [opened]="claimModalOpened" (closed)="claimStructure($event)"> <div class="modalContent"> Un message sera envoyé aux administrateurs Rés'IN pour valider l'affectation de votre compte à la structure : <br /> <span class="emphasized">{{ structure?.structureName }}</span> </div> -</app-v3-modal> +</app-modal> -<app-v3-modal [title]="'Travaillez-vous ici ?'" [opened]="joinModalOpened" (closed)="joinStructure($event)"> +<app-modal [title]="'Travaillez-vous ici ?'" [opened]="joinModalOpened" (closed)="joinStructure($event)"> <div class="modalContent"> Un message sera envoyé aux membres de la structure : <br /> <span class="emphasized">{{ structure?.structureName }}</span> </div> -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal [title]="'Travaillez-vous ici ?'" [opened]="pendingModalOpened" [validateLabel]="'OK'" @@ -439,9 +434,9 @@ : <br /> <span class="emphasized">{{ structure?.structureName }}</span> </div> -</app-v3-modal> +</app-modal> -<app-v3-modal +<app-modal [title]="'Signaler une erreur'" [opened]="structureErrorModalOpened" [validateLabel]="'Confirmer'" @@ -459,4 +454,4 @@ rows="6" placeholder="Décrivez l'erreur ici. Ex: Horaires faux..." ></textarea> -</app-v3-modal> +</app-modal> diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html index 9c65a4798..cbab71ef4 100644 --- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html +++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html @@ -1,6 +1,6 @@ <div class="searchContainer"> <div class="searchBarAndFilters"> - <app-v3-search-bar [(value)]="searchInput" (search)="applyFilter()" /> + <app-search-bar [(value)]="searchInput" (search)="applyFilter()" /> <div class="filters isntPhoneContent" (appClickOutside)="closeModal()"> <app-collapsable-filter [label]="'Démarches en ligne'" @@ -48,7 +48,7 @@ [checked]="searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1" (toggle)="externalCheckboxCheck($event)" /> - <app-v3-button [variant]="'tertiary'" [label]="'Plus de filtres'" (action)="openModal(TypeModal.moreFilters)" /> + <app-button [variant]="'tertiary'" [label]="'Plus de filtres'" (action)="openModal(TypeModal.moreFilters)" /> <div *ngIf="modalTypeOpened"> <app-more-filters [modalType]="modalTypeOpened" @@ -62,7 +62,7 @@ </div> <div *ngIf="checkedModulesFilter.length" class="filterTags isntPhoneContent"> <div class="title">Filtres :</div> - <app-v3-tag-item + <app-tag-item *ngFor="let filter of checkedModulesFilter" [label]="filter.displayText" [size]="'small'" @@ -72,7 +72,7 @@ [clickable]="true" (action)="removeFilter(filter)" /> - <app-v3-tag-item + <app-tag-item [label]="'Réinitialiser les filtres'" [size]="'small'" [color]="'white'" diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts index 1f8209f0e..9c0aeeabd 100644 --- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts +++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { ButtonType } from '../../../shared/components/button/buttonType.enum'; import { Utils } from '../../../utils/utils'; import { Theme } from '../../enum/themes.enum'; import { TypeModal } from '../../enum/typeModal.enum'; @@ -18,8 +17,6 @@ export class StructureListSearchComponent implements OnInit { @Output() searchEvent = new EventEmitter(); @Input() filters: Filter[] = []; public utils = new Utils(); - // Show/hide form createStructure - public buttonTypeEnum = ButtonType; public searchInput = ''; public modalTypeOpened: TypeModal; diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index 4b9a4229e..80162cd68 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -6,13 +6,13 @@ <ng-template ngPluralCase="other">{{ structureList.length }} structures</ng-template> </div> <ng-container *ngIf="!isOrientation"> - <app-v3-button + <app-button [variant]="'secondary'" [label]="'Ajouter une structure'" [size]="'small'" (action)="addStructure()" /> - <app-v3-button [variant]="'secondary'" [label]="'Imprimer la liste'" [size]="'small'" (action)="print()" /> + <app-button [variant]="'secondary'" [label]="'Imprimer la liste'" [size]="'small'" (action)="print()" /> </ng-container> </div> diff --git a/src/app/structure/structure-join/structure-join.component.html b/src/app/structure/structure-join/structure-join.component.html index c29e9af64..6d8399d01 100644 --- a/src/app/structure/structure-join/structure-join.component.html +++ b/src/app/structure/structure-join/structure-join.component.html @@ -10,7 +10,7 @@ /> </div> <div class="button"> - <app-v3-button [variant]="'primary'" [label]="'Ok'" [wide]="true" (action)="handleFinish()" /> + <app-button [variant]="'primary'" [label]="'Ok'" [wide]="true" (action)="handleFinish()" /> </div> </div> </ng-container> @@ -53,7 +53,7 @@ </div> </div> <div class="button"> - <app-v3-button [variant]="'primary'" [label]="'Ok'" [wide]="true" (action)="handleCallback()" /> + <app-button [variant]="'primary'" [label]="'Ok'" [wide]="true" (action)="handleCallback()" /> </div> </div> </ng-container> -- GitLab