From 495748bb6721ebb8045478035c11ec61aa2f0175 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 12:52:18 +0000 Subject: [PATCH 01/11] Derive image mime type from srcset --- .yarn/versions/853c8102.yml | 5 +++ .../components/psammead-bulletin/CHANGELOG.md | 1 + .../components/psammead-bulletin/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 14 ++++++++ .../components/psammead-grid/CHANGELOG.md | 1 + .../components/psammead-grid/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 2 ++ .../components/psammead-image/CHANGELOG.md | 1 + .../components/psammead-image/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 15 ++++++++ .../components/psammead-image/src/index.jsx | 34 +++++++++++++++++-- .../src/testHelpers/fixtureData.js | 12 +++++++ .../src/testHelpers/stories.jsx | 19 ++++++++++- .../psammead-media-player/CHANGELOG.md | 1 + .../psammead-media-player/package.json | 4 +-- yarn.lock | 4 +-- 16 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 .yarn/versions/853c8102.yml diff --git a/.yarn/versions/853c8102.yml b/.yarn/versions/853c8102.yml new file mode 100644 index 0000000000..ddfbc08e4e --- /dev/null +++ b/.yarn/versions/853c8102.yml @@ -0,0 +1,5 @@ +undecided: + - "@bbc/psammead" + - "@bbc/psammead-bulletin" + - "@bbc/psammead-grid" + - "@bbc/psammead-image" diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md index 482d9c25e7..2100ee5443 100644 --- a/packages/components/psammead-bulletin/CHANGELOG.md +++ b/packages/components/psammead-bulletin/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 5.0.55 | [PR#4606](https://github.com/bbc/psammead/pull/4606) 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 index d508df88ac..01dbe67f02 100644 --- 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, diff --git a/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-bulletin/src/__snapshots__/index.test.jsx.snap index ea43b2b5fe..7868fe90d6 100644 --- 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`] = ` > Iron man Iron man Iron man Iron man Iron man Iron man Iron man | Version | Description | |---------|-------------| +| 3.1.13 | [PR#4606](https://github.com/bbc/psammead/pull/4606) 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 index f31b4f8687..dd70aab676 100644 --- 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 index dc5bb87730..7b6411d37c 100644 --- 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 > Robert Downey Junior in Iron Man | Version | Description | |---------|-------------| +| 3.1.0 | [PR#4607](https://github.com/bbc/psammead/pull/4607) 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/package.json b/packages/components/psammead-image/package.json index fbeb9f8f71..d9d901fe3b 100644 --- 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, diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index 9ed5f33094..efb8fc9312 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -18,9 +18,11 @@ exports[`Image - imported as '{ Img }' should render image correctly without wid > Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam Student sitting an exam { + if (!srcset) return null; + + const firstSrcsetUrl = srcset.split(',')[0].split(' ')[0]; + const urlFileExtension = firstSrcsetUrl.split('.').pop(); + + switch (urlFileExtension) { + case 'webp': + return 'image/webp'; + case 'jpg': + case 'jpeg': + return 'image/jpeg'; + case 'png': + return 'image/png'; + default: + return null; + } +}; + export const Img = props => { const { src, srcset, fallbackSrcset, onLoad, ...otherProps } = props; + const primaryMimeType = getMimeType(srcset); + const secondaryMimeType = getMimeType(fallbackSrcset); + return ( - - {fallbackSrcset && } + + {fallbackSrcset && ( + + )} ); diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js index 57d0b4b18f..a095017958 100644 --- a/packages/components/psammead-image/src/testHelpers/fixtureData.js +++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js @@ -64,3 +64,15 @@ export const custom = { width: 445, height: 547, }; + +export const noFallbackSrcset = { + alt: 'Student sitting an exam', + attribution: '', + sizes: '100vw', + src: landscapeImageUrl.replace('[WIDTH]', sizes[0]), + srcset: sizes + .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`) + .join(', '), + width: 445, + height: 547, +}; diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 4c83463547..9578fe0dfa 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -2,7 +2,13 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { boolean } from '@storybook/addon-knobs'; import notes from '../../README.md'; -import { custom, landscape, portrait, square } from './fixtureData'; +import { + custom, + landscape, + portrait, + square, + noFallbackSrcset, +} from './fixtureData'; export function getProps(image, includeHeight, type) { const props = { @@ -81,6 +87,17 @@ export const stories = ({ ), { notes }, ) + .add( + 'image with no fallbackSrcset', + () => ( + + ), + { notes }, + ) .add( isCanonical && 'image without width', () => , diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index f185726a16..58bdde7483 100644 --- a/packages/components/psammead-media-player/CHANGELOG.md +++ b/packages/components/psammead-media-player/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| 6.0.2| [PR#4607](https://github.com/bbc/psammead/pull/4607) Bump dependencies| | 6.0.1| [PR#4607](https://github.com/bbc/psammead/pull/4607) Bump dependencies| | 6.0.0| [PR#4606](https://github.com/bbc/psammead/pull/4606) Adds support for WebP | | 5.1.13 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies | diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json index 2504b9ee08..0de165b2ab 100644 --- a/packages/components/psammead-media-player/package.json +++ b/packages/components/psammead-media-player/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-media-player", - "version": "6.0.1", + "version": "6.0.2", "description": "Provides a media player with optional placeholder", "main": "dist/index.js", "module": "esm/index.js", @@ -30,7 +30,7 @@ }, "dependencies": { "@bbc/psammead-assets": "3.1.10", - "@bbc/psammead-image": "3.0.1", + "@bbc/psammead-image": "3.1.0", "@bbc/psammead-image-placeholder": "3.4.10", "@bbc/psammead-play-button": "3.0.32" }, diff --git a/yarn.lock b/yarn.lock index 8bfaa2e531..711ccb0ca7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1876,7 +1876,7 @@ __metadata: languageName: unknown linkType: soft -"@bbc/psammead-image@3.0.1, @bbc/psammead-image@workspace:packages/components/psammead-image": +"@bbc/psammead-image@3.1.0, @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.0.1 + "@bbc/psammead-image": 3.1.0 "@bbc/psammead-image-placeholder": 3.4.10 "@bbc/psammead-play-button": 3.0.32 "@emotion/styled": ^11.3.0 From a8ee7190bab039920fee672be7b94fd85fc6c0d1 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 12:53:03 +0000 Subject: [PATCH 02/11] Changelog updates --- packages/components/psammead-bulletin/CHANGELOG.md | 2 +- packages/components/psammead-grid/CHANGELOG.md | 2 +- packages/components/psammead-image/CHANGELOG.md | 2 +- packages/components/psammead-media-player/CHANGELOG.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md index 2100ee5443..077fa44c85 100644 --- a/packages/components/psammead-bulletin/CHANGELOG.md +++ b/packages/components/psammead-bulletin/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 5.0.55 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies | +| 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-grid/CHANGELOG.md b/packages/components/psammead-grid/CHANGELOG.md index aec206ba13..eae2ff571f 100644 --- a/packages/components/psammead-grid/CHANGELOG.md +++ b/packages/components/psammead-grid/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 3.1.13 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies | +| 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-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index 802d3cb0dd..630ee0e1be 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | |---------|-------------| -| 3.1.0 | [PR#4607](https://github.com/bbc/psammead/pull/4607) Derive mime type from srcset | +| 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-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index 58bdde7483..5d06eb5c14 100644 --- a/packages/components/psammead-media-player/CHANGELOG.md +++ b/packages/components/psammead-media-player/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| 6.0.2| [PR#4607](https://github.com/bbc/psammead/pull/4607) Bump dependencies| +| 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| | 6.0.0| [PR#4606](https://github.com/bbc/psammead/pull/4606) Adds support for WebP | | 5.1.13 | [PR#4601](https://github.com/bbc/psammead/pull/4601) Bumps dependencies | From d2381ec0d4222e45da7e474a4c6f6b15ea2b4e13 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 12:55:35 +0000 Subject: [PATCH 03/11] Delete 853c8102.yml --- .yarn/versions/853c8102.yml | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .yarn/versions/853c8102.yml diff --git a/.yarn/versions/853c8102.yml b/.yarn/versions/853c8102.yml deleted file mode 100644 index ddfbc08e4e..0000000000 --- a/.yarn/versions/853c8102.yml +++ /dev/null @@ -1,5 +0,0 @@ -undecided: - - "@bbc/psammead" - - "@bbc/psammead-bulletin" - - "@bbc/psammead-grid" - - "@bbc/psammead-image" From f9addb16c317d488882f3219ce1ca7c1415762b3 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 12:56:41 +0000 Subject: [PATCH 04/11] Update index.jsx --- packages/components/psammead-image/src/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index b9c3800724..4649be339a 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -46,6 +46,8 @@ const getMimeType = srcset => { return 'image/jpeg'; case 'png': return 'image/png'; + case 'gif': + return 'image/gif'; default: return null; } From 279c2d31d7e95fecfde6d8d5a3aef0cfef20a36c Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 13:02:44 +0000 Subject: [PATCH 05/11] Update index.test.jsx --- .../components/psammead-image/src/index.test.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 5c99c193de..34d5edeee3 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { render } from '@testing-library/react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; import snapshotTests from './testHelpers/snapshotTests'; import { landscape } from './testHelpers/fixtureData'; @@ -30,3 +31,15 @@ describe("Image - with Fade-in effect'", () => { ); snapshotTests(Image); }); + +describe("Image - should have mime-types set'", () => { + const props = { ...landscape, width: null, fade: true }; + + const { container } = render(); + + const sourceTags = container.querySelectorAll('source'); + + expect(sourceTags).toHaveLength(2); + expect(sourceTags[0].type).toEqual('image/webp'); + expect(sourceTags[1].type).toEqual('image/jpeg'); +}); From e95d2330a20ca2c1f4d5a012214bb6e038365d53 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 13:03:08 +0000 Subject: [PATCH 06/11] Update index.test.jsx --- packages/components/psammead-image/src/index.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 34d5edeee3..0fe6d2ba5f 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -33,7 +33,7 @@ describe("Image - with Fade-in effect'", () => { }); describe("Image - should have mime-types set'", () => { - const props = { ...landscape, width: null, fade: true }; + const props = { ...landscape, width: null }; const { container } = render(); From ecb01b7646b5f9974616cbefe71e592df05409c8 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 13:19:45 +0000 Subject: [PATCH 07/11] Update fixtureData.js --- .../components/psammead-image/src/testHelpers/fixtureData.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js index a095017958..7aa9041874 100644 --- a/packages/components/psammead-image/src/testHelpers/fixtureData.js +++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js @@ -73,6 +73,6 @@ export const noFallbackSrcset = { srcset: sizes .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), - width: 445, - height: 547, + width: 1024, + height: 576, }; From 48268f03b035fe75a7bb2e7067df4b3ca7d4239e Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 16:39:31 +0000 Subject: [PATCH 08/11] Update index.jsx --- packages/components/psammead-image/src/index.jsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 4649be339a..9d406bd7ec 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -61,15 +61,9 @@ export const Img = props => { return ( - + {fallbackSrcset && ( - + )} From 1b1bbcde68671592fadb62bf732fe2483e77d6af Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 18:05:19 +0000 Subject: [PATCH 09/11] Remove mimeType logic in favour of props --- .../psammead-bulletin/src/index.stories.jsx | 2 + .../psammead-bulletin/src/index.test.jsx | 2 + .../psammead-grid/src/testHelpers.jsx | 2 + packages/components/psammead-image/README.md | 2 + .../psammead-image/src/index.amp.jsx | 6 ++- .../components/psammead-image/src/index.jsx | 40 +++++++------------ .../psammead-image/src/index.test.jsx | 38 ++++++++++++++++-- .../src/testHelpers/fixtureData.js | 9 +++++ .../src/testHelpers/snapshotTests.jsx | 3 ++ .../src/testHelpers/stories.jsx | 2 + .../src/index.stories.jsx | 2 + .../src/index.stories.jsx | 2 + 12 files changed, 79 insertions(+), 31 deletions(-) diff --git a/packages/components/psammead-bulletin/src/index.stories.jsx b/packages/components/psammead-bulletin/src/index.stories.jsx index ac7abf0e25..b00236f4b0 100644 --- 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 index f5976ffead..04db9ffaea 100644 --- 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/src/testHelpers.jsx b/packages/components/psammead-grid/src/testHelpers.jsx index d67aba975a..9d2f729aa5 100644 --- 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" /> ); diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md index 80b73775da..a3e54b4a65 100644 --- 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/src/index.amp.jsx b/packages/components/psammead-image/src/index.amp.jsx index f25ee90baf..c592c997eb 100644 --- a/packages/components/psammead-image/src/index.amp.jsx +++ b/packages/components/psammead-image/src/index.amp.jsx @@ -3,7 +3,11 @@ import omit from 'ramda/src/omit'; import { number, string } from 'prop-types'; // Prevents component outputting invalid HTML when styled with emotion -const omitInvalidProps = omit(['classname']); +const omitInvalidProps = omit([ + 'classname', + 'primaryMimeType', + 'fallbackMimeType', +]); const AmpImg = props => { const { srcset, fallbackSrcset, ...otherProps } = props; diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 9d406bd7ec..99d9f38332 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -32,38 +32,22 @@ const StyledImg = styled.img` width: 100%; `; -const getMimeType = srcset => { - if (!srcset) return null; - - const firstSrcsetUrl = srcset.split(',')[0].split(' ')[0]; - const urlFileExtension = firstSrcsetUrl.split('.').pop(); - - switch (urlFileExtension) { - case 'webp': - return 'image/webp'; - case 'jpg': - case 'jpeg': - return 'image/jpeg'; - case 'png': - return 'image/png'; - case 'gif': - return 'image/gif'; - default: - return null; - } -}; - export const Img = props => { - const { src, srcset, fallbackSrcset, onLoad, ...otherProps } = props; - - const primaryMimeType = getMimeType(srcset); - const secondaryMimeType = getMimeType(fallbackSrcset); + const { + src, + srcset, + fallbackSrcset, + primaryMimeType, + fallbackMimeType, + onLoad, + ...otherProps + } = props; return ( {fallbackSrcset && ( - + )} @@ -78,6 +62,8 @@ Img.propTypes = { src: string.isRequired, srcset: string, fallbackSrcset: string, + primaryMimeType: string, + fallbackMimeType: string, width: oneOfType([string, number]), onLoad: func, }; @@ -88,6 +74,8 @@ Img.defaultProps = { sizes: null, srcset: null, fallbackSrcset: null, + primaryMimeType: null, + fallbackMimeType: null, width: null, onLoad: () => {}, }; diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 0fe6d2ba5f..86f61da5c3 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -6,7 +6,10 @@ import { landscape } from './testHelpers/fixtureData'; import Image, { Img } from '.'; describe("Image - imported as default 'Image'", () => { - const props = { ...landscape, width: null }; + const props = { + ...landscape, + width: null, + }; shouldMatchSnapshot( 'should render image correctly without width', , @@ -15,7 +18,10 @@ describe("Image - imported as default 'Image'", () => { }); describe("Image - imported as '{ Img }'", () => { - const props = { ...landscape, width: null }; + const props = { + ...landscape, + width: null, + }; shouldMatchSnapshot( 'should render image correctly without width', , @@ -24,7 +30,11 @@ describe("Image - imported as '{ Img }'", () => { }); describe("Image - with Fade-in effect'", () => { - const props = { ...landscape, width: null, fade: true }; + const props = { + ...landscape, + width: null, + fade: true, + }; shouldMatchSnapshot( 'should render image correctly without width', , @@ -33,7 +43,10 @@ describe("Image - with Fade-in effect'", () => { }); describe("Image - should have mime-types set'", () => { - const props = { ...landscape, width: null }; + const props = { + ...landscape, + width: null, + }; const { container } = render(); @@ -43,3 +56,20 @@ describe("Image - should have mime-types set'", () => { expect(sourceTags[0].type).toEqual('image/webp'); expect(sourceTags[1].type).toEqual('image/jpeg'); }); + +describe("Image - should have no mime-types set'", () => { + const props = { + ...landscape, + width: null, + primaryMimeType: null, + fallbackMimeType: null, + }; + + const { container } = render(); + + const sourceTags = container.querySelectorAll('source'); + + expect(sourceTags).toHaveLength(2); + expect(sourceTags[0].type).toEqual(''); + expect(sourceTags[1].type).toEqual(''); +}); diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js index 7aa9041874..ebbd5c560f 100644 --- a/packages/components/psammead-image/src/testHelpers/fixtureData.js +++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js @@ -15,6 +15,8 @@ export const landscape = { fallbackSrcset: sizes .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/webp', + fallbackMimeType: 'image/jpeg', width: 1024, height: 576, }; @@ -31,6 +33,8 @@ export const portrait = { fallbackSrcset: sizes .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/webp', + fallbackMimeType: 'image/jpeg', width: 1024, height: 1280, }; @@ -46,6 +50,8 @@ export const square = { fallbackSrcset: sizes .map(size => `${squareImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/webp', + fallbackMimeType: 'image/jpeg', width: 1024, height: 1024, }; @@ -61,6 +67,8 @@ export const custom = { fallbackSrcset: sizes .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/webp', + fallbackMimeType: 'image/jpeg', width: 445, height: 547, }; @@ -73,6 +81,7 @@ export const noFallbackSrcset = { srcset: sizes .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/jpeg', width: 1024, height: 576, }; diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx index d7fd3a3ac6..c05e3d3d6b 100644 --- a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx +++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx @@ -60,6 +60,8 @@ const snapshotTests = (Component, additionalProps) => { src={landscape.src} srcset={landscape.srcset} fallbackSrcset={landscape.fallbackSrcset} + primaryMimeType={landscape.primaryMimeType} + fallbackMimeType={landscape.fallbackMimeType} height={landscape.height} width={landscape.width} {...additionalProps} @@ -73,6 +75,7 @@ const snapshotTests = (Component, additionalProps) => { sizes={landscape.sizes} src={landscape.src} srcset={landscape.srcset} + primaryMimeType={landscape.primaryMimeType} height={landscape.height} width={landscape.width} {...additionalProps} diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 9578fe0dfa..4a18bbeaf3 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/packages/components/psammead-image/src/testHelpers/stories.jsx @@ -17,6 +17,8 @@ export function getProps(image, includeHeight, type) { src: image.src, srcset: image.srcset, fallbackSrcset: image.fallbackSrcset, + primaryMimeType: image.primaryMimeType, + fallbackMimeType: image.fallbackMimeType, width: image.width, fade: type === 'Img' ? boolean('Fade', false) : null, }; diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx index f0f87ca88d..71a804c78f 100644 --- a/packages/components/psammead-story-promo-list/src/index.stories.jsx +++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx @@ -18,6 +18,8 @@ const ImageComponent = ({ alt, src }) => ( width="640" srcset={`${src}.webp 640w`} fallbackSrcset={`${src} 640w`} + primaryMimeType="image/webp" + fallbackMimeType="image/jpeg" /> ); diff --git a/packages/components/psammead-story-promo/src/index.stories.jsx b/packages/components/psammead-story-promo/src/index.stories.jsx index 93b75f5ba4..87d7b7f196 100644 --- a/packages/components/psammead-story-promo/src/index.stories.jsx +++ b/packages/components/psammead-story-promo/src/index.stories.jsx @@ -30,6 +30,8 @@ const buildImg = () => { fallbackSrcset={imageSizes .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`) .join(', ')} + primaryMimeType="image/webp" + fallbackMimeType="image/jpeg" /> ); }; From 3340925adc9a43e0818992ee4fab36ba3570ec40 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Wed, 15 Dec 2021 18:13:30 +0000 Subject: [PATCH 10/11] Package updates --- packages/components/psammead-bulletin/package.json | 2 +- packages/components/psammead-story-promo-list/CHANGELOG.md | 1 + packages/components/psammead-story-promo-list/package.json | 2 +- packages/components/psammead-story-promo/CHANGELOG.md | 1 + packages/components/psammead-story-promo/package.json | 2 +- yarn.lock | 4 ++-- 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-bulletin/package.json b/packages/components/psammead-bulletin/package.json index 01dbe67f02..39e10f8722 100644 --- a/packages/components/psammead-bulletin/package.json +++ b/packages/components/psammead-bulletin/package.json @@ -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-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md index bdc5b201ee..a83ede9041 100644 --- a/packages/components/psammead-story-promo-list/CHANGELOG.md +++ b/packages/components/psammead-story-promo-list/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 6.0.30 | [PR#4608](https://github.com/bbc/psammead/pull/4608) Bumps psammead-styles | | 6.0.29 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bumps psammead-styles | | 6.0.28 | [PR#4574](https://github.com/bbc/psammead/pull/4574) Bumps psammead-styles | | 6.0.27 | [PR#4568](https://github.com/bbc/psammead/pull/4568) Bump dependencies | diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json index 9a309dc4c1..97194c171c 100644 --- a/packages/components/psammead-story-promo-list/package.json +++ b/packages/components/psammead-story-promo-list/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-story-promo-list", - "version": "6.0.29", + "version": "6.0.30", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md index 0023fd6531..1db8fe7661 100644 --- a/packages/components/psammead-story-promo/CHANGELOG.md +++ b/packages/components/psammead-story-promo/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 8.0.36 | [PR#4608](https://github.com/bbc/psammead/pull/4608) Bump dependencies | | 8.0.35 | [PR#4606](https://github.com/bbc/psammead/pull/4606) Bump dependencies | | 8.0.34 | [PR#4603](https://github.com/bbc/psammead/pull/4603) Conditionally add aria-labelledby attribute | | 8.0.33 | [PR#4602](https://github.com/bbc/psammead/pull/4602) Use 'children' value instead of 'URL' for aria-labelledby | diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json index 06292094c6..8bbd84fa07 100644 --- a/packages/components/psammead-story-promo/package.json +++ b/packages/components/psammead-story-promo/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-story-promo", - "version": "8.0.35", + "version": "8.0.36", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, diff --git a/yarn.lock b/yarn.lock index 711ccb0ca7..39996219b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1693,7 +1693,7 @@ __metadata: "@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 "@emotion/styled": ^11.3.0 @@ -2092,7 +2092,7 @@ __metadata: languageName: unknown linkType: soft -"@bbc/psammead-story-promo@8.0.35, @bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo": +"@bbc/psammead-story-promo@8.0.36, @bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo": version: 0.0.0-use.local resolution: "@bbc/psammead-story-promo@workspace:packages/components/psammead-story-promo" dependencies: From 24db1f998e626d1604ed6d5c3a3de298d1ee0602 Mon Sep 17 00:00:00 2001 From: Aaron Moore Date: Thu, 16 Dec 2021 09:22:32 +0000 Subject: [PATCH 11/11] Conditional primary srcset --- .../src/__snapshots__/index.test.jsx.snap | 12 ------------ packages/components/psammead-image/src/index.jsx | 6 +++--- .../Placeholder/__snapshots__/index.test.jsx.snap | 6 ------ .../src/__snapshots__/index.test.jsx.snap | 4 ---- 4 files changed, 3 insertions(+), 25 deletions(-) diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index efb8fc9312..02d4b4e86f 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap @@ -51,7 +51,6 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension - By Elisa Decker, from her series \\ - Student sitting an exam - Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17. - Tracks through the snow - By Elisa Decker, from her series \\ - Student sitting an exam - Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17. - Tracks through the snow - By Elisa Decker, from her series \\ - Student sitting an exam - Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17. - Tracks through the snow { return ( - + {srcset && } {fallbackSrcset && ( )} @@ -74,8 +74,8 @@ Img.defaultProps = { sizes: null, srcset: null, fallbackSrcset: null, - primaryMimeType: null, - fallbackMimeType: null, + primaryMimeType: 'image/jpeg', + fallbackMimeType: 'image/jpeg', width: null, onLoad: () => {}, }; diff --git a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap index 1dbd743101..a3204133f6 100644 --- a/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap @@ -160,7 +160,6 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` - - - - - - - - - -