resolve conflicts

BBC-archive · Jul 10, 2019 · b5af40b · b5af40b
2 parents 449b514 + ef8ea85
commit b5af40b
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 21 deletions.
diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md
@@ -3,7 +3,8 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 1.0.2   | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
+| 2.0.1   | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
+| 2.0.0 | [PR#1022](https://github.com/bbc/psammead/pull/1022) Apply font based on service prop |
 | 1.0.1  | [PR#892](https://github.com/bbc/psammead/pull/892) Bump dependencies |
 | 1.0.0 | [PR#937](https://github.com/bbc/psammead/pull/937) Remove alpha tag, swarm done |
 | 1.0.0-alpha.6   | [PR#893](https://github.com/bbc/psammead/pull/893) Fix knobs for story promo stories |

diff --git a/packages/components/psammead-story-promo/README.md b/packages/components/psammead-story-promo/README.md
@@ -24,13 +24,15 @@ The `StoryPromo` component is designed to be used on 'index' pages, which are pa
 | Argument  | Type | Required | Default | Example |
 | --------- | ---- | -------- | ------- | ------- |
 | Script    | object | yes | latin | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }|
+| service | string | yes | N/A | `'news'` |
 
 ## Summary Props
 
 <!-- prettier-ignore -->
 | Argument  | Type | Required | Default | Example |
 | --------- | ---- | -------- | ------- | ------- |
 | Script    | object | yes | latin | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }|
+| service | string | yes | N/A | `'news'` |
 
 ## Usage
 
@@ -49,10 +51,10 @@ const Image = <img src="https://foobar.com/image.jpg" />;
 
 const Info = (
   <Fragment>
-    <Headline script={latin} topStory={true}>
+    <Headline script={latin} topStory={true} service="news">
       <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
     </Headline>
-    <Summary script={latin} topStory={true}>
+    <Summary script={latin} topStory={true} service="news">
       The summary of the promo
     </Summary>
     <time>12 March 2019</time>

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": "1.0.2",
+  "version": "2.0.1",
   "main": "dist/index.js",
   "description": "A story promo for use on index pages",
   "repository": {

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
@@ -24,16 +24,19 @@ exports[`StoryPromo - Top Story should render correctly 1`] = `
   line-height: 1.5rem;
   color: #222222;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
-  font-weight: 700;
 }
 
 .c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   color: #3F3F42;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
 }
@@ -295,16 +298,19 @@ exports[`StoryPromo - Top Story with Media Indicator should render correctly 1`]
   line-height: 1.5rem;
   color: #222222;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
-  font-weight: 700;
 }
 
 .c12 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   color: #3F3F42;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
 }
@@ -553,16 +559,19 @@ exports[`StoryPromo should render correctly 1`] = `
   line-height: 1.25rem;
   color: #222222;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
-  font-weight: 700;
 }
 
 .c6 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   color: #3F3F42;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
 }
@@ -814,16 +823,19 @@ exports[`StoryPromo with Media Indicator should render correctly 1`] = `
   line-height: 1.25rem;
   color: #222222;
   font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
-  font-weight: 700;
 }
 
 .c12 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   color: #3F3F42;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
   margin: 0;
   padding-bottom: 0.5rem;
 }

diff --git a/packages/components/psammead-story-promo/src/index.jsx b/packages/components/psammead-story-promo/src/index.jsx
@@ -18,10 +18,9 @@ import {
   getGreatPrimer,
   getParagon,
   getLongPrimer,
-  GEL_FF_REITH_SERIF,
-  GEL_FF_REITH_SANS,
 } from '@bbc/gel-foundations/typography';
 import { C_EBON, C_SHADOW, C_METAL } from '@bbc/psammead-styles/colours';
+import { getSansRegular, getSerifBold } from '@bbc/psammead-styles/font-styles';
 
 const twoOfSixColumnsMaxWidthScaleable = `33.33%`;
 // (2 / 6) * 100 = 0.3333333333 = 33.33%
@@ -142,10 +141,9 @@ export const Headline = styled.h3`
   }};
 
   color: ${C_EBON};
-  font-family: ${GEL_FF_REITH_SERIF};
+  ${({ service }) => getSerifBold(service)}
   margin: 0; /* Reset */
   padding-bottom: ${GEL_SPACING};
-  font-weight: 700;
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
     ${props => (props.script ? getGreatPrimer(props.script) : '')};
   }
@@ -154,7 +152,7 @@ export const Headline = styled.h3`
 export const Summary = styled.p`
   ${props => (props.script ? getLongPrimer(props.script) : '')};
   color: ${C_SHADOW};
-  font-family: ${GEL_FF_REITH_SANS};
+  ${({ service }) => getSansRegular(service)}
   margin: 0; /* Reset */
   padding-bottom: ${GEL_SPACING};
 

diff --git a/packages/components/psammead-story-promo/src/index.stories.jsx b/packages/components/psammead-story-promo/src/index.stories.jsx
@@ -8,13 +8,19 @@ import MediaIndicator from '@bbc/psammead-media-indicator';
 import notes from '../README.md';
 import StoryPromo, { Headline, Summary, Link } from './index';
 
-// eslint-disable-next-line react/prop-types
-const InfoComponent = ({ headlineText, summaryText, script, topStory }) => (
+/* eslint-disable react/prop-types */
+const InfoComponent = ({
+  headlineText,
+  summaryText,
+  script,
+  topStory,
+  service,
+}) => (
   <Fragment>
-    <Headline script={script} topStory={topStory}>
+    <Headline script={script} topStory={topStory} service={service}>
       <Link href="https://www.bbc.co.uk/news">{headlineText}</Link>
     </Headline>
-    <Summary script={script} topStory={topStory}>
+    <Summary script={script} topStory={topStory} service={service}>
       {summaryText}
     </Summary>
     <Timestamp
@@ -49,13 +55,14 @@ const MediaIndicatorComponent = (
 const generateStory = ({ mediaIndicator, topStory }) =>
   inputProvider(
     [{ name: 'Headline' }, { name: 'Summary' }],
-    ({ slotTexts: [headlineText, summaryText], script }) => {
+    ({ slotTexts: [headlineText, summaryText], script, service }) => {
       const Info = (
         <InfoComponent
           headlineText={headlineText}
           summaryText={summaryText}
           script={script}
           topStory={topStory}
+          service={service}
         />
       );
 

diff --git a/packages/components/psammead-story-promo/src/index.test.jsx b/packages/components/psammead-story-promo/src/index.test.jsx
@@ -10,10 +10,10 @@ const Image = <img src="https://foobar.com/image.png" alt="Alt text" />;
 // eslint-disable-next-line react/prop-types
 const Info = ({ topStory }) => (
   <Fragment>
-    <Headline script={latin} topStory={topStory}>
+    <Headline script={latin} topStory={topStory} service="news">
       <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
     </Headline>
-    <Summary script={latin} topStory={topStory}>
+    <Summary script={latin} topStory={topStory} service="news">
       The summary of the promo
     </Summary>
     <time>12 March 2019</time>