Merge pull request #513 from bbc/story-promo-link

Add Link to Story Promo
BBC-archive · May 20, 2019 · bc91b2f · bc91b2f
2 parents 2a14889 + 865d523
commit bc91b2f
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 18 deletions.
diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 0.2.0-alpha.1 | [PR#513](https://github.com/bbc/psammead/pull/513) Add Link with hover, focus and visited states |
 | 0.1.4   | [PR#489](https://github.com/BBC-News/psammead/pull/489) Add grid fallback. |
 | 0.1.3   | [PR#498](https://github.com/bbc/psammead/pull/498) Update stories to use new input provider |
 | 0.1.2   | [PR#488](https://github.com/BBC-News/psammead/pull/488) Hide story summary on device width lower than 600px. |

diff --git a/packages/components/psammead-story-promo/README.md b/packages/components/psammead-story-promo/README.md
@@ -1,3 +1,7 @@
+# ⛔️ 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-story-promo - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-story-promo%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-story-promo%2Fpackage.json) [![Storybook](https://raw.githubusercontent.com/storybooks/story-promo/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/story-promo--default) [![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-story-promo.svg)](https://www.npmjs.com/package/@bbc/psammead-story-promo) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
 
 ## Description
@@ -33,7 +37,7 @@ The typical use-case of this component is as displayed below. A Image sits on th
 
 ```jsx
 import React, { Fragment } from 'react';
-import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo';
+import StoryPromo, { Headline, Summary, Link } from '@bbc/psammead-story-promo';
 import { latin } from '@bbc/gel-foundations/scripts';
 
 const Image = (
@@ -42,7 +46,9 @@ const Image = (
 
 const Info = (
   <Fragment>
-    <Headline script={latin}>The headline of the promo</Headline>
+    <Headline script={latin}>      
+      <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
+    </Headline>
     <Summary script={latin}>The summary of the promo</Summary>
     <time>12 March 2019</time>
   </Fragment>
@@ -62,7 +68,11 @@ The `StoryPromo` component is designed to be used within a link element to allow
 
 ### Accessibility notes
 
-This component uses full semantic markup for the `Headline` and `Summary`, using `h3` and `p` respectively. Other accessibility factors such as image alt text and time elements are passed in as props and aren't explicitly set in this component.
+This component uses full semantic markup for the `Headline`, `Summary`, and `Link`, using `h3`, `p` and `a` respectively. Other accessibility factors such as image alt text and time elements are passed in as props and aren't explicitly set in this component. 
+
+The link is nested inside the `h3` for better support with VoiceOver Mac and Safari. We use the `faux block link` pattern which makes the entire block clickable, whilst also enabling links nested within in that block to also be clickable.
+
+We haven't yet thoroughly looked at cross device browser AT testing yet, this is in-progress. We will update with a11y notes when carrying out a proper release.
 
 ## Roadmap
 

diff --git a/packages/components/psammead-story-promo/package-lock.json b/packages/components/psammead-story-promo/package-lock.json
diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo",
-  "version": "0.1.4",
+  "version": "0.2.0-alpha.1",
   "main": "dist/index.js",
   "description": "A story promo for use on index pages",
   "repository": {
@@ -37,5 +37,8 @@
     "bbc",
     "story",
     "promo"
-  ]
+  ],
+  "publishConfig": {
+    "tag": "alpha"
+  }
 }
diff --git a/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StoryPromo should render correctly 1`] = `
+.c0 {
+  position: relative;
+}
+
 .c1 {
   display: inline-block;
   vertical-align: top;
@@ -24,7 +28,7 @@ exports[`StoryPromo should render correctly 1`] = `
   font-weight: 700;
 }
 
-.c4 {
+.c5 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   color: #3F3F42;
@@ -33,6 +37,31 @@ exports[`StoryPromo should render correctly 1`] = `
   padding-bottom: 0.5rem;
 }
 
+.c4 {
+  position: static;
+  color: #3F3F42;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:before {
+  bottom: 0;
+  content: '';
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.c4:hover,
+.c4:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 @supports (display:grid) {
   .c0 {
     display: grid;
@@ -91,21 +120,21 @@ exports[`StoryPromo should render correctly 1`] = `
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c4 {
+  .c5 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c4 {
+  .c5 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c4 {
+  .c5 {
     display: none;
   }
 }
@@ -127,10 +156,15 @@ exports[`StoryPromo should render correctly 1`] = `
     <h3
       className="c3"
     >
-      The headline of the promo
+      <a
+        className="c4"
+        href="https://www.bbc.co.uk/news"
+      >
+        The headline of the promo
+      </a>
     </h3>
     <p
-      className="c4"
+      className="c5"
     >
       The summary of the promo
     </p>

diff --git a/packages/components/psammead-story-promo/src/index.jsx b/packages/components/psammead-story-promo/src/index.jsx
@@ -18,7 +18,7 @@ import {
   GEL_FF_REITH_SERIF,
   GEL_FF_REITH_SANS,
 } from '@bbc/gel-foundations/typography';
-import { C_SHADOW } from '@bbc/psammead-styles/colours';
+import { C_SHADOW, C_METAL } from '@bbc/psammead-styles/colours';
 
 const twoOfSixColumnsMaxWidthScaleable = `33.33%`;
 // (2 / 6) * 100 = 0.3333333333 = 33.33%
@@ -33,6 +33,8 @@ const eightOfTwelveColumnsMaxScaleable = `66.67%`;
 // (8 / 12) * 100 = 66.6666666667 = 66.67%
 
 const StoryPromoWrapper = styled.div`
+  position: relative;
+
   @supports (display: grid) {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
@@ -114,6 +116,33 @@ export const Summary = styled.p`
   }
 `;
 
+export const Link = styled.a`
+  position: static;
+  color: ${C_SHADOW};
+  text-decoration: none;
+
+  &:before {
+    bottom: 0;
+    content: '';
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    white-space: nowrap;
+    z-index: 1;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: ${C_METAL};
+  }
+`;
+
 const StoryPromo = ({ image, info }) => (
   <StoryPromoWrapper>
     <ImageGridItem>{image}</ImageGridItem>

diff --git a/packages/components/psammead-story-promo/src/index.stories.jsx b/packages/components/psammead-story-promo/src/index.stories.jsx
@@ -5,11 +5,11 @@ import { inputProvider } from '@bbc/psammead-storybook-helpers';
 import Image from '@bbc/psammead-image';
 import Timestamp from '@bbc/psammead-timestamp';
 import notes from '../README.md';
-import StoryPromo, { Headline, Summary } from './index';
+import StoryPromo, { Headline, Summary, Link } from './index';
 
 const ImageComponent = (
   <Image
-    alt={text('Image alt text', '2019-03-01T14:00+00:00')}
+    alt={text('Image alt text', 'Robert Downey Junior in Iron Man')}
     src={text(
       'Image src',
       'https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg',
@@ -21,7 +21,9 @@ const ImageComponent = (
 // eslint-disable-next-line react/prop-types
 const InfoComponent = ({ headlineText, summaryText, script }) => (
   <Fragment>
-    <Headline script={script}>{headlineText}</Headline>
+    <Headline script={script}>
+      <Link href="https://www.bbc.co.uk/news">{headlineText}</Link>
+    </Headline>
     <Summary script={script}>{summaryText}</Summary>
     <Timestamp
       datetime={text('Timestamp datetime', '2019-03-01T14:00+00:00')}

diff --git a/packages/components/psammead-story-promo/src/index.test.jsx b/packages/components/psammead-story-promo/src/index.test.jsx
@@ -1,13 +1,15 @@
 import React, { Fragment } from 'react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import { latin } from '@bbc/gel-foundations/scripts';
-import StoryPromo, { Headline, Summary } from './index';
+import StoryPromo, { Headline, Summary, Link } from './index';
 
 const Image = <img src="https://foobar.com/image.png" alt="Alt text" />;
 
 const Info = (
   <Fragment>
-    <Headline script={latin}>The headline of the promo</Headline>
+    <Headline script={latin}>
+      <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
+    </Headline>
     <Summary script={latin}>The summary of the promo</Summary>
     <time>12 March 2019</time>
   </Fragment>