feat(api): add intro card component

for modulix flash cards

mon-pix/app/components/module/element/flashcards-intro-card.gjs

@@ -0,0 +1,22 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import { t } from 'ember-intl';
+
+<template>
+  <div class="element-flashcards__intro-card">
+    {{#if @introImage}}
+      <div class="element-flashcards__intro-card__image">
+        <img src={{@introImage.url}} alt="" />
+      </div>
+    {{/if}}
+
+    <div class="element-flashcards__intro-card__text">
+      <p class="element-flashcards__intro-card__title">{{@title}}</p>
+    </div>
+
+    <div class="element-flashcards__intro-card__footer">
+      <PixButton @triggerAction={{@onStart}} @variant="primary" @size="small">
+        {{t "pages.modulix.buttons.flashcards.start"}}
+      </PixButton>
+    </div>
+  </div>
+</template>

mon-pix/app/styles/components/module/_flashcards.scss

@@ -1,5 +1,6 @@
 .element-flashcards {
-  &__card {
+  &__card,
+  &__intro-card {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -13,6 +14,17 @@
     box-shadow: 0 12px 24px 0 rgb(7 20 46 / 12%);
   }
 
+  &__intro-card {
+    align-items: center;
+    padding: var(--pix-spacing-2x);
+    padding-bottom: var(--pix-spacing-6x);
+    border: 0;
+  }
+
+  &__intro-card__title {
+    @extend %pix-title-s;
+  }
+
   &__footer {
     display: flex;
     flex-direction: column;

mon-pix/tests/integration/components/module/flashcards-intro-card_test.gjs

@@ -0,0 +1,68 @@
+import { clickByName, render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import ModulixFlashcardsIntroCard from 'mon-pix/components/module/element/flashcards-intro-card';
+// eslint-disable-next-line no-restricted-imports
+import { module, test } from 'qunit';
+import sinon from 'sinon';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | Module | Flashcards Intro Card', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('should display an intro card', async function (assert) {
+    // given
+    const introImage = {
+      url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
+    };
+    const title = 'Introduction à la poésie';
+
+    // when
+    const screen = await render(
+      <template><ModulixFlashcardsIntroCard @introImage={{introImage}} @title={{title}} /></template>,
+    );
+
+    // then
+    assert.ok(screen.getByText('Introduction à la poésie'));
+    assert.strictEqual(
+      screen.getByRole('presentation').getAttribute('src'),
+      'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
+    );
+    assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.start') })).exists();
+  });
+
+  test('should not display image if not provided', async function (assert) {
+    // given
+    const introImage = undefined;
+    const title = 'Introduction à la poésie';
+
+    // when
+    const screen = await render(
+      <template><ModulixFlashcardsIntroCard @introImage={{introImage}} @title={{title}} /></template>,
+    );
+
+    // then
+    assert.dom(screen.queryByRole('img')).doesNotExist();
+  });
+
+  module('when we click on "Commencer"', function () {
+    test('should call the onStart method', async function (assert) {
+      // given
+      const introImage = undefined;
+      const title = 'Introduction à la poésie';
+      const onStartStub = sinon.stub();
+
+      await render(
+        <template>
+          <ModulixFlashcardsIntroCard @introImage={{introImage}} @title={{title}} @onStart={{onStartStub}} />
+        </template>,
+      );
+
+      // when
+      await clickByName(t('pages.modulix.buttons.flashcards.start'));
+
+      // then
+      assert.true(onStartStub.calledOnce);
+    });
+  });
+});

mon-pix/translations/en.json

@@ -1378,6 +1378,7 @@
           }
         },
         "flashcards": {
+          "start": "Start",
           "seeAnswer": "See the answer",
           "seeAgain": "Review the question",
           "nextCard": "Next"

mon-pix/translations/es.json

@@ -1358,6 +1358,7 @@
           }
         },
         "flashcards": {
+          "start" : "Para empezar",
           "seeAnswer" : "ver la respuesta",
           "seeAgain": "Revisa la pregunta",
           "nextCard": "Siguiente"

mon-pix/translations/fr.json

@@ -1378,6 +1378,7 @@
           }
         },
         "flashcards": {
+          "continuer": "Continuer",
           "seeAnswer": "Voir la réponse",
           "seeAgain": "Revoir la question",
           "nextCard": "Suivant"

mon-pix/translations/nl.json

@@ -1358,6 +1358,7 @@
           }
         },
         "flashcards": {
+          "start": "Beginnen",
           "seeAnswer" : "Zie het antwoord",
           "seeAgain": "Bekijk de vraag",
           "nextCard": "Volgende"