diff --git a/packages/components/psammead-consent-banner/CHANGELOG.md b/packages/components/psammead-consent-banner/CHANGELOG.md index b5ad08a0a6..f4f70cc7ad 100644 --- a/packages/components/psammead-consent-banner/CHANGELOG.md +++ b/packages/components/psammead-consent-banner/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 2.1.2 | [PR#1366](https://github.com/bbc/psammead/pull/1366) Add Storybook entries for all services | | 2.1.1 | [PR#1365](https://github.com/bbc/psammead/pull/1365) Bump psammead-styles to 1.2.0 | | 2.1.0 | [PR#1233](https://github.com/bbc/psammead/pull/1233) Add ESM modules entry | | 2.0.1 | [PR#1181](https://github.com/bbc/psammead/pull/1181) use `gel-foundations@3.0.3`, `psammead-styles@1.1.3` | diff --git a/packages/components/psammead-consent-banner/package-lock.json b/packages/components/psammead-consent-banner/package-lock.json index 6edfbc4ccf..1439369b75 100644 --- a/packages/components/psammead-consent-banner/package-lock.json +++ b/packages/components/psammead-consent-banner/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-consent-banner", - "version": "2.1.1", + "version": "2.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -142,6 +142,16 @@ "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.3.tgz", "integrity": "sha512-sWqC6vvs6XjzHcRvE0nmjb3JYr+XlCZ66mmNRVlXe1gnBmIcnSuYOPx0WjK2VFd+EHF9TuQVuAD1L4u2fDU4Bg==" }, + "@bbc/psammead-storybook-helpers": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-3.3.0.tgz", + "integrity": "sha512-R48jMwob3X8A3aRFMTQnVM9IoOmxFRbc97kH96mp0SOiL3mx1m0ZgbXIK8N+eFNySwztqSyUDBAug3ZNgnLyPg==", + "dev": true, + "requires": { + "@bbc/gel-foundations": "^3.0.3", + "react-helmet": "^5.2.1" + } + }, "@bbc/psammead-styles": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-1.2.0.tgz", @@ -298,6 +308,12 @@ "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", "dev": true }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=", + "dev": true + }, "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", @@ -414,12 +430,40 @@ "scheduler": "^0.13.6" } }, + "react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==", + "dev": true + }, + "react-helmet": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz", + "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.5.4", + "react-fast-compare": "^2.0.2", + "react-side-effect": "^1.1.0" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==", "dev": true }, + "react-side-effect": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz", + "integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==", + "dev": true, + "requires": { + "exenv": "^1.2.1", + "shallowequal": "^1.0.1" + } + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -436,6 +480,12 @@ "object-assign": "^4.1.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/packages/components/psammead-consent-banner/package.json b/packages/components/psammead-consent-banner/package.json index 7cc67447b7..369d9fe8ba 100644 --- a/packages/components/psammead-consent-banner/package.json +++ b/packages/components/psammead-consent-banner/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-consent-banner", - "version": "2.1.1", + "version": "2.1.2", "main": "dist/index.js", "module": "esm/index.js", "sideEffects": false, @@ -23,6 +23,7 @@ "@bbc/psammead-styles": "^1.2.0" }, "devDependencies": { + "@bbc/psammead-storybook-helpers": "^3.3.0", "@bbc/psammead-test-helpers": "^1.0.2", "prop-types": "^15.6.2", "react": "^16.8.6", diff --git a/packages/components/psammead-consent-banner/src/index.stories.jsx b/packages/components/psammead-consent-banner/src/index.stories.jsx index 564a278b72..a0398a1c7a 100644 --- a/packages/components/psammead-consent-banner/src/index.stories.jsx +++ b/packages/components/psammead-consent-banner/src/index.stories.jsx @@ -1,37 +1,64 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { latin } from '@bbc/gel-foundations/scripts'; +import { withKnobs } from '@storybook/addon-knobs'; +import { inputProvider } from '@bbc/psammead-storybook-helpers'; +import { string } from 'prop-types'; import { ConsentBanner, ConsentBannerText } from '.'; +import notes from '../README.md'; -const Accept = ( +const Accept = acceptText => ( ); -const Reject = ( - - Find out what's changed - +const Reject = rejectText => ( + {rejectText} ); -const Text = ( - - This is some text with a link inside - the consent banner. We have made some important changes to our Privacy and - Cookie Policy. +const Text = ({ script, service, shortText, text }) => ( + + {`${text} `} + {shortText} ); -const props = { - title: "We've updated our Privacy and Cookies Policy", - text: Text, - accept: Accept, - reject: Reject, - script: latin, - service: 'news', +Text.propTypes = { + script: string.isRequired, + service: string.isRequired, + shortText: string.isRequired, + text: string.isRequired, }; -storiesOf('Components|ConsentBanner', module).add('default', () => ( - -)); +storiesOf('Components|ConsentBanner', module) + .addDecorator(withKnobs) + .add( + 'default', + inputProvider( + [ + { + name: 'title', + defaultText: 'Privacy and Cookies Policy', + }, + { + name: 'text', + defaultText: 'Changes to our Privacy and Cookie Policy ', + }, + ], + + ({ slotTexts: [title, text], script, service }) => { + const shortText = text.trim().split(' ')[0]; + return ( + + ); + }, + ), + { notes, knobs: { escapeHTML: false } }, + );