From 47726d4fa091421f16403cd908fa5afe137f4010 Mon Sep 17 00:00:00 2001 From: rowland Date: Tue, 29 Oct 2019 08:45:06 +0100 Subject: [PATCH 01/32] created guidance component --- .../src/Guidance/index.jsx | 106 ++++++++++++++++++ .../src/Placeholder/index.jsx | 23 ++-- .../psammead-media-player/src/index.jsx | 7 +- 3 files changed, 126 insertions(+), 10 deletions(-) create mode 100644 packages/components/psammead-media-player/src/Guidance/index.jsx diff --git a/packages/components/psammead-media-player/src/Guidance/index.jsx b/packages/components/psammead-media-player/src/Guidance/index.jsx new file mode 100644 index 0000000000..91667c4cda --- /dev/null +++ b/packages/components/psammead-media-player/src/Guidance/index.jsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { string, node } from 'prop-types'; +import styled from 'styled-components'; +import { C_EBON, C_WHITE } from '@bbc/psammead-styles/colours'; +import { GEL_GROUP_2_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; +import { + GEL_MARGIN_BELOW_400PX, + GEL_MARGIN_ABOVE_400PX, + GEL_SPACING_DBL, + GEL_SPACING, +} from '@bbc/gel-foundations/spacings'; +import { GEL_MINION } from '@bbc/gel-foundations/typography'; +import { getSansBold } from '@bbc/psammead-styles/font-styles'; + +const StyledGuidanceIcon = styled.svg` + color: ${C_EBON}; + fill: currentColor; +`; + +const GuidanceIcon = () => ( + + + + + + +); + +const StyledGuidance = styled.div` + ${({ service }) => getSansBold(service)} + ${GEL_MINION}; +`; + +const GuidanceWrapper = styled.div` + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(34, 34, 34, 0.75); + color: ${C_WHITE}; + padding: ${GEL_SPACING}; + border: none; +`; + +const Content = styled.div` + display: flex; + flex-direction: row; + padding: ${GEL_SPACING_DBL} ${GEL_MARGIN_BELOW_400PX}; + + @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { + padding: ${GEL_MARGIN_ABOVE_400PX}; + } +`; + +const GuidanceMessage = styled.span` + @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { + padding: ${GEL_MARGIN_ABOVE_400PX}; + } +`; + +const IconWrapper = styled.div` + > svg { + color: ${C_WHITE}; + fill: currentColor; + } +`; + +const Guidance = ({ className, message, service, children }) => { + return ( + + {message && ( + + + + Guidance: {message} + + + )} + {children} + + ); +}; + +Guidance.propTypes = { + message: string, + className: string, + service: string.isRequired, + children: node, +}; + +Guidance.defaultProps = { + message: null, + className: null, + children: null, +}; + +export default Guidance; diff --git a/packages/components/psammead-media-player/src/Placeholder/index.jsx b/packages/components/psammead-media-player/src/Placeholder/index.jsx index 7c93538738..3e77c5b918 100644 --- a/packages/components/psammead-media-player/src/Placeholder/index.jsx +++ b/packages/components/psammead-media-player/src/Placeholder/index.jsx @@ -4,6 +4,7 @@ import { string, func, shape, oneOf } from 'prop-types'; import Image from '@bbc/psammead-image'; import PlayButton from '@bbc/psammead-play-button'; import { C_POSTBOX } from '@bbc/psammead-styles/colours'; +import Guidance from '../Guidance'; const StyledPlaceholder = styled.div` cursor: pointer; @@ -29,17 +30,21 @@ const StyledPlayButton = styled(PlayButton)` const Placeholder = ({ onClick, service, src, mediaInfo }) => { const { title, datetime, duration, durationSpoken, type } = mediaInfo; + const guidance = + 'May contain strong language, sexual or violent content that may offend.'; return ( - {}} - datetime={datetime} - duration={duration} - durationSpoken={durationSpoken} - type={type} - /> + + {}} + datetime={datetime} + duration={duration} + durationSpoken={durationSpoken} + type={type} + /> + Image Alt ); diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx index 612b44340e..c4cee45073 100644 --- a/packages/components/psammead-media-player/src/index.jsx +++ b/packages/components/psammead-media-player/src/index.jsx @@ -35,6 +35,8 @@ export const CanonicalMediaPlayer = ({ const StyledContainer = skin === 'audio' ? StyledAudioContainer : StyledVideoContainer; + const guidance = 'Contains strong language and adult humour.'; + return ( {placeholderActive ? ( @@ -42,7 +44,10 @@ export const CanonicalMediaPlayer = ({ onClick={handlePlaceholderClick} src={placeholderSrc} service={service} - mediaInfo={mediaInfo} + mediaInfo={{ + ...mediaInfo, + guidance, + }} /> ) : ( From 800ae817ddbba9d40204a2894ce73f6b70eaf3a0 Mon Sep 17 00:00:00 2001 From: rowland Date: Tue, 29 Oct 2019 17:12:34 +0100 Subject: [PATCH 02/32] added snapshots for guidaance coverage --- .../src/Guidance/index.jsx | 32 +-- .../__snapshots__/index.test.jsx.snap | 216 +++++++++++++++++ .../src/Placeholder/index.jsx | 40 ++-- .../src/Placeholder/index.test.jsx | 16 ++ .../src/__snapshots__/index.test.jsx.snap | 226 ++++++++++++++++++ .../psammead-media-player/src/index.jsx | 4 +- .../src/index.stories.jsx | 16 ++ .../psammead-media-player/src/index.test.jsx | 16 ++ 8 files changed, 529 insertions(+), 37 deletions(-) diff --git a/packages/components/psammead-media-player/src/Guidance/index.jsx b/packages/components/psammead-media-player/src/Guidance/index.jsx index 91667c4cda..3747389afb 100644 --- a/packages/components/psammead-media-player/src/Guidance/index.jsx +++ b/packages/components/psammead-media-player/src/Guidance/index.jsx @@ -5,9 +5,7 @@ import { C_EBON, C_WHITE } from '@bbc/psammead-styles/colours'; import { GEL_GROUP_2_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; import { GEL_MARGIN_BELOW_400PX, - GEL_MARGIN_ABOVE_400PX, GEL_SPACING_DBL, - GEL_SPACING, } from '@bbc/gel-foundations/spacings'; import { GEL_MINION } from '@bbc/gel-foundations/typography'; import { getSansBold } from '@bbc/psammead-styles/font-styles'; @@ -21,8 +19,8 @@ const GuidanceIcon = () => ( @@ -45,7 +43,7 @@ const GuidanceWrapper = styled.div` position: absolute; background-color: rgba(34, 34, 34, 0.75); color: ${C_WHITE}; - padding: ${GEL_SPACING}; + padding: ${GEL_MARGIN_BELOW_400PX}; border: none; `; @@ -53,15 +51,11 @@ const Content = styled.div` display: flex; flex-direction: row; padding: ${GEL_SPACING_DBL} ${GEL_MARGIN_BELOW_400PX}; - - @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - padding: ${GEL_MARGIN_ABOVE_400PX}; - } `; const GuidanceMessage = styled.span` @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) { - padding: ${GEL_MARGIN_ABOVE_400PX}; + padding: ${GEL_MARGIN_BELOW_400PX} 0 0 0; } `; @@ -75,16 +69,14 @@ const IconWrapper = styled.div` const Guidance = ({ className, message, service, children }) => { return ( - {message && ( - - - - Guidance: {message} - - - )} + + + + Guidance: {message} + + {children} ); 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 fdf68331e1..e31c7324bd 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 @@ -128,6 +128,222 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = ` `; +exports[`Media Player: Placeholder should render a video placeholder with guidance 1`] = ` +.c14 { + display: block; + width: 100%; + visibility: visible; +} + +.c12 { + vertical-align: middle; + margin: 0 0.25rem; + color: #222222; + fill: currentColor; + width: 0.75rem; + height: 0.75rem; +} + +.c10 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.c8 { + background-color: #222222; + border: none; + color: #FFFFFF; + cursor: pointer; + display: block; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.75rem; + line-height: 1rem; + height: 5rem; + padding: 0; + -webkit-transition: background-color 300ms; + transition: background-color 300ms; + width: 5rem; +} + +.c8:hover, +.c8:focus { + background-color: #B80000; + -webkit-transition: background-color 300ms; + transition: background-color 300ms; +} + +.c11 > svg { + color: #FFFFFF; + fill: currentColor; + height: 1.5rem; + margin-top: 0.5rem; + width: 1.5rem; +} + +.c13 { + display: block; + margin-top: 0.5rem; +} + +.c6 { + color: #222222; + fill: currentColor; +} + +.c2 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.75rem; + line-height: 1rem; +} + +.c3 { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(34,34,34,0.75); + color: #FFFFFF; + padding: 0.5rem; + border: none; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 1rem 0.5rem; +} + +.c5 > svg { + color: #FFFFFF; + fill: currentColor; +} + +.c1 { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.c9 { + position: absolute; + bottom: 0; +} + +.c0:hover .c9, +.c0:focus .c9 { + background-color: #B80000; +} + +@media (min-width:25rem) { + .c7 { + padding: 0.5rem 0 0 0; + } +} + +
+
+
+
+ + + Guidance: + May contain strong language, sexual or violent content that may offend. + +
+
+ +
+ Image Alt +
+`; + exports[`Media Player: Placeholder should render a video placeholder without duration 1`] = ` .c7 { display: block; diff --git a/packages/components/psammead-media-player/src/Placeholder/index.jsx b/packages/components/psammead-media-player/src/Placeholder/index.jsx index 3b21893c93..96cd69f4b4 100644 --- a/packages/components/psammead-media-player/src/Placeholder/index.jsx +++ b/packages/components/psammead-media-player/src/Placeholder/index.jsx @@ -29,22 +29,34 @@ const StyledPlayButton = styled(PlayButton)` `; const Placeholder = ({ onClick, service, src, srcset, mediaInfo }) => { - const { title, datetime, duration, durationSpoken, type } = mediaInfo; - const guidance = - 'May contain strong language, sexual or violent content that may offend.'; + const { + title, + datetime, + duration, + durationSpoken, + type, + guidance, + } = mediaInfo; + const renderPlaybutton = () => ( + {}} + datetime={datetime} + duration={duration} + durationSpoken={durationSpoken} + type={type} + /> + ); return ( - - {}} - datetime={datetime} - duration={duration} - durationSpoken={durationSpoken} - type={type} - /> - + {guidance ? ( + + {renderPlaybutton()} + + ) : ( + renderPlaybutton() + )} Image Alt ); diff --git a/packages/components/psammead-media-player/src/Placeholder/index.test.jsx b/packages/components/psammead-media-player/src/Placeholder/index.test.jsx index 5ea2f147de..2d92b82953 100644 --- a/packages/components/psammead-media-player/src/Placeholder/index.test.jsx +++ b/packages/components/psammead-media-player/src/Placeholder/index.test.jsx @@ -73,4 +73,20 @@ describe('Media Player: Placeholder', () => { fireEvent.click(getByText(container.firstChild, '2:30')); expect(mockOnClick).toHaveBeenCalledTimes(2); }); + + shouldMatchSnapshot( + 'should render a video placeholder with guidance', + , + ); }); 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 613a4f3ce7..c2fa728469 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 @@ -261,6 +261,232 @@ 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 { + display: block; + width: 100%; + visibility: visible; +} + +.c13 { + vertical-align: middle; + margin: 0 0.25rem; + color: #222222; + fill: currentColor; + width: 0.75rem; + height: 0.75rem; +} + +.c11 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; +} + +.c9 { + background-color: #222222; + border: none; + color: #FFFFFF; + cursor: pointer; + display: block; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.75rem; + line-height: 1rem; + height: 5rem; + padding: 0; + -webkit-transition: background-color 300ms; + transition: background-color 300ms; + width: 5rem; +} + +.c9:hover, +.c9:focus { + background-color: #B80000; + -webkit-transition: background-color 300ms; + transition: background-color 300ms; +} + +.c12 > svg { + color: #FFFFFF; + fill: currentColor; + height: 1.5rem; + margin-top: 0.5rem; + width: 1.5rem; +} + +.c14 { + display: block; + margin-top: 0.5rem; +} + +.c7 { + color: #222222; + fill: currentColor; +} + +.c3 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.75rem; + line-height: 1rem; +} + +.c4 { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(34,34,34,0.75); + color: #FFFFFF; + padding: 0.5rem; + border: none; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 1rem 0.5rem; +} + +.c6 > svg { + color: #FFFFFF; + fill: currentColor; +} + +.c2 { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.c10 { + position: absolute; + bottom: 0; +} + +.c1:hover .c10, +.c1:focus .c10 { + background-color: #B80000; +} + +.c0 { + padding-top: 56.25%; + position: relative; + overflow: hidden; +} + +@media (min-width:25rem) { + .c8 { + padding: 0.5rem 0 0 0; + } +} + +
+
+
+
+
+ + + Guidance: + May contain strong language, sexual or violent content that may offend. + +
+
+ +
+ Image Alt +
+
+`; + exports[`Media Player: Canonical Entry renders a portrait container with a placeholder image 1`] = ` .c9 { display: block; diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx index 2d2e58b72d..2a033b42af 100644 --- a/packages/components/psammead-media-player/src/index.jsx +++ b/packages/components/psammead-media-player/src/index.jsx @@ -36,8 +36,6 @@ export const CanonicalMediaPlayer = ({ const StyledContainer = skin === 'audio' ? StyledAudioContainer : StyledVideoContainer; - const guidance = 'Contains strong language and adult humour.'; - return ( {placeholderActive ? ( @@ -48,7 +46,6 @@ export const CanonicalMediaPlayer = ({ service={service} mediaInfo={{ ...mediaInfo, - guidance, }} /> ) : ( @@ -96,6 +93,7 @@ CanonicalMediaPlayer.propTypes = { duration: string, durationSpoken: string, type: oneOf(['video', 'audio']), + guidance: string, }).isRequired, }; diff --git a/packages/components/psammead-media-player/src/index.stories.jsx b/packages/components/psammead-media-player/src/index.stories.jsx index 6ce51bf075..6df908793a 100644 --- a/packages/components/psammead-media-player/src/index.stories.jsx +++ b/packages/components/psammead-media-player/src/index.stories.jsx @@ -18,6 +18,22 @@ storiesOf('Components|Media Player', module).add('Default', () => ( /> )); +storiesOf('Components|Media Player', module).add( + 'Default with guidance', + () => ( + + ), +); + storiesOf('Components|Media Player', module).add('Audio', () => ( { title="Audio player" />, ); + + shouldMatchSnapshot( + 'renders a placeholder image with guidance', + , + ); }); From a5b4ce7924aa21b77d7e711efcfeeaf21a1b9280 Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 07:46:57 +0100 Subject: [PATCH 03/32] bumped version --- packages/components/psammead-media-player/CHANGELOG.md | 1 + packages/components/psammead-media-player/package-lock.json | 2 +- packages/components/psammead-media-player/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md index 81b54bf185..b4160e899c 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.0 | [PR#2517](https://github.com/bbc/psammead/pull/2517) Add Guidance to media placeholder image | 2.1.0 | [PR#2424](https://github.com/bbc/psammead/pull/2424) Add srcset to placeholder image | 2.0.2 | [PR#2486](https://github.com/bbc/psammead/pull/2486) Talos - Bump Dependencies - @bbc/psammead-image | | 2.0.1 | [PR#2317](https://github.com/bbc/psammead/pull/2317) Add `psammead-play-button` to Media Player placeholder | diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json index 4597bbdee8..1306f82559 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.1.0", + "version": "2.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json index 2ddf98cbca..c6590c9c51 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.1.0", + "version": "2.2.0", "description": "Provides a media player with optional placeholder", "main": "dist/index.js", "module": "esm/index.js", From 1c05ecc022d33ee113a56c557aee30f065f2ca76 Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 07:47:22 +0100 Subject: [PATCH 04/32] removed typo --- packages/components/psammead-media-player/src/index.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/src/index.stories.jsx b/packages/components/psammead-media-player/src/index.stories.jsx index 6df908793a..96edad5043 100644 --- a/packages/components/psammead-media-player/src/index.stories.jsx +++ b/packages/components/psammead-media-player/src/index.stories.jsx @@ -27,7 +27,7 @@ storiesOf('Components|Media Player', module).add( service="news" mediaInfo={{ title: 'Dog chases cat.', - guidance: 'Contains strong language withh adult humor', + guidance: 'Contains strong language with adult humor', ...withDuration, }} /> From 2199d9c645ab18e9ec51b906b884249f39a421fe Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 07:47:51 +0100 Subject: [PATCH 05/32] added tests for guidance component --- .../__snapshots__/index.test.jsx.snap | 95 +++++++++++++++++++ .../src/Guidance/index.test.jsx | 15 +++ 2 files changed, 110 insertions(+) create mode 100644 packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap create mode 100644 packages/components/psammead-media-player/src/Guidance/index.test.jsx 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 new file mode 100644 index 0000000000..4e3070aa5f --- /dev/null +++ b/packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap @@ -0,0 +1,95 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Media Player: Guidance should render Guidance 1`] = ` +.c4 { + color: #222222; + fill: currentColor; +} + +.c0 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.75rem; + line-height: 1rem; +} + +.c1 { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(34,34,34,0.75); + color: #FFFFFF; + padding: 0.5rem; + border: none; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 1rem 0.5rem; +} + +.c3 > svg { + color: #FFFFFF; + fill: currentColor; +} + +@media (min-width:25rem) { + .c5 { + padding: 0.5rem 0 0 0; + } +} + +
+
+
+ + + Guidance: + Contains strong language with adult humor + +
+
+

+ within the guidance container +

+
+`; diff --git a/packages/components/psammead-media-player/src/Guidance/index.test.jsx b/packages/components/psammead-media-player/src/Guidance/index.test.jsx new file mode 100644 index 0000000000..3d182ee0f2 --- /dev/null +++ b/packages/components/psammead-media-player/src/Guidance/index.test.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import Guidance from '.'; + +describe('Media Player: Guidance', () => { + shouldMatchSnapshot( + 'should render Guidance', + +

within the guidance container

+ , + ); +}); From c6643a32bfe0a90055339a36be0c228dcaa7dd29 Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 08:56:30 +0100 Subject: [PATCH 06/32] removed type prop --- .../components/psammead-media-player/src/Placeholder/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-media-player/src/Placeholder/index.jsx b/packages/components/psammead-media-player/src/Placeholder/index.jsx index 96cd69f4b4..71e5e5a753 100644 --- a/packages/components/psammead-media-player/src/Placeholder/index.jsx +++ b/packages/components/psammead-media-player/src/Placeholder/index.jsx @@ -51,7 +51,7 @@ const Placeholder = ({ onClick, service, src, srcset, mediaInfo }) => { return ( {guidance ? ( - + {renderPlaybutton()} ) : ( From f74319e28922963af94a36f0063a0a184687b1b4 Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 08:58:08 +0100 Subject: [PATCH 07/32] removed destructuring --- packages/components/psammead-media-player/src/index.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx index 2a033b42af..9ecf6564aa 100644 --- a/packages/components/psammead-media-player/src/index.jsx +++ b/packages/components/psammead-media-player/src/index.jsx @@ -44,9 +44,7 @@ export const CanonicalMediaPlayer = ({ src={placeholderSrc} srcset={placeholderSrcset} service={service} - mediaInfo={{ - ...mediaInfo, - }} + mediaInfo={mediaInfo} /> ) : ( From e27d723423f900d1245f61f4c65aadd7858a89e8 Mon Sep 17 00:00:00 2001 From: rowland Date: Wed, 30 Oct 2019 12:06:58 +0100 Subject: [PATCH 08/32] removed redundant styles and prop --- .../src/Guidance/index.jsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/components/psammead-media-player/src/Guidance/index.jsx b/packages/components/psammead-media-player/src/Guidance/index.jsx index 3747389afb..3d1b0f50ee 100644 --- a/packages/components/psammead-media-player/src/Guidance/index.jsx +++ b/packages/components/psammead-media-player/src/Guidance/index.jsx @@ -8,10 +8,10 @@ import { GEL_SPACING_DBL, } from '@bbc/gel-foundations/spacings'; import { GEL_MINION } from '@bbc/gel-foundations/typography'; -import { getSansBold } from '@bbc/psammead-styles/font-styles'; +import { getSansRegular } from '@bbc/psammead-styles/font-styles'; const StyledGuidanceIcon = styled.svg` - color: ${C_EBON}; + color: ${C_WHITE}; fill: currentColor; `; @@ -33,7 +33,7 @@ const GuidanceIcon = () => ( ); const StyledGuidance = styled.div` - ${({ service }) => getSansBold(service)} + ${({ service }) => getSansRegular(service)} ${GEL_MINION}; `; @@ -59,16 +59,11 @@ const GuidanceMessage = styled.span` } `; -const IconWrapper = styled.div` - > svg { - color: ${C_WHITE}; - fill: currentColor; - } -`; +const IconWrapper = styled.div``; -const Guidance = ({ className, message, service, children }) => { +const Guidance = ({ message, service, children }) => { return ( - +