feat(mon-pix): add counter in outro flashcard

Co-authored-by: Clément Latzarus <[email protected]> Co-authored-by: dianeCdrPix <[email protected]> Co-authored-by: Yann Bertrand <[email protected]>
1024pix · Oct 24, 2024 · 527a517 · 527a517
1 parent 0d9d952
commit 527a517
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 13 deletions.
diff --git a/mon-pix/app/components/module/element/flashcards/flashcards-outro-card.gjs b/mon-pix/app/components/module/element/flashcards/flashcards-outro-card.gjs
@@ -12,8 +12,19 @@ import { t } from 'ember-intl';
       <p class="element-flashcards-outro-card__title">{{@title}}</p>
     </div>
 
-    <div class="element-flashcards-outro-card__text">
-
+    <div>
+      <p class="element-flashcards-outro-card__question">{{t "pages.modulix.flashcards.answerDirection"}}</p>
+      <ul class="element-flashcards-outro-card__counter">
+        <li class="element-flashcards-outro-card__counter__yes">
+          {{t "pages.modulix.flashcards.counter.yes" totalYes=@counter.yes}}
+        </li>
+        <li class="element-flashcards-outro-card__counter__almost">
+          {{t "pages.modulix.flashcards.counter.almost" totalAlmost=@counter.almost}}
+        </li>
+        <li class="element-flashcards-outro-card__counter__no">
+          {{t "pages.modulix.flashcards.counter.no" totalNo=@counter.no}}
+        </li>
+      </ul>
     </div>
 
     <div class="element-flashcards-outro-card__footer">

diff --git a/mon-pix/app/styles/components/module/_flashcards-card.scss b/mon-pix/app/styles/components/module/_flashcards-card.scss
@@ -67,8 +67,7 @@
 }
 
 .element-flashcards-intro-card,
-.element-flashcards-outro-card
-{
+.element-flashcards-outro-card {
   align-items: center;
   padding: var(--pix-spacing-2x);
   padding-bottom: var(--pix-spacing-6x);
@@ -106,5 +105,30 @@
     padding: 0 16px;
     color: var(--pix-neutral-0);
   }
+
+  &__question {
+    @extend %pix-body-s;
+
+    margin-bottom: var(--pix-spacing-2x);
+    font-weight: 700;
+  }
+
+  &__counter {
+    @extend %pix-body-l;
+
+    font-weight: 700;
+
+    &__yes {
+      color: var(--pix-success-500);
+    }
+
+    &__almost {
+      color: var(--pix-warning-500);
+    }
+
+    &__no {
+      color: var(--pix-error-500);
+    }
+  }
 }
 
diff --git a/mon-pix/tests/integration/components/module/flashcards-outro-card_test.gjs b/mon-pix/tests/integration/components/module/flashcards-outro-card_test.gjs
@@ -12,16 +12,21 @@ module('Integration | Component | Module | Flashcards Outro Card', function (hoo
 
   test('should display an outro card', async function (assert) {
     // given
+    const counter = { yes: 1, almost: 2, no: 1 };
     const title = 'Introduction à la poésie';
 
     // when
-    const screen = await render(<template>
-      <ModulixFlashcardsOutroCard @title={{title}} /></template>);
 
+    const screen = await render(
+      <template><ModulixFlashcardsOutroCard @counter={{counter}} @title={{title}} /></template>,
+    );
+
+    await this.pauseTest();
     // then
-    // TODO Remove this pause test
-    // await this.pauseTest();
     assert.ok(screen.getByText('Introduction à la poésie'));
+    assert.ok(screen.getByText(`Oui ! : ${counter.yes}`));
+    assert.ok(screen.getByText(`Presque : ${counter.almost}`));
+    assert.ok(screen.getByText(`Pas du tout : ${counter.no}`));
     assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.retry') })).exists();
   });
 
@@ -31,11 +36,7 @@ module('Integration | Component | Module | Flashcards Outro Card', function (hoo
       const title = 'Introduction à la poésie';
       const onRetryStub = sinon.stub();
 
-      await render(
-      <template>
-        <ModulixFlashcardsOutroCard  @title={{title}} @onRetry={{onRetryStub}} />
-      </template>,
-      );
+      await render(<template><ModulixFlashcardsOutroCard @title={{title}} @onRetry={{onRetryStub}} /></template>);
 
       // when
       await clickByName(t('pages.modulix.buttons.flashcards.retry'));

diff --git a/mon-pix/translations/fr.json b/mon-pix/translations/fr.json
@@ -1527,6 +1527,11 @@
       },
       "flashcards": {
         "answerDirection": "Vous aviez la réponse ?",
+        "counter": {
+          "almost": "Presque : {totalAlmost}",
+          "no": "Pas du tout : {totalNo}",
+          "yes": "Oui ! : {totalYes}"
+        },
         "direction": "Cherchez la réponse puis tournez la carte",
         "position": "Carte {currentCardPosition}/{totalCards}"
       },