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

Commit

Permalink
Merge pull request #1930 from bbc/fix-font-size
Browse files Browse the repository at this point in the history 
Fix headline font-size in standard story-promo
  • Loading branch information
sadickisaac authored Aug 30, 2019
2 parents 677feab + 4b3623b commit a391cec
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 137 deletions.
1 change: 1 addition & 0 deletions packages/components/psammead-story-promo/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 2.7.3 | [PR#1930](https://github.com/bbc/psammead/pull/1930) Fix headline font-size in standard story promo |
| 2.7.2 | [PR#1938](https://github.com/bbc/psammead/pull/1938) Consistent use of destructuring props |
| 2.7.1 | [PR#1931](https://github.com/bbc/psammead/pull/1931) Talos - Bump Dependencies |
| 2.7.0 | [PR#1835](https://github.com/bbc/psammead/pull/1835) Add desktop width top story and show indexAlsos |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package-lock.json
View file

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
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
"version": "2.7.2",
"version": "2.7.3",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
140 changes: 14 additions & 126 deletions packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,11 @@ exports[`StoryPromo - Top Story should render correctly 1`] = `
}
.c4 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -104,20 +102,6 @@ exports[`StoryPromo - Top Story should render correctly 1`] = `
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1.375rem;
Expand Down Expand Up @@ -289,13 +273,11 @@ exports[`StoryPromo - Top Story should render with Media Indicator correctly 1`]
}
.c9 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -382,20 +364,6 @@ exports[`StoryPromo - Top Story should render with Media Indicator correctly 1`]
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c9 {
font-size: 1.375rem;
Expand Down Expand Up @@ -578,13 +546,11 @@ exports[`StoryPromo - Top Story should render with multiple Index Alsos correctl
}
.c4 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -711,20 +677,6 @@ exports[`StoryPromo - Top Story should render with multiple Index Alsos correctl
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1.375rem;
Expand Down Expand Up @@ -967,13 +919,11 @@ exports[`StoryPromo - Top Story should render with one Index Also correctly 1`]
}
.c4 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -1094,20 +1044,6 @@ exports[`StoryPromo - Top Story should render with one Index Also correctly 1`]
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1.375rem;
Expand Down Expand Up @@ -1320,8 +1256,6 @@ exports[`StoryPromo should render Live promo correctly 1`] = `
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -1419,24 +1353,10 @@ exports[`StoryPromo should render Live promo correctly 1`] = `
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1.25rem;
line-height: 1.5rem;
font-size: 1.125rem;
line-height: 1.375rem;
}
}
Expand Down Expand Up @@ -1561,8 +1481,6 @@ exports[`StoryPromo should render correctly 1`] = `
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -1651,24 +1569,10 @@ exports[`StoryPromo should render correctly 1`] = `
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 1.25rem;
line-height: 1.5rem;
font-size: 1.125rem;
line-height: 1.375rem;
}
}
Expand Down Expand Up @@ -1815,8 +1719,6 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
Expand Down Expand Up @@ -1919,24 +1821,10 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c9 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:37.5rem) {
.c9 {
font-size: 1.25rem;
line-height: 1.5rem;
font-size: 1.125rem;
line-height: 1.375rem;
}
}
Expand Down
14 changes: 5 additions & 9 deletions packages/components/psammead-story-promo/src/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from '@bbc/gel-foundations/breakpoints';
import {
getPica,
getGreatPrimer,
getParagon,
getLongPrimer,
} from '@bbc/gel-foundations/typography';
Expand Down Expand Up @@ -139,21 +140,16 @@ const InlineMediaIndicator = styled.div`
`;

export const Headline = styled.h3`
${({ script }) => script && getPica(script)};
${({ script, topStory }) =>
script && (topStory ? getParagon(script) : getPica(script))}
${({ service }) => getSerifMedium(service)}
${({ script, topStory }) => {
if (!script) {
return '';
}
return topStory ? getParagon(script) : getPica(script);
}}
color: ${C_EBON};
margin: 0; /* Reset */
padding-bottom: ${GEL_SPACING};
@media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
${({ script }) => script && getParagon(script)};
${({ script, topStory }) =>
script && (topStory ? getParagon(script) : getGreatPrimer(script))}
}
`;

Expand Down

0 comments on commit a391cec

Please sign in to comment.