feat(orientation): Replace buttons in orientation

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',

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;

src/app/shared/components/v3/button/button.component.ts

@@ -8,6 +8,7 @@ export type ButtonTypeV3 =
   | 'primaryWarning'
   | 'primarySuccess'
   | 'secondary'
+  | 'secondarySuccess'
   | 'secondaryDelete'
   | 'tertiary';
 

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

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