diff --git a/packages/components/psammead-bulletin/CHANGELOG.md b/packages/components/psammead-bulletin/CHANGELOG.md index 482d9c25e7..077fa44c85 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#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 index d508df88ac..39e10f8722 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, @@ -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 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 `${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/CHANGELOG.md b/packages/components/psammead-grid/CHANGELOG.md index 4aeb344828..eae2ff571f 100644 --- a/packages/components/psammead-grid/CHANGELOG.md +++ b/packages/components/psammead-grid/CHANGELOG.md @@ -3,6 +3,7 @@ | 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 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 { fallbackSrcset={imageSizes .map(size => `${imageSrc.replace('[WIDTH]', size)} ${size}w`) .join(', ')} + primaryMimeType="image/webp" + fallbackMimeType="image/jpeg" /> ); diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index ac15e9009f..630ee0e1be 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -3,6 +3,7 @@ | 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 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/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..02d4b4e86f 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 - By Elisa Decker, from her series \\ Student sitting an exam Student sitting an exam - 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 Student sitting an exam - By Elisa Decker, from her series \\ Student sitting an exam Student sitting an exam - 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 Student sitting an exam - By Elisa Decker, from her series \\ Student sitting an exam Student sitting an exam - 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 { const { srcset, fallbackSrcset, ...otherProps } = props; diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 50ce12933c..a90d0cf3f1 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/packages/components/psammead-image/src/index.jsx @@ -33,12 +33,22 @@ const StyledImg = styled.img` `; export const Img = props => { - const { src, srcset, fallbackSrcset, onLoad, ...otherProps } = props; + const { + src, + srcset, + fallbackSrcset, + primaryMimeType, + fallbackMimeType, + onLoad, + ...otherProps + } = props; return ( - - {fallbackSrcset && } + {srcset && } + {fallbackSrcset && ( + + )} ); @@ -52,6 +62,8 @@ Img.propTypes = { src: string.isRequired, srcset: string, fallbackSrcset: string, + primaryMimeType: string, + fallbackMimeType: string, width: oneOfType([string, number]), onLoad: func, }; @@ -62,6 +74,8 @@ Img.defaultProps = { sizes: null, srcset: null, fallbackSrcset: null, + primaryMimeType: 'image/jpeg', + fallbackMimeType: 'image/jpeg', width: null, onLoad: () => {}, }; diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index 5c99c193de..86f61da5c3 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/packages/components/psammead-image/src/index.test.jsx @@ -1,11 +1,15 @@ 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'; 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', , @@ -14,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', , @@ -23,10 +30,46 @@ 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', , ); snapshotTests(Image); }); + +describe("Image - should have mime-types set'", () => { + const props = { + ...landscape, + width: null, + }; + + 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'); +}); + +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 57d0b4b18f..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,21 @@ export const custom = { fallbackSrcset: sizes .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`) .join(', '), + primaryMimeType: 'image/webp', + fallbackMimeType: 'image/jpeg', 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(', '), + 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 4c83463547..4a18bbeaf3 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 = { @@ -11,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, }; @@ -81,6 +89,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..5d06eb5c14 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#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 | 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/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`] = ` - - - - - - - - - - | 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-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/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/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" /> ); }; diff --git a/yarn.lock b/yarn.lock index 8bfaa2e531..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 @@ -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 @@ -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: