New inline link styling

packages/components/psammead-inline-link/CHANGELOG.md

@@ -3,6 +3,7 @@
 <! -- prettier-ignore -->
 | 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 |

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 `<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
 

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",

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,14 @@ 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;
+  margin: 0 -2px;
+  padding: 0 2px;
+  white-space: pre-wrap;
 }
 
 <a

packages/components/psammead-inline-link/src/index.jsx

@@ -1,8 +1,8 @@
 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};
+  color: ${C_POSTBOX};
   border-bottom: 1px solid ${C_POSTBOX};
   text-decoration: none;
 
@@ -11,14 +11,14 @@ 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};
+    background-color: ${C_POSTBOX};
     border-bottom: 2px solid ${C_POSTBOX};
+    color: ${C_WHITE};
+    margin: 0 -2px;
+    padding: 0 2px;
+    white-space: pre-wrap;
   }
 `;
 

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,16 @@ storiesOf('Components|InlineLink', module)
   .add(
     'default',
     inputProvider([{ name: 'Link text' }], ([linkText]) => (
-      <InlineLink href="https://www.bbc.com/news">{linkText}</InlineLink>
+      <Fragment>
+        <InlineLink href="https://www.bbc.com/news">{linkText}</InlineLink>
+        <br />
+        <br />
+        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 - this
+        should be removed in https://github.com/bbc/psammead/issues/733
+      </Fragment>
     )),
     { notes, knobs: { escapeHTML: false } },
   );