From 1aded730d513d0c79d9afc7d7bb114cd65e12238 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 13 Feb 2024 14:04:25 +0100
Subject: [PATCH] feat(ui): add grey tags

---
 .../annuaire-header.component.html            |  2 +-
 .../v3/tag-item/tag-item.component.scss       | 33 ++++++++++++++-----
 .../v3/tag-item/tag-item.component.ts         |  2 +-
 .../v3/tag-item/tag-item.stories.ts           | 13 +++++++-
 .../structure-list-search.component.html      |  2 +-
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.html b/src/app/annuaire/annuaire-header/annuaire-header.component.html
index f8c6fd8bf..926cd7bb1 100644
--- a/src/app/annuaire/annuaire-header/annuaire-header.component.html
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.html
@@ -31,7 +31,7 @@
       *ngFor="let filter of searchService.checkedFilterList"
       [label]="filter"
       [size]="'small'"
-      [color]="'black'"
+      [color]="'grey'"
       [iconName]="'cross'"
       [iconPosition]="'right'"
       [clickable]="true"
diff --git a/src/app/shared/components/v3/tag-item/tag-item.component.scss b/src/app/shared/components/v3/tag-item/tag-item.component.scss
index e3d85d8ee..33c628b5c 100644
--- a/src/app/shared/components/v3/tag-item/tag-item.component.scss
+++ b/src/app/shared/components/v3/tag-item/tag-item.component.scss
@@ -27,14 +27,6 @@ button {
     background-color: $white;
     border-color: $grey-5;
     color: $grey-1;
-    &.selected {
-      background-color: $grey-1;
-      border-color: $grey-1;
-      color: $white;
-      &:active {
-        background-color: $grey-2;
-      }
-    }
     &:hover {
       border-color: $grey-3;
     }
@@ -52,6 +44,31 @@ button {
     }
   }
 
+  &.grey {
+    background-color: $grey-7;
+    border-color: $grey-7;
+    color: $grey-3;
+    &:hover {
+      background-color: $grey-5;
+      border-color: $grey-5;
+      color: $grey-1;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+      outline: 2px solid $blue-focus;
+    }
+    &:disabled {
+      background-color: $grey-9;
+      border-color: $grey-9;
+      color: $grey-5;
+    }
+    &:active {
+      background-color: $grey-7;
+      border-color: $grey-3;
+      color: $grey-3;
+    }
+  }
+
   &.red {
     color: $red-darker;
     background-color: $red-light;
diff --git a/src/app/shared/components/v3/tag-item/tag-item.component.ts b/src/app/shared/components/v3/tag-item/tag-item.component.ts
index 81bf378e7..259114b34 100644
--- a/src/app/shared/components/v3/tag-item/tag-item.component.ts
+++ b/src/app/shared/components/v3/tag-item/tag-item.component.ts
@@ -14,7 +14,7 @@ export class TagItemV3Component {
   @Input() size?: 'small' | 'medium' = 'medium';
 
   /** What color should the tag be ? */
-  @Input() color?: 'white' | 'black' | 'red' = 'white';
+  @Input() color?: 'white' | 'black' | 'red' | 'grey' = 'white';
 
   /** Should the button be clickable ? */
   @Input() clickable = false;
diff --git a/src/app/shared/components/v3/tag-item/tag-item.stories.ts b/src/app/shared/components/v3/tag-item/tag-item.stories.ts
index 00bc172cc..ba9112abb 100644
--- a/src/app/shared/components/v3/tag-item/tag-item.stories.ts
+++ b/src/app/shared/components/v3/tag-item/tag-item.stories.ts
@@ -26,7 +26,7 @@ export const Small: Story = {
   args: {
     label: 'Label tag',
     size: 'small',
-
+    clickable: true,
     action: new EventEmitter(),
   },
 };
@@ -44,6 +44,7 @@ export const Medium: Story = {
     label: 'Medium tag',
     color: 'white',
     size: 'medium',
+    clickable: true,
   },
 };
 
@@ -71,6 +72,16 @@ export const MediumBlack: Story = {
     label: 'Médiathèque/Bibliothèque',
     color: 'black',
     size: 'medium',
+    clickable: false,
+  },
+};
+
+export const MediumGrey: Story = {
+  args: {
+    label: 'Médiathèque/Bibliothèque',
+    color: 'grey',
+    size: 'medium',
+    clickable: true,
   },
 };
 
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..2fa6528e1 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
@@ -66,7 +66,7 @@
       *ngFor="let filter of checkedModulesFilter"
       [label]="filter.displayText"
       [size]="'small'"
-      [color]="'black'"
+      [color]="'grey'"
       [iconName]="'cross'"
       [iconPosition]="'right'"
       [clickable]="true"
-- 
GitLab