diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md index a2fb523d41..698683c6d4 100644 --- a/packages/components/psammead-story-promo/CHANGELOG.md +++ b/packages/components/psammead-story-promo/CHANGELOG.md @@ -3,6 +3,7 @@ | 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 | diff --git a/packages/components/psammead-story-promo/package-lock.json b/packages/components/psammead-story-promo/package-lock.json index 69cb090fca..f4da38bbc5 100644 --- a/packages/components/psammead-story-promo/package-lock.json +++ b/packages/components/psammead-story-promo/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-story-promo", - "version": "2.7.2", + "version": "2.7.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json index 3952bffb9a..9fe8c3ea4a 100644 --- 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": "2.7.2", + "version": "2.7.3", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, 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 index ae53f93d5d..e30c3aa85c 100644 --- a/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; @@ -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; } } @@ -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; @@ -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; } } @@ -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; @@ -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; } } diff --git a/packages/components/psammead-story-promo/src/index.jsx b/packages/components/psammead-story-promo/src/index.jsx index 32a684ec3f..982519cc5e 100644 --- a/packages/components/psammead-story-promo/src/index.jsx +++ b/packages/components/psammead-story-promo/src/index.jsx @@ -17,6 +17,7 @@ import { } from '@bbc/gel-foundations/breakpoints'; import { getPica, + getGreatPrimer, getParagon, getLongPrimer, } from '@bbc/gel-foundations/typography'; @@ -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))} } `;