From e2acc0d499f9ac5671edc6dc75274097bcd20b42 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Fri, 8 Nov 2024 16:11:05 +0100
Subject: [PATCH 1/2] refactor(mon-pix): extract module navbar component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 Co-authored-by: Clément Latzarus <clement.latzarus@pix.fr>
---
 mon-pix/app/components/module/_navbar.scss    | 22 ++++++++++++++++
 mon-pix/app/components/module/_passage.scss   | 25 -------------------
 mon-pix/app/components/module/navbar.gjs      | 13 ++++++++++
 mon-pix/app/components/module/passage.gjs     | 17 ++-----------
 mon-pix/app/styles/app.scss                   |  1 +
 .../components/module/navbar_test.gjs         | 18 +++++++++++++
 6 files changed, 56 insertions(+), 40 deletions(-)
 create mode 100644 mon-pix/app/components/module/_navbar.scss
 create mode 100644 mon-pix/app/components/module/navbar.gjs
 create mode 100644 mon-pix/tests/integration/components/module/navbar_test.gjs

diff --git a/mon-pix/app/components/module/_navbar.scss b/mon-pix/app/components/module/_navbar.scss
new file mode 100644
index 00000000000..1239148139b
--- /dev/null
+++ b/mon-pix/app/components/module/_navbar.scss
@@ -0,0 +1,22 @@
+.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);
+    }
+  }
+}
diff --git a/mon-pix/app/components/module/_passage.scss b/mon-pix/app/components/module/_passage.scss
index 12501fd489c..201470a007d 100644
--- a/mon-pix/app/components/module/_passage.scss
+++ b/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;
diff --git a/mon-pix/app/components/module/navbar.gjs b/mon-pix/app/components/module/navbar.gjs
new file mode 100644
index 00000000000..c20cebbc7ce
--- /dev/null
+++ b/mon-pix/app/components/module/navbar.gjs
@@ -0,0 +1,13 @@
+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}}
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/mon-pix/app/components/module/passage.gjs b/mon-pix/app/components/module/passage.gjs
index 9892a743d5e..a075a2b7643 100644
--- a/mon-pix/app/components/module/passage.gjs
+++ b/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 />
diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss
index b39cc94a64e..3de5bda937e 100644
--- a/mon-pix/app/styles/app.scss
+++ b/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';
diff --git a/mon-pix/tests/integration/components/module/navbar_test.gjs b/mon-pix/tests/integration/components/module/navbar_test.gjs
new file mode 100644
index 00000000000..91379a63cc9
--- /dev/null
+++ b/mon-pix/tests/integration/components/module/navbar_test.gjs
@@ -0,0 +1,18 @@
+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);
+
+  test('should display current step ', async function (assert) {
+    //  when
+    const screen = await render(<template><ModulixNavbar @currentStep="1" @totalSteps="2" /></template>);
+
+    // then
+    assert.ok(screen);
+    assert.dom(screen.getByRole('navigation', { name: 'Étape 1 sur 2' })).exists();
+  });
+});

From 7d3e6bbb1af839b23b3217ddd9ea96426d16a535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Latzarus?= <c@ltzr.io>
Date: Fri, 8 Nov 2024 17:08:23 +0100
Subject: [PATCH 2/2] feat(mon-pix): display progress gauge in modulix navbar

---
 mon-pix/app/components/module/_navbar.scss    |  2 +
 mon-pix/app/components/module/navbar.gjs      | 36 +++++++++----
 .../components/module/navbar_test.gjs         | 51 ++++++++++++++++---
 3 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/mon-pix/app/components/module/_navbar.scss b/mon-pix/app/components/module/_navbar.scss
index 1239148139b..506789f2bda 100644
--- a/mon-pix/app/components/module/_navbar.scss
+++ b/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;
 
diff --git a/mon-pix/app/components/module/navbar.gjs b/mon-pix/app/components/module/navbar.gjs
index c20cebbc7ce..6e2be336dc1 100644
--- a/mon-pix/app/components/module/navbar.gjs
+++ b/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>
+}
diff --git a/mon-pix/tests/integration/components/module/navbar_test.gjs b/mon-pix/tests/integration/components/module/navbar_test.gjs
index 91379a63cc9..d71f6746206 100644
--- a/mon-pix/tests/integration/components/module/navbar_test.gjs
+++ b/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);
+    });
   });
 });