Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Add Link to Story Promo #513

Merged
merged 19 commits into from
May 20, 2019
Merged

Add Link to Story Promo #513

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
1b4078b
Add Link to story promo
DenisHdz May 10, 2019
6b87cbd
Update PR number
DenisHdz May 10, 2019
57d6d14
Merge branch 'latest' into story-promo-link
May 10, 2019
8625ffa
Merge branch 'latest' into story-promo-link
andrew-nowak May 13, 2019
c2b5164
Merge conflicts and bump version
DenisHdz May 13, 2019
c738aa5
Add position relative to Promo Wrapper
DenisHdz May 13, 2019
b016187
Update snapshot
DenisHdz May 13, 2019
5e6c781
Merge branch 'latest' of github.com:bbc/psammead into story-promo-link
DenisHdz May 13, 2019
a72ac25
Merge branch 'story-promo-link' of github.com:bbc/psammead into story…
DenisHdz May 13, 2019
69f61f3
Update Accessibility notes
DenisHdz May 13, 2019
329ec82
Change image alt text
DenisHdz May 13, 2019
dc3578b
Add visited stated
DenisHdz May 13, 2019
9019659
Merge branch 'latest' of github.com:bbc/psammead into story-promo-link
DenisHdz May 14, 2019
895835e
Add alpha tag
DenisHdz May 14, 2019
7560021
Merge branch 'latest' into story-promo-link
May 15, 2019
eb193cd
Bump to the right version
DenisHdz May 16, 2019
2ce09b6
Merge branch 'story-promo-link' of github.com:bbc/psammead into story…
DenisHdz May 16, 2019
b03504b
Merge branch 'latest' of github.com:bbc/psammead into story-promo-link
DenisHdz May 16, 2019
865d523
Merge branch 'latest' into story-promo-link
May 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-story-promo/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 0.1.4 | [PR#513](https://github.com/bbc/psammead/pull/513) Add Link with hover and focus states |
| 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. |
| 0.1.1 | [PR#474](https://github.com/BBC-News/psammead/pull/474) Update Story promo headline to use Great Primer. |
Expand Down
10 changes: 7 additions & 3 deletions packages/components/psammead-story-promo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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 = (
Expand All @@ -42,7 +42,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>
Expand All @@ -62,7 +64,9 @@ 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 a better support. We use the `faux block link` pattern which allows to make an entire block a link, whilst having links nested within in that block also clickable.
DenisHdz marked this conversation as resolved.
Show resolved Hide resolved

## Roadmap

Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
"version": "0.1.3",
"version": "0.1.4",
"main": "dist/index.js",
"description": "A story promo for use on index pages",
"repository": {
Expand Down
43 changes: 37 additions & 6 deletions packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`StoryPromo should render correctly 1`] = `
.c0 {
position: relative;
display: grid;
grid-template-columns: repeat(6,1fr);
grid-column-gap: 0.5rem;
Expand All @@ -25,7 +26,7 @@ exports[`StoryPromo should render correctly 1`] = `
font-weight: 700;
}

.c4 {
.c5 {
font-size: 0.9375rem;
line-height: 1.125rem;
color: #3F3F42;
Expand All @@ -34,6 +35,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;
}

@media (min-width:37.5rem) {
.c0 {
grid-column-gap: 1rem;
Expand Down Expand Up @@ -73,21 +99,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;
}
}
Expand All @@ -109,10 +135,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>
Expand Down
24 changes: 24 additions & 0 deletions packages/components/psammead-story-promo/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { C_SHADOW } from '@bbc/psammead-styles/colours';

const StoryPromoWrapper = styled.div`
position: relative;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the reason this is needed for?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh is it part of faux block link?

Copy link
Contributor Author

@DenisHdz DenisHdz May 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is used to make the faux block link pattern work. If you don't apply it the clickable area is everything and not just the StoryPromoWrapper.

display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: ${GEL_GUTTER_BELOW_600PX};
Expand Down Expand Up @@ -69,6 +70,29 @@ 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;
DenisHdz marked this conversation as resolved.
Show resolved Hide resolved
}
`;

const StoryPromo = ({ image, info }) => (
<StoryPromoWrapper>
<ImageGridItem>{image}</ImageGridItem>
Expand Down
6 changes: 4 additions & 2 deletions packages/components/psammead-story-promo/src/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ 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
Expand All @@ -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')}
Expand Down
6 changes: 4 additions & 2 deletions packages/components/psammead-story-promo/src/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down