diff --git a/src/app/shared/components/v3/button/Button.stories.ts b/src/app/shared/components/v3/button/Button.stories.ts index a2f1a470dde08617eace6a20235c8cccae2c5a19..bcea2ac93453da114943da6357e606c39c019376 100644 --- a/src/app/shared/components/v3/button/Button.stories.ts +++ b/src/app/shared/components/v3/button/Button.stories.ts @@ -89,6 +89,13 @@ export const Secondary: Story = { }, }; +export const SecondarySuccess: Story = { + args: { + label: 'SecondarySuccess button', + variant: 'secondarySuccess', + }, +}; + export const SecondaryDelete: Story = { args: { label: 'SecondaryDelete button', diff --git a/src/app/shared/components/v3/button/button.component.scss b/src/app/shared/components/v3/button/button.component.scss index 916470e33ff32c972844ed78822139fe01ac319d..ea5b1c0408d0e44cc2047d8c6c1ba1b426946517 100644 --- a/src/app/shared/components/v3/button/button.component.scss +++ b/src/app/shared/components/v3/button/button.component.scss @@ -5,7 +5,9 @@ button { border-radius: 4px; cursor: pointer; border: 1px solid transparent; - transition: background-color 0.2s ease-in-out, border 0.2s ease-out; + transition: + background-color 0.2s ease-in-out, + border 0.2s ease-out; display: flex; align-items: center; @@ -124,6 +126,27 @@ button { } } + &.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; diff --git a/src/app/shared/components/v3/button/button.component.ts b/src/app/shared/components/v3/button/button.component.ts index 406f3cc343be68d832dc08e4b0793d776d40f4fd..e074b2b3f652be839d4803273704c33eb25eec37 100644 --- a/src/app/shared/components/v3/button/button.component.ts +++ b/src/app/shared/components/v3/button/button.component.ts @@ -8,6 +8,7 @@ export type ButtonTypeV3 = | 'primaryWarning' | 'primarySuccess' | 'secondary' + | 'secondarySuccess' | 'secondaryDelete' | 'tertiary'; diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html index 8b03dfd952c9255d0feab4fd92a06eba9e0c1705..056966c42125518712d2e1a3d7a106d81b91b5ec 100644 --- a/src/app/structure-list/components/card/card.component.html +++ b/src/app/structure-list/components/card/card.component.html @@ -40,30 +40,20 @@ <div class="right"> <app-svg-icon *ngIf="!isOrientation" [folder]="'ico'" [icon]="'chevronRight'" [iconClass]="'icon-24'" /> <div *ngIf="isOrientation && !isOrientationRdv"> - <div + <app-v3-button *ngIf="!isSelected" - fxLayout="row" - fxLayoutGap="6px" - class="selection-button selected" - tabindex="0" - (click)="cardAddToList(); $event.stopPropagation()" - (keyup.enter)="cardAddToList(); $event.stopPropagation()" - > - <app-svg-icon [folder]="'ico'" [icon]="'add'" [iconColor]="'black'" /> - <span>Ajouter</span> - </div> - <div + [variant]="'secondary'" + [label]="'Ajouter'" + [iconName]="'add'" + (action)="cardAddToList(); $event.stopPropagation()" + /> + <app-v3-button *ngIf="isSelected" - fxLayout="row" - fxLayoutGap="6px" - class="selection-button to-select" - tabindex="0" - (click)="cardAddToList(); $event.stopPropagation()" - (keyup.enter)="cardAddToList(); $event.stopPropagation()" - > - <app-svg-icon [folder]="'ico'" [icon]="'check'" [iconClass]="'icon-22'" [iconColor]="'white'" /> - <span>Ajouté</span> - </div> + [variant]="'secondarySuccess'" + [label]="'Ajouté'" + [iconName]="'check'" + (action)="cardAddToList(); $event.stopPropagation()" + /> </div> <ng-container *ngIf="isOrientation && isOrientationRdv"> <app-v3-button diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss index c7c6c5e5872e74e7282868fb9a136391949cfd2a..fc288734e39a5bb223703a27e6dc583196252866 100644 --- a/src/app/structure-list/components/card/card.component.scss +++ b/src/app/structure-list/components/card/card.component.scss @@ -62,27 +62,6 @@ } } -.selection-button { - font-style: normal; - font-weight: bold; - justify-content: center; - align-items: center; - min-width: 120px; - height: 40px; - border-radius: 20px; -} - -.selected { - border: solid 1px $grey-5; - background-color: $white; - color: $grey-1; -} -.to-select { - color: $white; - border-style: none; - background: #47c562; -} - .add-icon { color: $green-1; }