feat(orga): add colors to evolution icons

1024pix · Oct 24, 2024 · dce9aa1 · dce9aa1
1 parent b706090
commit dce9aa1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git a/orga/app/components/campaign/participation-evolution-icon.gjs b/orga/app/components/campaign/participation-evolution-icon.gjs
@@ -5,23 +5,28 @@ const ICON_PROPERTIES = {
   increase: {
     name: 'trendingUp',
     label: 'pages.campaign-results.table.evolution.increase',
+    color: 'green',
   },
   decrease: {
     name: 'trendingDown',
     label: 'pages.campaign-results.table.evolution.decrease',
+    color: 'red',
   },
   stable: {
     name: 'trendingFlat',
     label: 'pages.campaign-results.table.evolution.stable',
+    color: 'orange',
   },
 };
 
 const getIconName = (evolution) => ICON_PROPERTIES[evolution].name;
 const getIconLabel = (evolution) => ICON_PROPERTIES[evolution].label;
+const getIconColor = (evolution) => ICON_PROPERTIES[evolution].color;
 
 <template>
   <PixIcon
     @name={{(getIconName @evolution)}}
     aria-label={{t (getIconLabel @evolution)}}
+    class="evolution-icon--{{(getIconColor @evolution)}}"
   />
 </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/participation-evolution-icon';
 @import 'analysis/recommendations';
 @import 'analysis/recommendation-indicator';
 @import 'analysis/tube-recommendation-row';

diff --git a/orga/app/styles/components/campaign/results/participation-evolution-icon.scss b/orga/app/styles/components/campaign/results/participation-evolution-icon.scss
@@ -0,0 +1,13 @@
+.evolution-icon {
+  &--green{
+    fill: var(--pix-success-500);
+  }
+
+  &--red {
+    fill: var(--pix-error-500);
+  }
+
+  &--orange {
+    fill: var(--pix-warning-500);
+  }
+}
diff --git a/orga/app/styles/pages/authenticated/campaigns/details/participants.scss b/orga/app/styles/pages/authenticated/campaigns/details/participants.scss
@@ -32,3 +32,4 @@
     }
   }
 }
+
diff --git a/orga/tests/integration/components/campaign/results/assessment-row-test.js b/orga/tests/integration/components/campaign/results/assessment-row-test.js
@@ -1,4 +1,4 @@
-import { render } from '@1024pix/ember-testing-library';
+import { render, within } from '@1024pix/ember-testing-library';
 import { hbs } from 'ember-cli-htmlbars';
 import { t } from 'ember-intl/test-support';
 import { module, test } from 'qunit';
@@ -80,7 +80,10 @@ module('Integration | Component | Campaign::Results::AssessmentRow', function (h
         );
 
         // then
-        assert.ok(screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.increase') }));
+        const evolutionCell = screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.increase') });
+        assert.ok(evolutionCell);
+        const evolutionCellContent = within(evolutionCell);
+        assert.dom(evolutionCellContent.getByRole('img')).hasClass('evolution-icon--green');
       });
 
       test('it should display trendingDown icon when participant evolution is decrease', async function (assert) {
@@ -112,7 +115,10 @@ module('Integration | Component | Campaign::Results::AssessmentRow', function (h
         );
 
         // then
-        assert.ok(screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.decrease') }));
+        const evolutionCell = screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.decrease') });
+        assert.ok(evolutionCell);
+        const evolutionCellContent = within(evolutionCell);
+        assert.dom(evolutionCellContent.getByRole('img')).hasClass('evolution-icon--red');
       });
 
       test('it should display trendingFlat icon when participant evolution is stable', async function (assert) {
@@ -144,7 +150,10 @@ module('Integration | Component | Campaign::Results::AssessmentRow', function (h
         );
 
         // then
-        assert.ok(screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.stable') }));
+        const evolutionCell = screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.stable') });
+        assert.ok(evolutionCell);
+        const evolutionCellContent = within(evolutionCell);
+        assert.dom(evolutionCellContent.getByRole('img')).hasClass('evolution-icon--orange');
       });
 
       test('it should display empty cell when participant evolution is null', async function (assert) {
@@ -176,7 +185,12 @@ module('Integration | Component | Campaign::Results::AssessmentRow', function (h
         );
 
         // then
-        assert.ok(screen.getByRole('cell', { name: t('pages.campaign-results.table.evolution.unavailable') }));
+        const evolutionCell = screen.getByRole('cell', {
+          name: t('pages.campaign-results.table.evolution.unavailable'),
+        });
+        assert.ok(evolutionCell);
+        const evolutionCellContent = within(evolutionCell);
+        assert.notOk(evolutionCellContent.queryByRole('img'));
       });
     });
   });