feat(orga): add tooltip to evolution column header

1024pix · Oct 24, 2024 · 3476c7e · 3476c7e
1 parent e95e555
commit 3476c7e
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/orga/app/components/campaign/results/assessment-list.gjs b/orga/app/components/campaign/results/assessment-list.gjs
@@ -4,6 +4,7 @@ import TableHeader from '../../table/header';
 import TablePaginationControl from '../../table/pagination-control';
 import CampaignParticipationFilters from '../filter/participation-filters';
 import CampaignAssessmentRow from '../results/assessment-row';
+import ParticipationEvolutionTooltip from './participation-evolution-tooltip';
 
 <template>
   <section ...attributes>
@@ -44,9 +45,12 @@ import CampaignAssessmentRow from '../results/assessment-row';
             {{/if}}
             <TableHeader>{{t "pages.campaign-results.table.column.results.label"}}</TableHeader>
             {{#if @campaign.multipleSendings}}
-              <TableHeader aria-label={{t "pages.campaign-results.table.column.ariaEvolution"}}>{{t
-                  "pages.campaign-results.table.column.evolution"
-                }}
+              <TableHeader aria-label={{t "pages.campaign-results.table.column.ariaEvolution"}}>
+                <div class="assessment-list__evolution-header">
+                  {{t "pages.campaign-results.table.column.evolution"}}
+                  <ParticipationEvolutionTooltip />
+                </div>
+
               </TableHeader>
               <TableHeader aria-label={{t "pages.campaign-results.table.column.ariaSharedResultCount"}}>
                 {{t "pages.campaign-results.table.column.sharedResultCount"}}

diff --git a/orga/app/components/campaign/results/participation-evolution-tooltip.gjs b/orga/app/components/campaign/results/participation-evolution-tooltip.gjs
@@ -0,0 +1,21 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
+import { t } from 'ember-intl';
+
+<template>
+  <PixTooltip @id="evolution-tooltip" @position="top" @isInline={{true}}>
+    <:triggerElement>
+      <PixIcon
+        @name="help"
+        @plainIcon={{true}}
+        aria-label={{t "pages.campaign-results.table.evolution-tooltip.aria-label"}}
+        aria-describedby="evolution-tooltip"
+      />
+    </:triggerElement>
+
+    <:tooltip>
+      {{t "pages.campaign-results.table.evolution-tooltip.content"}}
+    </:tooltip>
+
+  </PixTooltip>
+</template>
diff --git a/orga/app/styles/components/campaign/index.scss b/orga/app/styles/components/campaign/index.scss
@@ -1,6 +1,7 @@
 @import 'activity/dashboard';
 @import 'analysis/competences';
 @import 'results/assessment-cards';
+@import 'results/assessment-list';
 @import 'results/participation-evolution-icon';
 @import 'analysis/recommendations';
 @import 'analysis/recommendation-indicator';

diff --git a/orga/app/styles/components/campaign/results/assessment-list.scss b/orga/app/styles/components/campaign/results/assessment-list.scss
@@ -0,0 +1,6 @@
+.assessment-list {
+  &__evolution-header {
+    display: flex;
+    gap: var(--pix-spacing-1x);;
+  }
+}
diff --git a/orga/translations/en.json b/orga/translations/en.json
@@ -620,6 +620,10 @@
           "stable": "constant",
           "unavailable": "not available"
         },
+        "evolution-tooltip":{
+          "aria-label": "About evolution.",
+          "content": "Evolution of the participant between their last two shared results."
+        },
         "empty": "No participants",
         "row-title": "Participant"
       },

diff --git a/orga/translations/fr.json b/orga/translations/fr.json
@@ -626,6 +626,10 @@
           "stable": "constant",
           "unavailable": "non disponible"
         },
+        "evolution-tooltip":{
+          "aria-label": "Explications sur l'évolution.",
+          "content": "Évolution du participant entre ses deux derniers résultats partagés."
+        },
         "empty": "Aucune participation",
         "row-title": "Participant"
       },