From d75b67265e5663505fa78f41bae2b1845605f792 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 11:59:16 +0100 Subject: [PATCH 01/15] Wrap all content in a skip link --- .../src/__snapshots__/index.test.jsx.snap | 333 +++++++++++++++--- .../psammead-social-embed/src/index.jsx | 51 +-- 2 files changed, 309 insertions(+), 75 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 251c4667a5..a5771e509e 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 @@ -2,6 +2,54 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported 1`] = ` .c0 { + position: relative; +} + +.c1 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + color: #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +.c1:not(:focus):not(:active) { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c3 { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c2 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; @@ -13,17 +61,17 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported padding: 1rem; } -.c0 p { +.c2 p { margin-top: 0; margin-bottom: 0.5rem; } -.c0 a, -.c0 small { +.c2 a, +.c2 small { display: block; } -.c0 a { +.c2 a { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; @@ -31,7 +79,7 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported text-decoration: none; } -.c0 a > span { +.c2 a > span { position: absolute !important; height: 1px; width: 1px; @@ -43,14 +91,26 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported white-space: nowrap; } -.c0 small { +.c2 small { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; } +@media (min-width:20rem) and (max-width:37.4375rem) { + .c1 { + line-height: 1.125rem; + } +} + +@media (min-width:37.5rem) { + .c1 { + font-size: 0.8125rem; + } +} + @media (min-width:20rem) { - .c0 { + .c2 { font-size: 1rem; line-height: 1.375rem; } @@ -59,17 +119,34 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported
-

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

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

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

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

+ End of unknown content +

