Update image component (#2103)

* Change image, caption and alt text * Add image example to assets folder and link from image component page * add responsive attributes to image example * Revert gitleaks config * formatting * update changelog and whats new * Fix merge errors --------- Co-authored-by: Sara Wilcox <[email protected]> Co-authored-by: roshaanbajwa <[email protected]> Co-authored-by: Roshaan Bajwa <[email protected]>
nhsuk · Jan 15, 2025 · 3df4785 · 3df4785
1 parent 7d2b538
commit 3df4785
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 :wrench: **Maintenance**
+- Update example code in image component
 - Remove same-page profession links from accessibility section
 
 ## 7.3.0 - 17 December 2024

diff --git a/app/assets/image-example-stretch-marks-1000w.jpg b/app/assets/image-example-stretch-marks-1000w.jpg
diff --git a/app/assets/image-example-stretch-marks-600w.jpg b/app/assets/image-example-stretch-marks-600w.jpg
diff --git a/app/views/design-system/components/images/default/index.njk b/app/views/design-system/components/images/default/index.njk
@@ -1,7 +1,9 @@
 {% from 'images/macro.njk' import image %}
 
 {{ image({
-  src: "/assets/image-example-stretch-marks.jpg",
-  alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
+  src: "/assets/image-example-stretch-marks-600w.jpg",
+  sizes: "(max-width: 768px) 100vw, 66vw",
+  srcset: "/assets/image-example-stretch-marks-600w.jpg 600w, /assets/image-example-stretch-marks-1000w.jpg 1000w",
+  alt: "Close-up of a person’s tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
   caption: "Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time."
 }) }}
diff --git a/app/views/whats-new/index.njk b/app/views/whats-new/index.njk
@@ -22,12 +22,18 @@
     <tr>
       <td class="nhsuk-table__cell">Accessibility</td>
       <td class="nhsuk-table__cell">
-      <p>Removed same-page profession links as they have caused confusion in testing</p>
+        <p>Removed same-page profession links as they have caused confusion in testing</p>
+      </td>
+    </tr>
+    <tr>
+      <td class="nhsuk-table__cell">Design system</td>
+      <td class="nhsuk-table__cell">
+        <p>Updated example code in <a href="/design-system/components/images">image component</a>
+        </p>
       </td>
     </tr>
     </tbody>
   </table>
-
   <h3>December 2024</h3>
   <table class="nhsuk-table">
     <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in December 2024</caption>

diff --git a/app/views/whats-new/updates.njk b/app/views/whats-new/updates.njk
@@ -26,11 +26,17 @@
     <p>Removed same-page profession links as they have caused confusion in testing</p>
     </td>
   </tr>
+  <tr>
+    <td class="nhsuk-table__cell">Design system</td>
+    <td class="nhsuk-table__cell">
+    <p>Updated example code in <a href="/design-system/components/images">image component</a></p>
+    </td>
+  </tr>
   </tbody>
 </table>
 
 <h2>December 2024</h2>
-  <table class="nhsuk-table">
+<table class="nhsuk-table">
   <caption class="nhsuk-table__caption nhsuk-u-visually-hidden">Updates to the service manual in December 2024</caption>
   <thead class="nhsuk-table__head">
     <tr class="nhsuk-table__row">