diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index 17ab9bbac25486f1a2e21cca0714a55013d536cd..e46c96fd4566c1fbd0aa94efefa4dbeaf5dab435 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/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>
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index 656d4d1b385c4b1e5ffb3e71e8b82df6de5d402d..21f49a3b5d09259038159da7714c278c81c34c94 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/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
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
index 60d25a02835f68057bb1f7ef23518c5f5a6982fc..3d57f23446b04123d8bf4d80d69cd764dff02c57 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
+++ b/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;
diff --git a/src/app/profile/structures-management/structures-management.component.html b/src/app/profile/structures-management/structures-management.component.html
index 921cc9a61a2917fa32706ce602bfd6843a675595..3c05d446712eb7f4b91fd35c5f8ecb95bb93701c 100644
--- a/src/app/profile/structures-management/structures-management.component.html
+++ b/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
diff --git a/src/app/shared/components/v3/input/input.stories.ts b/src/app/shared/components/v3/input/input.stories.ts
index 063ebddce497e99a93f62bc3b55afeea71130dc0..40150f7c426e582fb69eefb729684333bafa3468 100644
--- a/src/app/shared/components/v3/input/input.stories.ts
+++ b/src/app/shared/components/v3/input/input.stories.ts
@@ -24,7 +24,6 @@ export const Input: Story = {
args: {
id: 'input1',
label: 'Label',
- value: '',
},
};
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.component.scss b/src/app/shared/components/v3/tag/tag-item/tag-item.component.scss
index 7cdc8dc18dabe88aedee04d7de39aa95141fb9d2..76ca0be4aba325025bd71931e6229faee29c4a50 100644
--- a/src/app/shared/components/v3/tag/tag-item/tag-item.component.scss
+++ b/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;
}
}
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.component.ts b/src/app/shared/components/v3/tag/tag-item/tag-item.component.ts
index 0ed42fbbb70fc77eb224fc0edc1ee78862973583..796e5e97e5d5fd58bc0a984a4e6b6759eed4811b 100644
--- a/src/app/shared/components/v3/tag/tag-item/tag-item.component.ts
+++ b/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' {
diff --git a/src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts b/src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts
index de05574172e24a691aed4f64b3428977318c2d5a..7ffe085f81ac6fb27df605b4151af10f6272513d 100644
--- a/src/app/shared/components/v3/tag/tag-item/tag-item.stories.ts
+++ b/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>`,
}),