From 2685400c9f150dfc0c8c1b219a281821b68273a2 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Mon, 25 Nov 2019 10:58:17 +0000 Subject: [PATCH 1/7] Fix script link position --- .../components/psammead-brand/CHANGELOG.md | 69 ++++++++++--------- .../psammead-brand/package-lock.json | 2 +- .../components/psammead-brand/package.json | 2 +- .../components/psammead-brand/src/index.jsx | 7 ++ .../psammead-brand/src/index.stories.jsx | 13 +++- 5 files changed, 56 insertions(+), 37 deletions(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index d2f411c00b..513bbd5e9b 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | | ------- | ----------- | +| 5.1.0-alpha.6 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Fix skip to content link position | | 5.1.0-alpha.5 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component for all breakpoints | | 5.1.0-alpha.4 | [PR#2564](https://github.com/bbc/psammead/pull/2564) Add skip to content link | | 5.1.0-alpha.3 | [PR#2539](https://github.com/bbc/psammead/pull/2539) Fix overlapping between `ScriptLink` and `Brand` | @@ -30,44 +31,44 @@ | 4.3.1 | [PR#1803](https://github.com/bbc/psammead/pull/1803/) Patches broken links on badges in documentation | | 4.3.0 | [PR#1794](https://github.com/bbc/psammead/pull/1794) Add david dependency badges | | 4.2.6 | [PR#1734](https://github.com/bbc/psammead/pull/1734) Talos - Bump Dependencies | -| 4.2.5 | [PR#1685](https://github.com/bbc/psammead/pull/1685) Bump dependencies | +| 4.2.5 | [PR#1685](https://github.com/bbc/psammead/pull/1685) Bump dependencies | | 4.2.4 | [PR#1682](https://github.com/bbc/psammead/pull/1682) Move all dev dependencies to top level package.json | -| 4.2.3 | [PR#1599](https://github.com/bbc/psammead/pull/1599) Bump dependencies | +| 4.2.3 | [PR#1599](https://github.com/bbc/psammead/pull/1599) Bump dependencies | | 4.2.2 | [PR#1518](https://github.com/bbc/psammead/pull/1518) Clear unit test warnings | | 4.2.1 | [PR#1365](https://github.com/bbc/psammead/pull/1365) Bump psammead-styles to 1.2.0 | | 4.2.0 | [PR#1233](https://github.com/bbc/psammead/pull/1233) Add ESM modules entry | | 4.1.12 | [PR#1181](https://github.com/bbc/psammead/pull/1181) Bump dependencies | | 4.1.11 | [PR#1082](https://github.com/bbc/psammead/pull/1082) Bump lodash security vulnerability | -| 4.1.10 | [PR#1038](https://github.com/bbc/psammead/pull/1038) Bump dependencies | -| 4.1.9 | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies | +| 4.1.10 | [PR#1038](https://github.com/bbc/psammead/pull/1038) Bump dependencies | +| 4.1.9 | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies | | 4.1.8 | [PR#783](https://github.com/bbc/psammead/pull/783) Update to latest psammead-test-helpers. Update snapshots. | -| 4.1.7 | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand colour in Firefox high contrast mode | -| 4.1.6 | [PR#789](https://github.com/bbc/psammead/pull/789) Use rem for the `BrandSvg` height | -| 4.1.5 | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` | -| 4.1.4 | [PR#747](https://github.com/bbc/psammead/pull/747) Add text role to avoid link fragmented on ios voiceover | -| 4.1.3 | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 | -| 4.1.2 | [PR#684](https://github.com/bbc/psammead/pull/684) Update brand spacing breakpoint to kick in at 25rem | -| 4.1.1 | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` | -| 4.1.0 | [PR#647](https://github.com/bbc/psammead/pull/647) Add transparent borders with borderTop and borderBottom props | -| 4.0.2 | [PR#649](https://github.com/bbc/psammead/pull/649) Update brand to have a max-width of 80rem | -| 4.0.1 | [PR#642](https://github.com/bbc/psammead/pull/642) Add product and serviceLocalisedName knobs on storybook | -| 4.0.0 | [PR#609](https://github.com/bbc/psammead/pull/609) Add lang attribute to brand component | -| 3.0.0 | [PR#528](https://github.com/bbc/psammead/pull/528) Add link prop to allow dynamic link | -| 2.0.0 | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. | -| 1.0.2 | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator | -| 1.0.1 | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided | -| 1.0.0 | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs | -| 0.3.4 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme | -| 0.3.3 | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly | -| 0.3.2 | [PR#398](https://github.com/bbc/psammead/pull/398) Update dependencies. Using `rem` for media queries. | -| 0.3.1 | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url | -| 0.3.0 | [PR#338](https://github.com/BBC/psammead/pull/338) Limit banner svg to group 5 | -| 0.2.3 | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge | -| 0.2.2 | [PR#264](https://github.com/BBC/psammead/pull/319) Resolving package-lock issues. | -| 0.2.1 | [PR#264](https://github.com/BBC/psammead/pull/264) Resolving package-lock issues. | -| 0.2.0 | [PR#253](https://github.com/BBC-News/psammead/pull/253) Add support for high contrast mode and print | -| 0.1.4 | [PR#245](https://github.com/BBC-News/psammead/pull/245) Ensures documentation consistent across component packages. | -| 0.1.3 | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README | -| 0.1.2 | [PR#227](https://github.com/BBC-News/psammead/pull/227) Replace @bbc/gel-constants and @bbc/gel-foundations-styled-component with [@bbc/gel-foundations in Psammead](https://github.com/BBC-News/psammead/issues/226). | -| 0.1.1 | [PR#202](https://github.com/BBC-News/psammead/pull/202) Fixes a styling bug caused by an [incorrect constant import](https://github.com/BBC-News/psammead/issues/201). | -| 0.1.0 | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). | +| 4.1.7 | [PR#787](https://github.com/bbc/psammead/pull/787) Fix brand colour in Firefox high contrast mode | +| 4.1.6 | [PR#789](https://github.com/bbc/psammead/pull/789) Use rem for the `BrandSvg` height | +| 4.1.5 | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` | +| 4.1.4 | [PR#747](https://github.com/bbc/psammead/pull/747) Add text role to avoid link fragmented on ios voiceover | +| 4.1.3 | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 | +| 4.1.2 | [PR#684](https://github.com/bbc/psammead/pull/684) Update brand spacing breakpoint to kick in at 25rem | +| 4.1.1 | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` | +| 4.1.0 | [PR#647](https://github.com/bbc/psammead/pull/647) Add transparent borders with borderTop and borderBottom props | +| 4.0.2 | [PR#649](https://github.com/bbc/psammead/pull/649) Update brand to have a max-width of 80rem | +| 4.0.1 | [PR#642](https://github.com/bbc/psammead/pull/642) Add product and serviceLocalisedName knobs on storybook | +| 4.0.0 | [PR#609](https://github.com/bbc/psammead/pull/609) Add lang attribute to brand component | +| 3.0.0 | [PR#528](https://github.com/bbc/psammead/pull/528) Add link prop to allow dynamic link | +| 2.0.0 | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. | +| 1.0.2 | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator | +| 1.0.1 | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided | +| 1.0.0 | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs | +| 0.3.4 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme | +| 0.3.3 | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly | +| 0.3.2 | [PR#398](https://github.com/bbc/psammead/pull/398) Update dependencies. Using `rem` for media queries. | +| 0.3.1 | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url | +| 0.3.0 | [PR#338](https://github.com/BBC/psammead/pull/338) Limit banner svg to group 5 | +| 0.2.3 | [PR#323](https://github.com/BBC/psammead/pull/323) Update readme storybook badge | +| 0.2.2 | [PR#264](https://github.com/BBC/psammead/pull/319) Resolving package-lock issues. | +| 0.2.1 | [PR#264](https://github.com/BBC/psammead/pull/264) Resolving package-lock issues. | +| 0.2.0 | [PR#253](https://github.com/BBC-News/psammead/pull/253) Add support for high contrast mode and print | +| 0.1.4 | [PR#245](https://github.com/BBC-News/psammead/pull/245) Ensures documentation consistent across component packages. | +| 0.1.3 | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README | +| 0.1.2 | [PR#227](https://github.com/BBC-News/psammead/pull/227) Replace @bbc/gel-constants and @bbc/gel-foundations-styled-component with [@bbc/gel-foundations in Psammead](https://github.com/BBC-News/psammead/issues/226). | +| 0.1.1 | [PR#202](https://github.com/BBC-News/psammead/pull/202) Fixes a styling bug caused by an [incorrect constant import](https://github.com/BBC-News/psammead/issues/201). | +| 0.1.0 | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). | diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index e66c505f0c..f7ae10f595 100644 --- a/packages/components/psammead-brand/package-lock.json +++ b/packages/components/psammead-brand/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-brand", - "version": "5.1.0-alpha.5", + "version": "5.1.0-alpha.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index cd2dbd74ae..68b7e67efd 100644 --- a/packages/components/psammead-brand/package.json +++ b/packages/components/psammead-brand/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-brand", - "version": "5.1.0-alpha.5", + "version": "5.1.0-alpha.6", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index f16a1ade7d..f50fbd35ae 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -5,6 +5,7 @@ import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { GEL_GROUP_0_SCREEN_WIDTH_MAX, GEL_GROUP_2_SCREEN_WIDTH_MIN, + GEL_GROUP_2_SCREEN_WIDTH_MAX, GEL_GROUP_3_SCREEN_WIDTH_MIN, GEL_GROUP_5_SCREEN_WIDTH_MIN, } from '@bbc/gel-foundations/breakpoints'; @@ -145,6 +146,12 @@ export const SkipLink = styled.a` clip: auto; height: auto; width: auto; + top: ${GEL_SPACING}; + left: 0; + } + + @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { + padding: ${GEL_SPACING}; } `; diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 6c7da59d37..0479c73ca8 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -165,8 +165,18 @@ storiesOf(STORY_KIND, module) { notes }, ) .add( - 'with skip to content link', + 'with skip to content link and script link', ({ service, script }) => { + const scriptLink = ( + + Lat + + ); + const { productInput, serviceLocalisedNameInput, @@ -200,6 +210,7 @@ storiesOf(STORY_KIND, module) backgroundColour={backgroundColour} logoColour={logoColour} skipLink={skipLink} + scriptLink={scriptLink} /> ); }, From 2ae40bdcaf74fe5c3fd455f515a415faac0e4e63 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Mon, 25 Nov 2019 11:05:17 +0000 Subject: [PATCH 2/7] Update PR number --- packages/components/psammead-brand/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index 513bbd5e9b..19fc763697 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | | ------- | ----------- | -| 5.1.0-alpha.6 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Fix skip to content link position | +| 5.1.0-alpha.6 | [PR#2680](https://github.com/bbc/psammead/pull/2680) Fix `SkipLink` position | | 5.1.0-alpha.5 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component for all breakpoints | | 5.1.0-alpha.4 | [PR#2564](https://github.com/bbc/psammead/pull/2564) Add skip to content link | | 5.1.0-alpha.3 | [PR#2539](https://github.com/bbc/psammead/pull/2539) Fix overlapping between `ScriptLink` and `Brand` | From d1f928d34ece5c99bd11a87fa5e6af6f4957ca68 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Mon, 25 Nov 2019 16:17:16 +0000 Subject: [PATCH 3/7] Bump psammead-script-link devDependency --- packages/components/psammead-brand/package-lock.json | 10 +++++----- packages/components/psammead-brand/package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json index f7ae10f595..8cb7cddc01 100644 --- a/packages/components/psammead-brand/package-lock.json +++ b/packages/components/psammead-brand/package-lock.json @@ -10,13 +10,13 @@ "integrity": "sha512-twwL0UcFrvq9w3O92PvkJRo+wThLqWLrxgFxxn8kwR1pni1wS6lhr3IwUPym4juS2hlTy/5C0/QiycB05IQhLg==" }, "@bbc/psammead-script-link": { - "version": "1.0.0-alpha.4", - "resolved": "https://registry.npmjs.org/@bbc/psammead-script-link/-/psammead-script-link-1.0.0-alpha.4.tgz", - "integrity": "sha512-mJ/q2x0/KZHTAmE/PxZYF9AxwC32ucOKr7urOsW6Tp5jWdsgGYaR4/4rJoLovwc8v5XbKDLfM/t87G9RMUUM8w==", + "version": "1.0.0-alpha.9", + "resolved": "https://registry.npmjs.org/@bbc/psammead-script-link/-/psammead-script-link-1.0.0-alpha.9.tgz", + "integrity": "sha512-D6tHR2iDW/Rm4jJDZFdbY62w2C3nfw8mfpsDODmmkVUPCnBBFuvWVhsSYyU94b/DoZtq2nAPQtTxXuCTBJi3gA==", "dev": true, "requires": { - "@bbc/gel-foundations": "^3.4.0", - "@bbc/psammead-styles": "^4.0.3" + "@bbc/gel-foundations": "^3.4.1", + "@bbc/psammead-styles": "^4.1.0" } }, "@bbc/psammead-styles": { diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json index 68b7e67efd..7bd84a5417 100644 --- a/packages/components/psammead-brand/package.json +++ b/packages/components/psammead-brand/package.json @@ -23,7 +23,7 @@ "@bbc/psammead-visually-hidden-text": "^1.2.3" }, "devDependencies": { - "@bbc/psammead-script-link": "^1.0.0-alpha.4", + "@bbc/psammead-script-link": "^1.0.0-alpha.9", "@bbc/psammead-styles": "^4.1.0" }, "peerDependencies": { From 0a8737a8a817df8c39179a81de74aebb5085cf19 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Mon, 25 Nov 2019 16:17:42 +0000 Subject: [PATCH 4/7] Export Script Link from separated folder and add rtl support --- .../components/psammead-brand/CHANGELOG.md | 2 +- packages/components/psammead-brand/README.md | 7 ++- .../psammead-brand/skip-link/package.json | 7 +++ .../psammead-brand/src/SkipLink/index.jsx | 51 +++++++++++++++++++ .../components/psammead-brand/src/index.jsx | 37 -------------- .../psammead-brand/src/index.stories.jsx | 6 ++- 6 files changed, 69 insertions(+), 41 deletions(-) create mode 100644 packages/components/psammead-brand/skip-link/package.json create mode 100644 packages/components/psammead-brand/src/SkipLink/index.jsx diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md index 19fc763697..93c4a5ffca 100644 --- a/packages/components/psammead-brand/CHANGELOG.md +++ b/packages/components/psammead-brand/CHANGELOG.md @@ -3,7 +3,7 @@ | Version | Description | | ------- | ----------- | -| 5.1.0-alpha.6 | [PR#2680](https://github.com/bbc/psammead/pull/2680) Fix `SkipLink` position | +| 5.1.0-alpha.6 | [PR#2680](https://github.com/bbc/psammead/pull/2680) Export `SkipLink` from a separated folder and fix its position | | 5.1.0-alpha.5 | [PR#2569](https://github.com/bbc/psammead/pull/2569) Reduce height of Brand Component for all breakpoints | | 5.1.0-alpha.4 | [PR#2564](https://github.com/bbc/psammead/pull/2564) Add skip to content link | | 5.1.0-alpha.3 | [PR#2539](https://github.com/bbc/psammead/pull/2539) Fix overlapping between `ScriptLink` and `Brand` | diff --git a/packages/components/psammead-brand/README.md b/packages/components/psammead-brand/README.md index 7ba6962e09..053137c8ec 100644 --- a/packages/components/psammead-brand/README.md +++ b/packages/components/psammead-brand/README.md @@ -26,6 +26,10 @@ The `url` value is the link that points to the frontpage of the service associat The `scriptLink` can be used to render [ScriptLink](https://github.com/bbc/psammead/tree/latest/packages/components/psammead-script-link) component which is a link to the service variant. +## Exports + +`/skip-link` - Use the skip link component to help keyboard-only users skip to the main content on the page. + ## Installation `npm install @bbc/psammead-brand` @@ -58,7 +62,8 @@ When using `Brand` in the header, you should ensure that `borderBottom` prop is `ScriptLink` component should be passed to `scriptLink` only when linking to a service variant. ```jsx -import Brand, { SkipLink } from '@bbc/psammead-brand'; +import Brand from '@bbc/psammead-brand'; +import SkipLink from '@bbc/psammead-brand/skip-link'; import { igbo } from '@bbc/psammead-assets/svgs'; import ScriptLink from '@bbc/psammead-script-link'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; diff --git a/packages/components/psammead-brand/skip-link/package.json b/packages/components/psammead-brand/skip-link/package.json new file mode 100644 index 0000000000..ee8d762678 --- /dev/null +++ b/packages/components/psammead-brand/skip-link/package.json @@ -0,0 +1,7 @@ +{ + "name": "@bbc/psammead-brand/skip-link", + "private": true, + "main": "../dist/SkipLink", + "module": "../esm/SkipLink", + "sideEffects": false +} diff --git a/packages/components/psammead-brand/src/SkipLink/index.jsx b/packages/components/psammead-brand/src/SkipLink/index.jsx new file mode 100644 index 0000000000..a47af64dbd --- /dev/null +++ b/packages/components/psammead-brand/src/SkipLink/index.jsx @@ -0,0 +1,51 @@ +import styled, { css } from 'styled-components'; +import { oneOf } from 'prop-types'; +import { GEL_GROUP_2_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints'; +import { GEL_SPACING } from '@bbc/gel-foundations/spacings'; +import { getPica } from '@bbc/gel-foundations/typography'; +import { getSansRegular } from '@bbc/psammead-styles/font-styles'; + +const SKIP_LINK_COLOR = '#333'; +const SKIP_LINK_BORDER = '0.1875rem'; // 3px +const TOP_BOTTOM_SPACING = '0.75rem'; // 12px + +const SkipLink = styled.a` + position: absolute; + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + width: 1px; + overflow: hidden; + padding: ${TOP_BOTTOM_SPACING} ${GEL_SPACING}; + background-color: #ffffff; + border: ${SKIP_LINK_BORDER} solid #000; + color: ${SKIP_LINK_COLOR}; + text-decoration: none; + ${({ script }) => script && getPica(script)}; + ${({ service }) => service && getSansRegular(service)} + + &:focus { + clip-path: none; + clip: auto; + height: auto; + width: auto; + top: ${GEL_SPACING}; + ${({ dir }) => css` + &::after { + ${dir === 'ltr' ? 'left' : 'right'}: 0; + } + `} + } + + @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { + padding: ${GEL_SPACING}; + } +`; + +SkipLink.propTypes = { + dir: oneOf(['ltr', 'rtl']), +}; + +SkipLink.defaultProps = { dir: 'ltr' }; + +export default SkipLink; diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx index f50fbd35ae..f7996c7d44 100644 --- a/packages/components/psammead-brand/src/index.jsx +++ b/packages/components/psammead-brand/src/index.jsx @@ -5,7 +5,6 @@ import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; import { GEL_GROUP_0_SCREEN_WIDTH_MAX, GEL_GROUP_2_SCREEN_WIDTH_MIN, - GEL_GROUP_2_SCREEN_WIDTH_MAX, GEL_GROUP_3_SCREEN_WIDTH_MIN, GEL_GROUP_5_SCREEN_WIDTH_MIN, } from '@bbc/gel-foundations/breakpoints'; @@ -14,8 +13,6 @@ import { GEL_SPACING, GEL_SPACING_DBL, } from '@bbc/gel-foundations/spacings'; -import { getPica } from '@bbc/gel-foundations/typography'; -import { getSansRegular } from '@bbc/psammead-styles/font-styles'; const SVG_TOP_OFFSET_BELOW_400PX = '0.625rem'; // 10px const SVG_BOTTOM_OFFSET_BELOW_400PX = '0.375rem'; // 6px @@ -121,40 +118,6 @@ const BrandSvg = styled.svg` /* stylelint-enable */ `; -/* Skip to content */ -const SKIP_LINK_COLOR = '#333'; -const SKIP_LINK_BORDER = '0.1875rem'; // 3px -const TOP_BOTTOM_SPACING = '0.75rem'; // 12px - -export const SkipLink = styled.a` - position: absolute; - clip-path: inset(100%); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - width: 1px; - overflow: hidden; - padding: ${TOP_BOTTOM_SPACING} ${GEL_SPACING}; - background-color: #ffffff; - border: ${SKIP_LINK_BORDER} solid #000; - color: ${SKIP_LINK_COLOR}; - text-decoration: none; - ${({ script }) => script && getPica(script)}; - ${({ service }) => service && getSansRegular(service)} - - &:focus { - clip-path: none; - clip: auto; - height: auto; - width: auto; - top: ${GEL_SPACING}; - left: 0; - } - - @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) { - padding: ${GEL_SPACING}; - } -`; - const LocalisedBrandName = ({ product, serviceLocalisedName }) => serviceLocalisedName ? ( // eslint-disable-next-line jsx-a11y/aria-role diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 0479c73ca8..506f4bc272 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -15,8 +15,9 @@ import { buildRTLSubstories, } from '@bbc/psammead-storybook-helpers'; import ScriptLink from '@bbc/psammead-script-link'; +import Brand from './index'; +import SkipLink from './SkipLink'; import notes from '../README.md'; -import Brand, { SkipLink } from './index'; const STORY_KIND = 'Components|Brand'; const inputs = (service = 'news') => { @@ -188,10 +189,11 @@ storiesOf(STORY_KIND, module) borderTop, backgroundColour, logoColour, + dir, } = inputs(); const skipLink = ( - + Skip to content ); From 00d90bb8222f71aba4587aa9b260a9d26fcb3f8d Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 26 Nov 2019 09:42:29 +0000 Subject: [PATCH 5/7] Update SkipLink path in test --- packages/components/psammead-brand/src/index.test.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx index 0b9ab88504..9df691019f 100644 --- a/packages/components/psammead-brand/src/index.test.jsx +++ b/packages/components/psammead-brand/src/index.test.jsx @@ -4,7 +4,8 @@ import { render } from '@testing-library/react'; import { C_POSTBOX, C_WHITE } from '@bbc/psammead-styles/colours'; import ScriptLink from '@bbc/psammead-script-link'; import { latin } from '@bbc/gel-foundations/scripts'; -import Brand, { SkipLink } from '.'; +import Brand from '.'; +import SkipLink from './SkipLink'; const svg = { group: ( From f92ecd23c6c52b0417618f8d446aab73ed78b441 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 26 Nov 2019 10:18:58 +0000 Subject: [PATCH 6/7] Apply right direction --- packages/components/psammead-brand/src/SkipLink/index.jsx | 4 +--- packages/components/psammead-brand/src/index.stories.jsx | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-brand/src/SkipLink/index.jsx b/packages/components/psammead-brand/src/SkipLink/index.jsx index a47af64dbd..32bee8c162 100644 --- a/packages/components/psammead-brand/src/SkipLink/index.jsx +++ b/packages/components/psammead-brand/src/SkipLink/index.jsx @@ -31,9 +31,7 @@ const SkipLink = styled.a` width: auto; top: ${GEL_SPACING}; ${({ dir }) => css` - &::after { - ${dir === 'ltr' ? 'left' : 'right'}: 0; - } + ${dir === 'ltr' ? 'left' : 'right'}: 0; `} } diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx index 506f4bc272..afd61579d8 100644 --- a/packages/components/psammead-brand/src/index.stories.jsx +++ b/packages/components/psammead-brand/src/index.stories.jsx @@ -167,7 +167,7 @@ storiesOf(STORY_KIND, module) ) .add( 'with skip to content link and script link', - ({ service, script }) => { + ({ service, script, dir }) => { const scriptLink = ( Date: Tue, 26 Nov 2019 12:05:02 +0000 Subject: [PATCH 7/7] Add semicolon and WHITE --- packages/components/psammead-brand/src/SkipLink/index.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-brand/src/SkipLink/index.jsx b/packages/components/psammead-brand/src/SkipLink/index.jsx index 32bee8c162..eb5fb37b99 100644 --- a/packages/components/psammead-brand/src/SkipLink/index.jsx +++ b/packages/components/psammead-brand/src/SkipLink/index.jsx @@ -1,5 +1,6 @@ import styled, { css } from 'styled-components'; import { oneOf } from 'prop-types'; +import { C_WHITE } from '@bbc/psammead-styles/colours'; import { GEL_GROUP_2_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints'; import { GEL_SPACING } from '@bbc/gel-foundations/spacings'; import { getPica } from '@bbc/gel-foundations/typography'; @@ -17,12 +18,12 @@ const SkipLink = styled.a` width: 1px; overflow: hidden; padding: ${TOP_BOTTOM_SPACING} ${GEL_SPACING}; - background-color: #ffffff; + background-color: ${C_WHITE}; border: ${SKIP_LINK_BORDER} solid #000; color: ${SKIP_LINK_COLOR}; text-decoration: none; ${({ script }) => script && getPica(script)}; - ${({ service }) => service && getSansRegular(service)} + ${({ service }) => service && getSansRegular(service)}; &:focus { clip-path: none;