refactor(mon-pix): extract module navbar component

 Co-authored-by: Clément Latzarus <[email protected]>

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);
+    }
+  }
+}

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,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>

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,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();
+  });
+});