From 5bf23a8ff639a79773bd4901a65d06474728c935 Mon Sep 17 00:00:00 2001
From: Jason Smith <jason.smith@dpc.vic.gov.au>
Date: Wed, 7 Feb 2024 18:39:28 +1100
Subject: [PATCH] feat: :sparkles: add image captions in content

---
 .../src/utils/markup-transpiler/cheerio.test.ts       |  2 +-
 .../src/utils/markup-transpiler/default-plugins.ts    | 11 +++++++++--
 .../components/basic-text/basic-text-mapping.test.ts  |  2 +-
 .../src/components/content/RplContent.css             |  1 +
 .../ripple-ui-core/src/styles/components/_img.css     |  6 ++++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts
index 6da2a7e424..ea310cb078 100644
--- a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts
+++ b/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>`
diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts
index 4ad8ba33ec..59eba46fd4 100644
--- a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts
+++ b/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>`
     )
   })
 }
diff --git a/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts b/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts
index 05360f3f20..2d2255c703 100644
--- a/packages/ripple-tide-landing-page/mapping/components/basic-text/basic-text-mapping.test.ts
+++ b/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'
   }
 }
 
diff --git a/packages/ripple-ui-core/src/components/content/RplContent.css b/packages/ripple-ui-core/src/components/content/RplContent.css
index 5cf96f6f9b..9e57773db8 100644
--- a/packages/ripple-ui-core/src/components/content/RplContent.css
+++ b/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);
diff --git a/packages/ripple-ui-core/src/styles/components/_img.css b/packages/ripple-ui-core/src/styles/components/_img.css
index 5064939964..f15195cf5b 100644
--- a/packages/ripple-ui-core/src/styles/components/_img.css
+++ b/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);
+}