diff --git a/packages/components/psammead-paragraph/CHANGELOG.md b/packages/components/psammead-paragraph/CHANGELOG.md index 18c1a7180c..5d86ab0026 100644 --- a/packages/components/psammead-paragraph/CHANGELOG.md +++ b/packages/components/psammead-paragraph/CHANGELOG.md @@ -3,6 +3,7 @@ | 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 | diff --git a/packages/components/psammead-paragraph/README.md b/packages/components/psammead-paragraph/README.md index 7865522b27..fde0c8dfe2 100644 --- a/packages/components/psammead-paragraph/README.md +++ b/packages/components/psammead-paragraph/README.md @@ -12,10 +12,11 @@ It uses `@bbc/psammead-styles` for colours and font family and `@bbc/gel-foundat ## Props + | 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 @@ -23,7 +24,11 @@ It uses `@bbc/psammead-styles` for colours and font family and `@bbc/gel-foundat import Paragraph from '@bbc/psammead-paragraph'; import { latin } from '@bbc/gel-foundations/scripts'; -const WrappingComponent = () => Text here; +const WrappingComponent = () => ( + + Text here + +); ``` ### When to use this component diff --git a/packages/components/psammead-paragraph/package-lock.json b/packages/components/psammead-paragraph/package-lock.json index 5be408c42d..33304efd94 100644 --- a/packages/components/psammead-paragraph/package-lock.json +++ b/packages/components/psammead-paragraph/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-paragraph", - "version": "1.0.9", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -170,9 +170,9 @@ } }, "@bbc/psammead-styles": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.2.tgz", - "integrity": "sha512-KRAcWam7ztRX0wLww+HIJa9Cif1m1kJ8hrHJn5/ftnwoya8ucSzL1PZQaG8w4OV2XkkyzN6Mv6v1guWhVJ/n/g==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-1.1.2.tgz", + "integrity": "sha512-bEHPHnQwpIQHMOVNATDVEFweOAEtlwU8g7cwwTi2QspNntmq9mTPlXGTqZT1EaFczTwgS8cnQaP/zoXN4F4z6A==" }, "@bbc/psammead-test-helpers": { "version": "1.0.1", diff --git a/packages/components/psammead-paragraph/package.json b/packages/components/psammead-paragraph/package.json index a6f73f883a..aae6325990 100644 --- a/packages/components/psammead-paragraph/package.json +++ b/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", diff --git a/packages/components/psammead-paragraph/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-paragraph/src/__snapshots__/index.test.jsx.snap index c555d738bd..38bc6d28ac 100644 --- a/packages/components/psammead-paragraph/src/__snapshots__/index.test.jsx.snap +++ b/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; } diff --git a/packages/components/psammead-paragraph/src/index.jsx b/packages/components/psammead-paragraph/src/index.jsx index f5458e41fc..8e1d0d89d4 100644 --- a/packages/components/psammead-paragraph/src/index.jsx +++ b/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; diff --git a/packages/components/psammead-paragraph/src/index.stories.jsx b/packages/components/psammead-paragraph/src/index.stories.jsx index 2daf193eb6..2ae63f71ab 100644 --- a/packages/components/psammead-paragraph/src/index.stories.jsx +++ b/packages/components/psammead-paragraph/src/index.stories.jsx @@ -12,8 +12,10 @@ storiesOf('Components|Paragraph', module) 'default', inputProvider( [{ name: 'Paragraph' }], - ({ slotTexts: [paragraph], script }) => ( - {paragraph} + ({ slotTexts: [paragraph], script, service }) => ( + + {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 }) => ( - + ({ slotTexts: [paragraph, linkText], script, service }) => ( + {`${paragraph} `} {linkText} {` ${paragraph}`} diff --git a/packages/components/psammead-paragraph/src/index.test.jsx b/packages/components/psammead-paragraph/src/index.test.jsx index a8f9c51fe0..c3c5a1197d 100644 --- a/packages/components/psammead-paragraph/src/index.test.jsx +++ b/packages/components/psammead-paragraph/src/index.test.jsx @@ -6,11 +6,15 @@ import Paragraph from './index'; describe('Paragraph', () => { shouldMatchSnapshot( 'should render a correctly', - This is text in a paragraph., + + This is text in a paragraph. + , ); shouldMatchSnapshot( 'should render correctly with arabic script typography values', - بعض محتوى النص, + + بعض محتوى النص + , ); });