Merge pull request #1028 from dpc-sdp/feat/r20-1656-image-captions

[R20-1656] Add image captions in content

packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts

@@ -65,7 +65,7 @@ const fixed = {
 
 </div>
 `,
-  image: `<img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x">`,
+  image: `<figure><img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x"></figure>`,
   button: `<a class="rpl-button rpl-button--default rpl-u-focusable-block rpl-button--filled" href="https://example.com"><span class="rpl-button__label rpl-type-label rpl-type-weight-bold">Button</span></a>`,
   link: `<a href="https://example.com" target="_blank" class="rpl-text-link rpl-u-focusable-inline">Link<span class="rpl-u-visually-hidden">(opens in a new window)</span></a>`,
   iframe: `<div class="rpl-iframe rpl-iframe--default rpl-iframe--auto"><iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>`

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -185,12 +185,19 @@ const pluginImages = function (this: any) {
     const width = $img.attr('width')
     const src = $img.attr('src')
     const alt = $img.attr('alt')
+    const $caption = this.find(el)
+      .find('div.field--name-field-media-caption')
+      ?.text()
     // this is the max width of the content area
     const contentWidth = 720
     return this.find(el).replaceWith(
-      `<img src="${src}" class="rpl-img" width="${width}" alt="${alt}" srcset="${src}?width=${contentWidth}, ${src}?width=${
+      `<figure><img src="${src}" class="rpl-img" width="${width}" alt="${alt}" srcset="${src}?width=${contentWidth}, ${src}?width=${
         contentWidth * 2
-      } 2x"></img>`
+      } 2x"></img>${
+        $caption
+          ? '<figcaption class="rpl-img__caption">' + $caption + '</figcaption>'
+          : ''
+      }</figure>`
     )
   })
 }

packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts

@@ -52,7 +52,7 @@ const result: TideDynamicPageComponent<ITideBasicText> = {
     }
   ],
   props: {
-    html: '<h2 id="nulla-ultricies-dignissim-leo-posuere-vestibulum-erat-cursus-vitae">Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae</h2>\n<h3 id="phasellus-congue-aliquam-vehicula">Phasellus congue aliquam vehicula</h3>\n<p class="rpl-callout rpl-callout--neutral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.</p>\n<h3 id="donec-scelerisque-cursus-ex-varius-efficitur">Donec scelerisque cursus ex varius efficitur</h3>\n<div class="rpl-callout"><p class="callout-wrapper">Lorem ipsum dolor sit amet</p></div>\n<h4>Morbi cursus placerat mi</h4>\n<h5>Nullam laoreet ante placerat</h5>\n<p>Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.</p>\n\n<figure class="rpl-blockquote">\n  <blockquote class="rpl-blockquote__quote">\n  <p class="rpl-type-p-large-fixed">Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.</p>\n  </blockquote>\n  <figcaption class="rpl-blockquote__author rpl-type-label-small"><span class="rpl-blockquote__author-name">Duis ligula lacus</span><span class="rpl-blockquote__author-name">Phasellus est turpis, efficitur nec odio imperdiet</span></figcaption>\n</figure>\n\nMauris tincidunt tincidunt felis vel tempus\n<img src="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg" class="rpl-img" width="900" alt="Demo: Melbourne tram" srcset="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=720, https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=1440 2x">\n<p>Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.</p>\n\n<figure class="rpl-document">\n  <a class="rpl-document__link rpl-u-focusable-within" aria-label="Demo Sample Document File type: Word. Size: 7.53 KB." href="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/sample.docx" target="_blank">\n    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">\n      <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>\n    </span>\n    <div class="rpl-document__content">\n      <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">Demo Sample Document</span>\n      <div class="rpl-document__info rpl-type-label-small">\n        <span class="rpl-file__meta">Word</span>\n        <span class="rpl-file__meta">7.53 KB</span>\n      </div>\n    </div>\n    <span class="rpl-u-visually-hidden">(opens in a new window)</span>\n  </a>\n</figure>\n\n'
+    html: '<h2 id="nulla-ultricies-dignissim-leo-posuere-vestibulum-erat-cursus-vitae">Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae</h2>\n<h3 id="phasellus-congue-aliquam-vehicula">Phasellus congue aliquam vehicula</h3>\n<p class="rpl-callout rpl-callout--neutral">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sit amet ligula sit amet lacinia. In a leo nec tortor aliquet faucibus. Quisque nec congue ligula, vitae condimentum tellus. Nulla nec urna augue. Curabitur commodo nisi est, eu pulvinar tortor cursus vel. Morbi dictum ex est, et semper diam finibus eu. Cras rutrum, nunc a fringilla convallis, massa est vulputate velit, in blandit augue dui vitae elit. Donec hendrerit commodo augue, in maximus orci tempor congue. Mauris ultricies euismod orci, nec vehicula quam vehicula ac. Nunc dictum tortor dolor, nec eleifend orci luctus sed.</p>\n<h3 id="donec-scelerisque-cursus-ex-varius-efficitur">Donec scelerisque cursus ex varius efficitur</h3>\n<div class="rpl-callout"><p class="callout-wrapper">Lorem ipsum dolor sit amet</p></div>\n<h4>Morbi cursus placerat mi</h4>\n<h5>Nullam laoreet ante placerat</h5>\n<p>Integer interdum nisl ut neque dictum, et sagittis metus feugiat. Sed in mattis neque. Duis at risus non ipsum semper dapibus. Sed enim sapien, molestie sed commodo vel, lacinia vitae risus. Proin sagittis diam nisi, sed rhoncus diam varius id. Sed malesuada felis tortor, scelerisque pretium elit tempor non. Pellentesque ultrices volutpat tincidunt. Fusce quis viverra urna, quis finibus nulla.</p>\n\n<figure class="rpl-blockquote">\n  <blockquote class="rpl-blockquote__quote">\n  <p class="rpl-type-p-large-fixed">Mauris tincidunt tincidunt felis vel tempus. Vestibulum rhoncus blandit justo quis finibus. Phasellus lacus lectus, sollicitudin sed posuere non, ultricies ut quam.</p>\n  </blockquote>\n  <figcaption class="rpl-blockquote__author rpl-type-label-small"><span class="rpl-blockquote__author-name">Duis ligula lacus</span><span class="rpl-blockquote__author-name">Phasellus est turpis, efficitur nec odio imperdiet</span></figcaption>\n</figure>\n\nMauris tincidunt tincidunt felis vel tempus\n<figure><img src="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg" class="rpl-img" width="900" alt="Demo: Melbourne tram" srcset="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=720, https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg?width=1440 2x"></figure>\n<p>Phasellus in varius leo. Suspendisse potenti. Donec scelerisque cursus ex varius efficitur. Vivamus pretium nisi sed libero accumsan mattis. Duis convallis, velit eget varius tempus, orci erat aliquam sem, eget porta mauris nisl at mauris.</p>\n\n<figure class="rpl-document">\n  <a class="rpl-document__link rpl-u-focusable-within" aria-label="Demo Sample Document File type: Word. Size: 7.53 KB." href="https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/sample.docx" target="_blank">\n    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">\n      <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>\n    </span>\n    <div class="rpl-document__content">\n      <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">Demo Sample Document</span>\n      <div class="rpl-document__info rpl-type-label-small">\n        <span class="rpl-file__meta">Word</span>\n        <span class="rpl-file__meta">7.53 KB</span>\n      </div>\n    </div>\n    <span class="rpl-u-visually-hidden">(opens in a new window)</span>\n  </a>\n</figure>\n\n'
   }
 }
 

packages/ripple-ui-core/src/components/content/RplContent.css

@@ -15,6 +15,7 @@
     margin-top: 0;
   }
 
+  figure:not(:first-child),
   .rpl-img:not(:first-child),
   .rpl-media-embed:not(:first-child) {
     margin-top: var(--rpl-sp-5);

packages/ripple-ui-core/src/styles/components/_img.css

@@ -2,3 +2,9 @@
   object-fit: cover;
   max-width: 100%;
 }
+
+.rpl-img__caption {
+  margin-bottom: var(--rpl-sp-3);
+  margin-top: var(--rpl-sp-3);
+  color: var(--rpl-clr-neutral-600);
+}