feat(orga): delete TooltipWithIcon component and replace with Tooltip…

… and Icon
1024pix · Nov 7, 2024 · 2ab4172 · 2ab4172
1 parent cb11e97
commit 2ab4172
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 76 deletions.
diff --git a/orga/app/components/campaign/results/evolution-header.gjs b/orga/app/components/campaign/results/evolution-header.gjs
@@ -1,21 +1,30 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { concat } from '@ember/helper';
 import { t } from 'ember-intl';
 
-import TooltipWithIcon from '../../ui/tooltip-with-icon';
-
 <template>
   <div class="evolution-header {{if @align (concat 'evolution-header--' @align)}}">
 
     {{t "pages.campaign-results.table.column.evolution"}}
 
-    <TooltipWithIcon
-      @iconName="help"
-      @position="top"
-      @isInline={{true}}
-      @plainIcon={{true}}
-      @content={{@tooltipContent}}
-      @ariaHiddenIcon={{true}}
-      @iconClass="tooltip-with-icon--small"
-    />
+    <PixTooltip @id="evolution-tooltip" @position="top" @isInline={{true}} class="evolution-header__tooltip">
+      <:triggerElement>
+
+        <PixIcon
+          @name="help"
+          @plainIcon={{true}}
+          aria-describedby="evolution-tooltip"
+          @ariaHidden={{true}}
+          class="tooltip__icon--small"
+        />
+
+      </:triggerElement>
+
+      <:tooltip>
+        {{@tooltipContent}}
+      </:tooltip>
+
+    </PixTooltip>
   </div>
 </template>
diff --git a/orga/app/components/campaign/results/participation-evolution-icon.gjs b/orga/app/components/campaign/results/participation-evolution-icon.gjs
@@ -1,7 +1,7 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
 import { t } from 'ember-intl';
 
-import TooltipWithIcon from '../../ui/tooltip-with-icon';
-
 const EVOLUTION_INFOS = {
   increase: {
     iconName: 'trendingUp',
@@ -22,13 +22,23 @@ const getIconLabel = (evolution) => EVOLUTION_INFOS[evolution].label;
 
 <template>
   {{#if @evolution}}
-    <TooltipWithIcon
-      @position="top"
-      @isInline={{true}}
-      @content={{t (getIconLabel @evolution)}}
-      @iconName={{getIconName @evolution}}
-      @iconClass="tooltip-with-icon__{{@evolution}}"
-    />
+    <PixTooltip @id="evolution-icon-tooltip" @position="top" @isInline={{true}} class="participation-evolution-icon">
+      <:triggerElement>
+
+        <PixIcon
+          @name={{getIconName @evolution}}
+          aria-describedby="evolution-icon-tooltip"
+          aria-label={{t (getIconLabel @evolution)}}
+          class="participation-evolution-icon__{{@evolution}}"
+        />
+
+      </:triggerElement>
+
+      <:tooltip>
+        {{t (getIconLabel @evolution)}}
+      </:tooltip>
+
+    </PixTooltip>
   {{else}}
     <p class="screen-reader-only">{{t "pages.campaign-results.table.evolution.unavailable"}}</p>
   {{/if}}

diff --git a/orga/app/components/ui/tooltip-with-icon.gjs b/orga/app/components/ui/tooltip-with-icon.gjs
diff --git a/orga/app/styles/components/campaign/index.scss b/orga/app/styles/components/campaign/index.scss
@@ -2,6 +2,7 @@
 @import 'analysis/competences';
 @import 'results/assessment-cards';
 @import 'results/evolution-header';
+@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/evolution-header.scss b/orga/app/styles/components/campaign/results/evolution-header.scss
@@ -8,5 +8,16 @@
       justify-content: center;
 
     }
+
+    &__tooltip {
+      display: inline-flex;
+    }
+  }
+
+  .tooltip__icon {
+    &--small {
+      width: 1rem;
+      height: 1rem;
+    }
   }
 
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,24 @@
+.participation-evolution-icon {
+  display: inline-flex;
+
+
+  &__increase{
+    width: 1.7rem;
+    height: 1.7rem;
+    fill: var(--pix-success-500);
+  }
+
+  &__decrease {
+    width: 1.7rem;
+    height: 1.7rem;
+    fill: var(--pix-error-500);
+  }
+
+  &__stable {
+    width: 1.7rem;
+    height: 1.7rem;
+    fill: var(--pix-warning-500);
+  }
+
+}
+
diff --git a/orga/app/styles/components/ui/index.scss b/orga/app/styles/components/ui/index.scss
@@ -12,5 +12,3 @@
 @import 'form-field';
 @import 'last-participation-date-tooltip';
 @import 'action-bar';
-@import 'tooltip-with-icon'
-
diff --git a/orga/app/styles/components/ui/tooltip-with-icon.scss b/orga/app/styles/components/ui/tooltip-with-icon.scss