Merge branch 'feat/ui/grey-tags' into 'dev'

feat(ui): add grey tags

See merge request !717

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"

src/app/shared/components/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;

src/app/shared/components/tag-item/tag-item.component.ts

@@ -14,7 +14,7 @@ export class TagItemComponent {
   @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;

src/app/shared/components/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,
   },
 };
 

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"