From d214f0ea7bc54965550bdd4499c0570c3944c39a Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Thu, 8 Feb 2024 10:39:36 +0000
Subject: [PATCH] feat(orientation): Replace buttons in orientation
---
.../components/v3/button/Button.stories.ts | 7 ++++
.../v3/button/button.component.scss | 25 +++++++++++++-
.../components/v3/button/button.component.ts | 1 +
.../components/card/card.component.html | 34 +++++++------------
.../components/card/card.component.scss | 21 ------------
5 files changed, 44 insertions(+), 44 deletions(-)
diff --git a/src/app/shared/components/v3/button/Button.stories.ts b/src/app/shared/components/v3/button/Button.stories.ts
index a2f1a470d..bcea2ac93 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 916470e33..ea5b1c040 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 406f3cc34..e074b2b3f 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 8b03dfd95..056966c42 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 c7c6c5e58..fc288734e 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;
}
--
GitLab