From 14814f9f75e57bc8a73c3094dbc387ac2b7d7e66 Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Tue, 17 Aug 2021 09:58:18 +0100 Subject: [PATCH 1/9] Use string lit in useEffect --- .../components/psammead-social-embed/src/Canonical/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index 37d7a38c66..ce6ff7312d 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -2,7 +2,6 @@ import React, { memo, useEffect } from 'react'; import { func, shape, string } from 'prop-types'; import styled from '@emotion/styled'; import useScript from './useScript'; -import fixtures from '../fixtures'; const LANDSCAPE_RATIO = '56.25%'; @@ -78,8 +77,8 @@ const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { useEffect(providers[provider].enrich); useEffect(() => { - if (provider === fixtures.twitter.source && isSdkLoaded && onRender) { - providers[fixtures.twitter.source].onSdkLoad(onRender); + if (provider === 'twitter' && isSdkLoaded && onRender) { + providers.twitter.onSdkLoad(onRender); } }, [isSdkLoaded]); From 2acaf99cadc140ddbe99fcaab8a63336a56bcb25 Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Tue, 17 Aug 2021 10:01:28 +0100 Subject: [PATCH 2/9] Bump root dep --- package.json | 2 +- packages/components/psammead-social-embed/CHANGELOG.md | 1 + packages/components/psammead-social-embed/package.json | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ecf4572526..8409048ea7 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "@bbc/psammead-rich-text-transforms": "2.0.6", "@bbc/psammead-script-link": "3.0.20", "@bbc/psammead-section-label": "7.1.0", - "@bbc/psammead-social-embed": "3.2.0", + "@bbc/psammead-social-embed": "3.2.1", "@bbc/psammead-story-promo": "8.0.21", "@bbc/psammead-story-promo-list": "6.0.19", "@bbc/psammead-storybook-helpers": "9.0.14", diff --git a/packages/components/psammead-social-embed/CHANGELOG.md b/packages/components/psammead-social-embed/CHANGELOG.md index 6de08be3ae..fceb1bac8b 100644 --- a/packages/components/psammead-social-embed/CHANGELOG.md +++ b/packages/components/psammead-social-embed/CHANGELOG.md @@ -2,6 +2,7 @@ | Version | Description | | ------------- | ----------------------------------------------------------------------------------------------------------- | +| 3.2.1 | [PR#4536](https://github.com/bbc/psammead/pull/4536) Remove use of fixtures for provider name | | 3.2.0 | [PR#4535](https://github.com/bbc/psammead/pull/4535) Add onRender prop | | 3.1.16 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles | | 3.1.15 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies | diff --git a/packages/components/psammead-social-embed/package.json b/packages/components/psammead-social-embed/package.json index 8487c972e1..364daf042a 100644 --- a/packages/components/psammead-social-embed/package.json +++ b/packages/components/psammead-social-embed/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-social-embed", - "version": "3.2.0", + "version": "3.2.1", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From ecf8c24048284dd95d11a00e3e995bcad255ff69 Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Thu, 19 Aug 2021 09:38:32 +0100 Subject: [PATCH 3/9] Rename isSdkLoaded to hasLibraryLoaded --- .../psammead-social-embed/src/Canonical/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index ce6ff7312d..b97516035d 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -73,14 +73,14 @@ export const providers = { }; const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { - const isSdkLoaded = useScript(providers[provider].script); + const hasLibraryLoaded = useScript(providers[provider].script); useEffect(providers[provider].enrich); useEffect(() => { - if (provider === 'twitter' && isSdkLoaded && onRender) { + if (provider === 'twitter' && hasLibraryLoaded && onRender) { providers.twitter.onSdkLoad(onRender); } - }, [isSdkLoaded]); + }, [hasLibraryLoaded]); return ( Date: Thu, 19 Aug 2021 09:40:21 +0100 Subject: [PATCH 4/9] Rename onSdkLoad to onLibraryLoad --- .../components/psammead-social-embed/src/Canonical/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index b97516035d..9483f745ef 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -47,7 +47,7 @@ export const providers = { window.twttr.widgets.load(); } }, - onSdkLoad: onRender => { + onLibraryLoad: onRender => { window.twttr.ready(twttr => { twttr.events.bind('rendered', onRender); }); @@ -78,7 +78,7 @@ const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { useEffect(() => { if (provider === 'twitter' && hasLibraryLoaded && onRender) { - providers.twitter.onSdkLoad(onRender); + providers.twitter.onLibraryLoad(onRender); } }, [hasLibraryLoaded]); From 3d92f862278727130ec000ce5522b3ab31565e1a Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Thu, 19 Aug 2021 10:42:52 +0100 Subject: [PATCH 5/9] Rename hasLibraryLoaded to libraryHasLoaded --- .../psammead-social-embed/src/Canonical/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index 9483f745ef..d6503319bd 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -73,14 +73,14 @@ export const providers = { }; const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { - const hasLibraryLoaded = useScript(providers[provider].script); + const libraryHasLoaded = useScript(providers[provider].script); useEffect(providers[provider].enrich); useEffect(() => { - if (provider === 'twitter' && hasLibraryLoaded && onRender) { + if (provider === 'twitter' && libraryHasLoaded && onRender) { providers.twitter.onLibraryLoad(onRender); } - }, [hasLibraryLoaded]); + }, [libraryHasLoaded]); return ( Date: Thu, 19 Aug 2021 10:49:35 +0100 Subject: [PATCH 6/9] Refactor onLibraryLoad --- .../psammead-social-embed/src/Canonical/index.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index d6503319bd..dddadf6733 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import React, { memo, useEffect } from 'react'; import { func, shape, string } from 'prop-types'; import styled from '@emotion/styled'; @@ -33,6 +34,8 @@ export const providers = { window.instgrm.Embeds.process(); } }, + onLibraryLoad: () => + console.error('onRender callback function not implemented for Instagram'), }, twitter: { script: 'https://platform.twitter.com/widgets.js', @@ -69,6 +72,8 @@ export const providers = { } `, enrich: () => {}, + onLibraryLoad: () => + console.error('onRender callback function not implemented for YouTube'), }, }; @@ -77,8 +82,10 @@ const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { useEffect(providers[provider].enrich); useEffect(() => { - if (provider === 'twitter' && libraryHasLoaded && onRender) { - providers.twitter.onLibraryLoad(onRender); + const { onLibraryLoad } = providers[provider]; + + if (libraryHasLoaded && onLibraryLoad) { + onLibraryLoad(onRender); } }, [libraryHasLoaded]); @@ -99,7 +106,7 @@ CanonicalEmbed.propTypes = { }; CanonicalEmbed.defaultProps = { - onRender: null, + onRender: () => {}, }; export default memo(CanonicalEmbed); From 3971c0b0b65db9413c3808a4b276ecb6bd9b807e Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Thu, 19 Aug 2021 10:50:33 +0100 Subject: [PATCH 7/9] Rename libraryHasLoaded to hasLoadedLibrary --- .../psammead-social-embed/src/Canonical/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index dddadf6733..bf6f0f2a01 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -78,16 +78,16 @@ export const providers = { }; const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { - const libraryHasLoaded = useScript(providers[provider].script); + const hasLoadedLibrary = useScript(providers[provider].script); useEffect(providers[provider].enrich); useEffect(() => { const { onLibraryLoad } = providers[provider]; - if (libraryHasLoaded && onLibraryLoad) { + if (hasLoadedLibrary && onLibraryLoad) { onLibraryLoad(onRender); } - }, [libraryHasLoaded]); + }, [hasLoadedLibrary]); return ( Date: Thu, 19 Aug 2021 11:34:39 +0100 Subject: [PATCH 8/9] Check onRender is defined and console.error if called on instagram or youtube --- .../psammead-social-embed/src/Canonical/index.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx index bf6f0f2a01..88a5cad6b9 100644 --- a/packages/components/psammead-social-embed/src/Canonical/index.jsx +++ b/packages/components/psammead-social-embed/src/Canonical/index.jsx @@ -15,6 +15,9 @@ const OEmbed = styled.div` justify-content: center; `; +const getOnRenderError = providerName => + `onRender callback function not implemented for ${providerName}`; + /** * The following object declares a list of supported Canonical providers * and their attributes. Not all providers have the same attributes. @@ -34,8 +37,7 @@ export const providers = { window.instgrm.Embeds.process(); } }, - onLibraryLoad: () => - console.error('onRender callback function not implemented for Instagram'), + onLibraryLoad: () => console.error(getOnRenderError('Instagram')), }, twitter: { script: 'https://platform.twitter.com/widgets.js', @@ -72,8 +74,7 @@ export const providers = { } `, enrich: () => {}, - onLibraryLoad: () => - console.error('onRender callback function not implemented for YouTube'), + onLibraryLoad: () => console.error(getOnRenderError('YouTube')), }, }; @@ -84,7 +85,7 @@ const CanonicalEmbed = ({ provider, oEmbed, onRender }) => { useEffect(() => { const { onLibraryLoad } = providers[provider]; - if (hasLoadedLibrary && onLibraryLoad) { + if (onRender && hasLoadedLibrary && onLibraryLoad) { onLibraryLoad(onRender); } }, [hasLoadedLibrary]); @@ -106,7 +107,7 @@ CanonicalEmbed.propTypes = { }; CanonicalEmbed.defaultProps = { - onRender: () => {}, + onRender: null, }; export default memo(CanonicalEmbed); From b5cbfa4252d5265d8b5a1b6add8233e3c8767282 Mon Sep 17 00:00:00 2001 From: HarryVerhoef Date: Thu, 19 Aug 2021 12:42:01 +0100 Subject: [PATCH 9/9] Add tests for console.error --- .../src/__snapshots__/index.test.jsx.snap | 312 +++++++++--------- .../psammead-social-embed/src/index.test.jsx | 50 ++- 2 files changed, 201 insertions(+), 161 deletions(-) diff --git a/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap index b04db189a3..b966a86bd2 100644 --- a/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-social-embed/src/__snapshots__/index.test.jsx.snap @@ -838,7 +838,7 @@ exports[`CanonicalSocialEmbed Twitter should render correctly for Twitter 1`] = `; -exports[`CanonicalSocialEmbed should render a notice when the provider is unsupported 1`] = ` +exports[`CanonicalSocialEmbed YouTube should render correctly for YouTube 1`] = ` .emotion-0 { position: relative; } @@ -887,60 +887,67 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp } .emotion-4 { - font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 400; - font-style: normal; - font-size: 0.9375rem; - line-height: 1.25rem; - border: 0.0625rem solid #AEAEB5; - border-radius: 0.5rem; - color: #3F3F42; - padding: 1rem; -} - -@media (min-width: 20rem) { - .emotion-4 { - font-size: 1rem; - line-height: 1.375rem; - } + background-color: #000000; + margin: 0; } -.emotion-4 p { - margin-top: 0; - margin-bottom: 0.5rem; +.emotion-6 { + padding-top: 56.25%; + position: relative; + overflow: hidden; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } -.emotion-4 a, -.emotion-4 small { - display: block; +.emotion-6>iframe { + border: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; } -.emotion-4 a { +.emotion-8 { font-family: ReithSans,Helvetica,Arial,sans-serif; - font-weight: 700; + font-weight: 400; font-style: normal; - color: #222222; - -webkit-text-decoration: none; - text-decoration: none; + font-size: 0.875rem; + line-height: 1rem; + color: #FFFFFF; + padding: 0.5rem; } -.emotion-4 a:visited { - color: #6E6E73; +@media (min-width: 20rem) and (max-width: 37.4375rem) { + .emotion-8 { + line-height: 1.125rem; + } } -.emotion-4 a:hover, -.emotion-4 a:focus { - -webkit-text-decoration: underline; - text-decoration: underline; +@media (min-width: 37.5rem) { + .emotion-8 { + font-size: 0.8125rem; + } } -.emotion-4 small { - margin-top: 0.5rem; - font-size: 0.75rem; - line-height: 1rem; +.emotion-8>span { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } -.emotion-6 { +.emotion-10 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -951,44 +958,50 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp margin: 0; } -
-
+ + Skip YouTube content + +
- - Skip unknown content -
-

- Sorry but we're having trouble displaying this content -

- - View content on unknown - - - Warning: BBC is not responsible for third party content - +