[FEATURE] Barre de navigation : Afficher la barre d'avancement (PIX-1…

…4865)

 #10525

mon-pix/app/components/module/_navbar.scss

@@ -0,0 +1,24 @@
+.module-navbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--modulix-z-index-above-all);
+  height: var(--module-navbar-height);
+  padding: var(--pix-spacing-4x);
+  background: var(--pix-neutral-0);
+  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 6%);
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pix-spacing-3x);
+    max-width: var(--modulix-max-content-width);
+    margin: 0 auto;
+
+    &__current-step {
+      padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
+      color: var(--pix-primary-700);
+      background-color: var(--pix-primary-100);
+      border-radius: var(--modulix-radius-xs);
+    }
+  }
+}

mon-pix/app/components/module/_passage.scss

@@ -1,28 +1,3 @@
-.module-navbar {
-  position: sticky;
-  top: 0;
-  z-index: var(--modulix-z-index-above-all);
-  height: var(--module-navbar-height);
-  padding: var(--pix-spacing-4x);
-  background: var(--pix-neutral-0);
-  box-shadow: 0 4px 20px 0 rgb(0 0 0 / 6%);
-
-  &__content {
-    display: flex;
-    max-width: var(--modulix-max-content-width);
-    margin: 0 auto;
-
-    &__current-step {
-      padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
-      color: var(--pix-primary-700);
-      background-color: var(--pix-primary-100);
-      border-radius: var(--modulix-radius-xs);
-    }
-  }
-
-
-}
-
 .module-passage {
   max-width: var(--modulix-max-content-width);
   margin: 0 auto;

mon-pix/app/components/module/navbar.gjs

@@ -0,0 +1,27 @@
+import PixProgressGauge from '@1024pix/pix-ui/components/pix-progress-gauge';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class ModulixNavbar extends Component {
+  get progressValue() {
+    if (this.args.totalSteps <= 1) {
+      return 100;
+    }
+    return ((this.args.currentStep - 1) / (this.args.totalSteps - 1)) * 100;
+  }
+
+  <template>
+    <nav
+      class="module-navbar"
+      aria-label={{t "pages.modulix.flashcards.navigation.currentStep" current=@currentStep total=@totalSteps}}
+    >
+      <div class="module-navbar__content">
+        <div class="module-navbar__content__current-step">
+          {{@currentStep}}/{{@totalSteps}}
+        </div>
+
+        <PixProgressGauge @value={{this.progressValue}} @label="Avancement du module" />
+      </div>
+    </nav>
+  </template>
+}

mon-pix/app/components/module/passage.gjs

@@ -2,12 +2,12 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { t } from 'ember-intl';
 import { pageTitle } from 'ember-page-title';
 
 import didInsert from '../../modifiers/modifier-did-insert';
 import BetaBanner from './beta-banner';
 import ModuleGrain from './grain.js';
+import ModuleNavbar from './navbar';
 
 export default class ModulePassage extends Component {
   @service router;
@@ -198,20 +198,7 @@ export default class ModulePassage extends Component {
 
   <template>
     {{pageTitle @module.title}}
-    <nav
-      class="module-navbar"
-      aria-label={{t
-        "pages.modulix.flashcards.navigation.currentStep"
-        current=this.currentPassageStep
-        total=this.displayableGrains.length
-      }}
-    >
-      <div class="module-navbar__content">
-        <div class="module-navbar__content__current-step">
-          {{this.currentPassageStep}}/{{this.displayableGrains.length}}
-        </div>
-      </div>
-    </nav>
+    <ModuleNavbar @currentStep={{this.currentPassageStep}} @totalSteps={{this.displayableGrains.length}} />
 
     <main class="module-passage">
       <BetaBanner />

mon-pix/app/styles/app.scss

@@ -68,6 +68,7 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @import '../components/module/feedback';
 @import '../components/module/grain';
 @import '../components/module/grain/tag';
+@import '../components/module/navbar';
 @import '../components/module/objectives';
 @import '../components/module/passage';
 @import '../components/module/recap';

mon-pix/tests/integration/components/module/navbar_test.gjs

@@ -0,0 +1,57 @@
+import { render } from '@1024pix/ember-testing-library';
+import ModulixNavbar from 'mon-pix/components/module/navbar';
+import { module, test } from 'qunit';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Module | Navbar', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  module('when at first step', function () {
+    test('should display step 1 with empty progress bar', async function (assert) {
+      //  when
+      const screen = await render(<template><ModulixNavbar @currentStep={{1}} @totalSteps={{3}} /></template>);
+
+      // then
+      assert.ok(screen);
+      assert.dom(screen.getByRole('navigation', { name: 'Étape 1 sur 3' })).exists();
+      assert.dom(screen.getByRole('progressbar', { name: 'Avancement du module' })).hasValue(0);
+    });
+  });
+
+  module('when at step 2 of 3', function () {
+    test('should display step 2 with half-filled progress bar', async function (assert) {
+      //  when
+      const screen = await render(<template><ModulixNavbar @currentStep={{2}} @totalSteps={{3}} /></template>);
+
+      // then
+      assert.ok(screen);
+      assert.dom(screen.getByRole('navigation', { name: 'Étape 2 sur 3' })).exists();
+      assert.dom(screen.getByRole('progressbar', { name: 'Avancement du module' })).hasValue(50);
+    });
+  });
+
+  module('when at last step', function () {
+    test('should display step 3 with full-filled progress bar', async function (assert) {
+      //  when
+      const screen = await render(<template><ModulixNavbar @currentStep={{3}} @totalSteps={{3}} /></template>);
+
+      // then
+      assert.ok(screen);
+      assert.dom(screen.getByRole('navigation', { name: 'Étape 3 sur 3' })).exists();
+      assert.dom(screen.getByRole('progressbar', { name: 'Avancement du module' })).hasValue(100);
+    });
+  });
+
+  module('when there is only one step', function () {
+    test('should display step 1/1 and a full-filled progress bar', async function (assert) {
+      //  when
+      const screen = await render(<template><ModulixNavbar @currentStep={{1}} @totalSteps={{1}} /></template>);
+
+      // then
+      assert.ok(screen);
+      assert.dom(screen.getByRole('navigation', { name: 'Étape 1 sur 1' })).exists();
+      assert.dom(screen.getByRole('progressbar', { name: 'Avancement du module' })).hasValue(100);
+    });
+  });
+});