Moving image sizes attribute to source tags

packages/components/psammead-image/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.1.1 | [PR#4626](https://github.com/bbc/psammead/pull/4626) Elevate `sizes` attribute to `source` tags |
 | 3.1.0 | [PR#4608](https://github.com/bbc/psammead/pull/4608) Derive mime type from srcset |
 | 3.0.1 | [PR#4607](https://github.com/bbc/psammead/pull/4607) Fix amp-img fallback value |
 | 3.0.0 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Add support for WebP |

packages/components/psammead-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-image",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap

@@ -17,18 +17,19 @@ exports[`Image - imported as '{ Img }' should render image correctly without wid
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
     />
   </picture>
@@ -55,7 +56,6 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
       height="547"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
       width="445"
     />
@@ -80,14 +80,14 @@ exports[`Image - imported as '{ Img }' should render image with only srcset corr
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -112,18 +112,19 @@ exports[`Image - imported as '{ Img }' should render image with srcset and fallb
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -151,7 +152,6 @@ exports[`Image - imported as '{ Img }' should render landscape image correctly 1
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -179,7 +179,6 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
       height="1280"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
       width="1024"
     />
@@ -207,7 +206,6 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
       height="1024"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
       width="1024"
     />
@@ -232,18 +230,19 @@ exports[`Image - imported as default 'Image' should render image correctly witho
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
     />
   </picture>
@@ -270,7 +269,6 @@ exports[`Image - imported as default 'Image' should render image with custom dim
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
       height="547"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
       width="445"
     />
@@ -295,14 +293,14 @@ exports[`Image - imported as default 'Image' should render image with only srcse
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -327,18 +325,19 @@ exports[`Image - imported as default 'Image' should render image with srcset and
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -366,7 +365,6 @@ exports[`Image - imported as default 'Image' should render landscape image corre
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -394,7 +392,6 @@ exports[`Image - imported as default 'Image' should render portrait image correc
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
       height="1280"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
       width="1024"
     />
@@ -422,7 +419,6 @@ exports[`Image - imported as default 'Image' should render square image correctl
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
       height="1024"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
       width="1024"
     />
@@ -447,18 +443,19 @@ exports[`Image - with Fade-in effect' should render image correctly without widt
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
     />
   </picture>
@@ -485,7 +482,6 @@ exports[`Image - with Fade-in effect' should render image with custom dimensions
       alt="By Elisa Decker, from her series \\"Sidewalk\\""
       class="emotion-2 emotion-3"
       height="547"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
       width="445"
     />
@@ -510,14 +506,14 @@ exports[`Image - with Fade-in effect' should render image with only srcset corre
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -542,18 +538,19 @@ exports[`Image - with Fade-in effect' should render image with srcset and fallba
     class="emotion-0 emotion-1"
   >
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg.webp 1024w"
       type="image/webp"
     />
     <source
+      sizes="100vw"
       srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
       type="image/jpeg"
     />
     <img
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -581,7 +578,6 @@ exports[`Image - with Fade-in effect' should render landscape image correctly 1`
       alt="Student sitting an exam"
       class="emotion-2 emotion-3"
       height="576"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
       width="1024"
     />
@@ -609,7 +605,6 @@ exports[`Image - with Fade-in effect' should render portrait image correctly 1`]
       alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
       class="emotion-2 emotion-3"
       height="1280"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
       width="1024"
     />
@@ -637,7 +632,6 @@ exports[`Image - with Fade-in effect' should render square image correctly 1`] =
       alt="Tracks through the snow"
       class="emotion-2 emotion-3"
       height="1024"
-      sizes="100vw"
       src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
       width="1024"
     />

packages/components/psammead-image/src/index.jsx

@@ -36,6 +36,7 @@ export const Img = props => {
   const {
     src,
     srcset,
+    sizes,
     fallbackSrcset,
     primaryMimeType,
     fallbackMimeType,
@@ -45,9 +46,11 @@ export const Img = props => {
 
   return (
     <StyledPicture onLoad={onLoad}>
-      {srcset && <source srcSet={srcset} type={primaryMimeType} />}
+      {srcset && (
+        <source srcSet={srcset} type={primaryMimeType} sizes={sizes} />
+      )}
       {fallbackSrcset && (
-        <source srcSet={fallbackSrcset} type={fallbackMimeType} />
+        <source srcSet={fallbackSrcset} type={fallbackMimeType} sizes={sizes} />
       )}
       <StyledImg src={src} {...otherProps} />
     </StyledPicture>

packages/components/psammead-media-player/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 6.0.4| [PR#4626](https://github.com/bbc/psammead/pull/4626) Bump dependencies|
 | 6.0.3 | [PR#4609](https://github.com/bbc/psammead/pull/4609) Bump from psammead-styles |
 | 6.0.2| [PR#4608](https://github.com/bbc/psammead/pull/4608) Bump dependencies|
 | 6.0.1| [PR#4607](https://github.com/bbc/psammead/pull/4607) Bump dependencies|

packages/components/psammead-media-player/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bbc/psammead-assets": "3.1.10",
-    "@bbc/psammead-image": "3.1.0",
+    "@bbc/psammead-image": "3.1.1",
     "@bbc/psammead-image-placeholder": "3.4.11",
     "@bbc/psammead-play-button": "3.0.33"
   },

yarn.lock

@@ -1876,7 +1876,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@bbc/psammead-image@3.1.0, @bbc/psammead-image@workspace:packages/components/psammead-image":
+"@bbc/psammead-image@3.1.1, @bbc/psammead-image@workspace:packages/components/psammead-image":
   version: 0.0.0-use.local
   resolution: "@bbc/psammead-image@workspace:packages/components/psammead-image"
   dependencies:
@@ -1953,7 +1953,7 @@ __metadata:
   resolution: "@bbc/psammead-media-player@workspace:packages/components/psammead-media-player"
   dependencies:
     "@bbc/psammead-assets": 3.1.10
-    "@bbc/psammead-image": 3.1.0
+    "@bbc/psammead-image": 3.1.1
     "@bbc/psammead-image-placeholder": 3.4.11
     "@bbc/psammead-play-button": 3.0.33
     "@emotion/styled": ^11.3.0