diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.html b/src/app/annuaire/annuaire-header/annuaire-header.component.html index 0511ca325a0ab99eb8ffc797a074337ac57453e0..dd0aa9dfac71fd5253d6740beeea8038353b4fb2 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/tag-item/tag-item.component.scss b/src/app/shared/components/tag-item/tag-item.component.scss index e3d85d8eedd67501deee142e6a55f5ead42a249b..33c628b5c344aa3d30d5288a2a938ce74d15a4ea 100644 --- a/src/app/shared/components/tag-item/tag-item.component.scss +++ b/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; diff --git a/src/app/shared/components/tag-item/tag-item.component.ts b/src/app/shared/components/tag-item/tag-item.component.ts index d9a01369dce0d9fba9eb247fbf39e3568fb6728f..244ad75ab99a5bf0ae5d256fd6bbf72d3462797b 100644 --- a/src/app/shared/components/tag-item/tag-item.component.ts +++ b/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; diff --git a/src/app/shared/components/tag-item/tag-item.stories.ts b/src/app/shared/components/tag-item/tag-item.stories.ts index 48e3296848c32eabaa985d26534e4de71a843e4f..01a458e3fb4e2730817299f3fd190dcf2e2a7f76 100644 --- a/src/app/shared/components/tag-item/tag-item.stories.ts +++ b/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, }, }; 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 cbab71ef42d7922bb5913731693e80a004c43f39..6f2c0a8cb3203d0bc9282750154e796224e0ff31 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"