[FEATURE] Ajouter la barre de navigation Modulix (PIX-14864)

 #10489

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

@@ -1,3 +1,28 @@
+.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/beta-banner.gjs

@@ -2,7 +2,7 @@ import PixBanner from '@1024pix/pix-ui/components/pix-banner';
 import { t } from 'ember-intl';
 
 <template>
-  <PixBanner class="beta-banner" @type="communication">
+  <PixBanner @type="communication">
     {{t "pages.modulix.beta-banner"}}
   </PixBanner>
 </template>

mon-pix/app/components/module/element/_embed.scss

@@ -3,8 +3,6 @@
 }
 
 .element-embed {
-  position: relative;
-
   &__container {
     position: relative;
   }
@@ -32,12 +30,10 @@
     }
   }
 
-
   &__overlay {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;

mon-pix/app/components/module/element/embed.gjs

@@ -71,6 +71,15 @@ export default class ModulixEmbed extends ModuleElement {
       {{/if}}
 
       <div class="element-embed__container">
+        <iframe
+          class="element-embed-container__iframe
+            {{unless this.isSimulatorLaunched 'element-embed-container__iframe--blurred'}}"
+          src={{@embed.url}}
+          title={{@embed.title}}
+          style={{this.heightStyle}}
+          {{didInsert this.setIframeHtmlElement}}
+        ></iframe>
+
         {{#unless this.isSimulatorLaunched}}
           <div class="element-embed-container__overlay">
             <PixButton
@@ -83,15 +92,6 @@ export default class ModulixEmbed extends ModuleElement {
             </PixButton>
           </div>
         {{/unless}}
-
-        <iframe
-          class="element-embed-container__iframe
-            {{unless this.isSimulatorLaunched 'element-embed-container__iframe--blurred'}}"
-          src={{@embed.url}}
-          title={{@embed.title}}
-          style={{this.heightStyle}}
-          {{didInsert this.setIframeHtmlElement}}
-        ></iframe>
       </div>
 
       {{#if this.isSimulatorLaunched}}

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

@@ -2,6 +2,7 @@ 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';
@@ -34,6 +35,10 @@ export default class ModulePassage extends Component {
     return this.grainsToDisplay.length - 1;
   }
 
+  get currentPassageStep() {
+    return this.currentGrainIndex + 1;
+  }
+
   @action
   onGrainSkip() {
     const currentGrain = this.displayableGrains[this.currentGrainIndex];
@@ -193,9 +198,24 @@ export default class ModulePassage extends Component {
 
   <template>
     {{pageTitle @module.title}}
-    <BetaBanner />
+    <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>
 
     <main class="module-passage">
+      <BetaBanner />
+
       <div class="module-passage__title">
         <h1>{{@module.title}}</h1>
       </div>

mon-pix/app/styles/app.scss

@@ -64,7 +64,6 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @import 'components/levelup-notif';
 @import 'components/login-form';
 @import 'components/login-or-register';
-@import '../components/module/beta-banner';
 @import '../components/module/details';
 @import '../components/module/feedback';
 @import '../components/module/grain';

mon-pix/app/styles/pages/_module.scss

@@ -2,11 +2,19 @@
   @extend %pix-body-l;
 
   --modulix-max-content-width: 740px;
-  --modulix-radius: 16px;
+  --modulix-radius-xs: 4px;
   --modulix-radius-s: 8px;
+  --modulix-radius: 16px;
   --modulix-radius-l: 24px;
+  --modulix-z-index-above-all: 2;
 
   flex-grow: 1;
   color: var(--pix-neutral-900);
   background: var(--pix-neutral-0);
 }
+
+.modulix-beta-banner {
+  --modulix-z-index-above-all: 2;
+
+  z-index: var(--modulix-z-index-above-all);
+}

mon-pix/app/templates/module/details.hbs

@@ -1,4 +1,6 @@
-<Module::BetaBanner />
+<div class="modulix-beta-banner">
+  <Module::BetaBanner />
+</div>
 <nav>
   <ul>
     <li>

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

@@ -46,6 +46,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     assert.strictEqual(findAll('.element-text').length, 1);
     assert.strictEqual(findAll('.element-qcu').length, 1);
 
+    assert.dom(screen.getByRole('navigation', { name: 'Étape 1 sur 1' }));
     assert.dom(screen.queryByRole('button', { name: 'Continuer' })).doesNotExist();
   });
 
@@ -157,6 +158,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
     assert.strictEqual(findAll('.element-text').length, 1);
     assert.strictEqual(findAll('.element-qcu').length, 0);
 
+    assert.dom(screen.getByRole('navigation', { name: 'Étape 1 sur 2' }));
     assert.dom(screen.queryByRole('button', { name: 'Continuer' })).exists({ count: 1 });
   });
 
@@ -251,6 +253,7 @@ module('Integration | Component | Module | Passage', function (hooks) {
       // then
       const grainsAfteronGrainContinue = screen.getAllByRole('article');
       assert.strictEqual(grainsAfteronGrainContinue.length, 2);
+      assert.dom(screen.getByRole('navigation', { name: 'Étape 2 sur 2' }));
     });
 
     test('should give focus on the last grain when appearing', async function (assert) {

mon-pix/translations/en.json

@@ -1564,6 +1564,9 @@
           "yes": "Yes! : {totalYes}"
         },
         "direction": "Look for the answer then turn the card",
+        "navigation": {
+          "currentStep": "Step {current} of {total}"
+        },
         "position": "Card {currentCardPosition}/{totalCards}"
       },
       "grain": {
@@ -2162,4 +2165,4 @@
       "title": "My tutorials"
     }
   }
-}
+}

mon-pix/translations/es.json

@@ -1584,7 +1584,10 @@
           "yes": "¡Sí! {totalYes}"
         },
         "direction": "Busca la respuesta y gira la tarjeta",
-        "position": "{currentCardPosition}Tarjeta /{totalCards}"
+        "position": "{currentCardPosition}Tarjeta /{totalCards}",
+        "navigation": {
+          "currentStep": "Paso {current} de {total}"
+        }
       },
       "grain": {
         "tag": {

mon-pix/translations/fr.json

@@ -1564,6 +1564,9 @@
           "yes": "Oui ! : {totalYes}"
         },
         "direction": "Cherchez la réponse puis tournez la carte",
+        "navigation": {
+          "currentStep": "Étape {current} sur {total}"
+        },
         "position": "Carte {currentCardPosition}/{totalCards}"
       },
       "grain": {
@@ -2182,4 +2185,4 @@
       "title": "Mes tutos"
     }
   }
-}
+}

mon-pix/translations/nl.json

@@ -1584,7 +1584,10 @@
           "yes": "Ja ! {totalYes}"
         },
         "direction": "Zoek het antwoord en draai de kaart om",
-        "position": "{currentCardPosition}Kaart /{totalCards}"
+        "position": "{currentCardPosition}Kaart /{totalCards}",
+        "navigation": {
+          "currentStep": "Stap {current} van {total}"
+        }
       },
       "grain": {
         "tag": {