Merge pull request #4608 from bbc/image-mime-type

Add `primaryMimeType` and `fallbackMimeType` props to `psammead-image`
BBC-archive · Dec 16, 2021 · 041479e · 041479e
2 parents eb1864f + 24db1f9
commit 041479e
Show file tree

Hide file tree

Showing 30 changed files with 173 additions and 42 deletions.
diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 5.0.55 | [PR#4608](https://github.com/bbc/psammead/pull/4608) Bump dependencies |
 | 5.0.54 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies |
 | 5.0.53 | [PR#4600](https://github.com/bbc/psammead/pull/4600) Fix TalkBack reading nested spans incorrectly |
 | 5.0.52 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies |

diff --git a/packages/components/psammead-bulletin/package.json b/packages/components/psammead-bulletin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-bulletin",
-  "version": "5.0.54",
+  "version": "5.0.55",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -22,7 +22,7 @@
     "@bbc/gel-foundations": "7.0.0",
     "@bbc/psammead-assets": "3.1.10",
     "@bbc/psammead-live-label": "2.0.32",
-    "@bbc/psammead-story-promo": "8.0.35",
+    "@bbc/psammead-story-promo": "8.0.36",
     "@bbc/psammead-styles": "8.0.1",
     "@bbc/psammead-visually-hidden-text": "2.0.7"
   },

diff --git a/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap
@@ -274,9 +274,11 @@ exports[`Bulletin should render audio correctly 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -625,9 +627,11 @@ exports[`Bulletin should render audio correctly with lang prop passed in 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -986,9 +990,11 @@ exports[`Bulletin should render live audio correctly 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -1355,9 +1361,11 @@ exports[`Bulletin should render live video correctly 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -1709,9 +1717,11 @@ exports[`Bulletin should render radio bulletin without ariaId 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -2029,9 +2039,11 @@ exports[`Bulletin should render radio bulletin without summary correctly 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"
@@ -2377,9 +2389,11 @@ exports[`Bulletin should render video correctly 1`] = `
       >
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+          type="image/webp"
         />
         <source
           srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+          type="image/jpeg"
         />
         <img
           alt="Iron man"

diff --git a/packages/components/psammead-bulletin/src/index.stories.jsx b/packages/components/psammead-bulletin/src/index.stories.jsx
@@ -35,6 +35,8 @@ const BulletinComponent = ({
       fallbackSrcset={imageSizes
         .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
         .join(', ')}
+      primaryMimeType="image/webp"
+      fallbackMimeType="image/jpeg"
     />
   );
 

diff --git a/packages/components/psammead-bulletin/src/index.test.jsx b/packages/components/psammead-bulletin/src/index.test.jsx
@@ -36,6 +36,8 @@ const BulletinComponent = ({
       fallbackSrcset={imageSizes
         .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
         .join(', ')}
+      primaryMimeType="image/webp"
+      fallbackMimeType="image/jpeg"
     />
   );
   return (

diff --git a/packages/components/psammead-grid/CHANGELOG.md b/packages/components/psammead-grid/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.1.13 | [PR#4608](https://github.com/bbc/psammead/pull/4608) Bump dependencies |
 | 3.1.12 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies |
 | 3.1.11 | [PR#4574](https://github.com/bbc/psammead/pull/4574) Bumps psammead-styles |
 | 3.1.10 | [PR#4568](https://github.com/bbc/psammead/pull/4568) Bump dependencies |

diff --git a/packages/components/psammead-grid/package.json b/packages/components/psammead-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Grid component",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-grid/src/__snapshots__/index.test.jsx.snap
@@ -1858,9 +1858,11 @@ exports[`Grid component should render Grid with enableGelGutters & margins on on
         >
           <source
             srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg.webp 1024w"
+            type="image/webp"
           />
           <source
             srcset="https://ichef.bbci.co.uk/news/300/cpsprodpb/11897/production/_106613817_999_al_.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/11897/production/_106613817_999_al_.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/11897/production/_106613817_999_al_.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/11897/production/_106613817_999_al_.jpg 1024w"
+            type="image/jpeg"
           />
           <img
             alt="Robert Downey Junior in Iron Man"

diff --git a/packages/components/psammead-grid/src/testHelpers.jsx b/packages/components/psammead-grid/src/testHelpers.jsx
@@ -46,6 +46,8 @@ export const ExampleImage = () => {
         fallbackSrcset={imageSizes
           .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`)
           .join(', ')}
+        primaryMimeType="image/webp"
+        fallbackMimeType="image/jpeg"
       />
     </ImageSpacing>
   );

diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 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 |
 | 2.0.8 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
@@ -66,6 +66,8 @@ const WrappingContainer = ({ alt, src, height, width, sizes }) => (
 | `src`    | string        | Yes | -     | "https://bbc.com/300/cat.jpg" |
 | `srcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg.webp 300w, https://bbc.com/450/cat.jpg.webp 450w, https://bbc.com/600/cat.jpg.webp 600w" |
 | `fallbackSrcset` | string        | No  | null  | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
+| `primaryMimeType` | string        | No  | null  | "image/webp" |
+| `fallbackMimeType` | string        | No  | null  | "image/jpeg" |
 | `width`  | number/string | No  | null  | 600 |
 | `fade`   |  boolean      | No  | false | true |
 

diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-image",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,