`; @@ -421,6 +498,54 @@ exports[`AmpSocialEmbed should render correctly for YouTube 1`] = ` exports[`CanonicalSocialEmbed should render a notice when the provider is unsupported 1`] = ` .c0 { + position: relative; +} + +.c1 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + color: #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +.c1:not(:focus):not(:active) { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c3 { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c2 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; @@ -432,17 +557,17 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp padding: 1rem; } -.c0 p { +.c2 p { margin-top: 0; margin-bottom: 0.5rem; } -.c0 a, -.c0 small { +.c2 a, +.c2 small { display: block; } -.c0 a { +.c2 a { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; @@ -450,7 +575,7 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp text-decoration: none; } -.c0 a > span { +.c2 a > span { position: absolute !important; height: 1px; width: 1px; @@ -462,14 +587,26 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp white-space: nowrap; } -.c0 small { +.c2 small { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; } +@media (min-width:20rem) and (max-width:37.4375rem) { + .c1 { + line-height: 1.125rem; + } +} + +@media (min-width:37.5rem) { + .c1 { + font-size: 0.8125rem; + } +} + @media (min-width:20rem) { - .c0 { + .c2 { font-size: 1rem; line-height: 1.375rem; } @@ -478,25 +615,90 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp
-

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

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

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

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

+ End of unknown content +

`; exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed response 1`] = ` .c0 { + position: relative; +} + +.c1 { + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 700; + font-style: normal; + font-size: 0.875rem; + line-height: 1rem; + background-color: #FFFFFF; + border: 0.125rem solid #222222; + color: #222222; + display: block; + left: 0; + line-height: 1; + padding: 0.75rem; + position: absolute; + -webkit-text-decoration: none; + text-decoration: none; + top: 0; + z-index: 10; +} + +.c1:not(:focus):not(:active) { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c3 { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + white-space: nowrap; +} + +.c2 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 400; font-style: normal; @@ -508,17 +710,17 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res padding: 1rem; } -.c0 p { +.c2 p { margin-top: 0; margin-bottom: 0.5rem; } -.c0 a, -.c0 small { +.c2 a, +.c2 small { display: block; } -.c0 a { +.c2 a { font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; @@ -526,7 +728,7 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res text-decoration: none; } -.c0 a > span { +.c2 a > span { position: absolute !important; height: 1px; width: 1px; @@ -538,14 +740,26 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res white-space: nowrap; } -.c0 small { +.c2 small { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; } +@media (min-width:20rem) and (max-width:37.4375rem) { + .c1 { + line-height: 1.125rem; + } +} + +@media (min-width:37.5rem) { + .c1 { + font-size: 0.8125rem; + } +} + @media (min-width:20rem) { - .c0 { + .c2 { font-size: 1rem; line-height: 1.375rem; } @@ -554,20 +768,37 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res
-

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

- View content on Twitter - - , external - + Skip Twitter content - - Warning: BBC is not responsible for third party content - +
+

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

+ + View content on Twitter + + , external + + + + Warning: BBC is not responsible for third party content + +
+

+ End of Twitter content +

`; diff --git a/packages/components/psammead-social-embed/src/index.jsx b/packages/components/psammead-social-embed/src/index.jsx index cd89dac37a..bb8e396c73 100644 --- a/packages/components/psammead-social-embed/src/index.jsx +++ b/packages/components/psammead-social-embed/src/index.jsx @@ -23,23 +23,25 @@ export const CanonicalSocialEmbed = ({ const isSupportedProvider = Object.keys(providers).includes(provider); const hasCaption = caption && caption.text; - if (isSupportedProvider && oEmbed && hasCaption) - return ( - + const renderCanonicalContent = () => { + if (isSupportedProvider && oEmbed && hasCaption) + return ( - - ); + ); - if (isSupportedProvider && oEmbed) - return ( - - - - ); + if (isSupportedProvider && oEmbed) + return ; - return ; + return ; + }; + + return ( + + {renderCanonicalContent()} + + ); }; /** @@ -57,23 +59,24 @@ export const AmpSocialEmbed = ({ const AmpElement = AmpElements[provider]; const hasCaption = caption && caption.text; - if (AmpElement && hasCaption) - return ( - + const renderAmpContent = () => { + if (AmpElement && hasCaption) + return ( - - ); + ); + + if (AmpElement) return ; - if (AmpElement) - return ( - - - - ); + return ; + }; - return ; + return ( + + {renderAmpContent()} + + ); }; const sharedPropTypes = { From 072f942c5a2b2ff60dabe9b70a27b40ef7ca3b29 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 12:00:50 +0100 Subject: [PATCH 02/15] Bump package for release --- packages/components/psammead-social-embed/package-lock.json | 2 +- packages/components/psammead-social-embed/package.json | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-social-embed/package-lock.json b/packages/components/psammead-social-embed/package-lock.json index 8c18927214..199dd9acf8 100644 --- a/packages/components/psammead-social-embed/package-lock.json +++ b/packages/components/psammead-social-embed/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-social-embed", - "version": "0.1.0-alpha.4", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-social-embed/package.json b/packages/components/psammead-social-embed/package.json index e196baaac1..fd0f8033a0 100644 --- a/packages/components/psammead-social-embed/package.json +++ b/packages/components/psammead-social-embed/package.json @@ -1,9 +1,6 @@ { "name": "@bbc/psammead-social-embed", - "version": "0.1.0-alpha.4", - "publishConfig": { - "tag": "alpha" - }, + "version": "1.0.0", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, From 289d9f0289d17daaa8493ee32156fcfc1161bfa5 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 12:06:07 +0100 Subject: [PATCH 03/15] Add changelog entry --- .../components/psammead-social-embed/CHANGELOG.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-social-embed/CHANGELOG.md b/packages/components/psammead-social-embed/CHANGELOG.md index b9a9022f4d..6c27f59e8a 100644 --- a/packages/components/psammead-social-embed/CHANGELOG.md +++ b/packages/components/psammead-social-embed/CHANGELOG.md @@ -1,8 +1,9 @@ # Social Embed Changelog -| Version | Description | -|---------------|---------------| -| 0.1.0-alpha.4 | [PR#3319](https://github.com/bbc/psammead/pull/3319) Remove dependency on @bbc/psammead-oembed. | -| 0.1.0-alpha.3 | [PR#3311](https://github.com/bbc/psammead/pull/3311) Transpile with @loadable/babel-plugin. | -| 0.1.0-alpha.2 | [PR#3298](https://github.com/bbc/psammead/pull/3298) Add webpackChunkName to dynamic import. | -| 0.1.0-alpha.1 | [PR#3217](https://github.com/bbc/psammead/pull/3217) Initial creation of package. | +| Version | Description | +| ------------- | ------------------------------------------------------------------------------------------------- | +| 1.0.0 | [PR#3349](https://github.com/bbc/psammead/pull/3349) Resolve a11y issues and release version one. | +| 0.1.0-alpha.4 | [PR#3319](https://github.com/bbc/psammead/pull/3319) Remove dependency on @bbc/psammead-oembed. | +| 0.1.0-alpha.3 | [PR#3311](https://github.com/bbc/psammead/pull/3311) Transpile with @loadable/babel-plugin. | +| 0.1.0-alpha.2 | [PR#3298](https://github.com/bbc/psammead/pull/3298) Add webpackChunkName to dynamic import. | +| 0.1.0-alpha.1 | [PR#3217](https://github.com/bbc/psammead/pull/3217) Initial creation of package. | From fc56087d22042ca6880671dd6bd33c6e64a137b5 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 12:37:15 +0100 Subject: [PATCH 04/15] Use aria-label for external labelling --- .../src/Notice/index.jsx | 28 ++++++------ .../src/__snapshots__/index.test.jsx.snap | 44 +------------------ 2 files changed, 16 insertions(+), 56 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Notice/index.jsx b/packages/components/psammead-social-embed/src/Notice/index.jsx index b9816020e4..bd4cda1041 100644 --- a/packages/components/psammead-social-embed/src/Notice/index.jsx +++ b/packages/components/psammead-social-embed/src/Notice/index.jsx @@ -6,11 +6,7 @@ import { getSansRegular, getSansBold } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_DBL, GEL_SPACING } from '@bbc/gel-foundations/spacings'; import { GEL_BODY_COPY, GEL_MINION } from '@bbc/gel-foundations/typography'; -import { - detokenise, - dictionaryFactory, - visuallyHiddenStyle, -} from '../utilities'; +import { detokenise, dictionaryFactory } from '../utilities'; const BORDER_WEIGHT = '0.0625rem'; @@ -35,10 +31,6 @@ const Wrapper = styled.div` a { ${({ service }) => getSansBold(service)} text-decoration: none; - - > span { - ${visuallyHiddenStyle} - } } small { @@ -57,14 +49,22 @@ const Notice = ({ warningText, }) => { const dictionary = dictionaryFactory({ provider }); + const detokenisedLinkText = detokenise(linkText, dictionary); + return (

{detokenise(text, dictionary)}

- - {detokenise(linkText, dictionary)} - {linkTextSuffixVisuallyHidden && ( - {detokenise(linkTextSuffixVisuallyHidden, dictionary)} - )} + + {detokenisedLinkText} {warningText && {warningText}} 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 a5771e509e..a6e767bede 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 @@ -79,18 +79,6 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported text-decoration: none; } -.c2 a > span { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); - -webkit-clip: rect(1px,1px,1px,1px); - clip: rect(1px,1px,1px,1px); - white-space: nowrap; -} - .c2 small { margin-top: 0.5rem; font-size: 0.75rem; @@ -575,18 +563,6 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp text-decoration: none; } -.c2 a > span { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); - -webkit-clip: rect(1px,1px,1px,1px); - clip: rect(1px,1px,1px,1px); - white-space: nowrap; -} - .c2 small { margin-top: 0.5rem; font-size: 0.75rem; @@ -628,12 +604,10 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp Sorry but we're having trouble displaying this content

View content on unknown - - , external - Warning: BBC is not responsible for third party content @@ -728,18 +702,6 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res text-decoration: none; } -.c2 a > span { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); - -webkit-clip: rect(1px,1px,1px,1px); - clip: rect(1px,1px,1px,1px); - white-space: nowrap; -} - .c2 small { margin-top: 0.5rem; font-size: 0.75rem; @@ -781,12 +743,10 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res Sorry but we're having trouble displaying this content

View content on Twitter - - , external - Warning: BBC is not responsible for third party content From dcee681bb61c9ebae554fc4569fd29eb39b6adbe Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 12:54:51 +0100 Subject: [PATCH 05/15] Style Notice's visited and hover link state --- .../src/Notice/index.jsx | 10 ++++++- .../src/__snapshots__/index.test.jsx.snap | 27 +++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-social-embed/src/Notice/index.jsx b/packages/components/psammead-social-embed/src/Notice/index.jsx index bd4cda1041..78251e3ab9 100644 --- a/packages/components/psammead-social-embed/src/Notice/index.jsx +++ b/packages/components/psammead-social-embed/src/Notice/index.jsx @@ -1,7 +1,7 @@ import React, { memo } from 'react'; import { string } from 'prop-types'; import styled from 'styled-components'; -import { C_EBON, C_PEBBLE } from '@bbc/psammead-styles/colours'; +import { C_EBON, C_PEBBLE, C_METAL } from '@bbc/psammead-styles/colours'; import { getSansRegular, getSansBold } from '@bbc/psammead-styles/font-styles'; import { GEL_SPACING_DBL, GEL_SPACING } from '@bbc/gel-foundations/spacings'; import { GEL_BODY_COPY, GEL_MINION } from '@bbc/gel-foundations/typography'; @@ -31,6 +31,14 @@ const Wrapper = styled.div` a { ${({ service }) => getSansBold(service)} text-decoration: none; + + &:visited { + color: ${C_METAL}; + } + + &:hover { + text-decoration: underline; + } } small { 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 a6e767bede..32b95bcf92 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 @@ -79,6 +79,15 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported text-decoration: none; } +.c2 a:visited { + color: #6E6E73; +} + +.c2 a:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + .c2 small { margin-top: 0.5rem; font-size: 0.75rem; @@ -563,6 +572,15 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp text-decoration: none; } +.c2 a:visited { + color: #6E6E73; +} + +.c2 a:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + .c2 small { margin-top: 0.5rem; font-size: 0.75rem; @@ -702,6 +720,15 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res text-decoration: none; } +.c2 a:visited { + color: #6E6E73; +} + +.c2 a:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + .c2 small { margin-top: 0.5rem; font-size: 0.75rem; From 6f69cd97835c80729e3bee499b131f9ea8c5a86e Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Wed, 8 Apr 2020 14:32:51 +0100 Subject: [PATCH 06/15] Add Notice link focus style --- .../psammead-social-embed/src/Notice/index.jsx | 3 ++- .../src/__snapshots__/index.test.jsx.snap | 9 ++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Notice/index.jsx b/packages/components/psammead-social-embed/src/Notice/index.jsx index 78251e3ab9..5b98e7b269 100644 --- a/packages/components/psammead-social-embed/src/Notice/index.jsx +++ b/packages/components/psammead-social-embed/src/Notice/index.jsx @@ -36,7 +36,8 @@ const Wrapper = styled.div` color: ${C_METAL}; } - &:hover { + &:hover, + &:focus { text-decoration: underline; } } 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 32b95bcf92..7f10934334 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 @@ -83,7 +83,8 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported color: #6E6E73; } -.c2 a:hover { +.c2 a:hover, +.c2 a:focus { -webkit-text-decoration: underline; text-decoration: underline; } @@ -576,7 +577,8 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp color: #6E6E73; } -.c2 a:hover { +.c2 a:hover, +.c2 a:focus { -webkit-text-decoration: underline; text-decoration: underline; } @@ -724,7 +726,8 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res color: #6E6E73; } -.c2 a:hover { +.c2 a:hover, +.c2 a:focus { -webkit-text-decoration: underline; text-decoration: underline; } From 7c99f97332bc4e78ac11c0c6ed983820d313cd1b Mon Sep 17 00:00:00 2001 From: Sareh Heidari Date: Thu, 9 Apr 2020 00:38:29 +0100 Subject: [PATCH 07/15] Update Pashto locale date format for LL & LLL --- packages/utilities/psammead-locales/CHANGELOG.md | 1 + packages/utilities/psammead-locales/moment/ps.js | 4 ++++ packages/utilities/psammead-locales/moment/ps.test.js | 4 ++-- packages/utilities/psammead-locales/package-lock.json | 2 +- packages/utilities/psammead-locales/package.json | 2 +- 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/utilities/psammead-locales/CHANGELOG.md b/packages/utilities/psammead-locales/CHANGELOG.md index de3c723f5a..6df5822674 100644 --- a/packages/utilities/psammead-locales/CHANGELOG.md +++ b/packages/utilities/psammead-locales/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 4.1.6 | [PR#xxx](https://github.com/bbc/psammead/pull/xxx) Update Pashto date format for LL & LLL | | 4.1.5 | [PR#3351](https://github.com/bbc/psammead/pull/3351) Update Arabic translation for hours | | 4.1.4 | [PR#3250](https://github.com/bbc/psammead/pull/3250) Update Marathi translations | | 4.1.3 | [PR#3247](https://github.com/bbc/psammead/pull/3247) Update Serbian grammar around minutes and hours | diff --git a/packages/utilities/psammead-locales/moment/ps.js b/packages/utilities/psammead-locales/moment/ps.js index 31dbe5542a..be31229948 100644 --- a/packages/utilities/psammead-locales/moment/ps.js +++ b/packages/utilities/psammead-locales/moment/ps.js @@ -14,6 +14,10 @@ moment.defineLocale('ps', { h: '۱ ساعت', // '1 hour' hh: '%d ساعتونه', // %d 'hours' }, + longDateFormat: { + LL: 'D MMMM YYYY', + LLL: 'D MMMM YYYY HH:mm', + }, postformat: function(string) { var useEasternNumerals = numerals.makeNumeralTranslator( numerals.EasternArabic diff --git a/packages/utilities/psammead-locales/moment/ps.test.js b/packages/utilities/psammead-locales/moment/ps.test.js index 578ca7728e..e863f21d1b 100644 --- a/packages/utilities/psammead-locales/moment/ps.test.js +++ b/packages/utilities/psammead-locales/moment/ps.test.js @@ -13,8 +13,8 @@ test('format', function () { ['MMMM Do YYYY, h:mm:ss', 'فبروري ۱۴ ۲۰۱۰، ۳:۲۵:۵۰'], ['M Mo MM MMMM MMM', '۲ ۲ ۰۲ فبروري فبروري'], ['L', '۰۲/۱۴/۲۰۱۰'], - ['LL', 'فبروري ۱۴، ۲۰۱۰'], - ['LLL', 'فبروري ۱۴، ۲۰۱۰ ۳:۲۵ PM'], + ['LL', '۱۴ فبروري ۲۰۱۰'], + ['LLL', '۱۴ فبروري ۲۰۱۰ ۱۵:۲۵'], ['D MMMM YYYY', '۱۴ فبروري ۲۰۱۰'], ], b = moment(new Date(2010, 1, 14, 15, 25, 50, 125)), diff --git a/packages/utilities/psammead-locales/package-lock.json b/packages/utilities/psammead-locales/package-lock.json index 87b1a09217..664ffbd1be 100644 --- a/packages/utilities/psammead-locales/package-lock.json +++ b/packages/utilities/psammead-locales/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-locales", - "version": "4.1.5", + "version": "4.1.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/psammead-locales/package.json b/packages/utilities/psammead-locales/package.json index 189fb8dcf3..73a3e31b8a 100644 --- a/packages/utilities/psammead-locales/package.json +++ b/packages/utilities/psammead-locales/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-locales", - "version": "4.1.5", + "version": "4.1.6", "description": "A collection of locale configs, used in BBC World Service sites", "repository": { "type": "git", From 71051744e68b7220153dab6ee0187d9720001622 Mon Sep 17 00:00:00 2001 From: Sareh Date: Thu, 9 Apr 2020 09:17:25 +0100 Subject: [PATCH 08/15] Update changelog version --- packages/utilities/psammead-locales/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/psammead-locales/CHANGELOG.md b/packages/utilities/psammead-locales/CHANGELOG.md index 6df5822674..696052ba2e 100644 --- a/packages/utilities/psammead-locales/CHANGELOG.md +++ b/packages/utilities/psammead-locales/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | | ------- | ----------- | -| 4.1.6 | [PR#xxx](https://github.com/bbc/psammead/pull/xxx) Update Pashto date format for LL & LLL | +| 4.1.6 | [PR#3357](https://github.com/bbc/psammead/pull/3357) Update Pashto date format for LL & LLL | | 4.1.5 | [PR#3351](https://github.com/bbc/psammead/pull/3351) Update Arabic translation for hours | | 4.1.4 | [PR#3250](https://github.com/bbc/psammead/pull/3250) Update Marathi translations | | 4.1.3 | [PR#3247](https://github.com/bbc/psammead/pull/3247) Update Serbian grammar around minutes and hours | From f3c567315c106b49497453e8b6d410ee56a42f2e Mon Sep 17 00:00:00 2001 From: BBC News Frameworks Date: Thu, 9 Apr 2020 09:48:06 +0000 Subject: [PATCH 09/15] Talos - Bump Dependencies --- package-lock.json | 28 ++++++++-------------------- package.json | 6 +++--- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index ecb2979564..cf3c5c96e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead", - "version": "2.0.119", + "version": "2.0.120", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1208,9 +1208,9 @@ "dev": true }, "@bbc/psammead-brand": { - "version": "5.1.15", - "resolved": "https://registry.npmjs.org/@bbc/psammead-brand/-/psammead-brand-5.1.15.tgz", - "integrity": "sha512-H6KNDx/vAJ2lgGD2NzjT+4KacfIr+irhfYiEQ2/Gt2MSYGACRwRsKCbR9tWI8+sz+klkCe1NinFWrywkrVbapA==", + "version": "5.1.16", + "resolved": "https://registry.npmjs.org/@bbc/psammead-brand/-/psammead-brand-5.1.16.tgz", + "integrity": "sha512-aJ/zhH+El8j2j6ltxFh6wGi/KDF9CpPlaleEE5onsVvD+66pqRRGUt5/CiGL/vUzjEIKFZ0GbJjHfEl3J/xQZQ==", "dev": true, "requires": { "@bbc/gel-foundations": "^4.0.1", @@ -1228,29 +1228,17 @@ } }, "@bbc/psammead-bulletin": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@bbc/psammead-bulletin/-/psammead-bulletin-3.0.1.tgz", - "integrity": "sha512-g97aT4MEaBYkLE1sagi58xkUTlAArOmcS/YueOFle9jOiijsC4NVM+t18Z5PdHdG6JkMsL6/GEusmr6buQ0NOA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@bbc/psammead-bulletin/-/psammead-bulletin-3.0.2.tgz", + "integrity": "sha512-pMNx5Ta0ITz6ge6ZgD033rHdaKwZtWtsCwNpLTA0iKF7FB3qwu/cw7ubQbAfga7prywQN1MhQEtBUEWAbXgbsw==", "dev": true, "requires": { "@bbc/gel-foundations": "^4.0.1", "@bbc/psammead-assets": "^2.13.0", "@bbc/psammead-live-label": "^1.0.0", - "@bbc/psammead-story-promo": "^5.1.0", + "@bbc/psammead-story-promo": "^6.0.0", "@bbc/psammead-styles": "^4.3.0", "@bbc/psammead-visually-hidden-text": "^1.2.3" - }, - "dependencies": { - "@bbc/psammead-story-promo": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@bbc/psammead-story-promo/-/psammead-story-promo-5.1.0.tgz", - "integrity": "sha512-IUm7HDQUkQIJo2sXQtW2SvuJv27u/IswXq6lakX7FW9irlnkPOadN7kgsF1TvbygQuN4aCVt5TOWX2ZF2qhTTA==", - "dev": true, - "requires": { - "@bbc/gel-foundations": "^4.0.1", - "@bbc/psammead-styles": "^4.3.0" - } - } } }, "@bbc/psammead-byline": { diff --git a/package.json b/package.json index 3cacb26076..0e13ec0996 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead", - "version": "2.0.119", + "version": "2.0.120", "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team", "main": "index.js", "private": true, @@ -52,9 +52,9 @@ "@bbc/moment-timezone-include": "^1.1.4", "@bbc/psammead-amp-geo": "^1.1.2", "@bbc/psammead-assets": "^2.13.0", - "@bbc/psammead-brand": "^5.1.15", + "@bbc/psammead-brand": "^5.1.16", "@bbc/psammead-bulleted-list": "^1.0.7", - "@bbc/psammead-bulletin": "^3.0.1", + "@bbc/psammead-bulletin": "^3.0.2", "@bbc/psammead-byline": "^1.0.2", "@bbc/psammead-calendars": "^2.0.10", "@bbc/psammead-caption": "^2.2.26", From d047d272fcf46263c9e9e841e53294e1fe27ee17 Mon Sep 17 00:00:00 2001 From: BBC News Frameworks Date: Thu, 9 Apr 2020 09:48:14 +0000 Subject: [PATCH 10/15] Talos - Update changelogs --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ea1d7d0d4..f85a003369 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 2.0.120 | [PR#3359](https://github.com/bbc/psammead/pull/3359) Talos - Bump Dependencies - @bbc/psammead-brand, @bbc/psammead-bulletin | | 2.0.119 | [PR#3356](https://github.com/bbc/psammead/pull/3356) Talos - Bump Dependencies - @bbc/psammead-radio-schedule, @bbc/psammead-story-promo | | 2.0.118 | [PR#3354](https://github.com/bbc/psammead/pull/3354) Talos - Bump Dependencies - @bbc/psammead-calendars, @bbc/psammead-timestamp-container | | 2.0.117 | [PR#3353](https://github.com/bbc/psammead/pull/3353) Talos - Bump Dependencies - @bbc/psammead-locales | From 88379f46f8983e2240cab5751ad4a5207d31ec15 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Thu, 9 Apr 2020 11:23:02 +0100 Subject: [PATCH 11/15] Inherit default link colour --- packages/components/psammead-social-embed/src/Notice/index.jsx | 1 + .../src/__snapshots__/index.test.jsx.snap | 3 +++ 2 files changed, 4 insertions(+) diff --git a/packages/components/psammead-social-embed/src/Notice/index.jsx b/packages/components/psammead-social-embed/src/Notice/index.jsx index 5b98e7b269..77c6808ff5 100644 --- a/packages/components/psammead-social-embed/src/Notice/index.jsx +++ b/packages/components/psammead-social-embed/src/Notice/index.jsx @@ -30,6 +30,7 @@ const Wrapper = styled.div` a { ${({ service }) => getSansBold(service)} + color: inherit; text-decoration: none; &:visited { 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 7f10934334..85d4466b8c 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 @@ -75,6 +75,7 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; + color: inherit; -webkit-text-decoration: none; text-decoration: none; } @@ -569,6 +570,7 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; + color: inherit; -webkit-text-decoration: none; text-decoration: none; } @@ -718,6 +720,7 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res font-family: ReithSans,Helvetica,Arial,sans-serif; font-weight: 700; font-style: normal; + color: inherit; -webkit-text-decoration: none; text-decoration: none; } From de32ea558ff6dd5c955088b42bd2a3fdf4501edc Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Thu, 9 Apr 2020 11:42:32 +0100 Subject: [PATCH 12/15] Make use of psammead-visually-hidden-text styles --- .../src/__snapshots__/index.test.jsx.snap | 280 +++++++++--------- .../src/utilities/index.js | 14 +- 2 files changed, 147 insertions(+), 147 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 85d4466b8c..a78df5cc68 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 @@ -26,27 +26,27 @@ exports[`AmpSocialEmbed should render a notice when the provider is unsupported } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -184,27 +184,27 @@ exports[`AmpSocialEmbed should render correctly for Instagram 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } @media (min-width:20rem) and (max-width:37.4375rem) { @@ -284,27 +284,27 @@ exports[`AmpSocialEmbed should render correctly for Twitter 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } @media (min-width:20rem) and (max-width:37.4375rem) { @@ -383,27 +383,27 @@ exports[`AmpSocialEmbed should render correctly for YouTube 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c4 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -422,15 +422,15 @@ exports[`AmpSocialEmbed should render correctly for YouTube 1`] = ` } .c3 > span { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } @media (min-width:20rem) and (max-width:37.4375rem) { @@ -521,27 +521,27 @@ exports[`CanonicalSocialEmbed should render a notice when the provider is unsupp } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -671,27 +671,27 @@ exports[`CanonicalSocialEmbed should render a notice when there is no oEmbed res } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -821,27 +821,27 @@ exports[`CanonicalSocialEmbed should render correctly for Instagram 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -1104,27 +1104,27 @@ exports[`CanonicalSocialEmbed should render correctly for Twitter 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -1221,27 +1221,27 @@ exports[`CanonicalSocialEmbed should render correctly for YouTube 1`] = ` } .c1:not(:focus):not(:active) { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c5 { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c2 { @@ -1260,15 +1260,15 @@ exports[`CanonicalSocialEmbed should render correctly for YouTube 1`] = ` } .c4 > span { - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - -webkit-clip: rect(1px 1px 1px 1px); - clip: rect(1px 1px 1px 1px); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); -webkit-clip: rect(1px,1px,1px,1px); clip: rect(1px,1px,1px,1px); - white-space: nowrap; + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; + margin: 0; } .c3 { diff --git a/packages/components/psammead-social-embed/src/utilities/index.js b/packages/components/psammead-social-embed/src/utilities/index.js index 0625b42fee..209624b862 100644 --- a/packages/components/psammead-social-embed/src/utilities/index.js +++ b/packages/components/psammead-social-embed/src/utilities/index.js @@ -37,15 +37,15 @@ export const dictionaryFactory = ({ provider }) => ({ }); /** - * We require control over _when_ these styles are applied and - * therefore cannot use @bbc/psammead-visually-hidden-text. + * These styles are lifted from @bbc/psammead-visually-hidden-text, which we + * cannot use directly as we require control over _when_ they are applied. */ export const visuallyHiddenStyle = ` - position: absolute !important; + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); height: 1px; - width: 1px; overflow: hidden; - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); - white-space: nowrap; + position: absolute; + width: 1px; + margin: 0; `; From 0af9a91f48f9da226b892e44d1f9239c5c38653f Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Thu, 9 Apr 2020 11:49:53 +0100 Subject: [PATCH 13/15] Refactor detokenise() to return null --- .../psammead-social-embed/src/Notice/index.jsx | 12 ++++++------ .../psammead-social-embed/src/utilities/index.js | 9 +++------ .../src/utilities/index.test.js | 6 +++--- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/components/psammead-social-embed/src/Notice/index.jsx b/packages/components/psammead-social-embed/src/Notice/index.jsx index 77c6808ff5..48464bef17 100644 --- a/packages/components/psammead-social-embed/src/Notice/index.jsx +++ b/packages/components/psammead-social-embed/src/Notice/index.jsx @@ -59,7 +59,10 @@ const Notice = ({ warningText, }) => { const dictionary = dictionaryFactory({ provider }); - const detokenisedLinkText = detokenise(linkText, dictionary); + const [detokenisedLinkText, detokenisedLinkTextSuffix] = [ + detokenise(linkText, dictionary), + detokenise(linkTextSuffixVisuallyHidden, dictionary), + ]; return ( @@ -67,11 +70,8 @@ const Notice = ({ {detokenisedLinkText} diff --git a/packages/components/psammead-social-embed/src/utilities/index.js b/packages/components/psammead-social-embed/src/utilities/index.js index 209624b862..ee26d3480c 100644 --- a/packages/components/psammead-social-embed/src/utilities/index.js +++ b/packages/components/psammead-social-embed/src/utilities/index.js @@ -19,12 +19,9 @@ export const getProviderName = provider => { * @param {Object} dictionary An object which maps keys as tokens to values. */ export const detokenise = (text, dictionary) => { - if (typeof text !== 'string') throw Error("Expected 'text' to be a string."); - if (dictionary !== Object(dictionary)) - throw Error("Expected 'dictionary' to be an object."); - return text.replace(/%\w+%/g, match => { - return dictionary[match] || match; - }); + if (typeof text !== 'string' || dictionary !== Object(dictionary)) + return null; + return text.replace(/%\w+%/g, match => dictionary[match] || match); }; /** diff --git a/packages/components/psammead-social-embed/src/utilities/index.test.js b/packages/components/psammead-social-embed/src/utilities/index.test.js index 1c2e8ae5e7..5141ee819c 100644 --- a/packages/components/psammead-social-embed/src/utilities/index.test.js +++ b/packages/components/psammead-social-embed/src/utilities/index.test.js @@ -19,9 +19,9 @@ describe('detokenise', () => { expect(detokenise('Foo %token%', {})).toEqual('Foo %token%'); }); - it('throws given invalid arguments', () => { - expect(() => detokenise()).toThrow(); - expect(() => detokenise('Foo')).toThrow(); + it('returns null given invalid arguments', () => { + expect(detokenise()).toBeNull(); + expect(detokenise('Foo')).toBeNull(); }); }); From ea2b26928122564fa9d4690bf928c29e2f947d4f Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Thu, 9 Apr 2020 12:14:55 +0100 Subject: [PATCH 14/15] Prune render* functions in favour of JSX logic --- .../psammead-social-embed/src/index.jsx | 53 +++++++++---------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/packages/components/psammead-social-embed/src/index.jsx b/packages/components/psammead-social-embed/src/index.jsx index bb8e396c73..f20c9101d7 100644 --- a/packages/components/psammead-social-embed/src/index.jsx +++ b/packages/components/psammead-social-embed/src/index.jsx @@ -23,23 +23,22 @@ export const CanonicalSocialEmbed = ({ const isSupportedProvider = Object.keys(providers).includes(provider); const hasCaption = caption && caption.text; - const renderCanonicalContent = () => { - if (isSupportedProvider && oEmbed && hasCaption) - return ( - - - - ); - - if (isSupportedProvider && oEmbed) - return ; - - return ; - }; + if (!isSupportedProvider || !oEmbed) + return ( + + + + ); return ( - {renderCanonicalContent()} + {hasCaption ? ( + + + + ) : ( + + )} ); }; @@ -59,22 +58,22 @@ export const AmpSocialEmbed = ({ const AmpElement = AmpElements[provider]; const hasCaption = caption && caption.text; - const renderAmpContent = () => { - if (AmpElement && hasCaption) - return ( - - - - ); - - if (AmpElement) return ; - - return ; - }; + if (!AmpElement) + return ( + + + + ); return ( - {renderAmpContent()} + {hasCaption ? ( + + + + ) : ( + + )} ); }; From b1322e01c124c86880be7ebe75c1160ef2f7e451 Mon Sep 17 00:00:00 2001 From: Simon Sinclair Date: Thu, 9 Apr 2020 12:23:33 +0100 Subject: [PATCH 15/15] Remove alpha notice --- packages/components/psammead-social-embed/README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/components/psammead-social-embed/README.md b/packages/components/psammead-social-embed/README.md index 425ab7d992..090b16a043 100644 --- a/packages/components/psammead-social-embed/README.md +++ b/packages/components/psammead-social-embed/README.md @@ -1,7 +1,3 @@ -# ⛔️ This is an alpha component ⛔️ - -This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed. - # psammead-social-embed - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-social-embed%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-social-embed%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-social-embed)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-social-embed) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-social-embed)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-social-embed&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/social-embed--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-social-embed.svg)](https://www.npmjs.com/package/@bbc/psammead-social-embed) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) ## Description