[BUGFIX] Cacher la tooltip lorsque le palier ne contient pas de descr…

…iption (PIX-14756) (#10373)

orga/app/components/ui/mastery-percentage-display.gjs

@@ -0,0 +1,70 @@
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import PixStars from '@1024pix/pix-ui/components/pix-stars';
+import PixTooltip from '@1024pix/pix-ui/components/pix-tooltip';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class MasteryPercentageDisplay extends Component {
+  get totalStages() {
+    return this.args.hasStages ? this.args.totalStage - 1 : null;
+  }
+
+  get reachedStage() {
+    return this.args.hasStages ? this.args.reachedStage - 1 : null;
+  }
+
+  get displayTooltip() {
+    return this.args.prescriberDescription || this.args.prescriberTitle;
+  }
+
+  <template>
+    <span
+      aria-hidden={{if @hasStages "true" "false"}}
+      class="mastery-percentage-display {{if @isTableDisplay 'mastery-percentage-display--table-display'}}"
+    >
+      <span class="mastery-percentage-display__percentage">{{t "common.result.percentage" value=@masteryRate}}</span>
+      {{#if @hasStages}}
+        <PixStars
+          @count={{this.reachedStage}}
+          @total={{this.totalStages}}
+          @alt={{t "common.result.stages" count=this.reachedStage total=this.totalStages}}
+          class="mastery-percentage-display__stars
+            {{if @isTableDisplay 'mastery-percentage-display__stars--table-display'}}"
+          @color="blue"
+        />
+        {{#if this.displayTooltip}}
+          <PixTooltip
+            @id="stage-tooltip-{{this.reachedStage}}"
+            @position="bottom-left"
+            @isWide={{true}}
+            class="hide-on-mobile"
+          >
+            <:triggerElement>
+              <PixIcon
+                @name="info"
+                @plainIcon={{true}}
+                class="mastery-percentage-display__info-icon"
+                tabindex="0"
+                aria-describedby="stage-tooltip-{{this.reachedStage}}"
+              />
+            </:triggerElement>
+            <:tooltip>
+              <strong>{{@prescriberTitle}}</strong>
+              <p>{{@prescriberDescription}}</p>
+            </:tooltip>
+          </PixTooltip>
+        {{/if}}
+      {{/if}}
+    </span>
+    {{#if @hasStages}}
+      <span class="screen-reader-only">
+        {{t
+          "common.result.accessibility-description"
+          percentage=@masteryRate
+          stage=this.reachedStage
+          totalStage=this.totalStages
+        }}
+      </span>
+    {{/if}}
+  </template>
+}

orga/app/styles/components/ui/mastery-percentage-display.scss

@@ -9,7 +9,7 @@
 
   &__stars {
     height: 1.5rem;
-    
+
     &--table-display {
       height: 1.125rem;
     }
@@ -23,7 +23,9 @@
   }
 
   &__info-icon {
-    color: var(--pix-neutral-100);
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: var(--pix-neutral-100);
   }
 }
 

orga/tests/integration/components/ui/mastery-percentage-display_test.gjs

@@ -0,0 +1,126 @@
+import { render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import MasteryPercentageDisplay from 'pix-orga/components/ui/mastery-percentage-display';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | mastery-percentage-display', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('it should display mastery rate', async function (assert) {
+    //given
+    const masteryRate = 0.2;
+    const hasStages = false;
+    const reachedStage = null;
+    const totalStage = null;
+    const prescriberTitle = null;
+    const prescriberDescription = null;
+
+    // when
+    const screen = await render(
+      <template>
+        <MasteryPercentageDisplay
+          @masteryRate={{masteryRate}}
+          @hasStages={{hasStages}}
+          @reachedStage={{reachedStage}}
+          @totalStage={{totalStage}}
+          @prescriberTitle={{prescriberTitle}}
+          @prescriberDescription={{prescriberDescription}}
+          @isTableDisplay={{false}}
+        />
+      </template>,
+    );
+
+    // then
+    assert.ok(screen.getByText('20 %'));
+  });
+
+  module('when has stage', function () {
+    test('it should display star', async function (assert) {
+      //given
+      const masteryRate = 0.2;
+      const hasStages = true;
+      const reachedStage = 4;
+      const totalStages = 5;
+      const prescriberTitle = null;
+      const prescriberDescription = null;
+
+      // when
+      const screen = await render(
+        <template>
+          <MasteryPercentageDisplay
+            @masteryRate={{masteryRate}}
+            @hasStages={{hasStages}}
+            @reachedStage={{reachedStage}}
+            @totalStage={{totalStages}}
+            @prescriberTitle={{prescriberTitle}}
+            @prescriberDescription={{prescriberDescription}}
+            @isTableDisplay={{false}}
+          />
+        </template>,
+      );
+
+      // then
+      assert.ok(screen.getByText(t('common.result.stages', { count: 3, total: 4 })));
+    });
+
+    module('tooltip', function () {
+      test('available with title', async function (assert) {
+        //given
+        const masteryRate = 0.2;
+        const hasStages = true;
+        const reachedStage = 4;
+        const totalStages = 5;
+        const prescriberTitle = 'my title';
+        const prescriberDescription = null;
+
+        // when
+        const screen = await render(
+          <template>
+            <MasteryPercentageDisplay
+              @masteryRate={{masteryRate}}
+              @hasStages={{hasStages}}
+              @reachedStage={{reachedStage}}
+              @totalStage={{totalStages}}
+              @prescriberTitle={{prescriberTitle}}
+              @prescriberDescription={{prescriberDescription}}
+              @isTableDisplay={{false}}
+            />
+          </template>,
+        );
+
+        // then
+        assert.ok(screen.getByText(prescriberTitle));
+      });
+
+      test('available with description', async function (assert) {
+        //given
+        const masteryRate = 0.2;
+        const hasStages = true;
+        const reachedStage = 4;
+        const totalStages = 5;
+        const prescriberTitle = null;
+        const prescriberDescription = 'my description';
+
+        // when
+        const screen = await render(
+          <template>
+            <MasteryPercentageDisplay
+              @masteryRate={{masteryRate}}
+              @hasStages={{hasStages}}
+              @reachedStage={{reachedStage}}
+              @totalStage={{totalStages}}
+              @prescriberTitle={{prescriberTitle}}
+              @prescriberDescription={{prescriberDescription}}
+              @isTableDisplay={{false}}
+            />
+          </template>,
+        );
+
+        // then
+        assert.ok(screen.getByText(prescriberDescription));
+      });
+    });
+  });
+});