Apply font based on service: Paragraph

packages/components/psammead-paragraph/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.0.0 | [PR#941](https://github.com/bbc/psammead/pull/941) Apply font based on service prop |
 | 1.0.9 | [PR#783](https://github.com/bbc/psammead/pull/783) Update to latest psammead-test-helpers. Update snapshots. |
 | 1.0.8   | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` |
 | 1.0.7   | [PR#746](https://github.com/bbc/psammead/pull/746) Use `@bbc/psammead-inline-link@1.1.1` and add a 'with inline link' story |

packages/components/psammead-paragraph/README.md

@@ -12,18 +12,23 @@ It uses `@bbc/psammead-styles` for colours and font family and `@bbc/gel-foundat
 
 ## 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
 
 ```jsx
 import Paragraph from '@bbc/psammead-paragraph';
 import { latin } from '@bbc/gel-foundations/scripts';
 
-const WrappingComponent = () => <Paragraph script={latin}>Text here</Paragraph>;
+const WrappingComponent = () => (
+  <Paragraph script={latin} service="news">
+    Text here
+  </Paragraph>
+);
 ```
 
 ### When to use this component

packages/components/psammead-paragraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-paragraph",
-  "version": "1.0.9",
+  "version": "2.0.0",
   "description": "React styled component for a Paragraph",
   "main": "dist/index.js",
   "repository": {
@@ -23,10 +23,10 @@
   "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-paragraph/README.md",
   "dependencies": {
     "@bbc/gel-foundations": "^3.0.0",
-    "@bbc/psammead-styles": "^0.3.2"
+    "@bbc/psammead-styles": "^1.1.0"
   },
   "devDependencies": {
-    "@bbc/psammead-storybook-helpers": "^3.0.0",
+    "@bbc/psammead-storybook-helpers": "^3.1.0",
     "@bbc/psammead-inline-link": "1.1.1",
     "@bbc/psammead-test-helpers": "^1.0.1",
     "react": "^16.8.6",

packages/components/psammead-paragraph/src/__snapshots__/index.test.jsx.snap

@@ -6,6 +6,8 @@ exports[`Paragraph should render a correctly 1`] = `
   line-height: 1.25rem;
   color: #3F3F42;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
   padding-bottom: 1.5rem;
   margin: 0;
 }
@@ -36,7 +38,9 @@ exports[`Paragraph should render correctly with arabic script typography values
   font-size: 1.125rem;
   line-height: 1.75rem;
   color: #3F3F42;
-  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-family: NassimPersian,Arial,Verdana,Geneva,Helvetica,sans serif;
+  font-weight: 400;
+  font-style: normal;
   padding-bottom: 1.5rem;
   margin: 0;
 }

packages/components/psammead-paragraph/src/index.jsx

@@ -1,23 +1,22 @@
 import styled from 'styled-components';
-import { shape } from 'prop-types';
+import { shape, string } from 'prop-types';
 import { C_SHADOW } from '@bbc/psammead-styles/colours';
 import { GEL_SPACING_TRPL } from '@bbc/gel-foundations/spacings';
-import {
-  getBodyCopy,
-  GEL_FF_REITH_SANS,
-} from '@bbc/gel-foundations/typography';
+import { getBodyCopy } from '@bbc/gel-foundations/typography';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
+import { getSansRegular } from '@bbc/psammead-styles/font-styles';
 
 const Paragraph = styled.p`
   ${props => (props.script ? getBodyCopy(props.script) : '')};
   color: ${C_SHADOW};
-  font-family: ${GEL_FF_REITH_SANS};
+  ${({ service }) => getSansRegular(service)}
   padding-bottom: ${GEL_SPACING_TRPL};
   margin: 0; /* Reset */
 `;
 
 Paragraph.propTypes = {
   script: shape(scriptPropType).isRequired,
+  service: string.isRequired,
 };
 
 export default Paragraph;

packages/components/psammead-paragraph/src/index.stories.jsx

@@ -12,8 +12,10 @@ storiesOf('Components|Paragraph', module)
     'default',
     inputProvider(
       [{ name: 'Paragraph' }],
-      ({ slotTexts: [paragraph], script }) => (
-        <Paragraph script={script}>{paragraph}</Paragraph>
+      ({ slotTexts: [paragraph], script, service }) => (
+        <Paragraph script={script} service={service}>
+          {paragraph}
+        </Paragraph>
       ),
     ),
     { notes, knobs: { escapeHTML: false } },
@@ -22,8 +24,8 @@ storiesOf('Components|Paragraph', module)
     'containing an inline link',
     inputProvider(
       [{ name: 'Paragraph' }, { name: 'Inline link' }],
-      ({ slotTexts: [paragraph, linkText], script }) => (
-        <Paragraph script={script}>
+      ({ slotTexts: [paragraph, linkText], script, service }) => (
+        <Paragraph script={script} service={service}>
           {`${paragraph} `}
           <InlineLink href="https://www.bbc.com">{linkText}</InlineLink>
           {` ${paragraph}`}

packages/components/psammead-paragraph/src/index.test.jsx

@@ -6,11 +6,15 @@ import Paragraph from './index';
 describe('Paragraph', () => {
   shouldMatchSnapshot(
     'should render a correctly',
-    <Paragraph script={latin}>This is text in a paragraph.</Paragraph>,
+    <Paragraph script={latin} service="news">
+      This is text in a paragraph.
+    </Paragraph>,
   );
 
   shouldMatchSnapshot(
     'should render correctly with arabic script typography values',
-    <Paragraph script={arabic}>بعض محتوى النص</Paragraph>,
+    <Paragraph script={arabic} service="persian">
+      بعض محتوى النص
+    </Paragraph>,
   );
 });