From 54efb8dd3f6977492344e8dbe8b9596c431ed8c1 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Fri, 31 May 2019 16:56:08 +0200 Subject: [PATCH 01/11] WIP reith font fixes --- .../psammead-inline-link/package-lock.json | 2 +- .../psammead-inline-link/src/index.jsx | 21 ++++++++++--------- .../psammead-sitewide-links/package-lock.json | 2 +- .../src/Link/index.jsx | 2 +- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/components/psammead-inline-link/package-lock.json b/packages/components/psammead-inline-link/package-lock.json index 1f2de07529..bcd2239b8b 100644 --- a/packages/components/psammead-inline-link/package-lock.json +++ b/packages/components/psammead-inline-link/package-lock.json @@ -61,7 +61,7 @@ "dev": true, "requires": { "jest-styled-components": "^6.3.1", - "react-test-renderer": "^16.8.6" + "react-test-renderer": "^16.6.3" } }, "@emotion/is-prop-valid": { diff --git a/packages/components/psammead-inline-link/src/index.jsx b/packages/components/psammead-inline-link/src/index.jsx index 84113d35fb..df1eaf77d1 100644 --- a/packages/components/psammead-inline-link/src/index.jsx +++ b/packages/components/psammead-inline-link/src/index.jsx @@ -1,9 +1,14 @@ import styled from 'styled-components'; -import { C_EBON, C_POSTBOX, C_CLOUD_DARK } from '@bbc/psammead-styles/colours'; +import { C_POSTBOX, C_CLOUD_DARK, C_WHITE } from '@bbc/psammead-styles/colours'; const InlineLink = styled.a` - color: ${C_EBON}; - border-bottom: 1px solid ${C_POSTBOX}; + color: ${C_POSTBOX}; + // border-bottom: 1px solid ${C_POSTBOX}; + // padding-bottom: 1px; + white-space: pre-wrap; // needed so words on the end of sentences, especially italics, don't cut off background-color + padding: 0 2px 2px; + margin: 0 -2px; // offset the padding so there is no additional spacing + box-shadow: inset 0 -1px 0 ${C_POSTBOX}; text-decoration: none; &:visited { @@ -11,14 +16,10 @@ const InlineLink = styled.a` border-bottom: 1px solid ${C_CLOUD_DARK}; } - &:focus { - color: ${C_POSTBOX}; - border-bottom: 2px solid ${C_POSTBOX}; - } - + &:focus, &:hover { - color: ${C_POSTBOX}; - border-bottom: 2px solid ${C_POSTBOX}; + color: ${C_WHITE}; + background-color: ${C_POSTBOX}; } `; diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json index 258fd5164f..8ca38528e6 100644 --- a/packages/components/psammead-sitewide-links/package-lock.json +++ b/packages/components/psammead-sitewide-links/package-lock.json @@ -68,7 +68,7 @@ "dev": true, "requires": { "jest-styled-components": "^6.3.1", - "react-test-renderer": "^16.8.6" + "react-test-renderer": "^16.6.3" } }, "@emotion/is-prop-valid": { diff --git a/packages/components/psammead-sitewide-links/src/Link/index.jsx b/packages/components/psammead-sitewide-links/src/Link/index.jsx index 0d7d7ae8cd..1f3f23c61a 100644 --- a/packages/components/psammead-sitewide-links/src/Link/index.jsx +++ b/packages/components/psammead-sitewide-links/src/Link/index.jsx @@ -15,7 +15,7 @@ const StyledLink = styled.a` const StyleLinkText = styled.span` ${/* sc-selector */ StyledLink}:hover &, ${/* sc-selector */ StyledLink}:focus & { - padding-bottom: 2px; + padding-bottom: 1px; border-bottom: 2px solid ${C_WHITE}; } `; From ca3cd4dabf9278fda647878e30219750eb737ab7 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Sat, 1 Jun 2019 17:11:55 +0200 Subject: [PATCH 02/11] testing things --- .../components/psammead-inline-link/src/index.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-inline-link/src/index.jsx b/packages/components/psammead-inline-link/src/index.jsx index df1eaf77d1..a38547f184 100644 --- a/packages/components/psammead-inline-link/src/index.jsx +++ b/packages/components/psammead-inline-link/src/index.jsx @@ -3,12 +3,10 @@ import { C_POSTBOX, C_CLOUD_DARK, C_WHITE } from '@bbc/psammead-styles/colours'; const InlineLink = styled.a` color: ${C_POSTBOX}; - // border-bottom: 1px solid ${C_POSTBOX}; - // padding-bottom: 1px; + border-bottom: 1px solid ${C_POSTBOX}; white-space: pre-wrap; // needed so words on the end of sentences, especially italics, don't cut off background-color - padding: 0 2px 2px; - margin: 0 -2px; // offset the padding so there is no additional spacing - box-shadow: inset 0 -1px 0 ${C_POSTBOX}; + padding: 0 2px 1px; // increases highlight start and end of the link plus increases click error + margin: 0 -2px -1px; // offset the padding so there is no additional spacing between words text-decoration: none; &:visited { @@ -20,6 +18,10 @@ const InlineLink = styled.a` &:hover { color: ${C_WHITE}; background-color: ${C_POSTBOX}; + border-bottom: 0; // could remove this and the visual experience would feel less jumpy, currently the eye notices a bounce IMO + @supports (transition) { + transition: all 1s ease; // speak with Natalie as the direct swap in colour and background is gross. maybe change designs + } } `; From 786c393b75ca279b1183fb9c35c3766386d39db4 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Tue, 11 Jun 2019 12:22:07 +0100 Subject: [PATCH 03/11] CSS tweaks --- .../components/psammead-inline-link/src/index.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/components/psammead-inline-link/src/index.jsx b/packages/components/psammead-inline-link/src/index.jsx index a38547f184..4aef6c8319 100644 --- a/packages/components/psammead-inline-link/src/index.jsx +++ b/packages/components/psammead-inline-link/src/index.jsx @@ -4,9 +4,6 @@ import { C_POSTBOX, C_CLOUD_DARK, C_WHITE } from '@bbc/psammead-styles/colours'; const InlineLink = styled.a` color: ${C_POSTBOX}; border-bottom: 1px solid ${C_POSTBOX}; - white-space: pre-wrap; // needed so words on the end of sentences, especially italics, don't cut off background-color - padding: 0 2px 1px; // increases highlight start and end of the link plus increases click error - margin: 0 -2px -1px; // offset the padding so there is no additional spacing between words text-decoration: none; &:visited { @@ -16,12 +13,10 @@ const InlineLink = styled.a` &:focus, &:hover { - color: ${C_WHITE}; background-color: ${C_POSTBOX}; - border-bottom: 0; // could remove this and the visual experience would feel less jumpy, currently the eye notices a bounce IMO - @supports (transition) { - transition: all 1s ease; // speak with Natalie as the direct swap in colour and background is gross. maybe change designs - } + border-bottom: 1px solid ${C_POSTBOX}; + color: ${C_WHITE}; + white-space: pre-wrap; } `; From ce8231d10fbf625c9b179e941d2b20c53a4ddae7 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Tue, 25 Jun 2019 14:11:38 +0100 Subject: [PATCH 04/11] increase border padding on hover for High contrast modes --- packages/components/psammead-inline-link/src/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-inline-link/src/index.jsx b/packages/components/psammead-inline-link/src/index.jsx index 4aef6c8319..ee6d055d19 100644 --- a/packages/components/psammead-inline-link/src/index.jsx +++ b/packages/components/psammead-inline-link/src/index.jsx @@ -14,7 +14,7 @@ const InlineLink = styled.a` &:focus, &:hover { background-color: ${C_POSTBOX}; - border-bottom: 1px solid ${C_POSTBOX}; + border-bottom: 2px solid ${C_POSTBOX}; color: ${C_WHITE}; white-space: pre-wrap; } From c2aa138536d88410d4339490fd7b9c2a3da6248a Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Tue, 25 Jun 2019 14:29:40 +0100 Subject: [PATCH 05/11] snapshot updates --- .../src/__snapshots__/index.test.jsx.snap | 12 +++++------- .../src/Link/__snapshots__/index.test.jsx.snap | 4 ++-- .../src/List/__snapshots__/index.test.jsx.snap | 4 ++-- .../src/__snapshots__/index.test.jsx.snap | 2 +- 4 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap index 164a38d6ed..7c91900dc3 100644 --- a/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap @@ -2,7 +2,7 @@ exports[`InlineLink should render correctly 1`] = ` .c0 { - color: #222222; + color: #B80000; border-bottom: 1px solid #B80000; -webkit-text-decoration: none; text-decoration: none; @@ -13,14 +13,12 @@ exports[`InlineLink should render correctly 1`] = ` border-bottom: 1px solid #757575; } -.c0:focus { - color: #B80000; - border-bottom: 2px solid #B80000; -} - +.c0:focus, .c0:hover { - color: #B80000; + background-color: #B80000; border-bottom: 2px solid #B80000; + color: #FFFFFF; + white-space: pre-wrap; } Date: Tue, 25 Jun 2019 15:08:40 +0100 Subject: [PATCH 06/11] site wide links will change elsewhere --- packages/components/psammead-sitewide-links/package-lock.json | 2 +- .../src/Link/__snapshots__/index.test.jsx.snap | 4 ++-- .../components/psammead-sitewide-links/src/Link/index.jsx | 2 +- .../src/List/__snapshots__/index.test.jsx.snap | 4 ++-- .../src/__snapshots__/index.test.jsx.snap | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json index ed47d74299..73df4191f7 100644 --- a/packages/components/psammead-sitewide-links/package-lock.json +++ b/packages/components/psammead-sitewide-links/package-lock.json @@ -68,7 +68,7 @@ "dev": true, "requires": { "jest-styled-components": "^6.3.1", - "react-test-renderer": "^16.6.3" + "react-test-renderer": "^16.8.6" } }, "@emotion/is-prop-valid": { diff --git a/packages/components/psammead-sitewide-links/src/Link/__snapshots__/index.test.jsx.snap b/packages/components/psammead-sitewide-links/src/Link/__snapshots__/index.test.jsx.snap index 20452a2c99..a6ee6d514a 100644 --- a/packages/components/psammead-sitewide-links/src/Link/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-sitewide-links/src/Link/__snapshots__/index.test.jsx.snap @@ -12,7 +12,7 @@ exports[`Link should render a standard block link 1`] = ` .c0:hover .c2, .c0:focus .c2 { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } @@ -40,7 +40,7 @@ exports[`Link should render an inline link after passing an inline prop 1`] = ` .c0:hover .c2, .c0:focus .c2 { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } diff --git a/packages/components/psammead-sitewide-links/src/Link/index.jsx b/packages/components/psammead-sitewide-links/src/Link/index.jsx index 1f3f23c61a..0d7d7ae8cd 100644 --- a/packages/components/psammead-sitewide-links/src/Link/index.jsx +++ b/packages/components/psammead-sitewide-links/src/Link/index.jsx @@ -15,7 +15,7 @@ const StyledLink = styled.a` const StyleLinkText = styled.span` ${/* sc-selector */ StyledLink}:hover &, ${/* sc-selector */ StyledLink}:focus & { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid ${C_WHITE}; } `; diff --git a/packages/components/psammead-sitewide-links/src/List/__snapshots__/index.test.jsx.snap b/packages/components/psammead-sitewide-links/src/List/__snapshots__/index.test.jsx.snap index 00d3090972..0677b5d197 100644 --- a/packages/components/psammead-sitewide-links/src/List/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-sitewide-links/src/List/__snapshots__/index.test.jsx.snap @@ -12,7 +12,7 @@ exports[`List should render correctly with 7 items 1`] = ` .c2:hover .c4, .c2:focus .c4 { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } @@ -210,7 +210,7 @@ exports[`List should render correctly with 8 items 1`] = ` .c2:hover .c4, .c2:focus .c4 { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } diff --git a/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap index dfb52a58c3..b5032f8f4c 100644 --- a/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-sitewide-links/src/__snapshots__/index.test.jsx.snap @@ -21,7 +21,7 @@ exports[`SitewideLinks should render correctly 1`] = ` .c4:hover .c6, .c4:focus .c6 { - padding-bottom: 1px; + padding-bottom: 2px; border-bottom: 2px solid #FFFFFF; } From 247ad8685a321829dc5d1fb97bd4eadf2291ccab Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Tue, 25 Jun 2019 17:06:45 +0100 Subject: [PATCH 07/11] padding and minus margin buffer --- .../psammead-inline-link/src/__snapshots__/index.test.jsx.snap | 2 ++ packages/components/psammead-inline-link/src/index.jsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap index 7c91900dc3..22875ea2e9 100644 --- a/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-inline-link/src/__snapshots__/index.test.jsx.snap @@ -18,6 +18,8 @@ exports[`InlineLink should render correctly 1`] = ` background-color: #B80000; border-bottom: 2px solid #B80000; color: #FFFFFF; + margin: 0 -2px; + padding: 0 2px; white-space: pre-wrap; } diff --git a/packages/components/psammead-inline-link/src/index.jsx b/packages/components/psammead-inline-link/src/index.jsx index ee6d055d19..de0dfdabeb 100644 --- a/packages/components/psammead-inline-link/src/index.jsx +++ b/packages/components/psammead-inline-link/src/index.jsx @@ -16,6 +16,8 @@ const InlineLink = styled.a` background-color: ${C_POSTBOX}; border-bottom: 2px solid ${C_POSTBOX}; color: ${C_WHITE}; + margin: 0 -2px; + padding: 0 2px; white-space: pre-wrap; } `; From 5c7b510fdc09f2d2bdc3f36337f9b9546f4ea846 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Fri, 28 Jun 2019 16:54:18 +0100 Subject: [PATCH 08/11] changelog, package bump, psammead-styles bump --- packages/components/psammead-inline-link/CHANGELOG.md | 1 + .../components/psammead-inline-link/package-lock.json | 8 ++++---- packages/components/psammead-inline-link/package.json | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-inline-link/CHANGELOG.md b/packages/components/psammead-inline-link/CHANGELOG.md index 4599aa9c3b..d0a7dbc20a 100644 --- a/packages/components/psammead-inline-link/CHANGELOG.md +++ b/packages/components/psammead-inline-link/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 1.1.0 | [PR#719](https://github.com/bbc/psammead/pull/719) Updates the link styling to new UX designs | | 1.0.0 | [PR#679](https://github.com/bbc/psammead/pull/679) Bump version number | | 0.3.8 | [PR#498](https://github.com/bbc/psammead/pull/498) Update stories to use new input provider | | 0.3.7 | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme | diff --git a/packages/components/psammead-inline-link/package-lock.json b/packages/components/psammead-inline-link/package-lock.json index b14e4587a0..a9e17e636f 100644 --- a/packages/components/psammead-inline-link/package-lock.json +++ b/packages/components/psammead-inline-link/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-inline-link", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -50,9 +50,9 @@ } }, "@bbc/psammead-styles": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.2.1.tgz", - "integrity": "sha512-FYKtW0MrCBJqbcQ7lRJ3jJPL0O9u/D8WSAcb6GTw4gMuQ011FxA1aThwLJa4LjgIBDVj4pfAbDR0CC9XmzsuXA==" + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-1.0.0.tgz", + "integrity": "sha512-4xPQJ0IXpG9FIXvwkzkygKE9GrzHh5/DiwSCCClJlIQVSjqFMSlyz2gEsz+/l+hLCvxa729AED88Ye6Iommhsw==" }, "@bbc/psammead-test-helpers": { "version": "0.3.1", diff --git a/packages/components/psammead-inline-link/package.json b/packages/components/psammead-inline-link/package.json index c5a55b4db4..4ea5a032ef 100644 --- a/packages/components/psammead-inline-link/package.json +++ b/packages/components/psammead-inline-link/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-inline-link", - "version": "1.0.0", + "version": "1.1.0", "description": "React styled component for an Inline Link", "main": "dist/index.js", "repository": { @@ -23,7 +23,7 @@ }, "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-inline-link/README.md", "dependencies": { - "@bbc/psammead-styles": "^0.2.1" + "@bbc/psammead-styles": "^1.0.0" }, "devDependencies": { "@bbc/psammead-storybook-helpers": "^2.0.0", From f5493622bedf8c835501066c640876546f152456 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Fri, 28 Jun 2019 17:08:09 +0100 Subject: [PATCH 09/11] add note to inline-link story --- .../psammead-inline-link/src/index.stories.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-inline-link/src/index.stories.jsx b/packages/components/psammead-inline-link/src/index.stories.jsx index 09bc39ab2a..31935b67d0 100644 --- a/packages/components/psammead-inline-link/src/index.stories.jsx +++ b/packages/components/psammead-inline-link/src/index.stories.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { storiesOf } from '@storybook/react'; import { withKnobs } from '@storybook/addon-knobs'; import { inputProvider } from '@bbc/psammead-storybook-helpers'; @@ -10,7 +10,15 @@ storiesOf('Components|InlineLink', module) .add( 'default', inputProvider([{ name: 'Link text' }], ([linkText]) => ( - {linkText} + + {linkText} +
+
+ Please note this component does not have its own typography styling + (font-size and line-height) as it is expected to be used within another + component such as paragraph or caption. For a more realistic storybook + example of this component see the Paragraph and Caption stories + )), { notes, knobs: { escapeHTML: false } }, ); From e2f4d788b0ec7f24c4a0a7e0cc82a275f2542579 Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Fri, 28 Jun 2019 17:25:48 +0100 Subject: [PATCH 10/11] add note about border state change for high-contrast modes --- packages/components/psammead-inline-link/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-inline-link/README.md b/packages/components/psammead-inline-link/README.md index 17b18336eb..7d8dbd68a5 100644 --- a/packages/components/psammead-inline-link/README.md +++ b/packages/components/psammead-inline-link/README.md @@ -79,7 +79,7 @@ This component can be used at any point on a page. Since this is just a `` tag with associated styles, when you use this component, it has the same semantic meaning as a regular anchor element. -The font and background-color choices for each hover/focused/visited/default states meet WCAG AA colour contrast guidelines. +The font and background-color choices for each hover/focused/visited/default states meet WCAG AA colour contrast guidelines. Also the border width increases on hover and focus which acts as a visible change that is not colour dependent for high-contrast modes, which often override colours/styles. ## Contributing From c908bfff5ed4c2a1d8428d0eb7d997594f116f3c Mon Sep 17 00:00:00 2001 From: Phil Lee Date: Mon, 1 Jul 2019 18:38:26 +0100 Subject: [PATCH 11/11] add link to issue for story update --- packages/components/psammead-inline-link/src/index.stories.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/psammead-inline-link/src/index.stories.jsx b/packages/components/psammead-inline-link/src/index.stories.jsx index 31935b67d0..f28577eca4 100644 --- a/packages/components/psammead-inline-link/src/index.stories.jsx +++ b/packages/components/psammead-inline-link/src/index.stories.jsx @@ -17,7 +17,8 @@ storiesOf('Components|InlineLink', module) Please note this component does not have its own typography styling (font-size and line-height) as it is expected to be used within another component such as paragraph or caption. For a more realistic storybook - example of this component see the Paragraph and Caption stories + example of this component see the Paragraph and Caption stories - this + should be removed in https://github.com/bbc/psammead/issues/733 )), { notes, knobs: { escapeHTML: false } },