Merge pull request #11719 from bbc/FIX-change-source-set-prop-Frosted…

…GlassPromo FIX: Align FrostedGlassPromo values with Image component props
bbc · Jun 24, 2024 · 345f88b · 345f88b
2 parents ae37255 + 6f90afc
commit 345f88b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/src/app/components/FrostedGlassPromo/__snapshots__/index.test.tsx.snap b/src/app/components/FrostedGlassPromo/__snapshots__/index.test.tsx.snap
@@ -326,6 +326,7 @@ exports[`Frosted Glass Promo when given props for a CPS promo 1`] = `
         loading="lazy"
         sizes="(min-width: 1008px) 400px"
         src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/DDFC/test/_63482865_orange2.jpg.webp"
+        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/DDFC/test/_63482865_orange2.jpg.webp 400w"
         width="976"
       />
     </div>
@@ -527,6 +528,7 @@ exports[`Frosted Glass Promo when given props for a Link promo 1`] = `
         loading="lazy"
         sizes="(min-width: 1008px) 400px"
         src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp"
+        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp 400w"
         width="624"
       />
     </div>
@@ -728,6 +730,7 @@ exports[`Frosted Glass Promo when given props for a Optimo promo 1`] = `
         loading="lazy"
         sizes="(min-width: 1008px) 400px"
         src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/2105/test/a7436f40-a2dd-11ed-9015-6935ab4fa6ca.jpg.webp"
+        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/2105/test/a7436f40-a2dd-11ed-9015-6935ab4fa6ca.jpg.webp 400w"
         width="800"
       />
     </div>
@@ -928,6 +931,7 @@ exports[`Frosted Glass Promo when given props for an a Optimo promo with no imag
         loading="lazy"
         sizes="(min-width: 1008px) 400px"
         src="https://ichef.bbci.co.uk/ace/ws/400/cpsprodpb/36D1/production/_127933041__63970643_bbc-news-world-service-logo-nc.png.webp"
+        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsprodpb/36D1/production/_127933041__63970643_bbc-news-world-service-logo-nc.png.webp 400w"
         width="400"
       />
     </div>

diff --git a/src/app/components/FrostedGlassPromo/index.tsx b/src/app/components/FrostedGlassPromo/index.tsx
@@ -102,7 +102,7 @@ const FrostedGlassPromo = ({
         {...pick(
           [
             'src',
-            'srcset',
+            'srcSet',
             'fallbackSrcset',
             'primaryMimeType',
             'fallbackMimeType',

diff --git a/src/app/components/FrostedGlassPromo/withData.tsx b/src/app/components/FrostedGlassPromo/withData.tsx
@@ -60,7 +60,7 @@ const buildImageProperties = (imageProps?: ImageProps) => {
 
   return {
     ratio: 52,
-    srcset: primarySrcset,
+    srcSet: primarySrcset,
     fallbackSrcset,
     sizes: '(min-width: 1008px) 400px',
     src,

diff --git a/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap b/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap
@@ -6264,6 +6264,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/A904/test/_63586234_lassalagos.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/A904/test/_63586234_lassalagos.jpg.webp 400w"
                             width="624"
                           />
                         </div>
@@ -6318,6 +6319,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/B935/test/_63731474_p01p5ql9.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/B935/test/_63731474_p01p5ql9.jpg.webp 400w"
                             width="1024"
                           />
                         </div>
@@ -6372,6 +6374,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/7DD4/test/_63721223_image1.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/7DD4/test/_63721223_image1.jpg.webp 400w"
                             width="976"
                           />
                         </div>
@@ -6426,6 +6429,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/13EDE/test/_63603618_040299897-1.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/13EDE/test/_63603618_040299897-1.jpg.webp 400w"
                             width="976"
                           />
                         </div>
@@ -6480,6 +6484,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/9298/test/_63582573_scaramucci.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/9298/test/_63582573_scaramucci.jpg.webp 400w"
                             width="976"
                           />
                         </div>
@@ -6534,6 +6539,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/A71A/test/_63587724_jane7.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/A71A/test/_63587724_jane7.jpg.webp 400w"
                             width="624"
                           />
                         </div>
@@ -6588,6 +6594,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp 400w"
                             width="624"
                           />
                         </div>
@@ -6642,6 +6649,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/5C06/test/_63585532_ozubuluchurch.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/5C06/test/_63585532_ozubuluchurch.jpg.webp 400w"
                             width="624"
                           />
                         </div>
@@ -6696,6 +6704,7 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = `
                             loading="lazy"
                             sizes="(min-width: 1008px) 400px"
                             src="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/1B9C/test/_63586070_kenya.jpg.webp"
+                            srcset="https://ichef.test.bbci.co.uk/ace/ws/400/cpsdevpb/1B9C/test/_63586070_kenya.jpg.webp 400w"
                             width="624"
                           />
                         </div>