Merge branch 'sb/red-tag' into 'dev'

chore(ui): red tags

See merge request !647

src/app/profile/profile-structure/profile-structure.component.html

@@ -12,8 +12,12 @@
       <app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'" />
       <div class="structureInfos">
         <p class="structureName">{{ structure.structureName }}</p>
-        <!-- TODO update this tag to RED -->
-        <app-v3-tag-item [clickable]="false" [label]="structure.structureType?.category" [size]="'small'" />
+        <app-v3-tag-item
+          [clickable]="false"
+          [label]="structure.structureType?.value"
+          [size]="'small'"
+          [color]="'red'"
+        />
         <div *ngIf="!isPublic && !isValid() && !isPending" class="missingData">
           <app-missing-information [plural]="true" />
         </div>

src/app/profile/structure-edition-summary/structure-edition-summary.component.html

@@ -307,11 +307,15 @@
         />
       </div>
       <div class="content">
-        <ng-container *ngIf="isFieldValid('age', 'categories') && structure.categoriesDisplay.age">
-          <div *ngFor="let public of structure.categoriesDisplay.age" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+        <div *ngIf="isFieldValid('age', 'categories') && structure.categoriesDisplay.age" class="list">
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.age"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
 
         <ng-container *ngIf="!isFieldValid('age', 'categories') && structure.categoriesDisplay.age">
           <app-no-information *ngIf="!structure.otherDescription" />
@@ -338,41 +342,56 @@
         />
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('languageAndIlliteracy', 'categories') &&
             structure.categoriesDisplay &&
             structure.categoriesDisplay.languageAndIlliteracy
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.languageAndIlliteracy" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.languageAndIlliteracy"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('handicaps', 'categories') &&
             structure.categoriesDisplay &&
             structure.categoriesDisplay.handicaps
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.handicaps" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.handicaps"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
-        <ng-container
+        <div
           *ngIf="
             isFieldValid('genre', 'categories') && structure.categoriesDisplay && structure.categoriesDisplay.genre
           "
+          class="list"
         >
-          <div *ngFor="let public of structure.categoriesDisplay.genre" class="list">
-            <p>{{ public }}</p>
-          </div>
-        </ng-container>
+          <app-v3-tag-item
+            *ngFor="let public of structure.categoriesDisplay.genre"
+            [label]="public"
+            [color]="'red'"
+            [clickable]="false"
+            [size]="'small'"
+          />
+        </div>
       </div>
       <div class="content">
         <ng-container

src/app/profile/structure-edition-summary/structure-edition-summary.component.scss

