[FEATURE] Afficher la légende et la licence d'une image dans un module (

PIX-15991) #11059
1024pix · Jan 15, 2025 · 6e2c472 · 6e2c472
2 parents 9275d61 + 320bc48
commit 6e2c472
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/mon-pix/app/components/module/element/_image.scss b/mon-pix/app/components/module/element/_image.scss
@@ -1,6 +1,6 @@
 .element-image {
   &__container {
-    margin: 0 auto var(--pix-spacing-3x) auto;
+    margin: 0 auto;
   }
 }
 
@@ -11,4 +11,18 @@
     object-fit: contain;
     border-radius: var(--modulix-radius-s);
   }
+
+  &__caption {
+    @extend %pix-body-s;
+
+    margin-top: var(--pix-spacing-1x);
+    color: rgb(var(--pix-neutral-800-inline), 0.9);
+  }
+
+  &__licence {
+    @extend %pix-body-xs;
+
+    margin-left: var(--pix-spacing-1x);
+    color: var(--pix-neutral-500);
+  }
 }
diff --git a/mon-pix/app/components/module/element/image.gjs b/mon-pix/app/components/module/element/image.gjs
@@ -26,11 +26,14 @@ export default class ModulixImageElement extends Component {
 
   <template>
     <div class="element-image">
-      <div class="element-image__container">
+      <figure class="element-image__container">
         <img class="element-image-container__image" alt={{@image.alt}} src={{@image.url}} />
-      </div>
+        <figcaption class="element-image-container__caption">{{@image.legend}}<span
+            class="element-image-container__licence"
+          >{{@image.licence}}</span></figcaption>
+      </figure>
       {{#if this.hasAlternativeText}}
-        <PixButton @variant="tertiary" @triggerAction={{this.showModal}}>
+        <PixButton class="element-image__button" @variant="tertiary" @triggerAction={{this.showModal}}>
           {{t "pages.modulix.buttons.element.alternativeText"}}
         </PixButton>
         <PixModal

diff --git a/mon-pix/tests/integration/components/module/image_test.gjs b/mon-pix/tests/integration/components/module/image_test.gjs
@@ -18,6 +18,8 @@ module('Integration | Component | Module | Image', function (hooks) {
       url,
       alt: 'alt text',
       alternativeText: 'alternative instruction',
+      legend: 'je suis une légende',
+      licence: 'Je suis une licence',
     };
 
     //  when
@@ -28,6 +30,8 @@ module('Integration | Component | Module | Image', function (hooks) {
     assert.strictEqual(findAll('.element-image').length, 1);
     assert.ok(screen.getByRole('img', { name: 'alt text' }).hasAttribute('src', url));
     assert.ok(screen.getByRole('button', { name: "Afficher l'alternative textuelle" }));
+    assert.dom(screen.getByText(imageElement.legend)).exists();
+    assert.dom(screen.getByText(imageElement.licence)).exists();
   });
 
   test('should be able to use the modal for alternative instruction', async function (assert) {