From ef4de4258e925fc5e98b53eca5f882fca7cb7570 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Thu, 7 Nov 2024 11:43:24 +0100
Subject: [PATCH 1/3] feat(mon-pix): add modulix navbar with current step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Yann Bertrand <yann.bertrand@pix.fr>
Co-authored-by: Clément Latzarus <clement.latzarus@pix.fr>
---
 mon-pix/app/components/module/_passage.scss   | 25 +++++++++++++++++++
 mon-pix/app/components/module/passage.gjs     | 22 +++++++++++++++-
 mon-pix/app/styles/pages/_module.scss         |  4 ++-
 .../components/module/passage_test.gjs        |  3 +++
 mon-pix/translations/en.json                  |  5 +++-
 mon-pix/translations/es.json                  |  5 +++-
 mon-pix/translations/fr.json                  |  5 +++-
 mon-pix/translations/nl.json                  |  5 +++-
 8 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/mon-pix/app/components/module/_passage.scss b/mon-pix/app/components/module/_passage.scss
index 201470a007d..12501fd489c 100644
--- a/mon-pix/app/components/module/_passage.scss
+++ b/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;
diff --git a/mon-pix/app/components/module/passage.gjs b/mon-pix/app/components/module/passage.gjs
index d8e8de93d20..9892a743d5e 100644
--- a/mon-pix/app/components/module/passage.gjs
+++ b/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>
diff --git a/mon-pix/app/styles/pages/_module.scss b/mon-pix/app/styles/pages/_module.scss
index 1da18bccef6..d7fb1309e2e 100644
--- a/mon-pix/app/styles/pages/_module.scss
+++ b/mon-pix/app/styles/pages/_module.scss
@@ -2,9 +2,11 @@
   @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);
diff --git a/mon-pix/tests/integration/components/module/passage_test.gjs b/mon-pix/tests/integration/components/module/passage_test.gjs
index f002eb5ad7d..a632aac9ef3 100644
--- a/mon-pix/tests/integration/components/module/passage_test.gjs
+++ b/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) {
diff --git a/mon-pix/translations/en.json b/mon-pix/translations/en.json
index a30ac380409..adbe7f651b9 100644
--- a/mon-pix/translations/en.json
+++ b/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"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/mon-pix/translations/es.json b/mon-pix/translations/es.json
index f76e05e833b..55db20173d7 100644
--- a/mon-pix/translations/es.json
+++ b/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": {
diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
index 0d07dff60c2..24d6a8552ef 100644
--- a/mon-pix/translations/fr.json
+++ b/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"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/mon-pix/translations/nl.json b/mon-pix/translations/nl.json
index 4fc4a6a61ff..bfbae10469d 100644
--- a/mon-pix/translations/nl.json
+++ b/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": {

From ebc5e0b8b521f702aebd379c8804ef629f5928a7 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Thu, 7 Nov 2024 11:47:30 +0100
Subject: [PATCH 2/3] =?UTF-8?q?refactor(mon-pix):=20custom=20beta-banner?=
 =?UTF-8?q?=20z-index=20in=20details=20page=20=20Co-authored-by:=20Yann=20?=
 =?UTF-8?q?Bertrand=20<yann.bertrand@pix.fr>=20=20Co-authored-by:=20Cl?=
 =?UTF-8?q?=C3=A9ment=20Latzarus=20<clement.latzarus@pix.fr>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mon-pix/app/components/module/_beta-banner.scss | 3 ---
 mon-pix/app/components/module/beta-banner.gjs   | 2 +-
 mon-pix/app/styles/app.scss                     | 1 -
 mon-pix/app/styles/pages/_module.scss           | 6 ++++++
 mon-pix/app/templates/module/details.hbs        | 4 +++-
 5 files changed, 10 insertions(+), 6 deletions(-)
 delete mode 100644 mon-pix/app/components/module/_beta-banner.scss

diff --git a/mon-pix/app/components/module/_beta-banner.scss b/mon-pix/app/components/module/_beta-banner.scss
deleted file mode 100644
index e8571d77630..00000000000
--- a/mon-pix/app/components/module/_beta-banner.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.beta-banner {
-  z-index: 2;
-}
diff --git a/mon-pix/app/components/module/beta-banner.gjs b/mon-pix/app/components/module/beta-banner.gjs
index 68713704d84..0f94289b7c5 100644
--- a/mon-pix/app/components/module/beta-banner.gjs
+++ b/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>
diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss
index 07d7f3230b3..b39cc94a64e 100644
--- a/mon-pix/app/styles/app.scss
+++ b/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';
diff --git a/mon-pix/app/styles/pages/_module.scss b/mon-pix/app/styles/pages/_module.scss
index d7fb1309e2e..a6b1fd2069a 100644
--- a/mon-pix/app/styles/pages/_module.scss
+++ b/mon-pix/app/styles/pages/_module.scss
@@ -12,3 +12,9 @@
   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);
+}
diff --git a/mon-pix/app/templates/module/details.hbs b/mon-pix/app/templates/module/details.hbs
index 73aa40d94af..cabfe967800 100644
--- a/mon-pix/app/templates/module/details.hbs
+++ b/mon-pix/app/templates/module/details.hbs
@@ -1,4 +1,6 @@
-<Module::BetaBanner />
+<div class="modulix-beta-banner">
+  <Module::BetaBanner />
+</div>
 <nav>
   <ul>
     <li>

From d4674619a162fd1a3a05f87595f1dd152c224267 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Thu, 7 Nov 2024 11:49:04 +0100
Subject: [PATCH 3/3] refactor(mon-pix): simplify embed style about z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Yann Bertrand <yann.bertrand@pix.fr>
Co-authored-by: Clément Latzarus <clement.latzarus@pix.fr>
---
 .../app/components/module/element/_embed.scss  |  4 ----
 .../app/components/module/element/embed.gjs    | 18 +++++++++---------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/mon-pix/app/components/module/element/_embed.scss b/mon-pix/app/components/module/element/_embed.scss
index 61e1c8f9315..72f013e223e 100644
--- a/mon-pix/app/components/module/element/_embed.scss
+++ b/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;
diff --git a/mon-pix/app/components/module/element/embed.gjs b/mon-pix/app/components/module/element/embed.gjs
index ea598caf867..5aeea19b166 100644
--- a/mon-pix/app/components/module/element/embed.gjs
+++ b/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}}