feat(mon-pix): display progress gauge in modulix navbar

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

@@ -9,6 +9,8 @@
 
   &__content {
     display: flex;
+    flex-wrap: wrap;
+    gap: var(--pix-spacing-3x);
     max-width: var(--modulix-max-content-width);
     margin: 0 auto;
 

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

@@ -1,13 +1,27 @@
+import PixProgressGauge from '@1024pix/pix-ui/components/pix-progress-gauge';
+import Component from '@glimmer/component';
 import { t } from 'ember-intl';
-<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}}
+
+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>
-    </div>
-  </nav>
-</template>
+    </nav>
+  </template>
+}

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

@@ -7,12 +7,51 @@ import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 module('Integration | Component | Module | Navbar', function (hooks) {
   setupIntlRenderingTest(hooks);
 
-  test('should display current step ', async function (assert) {
-    //  when
-    const screen = await render(<template><ModulixNavbar @currentStep="1" @totalSteps="2" /></template>);
+  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 2' })).exists();
+      // 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);
+    });
   });
 });