@@ -87,7 +87,8 @@
         }
 
         .list {
-          margin-bottom: 8px;
+          display: flex;
+          gap: 0.5rem;
           p {
             display: list-item;
             margin: 0 0 0 25px;

src/app/profile/structures-management/structures-management.component.html

@@ -30,8 +30,12 @@
         <!-- TODO link to structure -->
         <div class="structureDetails">
           <h2 class="structureName">{{ elt.structure.structureName }}</h2>
-          <!-- TODO update this tag to RED -->
-          <app-v3-tag-item [clickable]="false" [label]="elt.structure.structureType.category" [size]="'small'" />
+          <app-v3-tag-item
+            [clickable]="false"
+            [label]="elt.structure.structureType.value"
+            [size]="'small'"
+            [color]="'red'"
+          />
           <div *ngIf="isBeingDeleted(elt.structure)" class="deleteInProgress">
             <app-svg-icon [iconClass]="'icon-20'" [type]="'tags'" [icon]="'warning'" />
             <span

src/app/shared/components/v3/input/input.stories.ts

@@ -24,7 +24,6 @@ export const Input: Story = {
   args: {
     id: 'input1',
     label: 'Label',
-    value: '',
   },
 };
 

src/app/shared/components/v3/tag/tag-item/tag-item.component.scss

@@ -22,8 +22,8 @@ button {
     padding-inline: 12px;
   }
 
-  // STATE EFFECTS / COLORS
-  &.clickable {
+  // COLORS
+  &.white {
     background-color: $white;
     border-color: $grey-5;
     color: $grey-1;
@@ -52,10 +52,18 @@ button {
     }
   }
 
-  &.unclickable {
-    cursor: default;
+  &.red {
+    color: $red-darker;
+    background-color: $red-light;
+  }
+
+  &.black {
+    color: $white;
     background-color: $grey-1;
     border-color: $grey-1;
-    color: $white;
+  }
+
+  &.unclickable {
+    cursor: default;
   }
 }

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

@@ -7,13 +7,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class TagItemV3Component {
   /** Tag label */
-  @Input() label = 'Bouton';
+  @Input({ required: true }) label: string;
 
   /** How large should be the button ? */
   @Input() size?: 'small' | 'medium' = 'medium';
 
-  /** Is the tag selected ? */
-  @Input() selected = false;
+  /** What color should the tag be ? */
+  @Input() color?: 'white' | 'black' | 'red' = 'white';
 
   /** Should the button be clickable ? */
   @Input() clickable = true;
@@ -34,7 +34,7 @@ export class TagItemV3Component {
   @Output() action = new EventEmitter<Event>();
 
   public get classes(): string[] {
-    return [this.size, this.selected ? 'selected' : '', this.clickable ? 'clickable' : 'unclickable'];
+    return [this.size, this.color, this.clickable ? 'clickable' : 'unclickable'];
   }
 
   public get iconSize(): 'icon-12' | 'icon-16' {

src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts

@@ -22,69 +22,80 @@ const meta: Meta<TagItemV3Component> = {
 export default meta;
 type Story = StoryObj<TagItemV3Component>;
 
-export const SmallTag: Story = {
+export const Small: Story = {
   args: {
     label: 'Label tag',
     size: 'small',
-    clickable: true,
-    disabled: false,
-    selected: false,
+
     action: new EventEmitter(),
   },
 };
 
-export const SmallTagWithIcon: Story = {
+export const SmallWithIcon: Story = {
   args: {
-    ...SmallTag.args,
+    ...Small.args,
     iconFolder: 'ico',
     iconName: 'email',
   },
 };
 
-export const SmallTagSelected: Story = {
+export const Medium: Story = {
   args: {
-    ...SmallTag.args,
-    selected: true,
+    label: 'Medium tag',
+    color: 'white',
+    size: 'medium',
   },
 };
 
-export const MediumTag: Story = {
+export const MediumSelected: Story = {
   args: {
     label: 'Medium tag',
+    color: 'black',
     size: 'medium',
+    iconFolder: 'ico',
+    iconName: 'mail',
   },
 };
 
-export const MediumTagWithIcon: Story = {
+export const MediumRed: Story = {
   args: {
-    ...MediumTag.args,
-    iconFolder: 'ico',
-    iconName: 'email',
+    label: 'Médiathèque/Bibliothèque',
+    color: 'red',
+    size: 'medium',
+    clickable: false,
   },
 };
 
-export const Unclickable: Story = {
+export const MediumBlack: Story = {
   args: {
-    label: 'Unclickable tag',
-    clickable: false,
+    label: 'Médiathèque/Bibliothèque',
+    color: 'black',
+    size: 'medium',
   },
 };
 
-export const UnclickableWithIcon: Story = {
+export const MediumWithIcon: Story = {
   args: {
-    ...Unclickable.args,
+    ...Medium.args,
     iconFolder: 'ico',
     iconName: 'email',
   },
 };
 
+export const Unclickable: Story = {
+  args: {
+    label: 'Unclickable tag',
+    clickable: false,
+  },
+};
+
 export const MultipleTags: Story = {
   render: (args) => ({
     props: args,
     template: `
     <div class="btn-grid">
       <app-v3-tag-item label="test 1" />
-      <app-v3-tag-item label="test 2" selected="true" />
+      <app-v3-tag-item label="test 2" />
       <app-v3-tag-item label="test 3" />
     </div>`,
   }),