diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index 3eb5202483..39a522dc94 100644 --- a/packages/components/psammead-media-player/CHANGELOG.md +++ b/packages/components/psammead-media-player/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 2.2.1 | [PR#2576](https://github.com/bbc/psammead/pull/2576) Add support for 240px screen width & remove Guidance SVG | | 2.2.0 | [PR#2517](https://github.com/bbc/psammead/pull/2517) Add Guidance to media placeholder image | | 2.1.5 | [PR#2545](https://github.com/bbc/psammead/pull/2545) Update psammead-media-player prop documentation | | 2.1.4 | [PR#2516](https://github.com/bbc/psammead/pull/2516) Add notes to stories. Fix prop-type warnings | diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json index ec61049903..90d80c3cac 100644 --- a/packages/components/psammead-media-player/package-lock.json +++ b/packages/components/psammead-media-player/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-media-player", - "version": "2.2.0", + "version": "2.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json index 350127354d..19bc543963 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": "2.2.0", + "version": "2.2.1", "description": "Provides a media player with optional placeholder", "main": "dist/index.js", "module": "esm/index.js", diff --git a/packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap index 85c6cd11b2..0ec606feab 100644 --- a/packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap @@ -1,95 +1,43 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Media Player: Guidance should render Guidance 1`] = ` -.c4 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 1rem; - height: 1rem; -} - .c0 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; -} - -.c1 { width: 100%; height: 100%; position: absolute; background-color: rgba(34,34,34,0.75); color: #FFFFFF; + padding: 0.5rem; } -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 1rem; -} - -.c5 { - padding-left: 0.25rem; +.c1 { font-weight: normal; } -.c3 > svg { - color: #FFFFFF; - fill: currentColor; - height: 1.5rem; - width: 1.5rem; -} - @media (min-width:37.5rem) { .c0 { font-size: 0.875rem; } } +@media (min-width:25rem) { + .c0 { + padding: 1rem; + } +} +
-
-
- - - Guidance: Contains strong language with adult humor - -
-
-

- within the guidance container -

+ Guidance: Contains strong language with adult humor +
`; diff --git a/packages/components/psammead-media-player/src/Guidance/index.jsx b/packages/components/psammead-media-player/src/Guidance/index.jsx index e501a80c41..6b417e9397 100644 --- a/packages/components/psammead-media-player/src/Guidance/index.jsx +++ b/packages/components/psammead-media-player/src/Guidance/index.jsx @@ -1,73 +1,44 @@ import React from 'react'; -import { string, node } from 'prop-types'; +import { string } from 'prop-types'; import styled from 'styled-components'; import { C_WHITE } from '@bbc/psammead-styles/colours'; -import { mediaIcons } from '@bbc/psammead-assets/svgs'; -import { - GEL_SPACING_DBL, - GEL_SPACING_TRPL, - GEL_SPACING_HLF, -} from '@bbc/gel-foundations/spacings'; +import { GEL_SPACING_DBL, GEL_SPACING } from '@bbc/gel-foundations/spacings'; import { GEL_LONG_PRIMER } from '@bbc/gel-foundations/typography'; import { getSansRegular } from '@bbc/psammead-styles/font-styles'; +import { GEL_GROUP_2_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; const GUIDANCE_BACKGROUND = 'rgba(34, 34, 34, 0.75)'; -const StyledGuidance = styled.div` +const GuidanceWrapper = styled.div` ${({ service }) => getSansRegular(service)} ${GEL_LONG_PRIMER}; -`; -const GuidanceWrapper = styled.div` width: 100%; height: 100%; position: absolute; background-color: ${GUIDANCE_BACKGROUND}; color: ${C_WHITE}; -`; -const Content = styled.div` - display: flex; - align-items: center; - padding: ${GEL_SPACING_DBL}; + padding: ${GEL_SPACING}; + + @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { + padding: ${GEL_SPACING_DBL}; + } `; const GuidanceMessage = styled.strong` - padding-left: ${GEL_SPACING_HLF}; font-weight: normal; `; -const IconWrapper = styled.div` - > svg { - color: ${C_WHITE}; - fill: currentColor; - height: ${GEL_SPACING_TRPL}; - width: ${GEL_SPACING_TRPL}; - } -`; - -const Guidance = ({ guidanceMessage, service, children }) => { - return ( - - - - - {guidanceMessage} - - - {children} - - ); -}; +const Guidance = ({ guidanceMessage, service }) => ( + + {guidanceMessage} + +); Guidance.propTypes = { guidanceMessage: string.isRequired, service: string.isRequired, - children: node, -}; - -Guidance.defaultProps = { - children: null, }; export default Guidance; diff --git a/packages/components/psammead-media-player/src/Guidance/index.test.jsx b/packages/components/psammead-media-player/src/Guidance/index.test.jsx index f19868c418..04c196a7cf 100644 --- a/packages/components/psammead-media-player/src/Guidance/index.test.jsx +++ b/packages/components/psammead-media-player/src/Guidance/index.test.jsx @@ -8,8 +8,6 @@ describe('Media Player: Guidance', () => { -

within the guidance container

- , + />, ); }); 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 d6c6bba979..8c4defe886 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 @@ -129,13 +129,13 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` `; exports[`Media Player: Placeholder should render a video placeholder with guidance 1`] = ` -.c14 { +.c10 { display: block; width: 100%; visibility: visible; } -.c12 { +.c8 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -145,15 +145,6 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan } .c6 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 1rem; - height: 1rem; -} - -.c10 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -165,7 +156,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan margin: 0; } -.c8 { +.c4 { background-color: #222222; border: none; color: #FFFFFF; @@ -183,14 +174,14 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan width: 5rem; } -.c8:hover, -.c8:focus { +.c4:hover, +.c4:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.c11 > svg { +.c7 > svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; @@ -198,7 +189,7 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan width: 1.5rem; } -.c13 { +.c9 { display: block; margin-top: 0.5rem; } @@ -209,40 +200,18 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; -} - -.c3 { width: 100%; height: 100%; position: absolute; background-color: rgba(34,34,34,0.75); color: #FFFFFF; + padding: 0.5rem; } -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 1rem; -} - -.c7 { - padding-left: 0.25rem; +.c3 { font-weight: normal; } -.c5 > svg { - color: #FFFFFF; - fill: currentColor; - height: 1.5rem; - width: 1.5rem; -} - .c1 { cursor: pointer; position: absolute; @@ -252,13 +221,13 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan height: 100%; } -.c9 { +.c5 { position: absolute; bottom: 0; } -.c0:hover .c9, -.c0:focus .c9 { +.c0:hover .c5, +.c0:focus .c5 { background-color: #B80000; } @@ -268,56 +237,38 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan } } +@media (min-width:25rem) { + .c2 { + padding: 1rem; + } +} +
-
-
- - - Guidance: May contain strong language, sexual or violent content that may offend. - -
-
+ Guidance: May contain strong language, sexual or violent content that may offend. +
diff --git a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap index 5c8958185f..29c8f42955 100644 --- a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap @@ -271,13 +271,13 @@ exports[`Media Player: Canonical Entry renders a landscape container with a plac `; exports[`Media Player: Canonical Entry renders a placeholder image with guidance 1`] = ` -.c15 { +.c11 { display: block; width: 100%; visibility: visible; } -.c13 { +.c9 { vertical-align: middle; margin: 0 0.25rem; color: #222222; @@ -287,15 +287,6 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance } .c7 { - vertical-align: middle; - margin: 0 0.25rem; - color: #222222; - fill: currentColor; - width: 1rem; - height: 1rem; -} - -.c11 { -webkit-clip-path: inset(100%); clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); @@ -307,7 +298,7 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance margin: 0; } -.c9 { +.c5 { background-color: #222222; border: none; color: #FFFFFF; @@ -325,14 +316,14 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance width: 5rem; } -.c9:hover, -.c9:focus { +.c5:hover, +.c5:focus { background-color: #B80000; -webkit-transition: background-color 300ms; transition: background-color 300ms; } -.c12 > svg { +.c8 > svg { color: #FFFFFF; fill: currentColor; height: 1.5rem; @@ -340,7 +331,7 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance width: 1.5rem; } -.c14 { +.c10 { display: block; margin-top: 0.5rem; } @@ -351,40 +342,18 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance font-style: normal; font-size: 0.9375rem; line-height: 1.125rem; -} - -.c4 { width: 100%; height: 100%; position: absolute; background-color: rgba(34,34,34,0.75); color: #FFFFFF; + padding: 0.5rem; } -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 1rem; -} - -.c8 { - padding-left: 0.25rem; +.c4 { font-weight: normal; } -.c6 > svg { - color: #FFFFFF; - fill: currentColor; - height: 1.5rem; - width: 1.5rem; -} - .c2 { cursor: pointer; position: absolute; @@ -394,13 +363,13 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance height: 100%; } -.c10 { +.c6 { position: absolute; bottom: 0; } -.c1:hover .c10, -.c1:focus .c10 { +.c1:hover .c6, +.c1:focus .c6 { background-color: #B80000; } @@ -416,6 +385,12 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance } } +@media (min-width:25rem) { + .c3 { + padding: 1rem; + } +} +
@@ -425,50 +400,26 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance
-
-
- - - May contain strong language, sexual or violent content that may offend. - -
-
+ May contain strong language, sexual or violent content that may offend. +