diff --git a/.storybook/addons.js b/.storybook/addons.js
index 810dc73559..2783f324e3 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,4 +1,3 @@
import 'storybook-readme/register';
import '@storybook/addon-options/register';
-import '@storybook/addon-knobs/register'
-import '@storybook/addon-viewport/register'
+import '@storybook/addon-knobs/register';
diff --git a/.storybook/config.js b/.storybook/config.js
index 2698d02326..a3a9c1d713 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -3,19 +3,20 @@ import { configure, addDecorator } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import styledNormalize from 'styled-normalize';
import { createGlobalStyle } from 'styled-components';
+import {
+ AMP_SCRIPT,
+ AMP_NO_SCRIPT,
+} from '@bbc/psammead-assets/amp-boilerplate';
+import Helmet from 'react-helmet';
-// Option defaults:
setOptions({
name: 'BBC Psammead',
url: 'https:github.com/BBC-News/psammead',
addonPanelInRight: true,
sidebarAnimations: true,
+ sortStoriesByKind: true,
});
-function loadStories() {
- require('glob-loader!./stories.pattern');
-}
-
const GlobalStyle = createGlobalStyle`
${styledNormalize}
@@ -51,4 +52,22 @@ addDecorator(story => (
));
-configure(loadStories, module);
+export const ampDecorator = story => (
+
+
+
+
+
+
+
+
+
+ {story()}
+
+);
+
+function loadAllStories() {
+ require('glob-loader!./stories.pattern');
+}
+
+configure(loadAllStories, module);
diff --git a/package-lock.json b/package-lock.json
index b8177bb1f0..393a14489a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -993,6 +993,12 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@bbc/psammead-assets": {
+ "version": "0.1.3",
+ "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.3.tgz",
+ "integrity": "sha512-qrXcpzV/RhzII0HVNgh3WSYYKRoUfXupmKYqy450j6YV0h5/f2bKxpvmWnM+CR4BAaZNqoq3mjBAxRp2iLwK7A==",
+ "dev": true
+ },
"@emotion/cache": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-0.8.8.tgz",
@@ -8317,28 +8323,24 @@
"dependencies": {
"abbrev": {
"version": "1.1.1",
- "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
- "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+ "bundled": true,
"dev": true,
"optional": true
},
"ansi-regex": {
"version": "2.1.1",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
- "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+ "bundled": true,
"dev": true
},
"aproba": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
- "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+ "bundled": true,
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.4",
- "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
- "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8348,14 +8350,12 @@
},
"balanced-match": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
- "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+ "bundled": true,
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
- "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
- "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "bundled": true,
"dev": true,
"requires": {
"balanced-match": "^1.0.0",
@@ -8364,40 +8364,34 @@
},
"chownr": {
"version": "1.0.1",
- "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
- "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
+ "bundled": true,
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
- "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+ "bundled": true,
"dev": true
},
"concat-map": {
"version": "0.0.1",
- "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
- "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+ "bundled": true,
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
- "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+ "bundled": true,
"dev": true
},
"core-util-is": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
- "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+ "bundled": true,
"dev": true,
"optional": true
},
"debug": {
"version": "2.6.9",
- "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
- "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8406,29 +8400,25 @@
},
"deep-extend": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
- "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
+ "bundled": true,
"dev": true,
"optional": true
},
"delegates": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
- "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+ "bundled": true,
"dev": true,
"optional": true
},
"detect-libc": {
"version": "1.0.3",
- "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
- "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+ "bundled": true,
"dev": true,
"optional": true
},
"fs-minipass": {
"version": "1.2.5",
- "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
- "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8437,15 +8427,13 @@
},
"fs.realpath": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
- "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+ "bundled": true,
"dev": true,
"optional": true
},
"gauge": {
"version": "2.7.4",
- "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
- "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8461,8 +8449,7 @@
},
"glob": {
"version": "7.1.2",
- "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
- "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8476,15 +8463,13 @@
},
"has-unicode": {
"version": "2.0.1",
- "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
- "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+ "bundled": true,
"dev": true,
"optional": true
},
"iconv-lite": {
"version": "0.4.21",
- "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
- "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8493,8 +8478,7 @@
},
"ignore-walk": {
"version": "3.0.1",
- "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
- "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8503,8 +8487,7 @@
},
"inflight": {
"version": "1.0.6",
- "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
- "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8514,21 +8497,18 @@
},
"inherits": {
"version": "2.0.3",
- "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
- "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+ "bundled": true,
"dev": true
},
"ini": {
"version": "1.3.5",
- "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
- "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+ "bundled": true,
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
- "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+ "bundled": true,
"dev": true,
"requires": {
"number-is-nan": "^1.0.0"
@@ -8536,15 +8516,13 @@
},
"isarray": {
"version": "1.0.0",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
- "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+ "bundled": true,
"dev": true,
"optional": true
},
"minimatch": {
"version": "3.0.4",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
- "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+ "bundled": true,
"dev": true,
"requires": {
"brace-expansion": "^1.1.7"
@@ -8552,14 +8530,12 @@
},
"minimist": {
"version": "0.0.8",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
- "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+ "bundled": true,
"dev": true
},
"minipass": {
"version": "2.2.4",
- "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
- "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
+ "bundled": true,
"dev": true,
"requires": {
"safe-buffer": "^5.1.1",
@@ -8568,8 +8544,7 @@
},
"minizlib": {
"version": "1.1.0",
- "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
- "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8578,8 +8553,7 @@
},
"mkdirp": {
"version": "0.5.1",
- "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
- "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+ "bundled": true,
"dev": true,
"requires": {
"minimist": "0.0.8"
@@ -8587,15 +8561,13 @@
},
"ms": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
- "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+ "bundled": true,
"dev": true,
"optional": true
},
"needle": {
"version": "2.2.0",
- "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
- "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8606,8 +8578,7 @@
},
"node-pre-gyp": {
"version": "0.10.0",
- "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz",
- "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8625,8 +8596,7 @@
},
"nopt": {
"version": "4.0.1",
- "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
- "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8636,15 +8606,13 @@
},
"npm-bundled": {
"version": "1.0.3",
- "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
- "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
+ "bundled": true,
"dev": true,
"optional": true
},
"npm-packlist": {
"version": "1.1.10",
- "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
- "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8654,8 +8622,7 @@
},
"npmlog": {
"version": "4.1.2",
- "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
- "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8667,21 +8634,18 @@
},
"number-is-nan": {
"version": "1.0.1",
- "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
- "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+ "bundled": true,
"dev": true
},
"object-assign": {
"version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+ "bundled": true,
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
- "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
- "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+ "bundled": true,
"dev": true,
"requires": {
"wrappy": "1"
@@ -8689,22 +8653,19 @@
},
"os-homedir": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
- "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+ "bundled": true,
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
- "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+ "bundled": true,
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.5",
- "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
- "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8714,22 +8675,19 @@
},
"path-is-absolute": {
"version": "1.0.1",
- "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
- "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+ "bundled": true,
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
- "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+ "bundled": true,
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.7",
- "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz",
- "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8741,8 +8699,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
- "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+ "bundled": true,
"dev": true,
"optional": true
}
@@ -8750,8 +8707,7 @@
},
"readable-stream": {
"version": "2.3.6",
- "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
- "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8766,8 +8722,7 @@
},
"rimraf": {
"version": "2.6.2",
- "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
- "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8776,49 +8731,42 @@
},
"safe-buffer": {
"version": "5.1.1",
- "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
- "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+ "bundled": true,
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
- "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
- "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "bundled": true,
"dev": true,
"optional": true
},
"sax": {
"version": "1.2.4",
- "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
- "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+ "bundled": true,
"dev": true,
"optional": true
},
"semver": {
"version": "5.5.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
- "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
+ "bundled": true,
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
- "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
- "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+ "bundled": true,
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
- "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
- "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+ "bundled": true,
"dev": true,
"optional": true
},
"string-width": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
- "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+ "bundled": true,
"dev": true,
"requires": {
"code-point-at": "^1.0.0",
@@ -8828,8 +8776,7 @@
},
"string_decoder": {
"version": "1.1.1",
- "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
- "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8838,8 +8785,7 @@
},
"strip-ansi": {
"version": "3.0.1",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
- "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+ "bundled": true,
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
@@ -8847,15 +8793,13 @@
},
"strip-json-comments": {
"version": "2.0.1",
- "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
- "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+ "bundled": true,
"dev": true,
"optional": true
},
"tar": {
"version": "4.4.1",
- "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
- "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8870,15 +8814,13 @@
},
"util-deprecate": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
- "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+ "bundled": true,
"dev": true,
"optional": true
},
"wide-align": {
"version": "1.1.2",
- "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
- "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+ "bundled": true,
"dev": true,
"optional": true,
"requires": {
@@ -8887,14 +8829,12 @@
},
"wrappy": {
"version": "1.0.2",
- "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
- "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+ "bundled": true,
"dev": true
},
"yallist": {
"version": "3.0.2",
- "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
- "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
+ "bundled": true,
"dev": true
}
}
@@ -15454,6 +15394,18 @@
"prop-types": "^15.5.9"
}
},
+ "react-helmet": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
+ "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=",
+ "dev": true,
+ "requires": {
+ "deep-equal": "^1.0.1",
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.5.4",
+ "react-side-effect": "^1.1.0"
+ }
+ },
"react-html-attributes": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz",
@@ -15503,6 +15455,16 @@
"integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg==",
"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"
+ }
+ },
"react-split-pane": {
"version": "0.1.85",
"resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.85.tgz",
diff --git a/package.json b/package.json
index 09b196e4e7..fd97e4f779 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"@babel/preset-react": "^7.0.0",
+ "@bbc/psammead-assets": "^0.1.3",
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-knobs": "^3.4.11",
"@storybook/addon-options": "^3.4.11",
@@ -68,6 +69,7 @@
"prettier": "^1.15.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
+ "react-helmet": "^5.2.0",
"react-test-renderer": "^16.6.3",
"request": "^2.88.0",
"semver": "^5.6.0",
diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md
index b459c731ed..666a676880 100644
--- a/packages/components/psammead-image/CHANGELOG.md
+++ b/packages/components/psammead-image/CHANGELOG.md
@@ -2,6 +2,7 @@
| Version | Description |
|---------|-------------|
+| 0.3.0 | [PR#241](https://github.com/BBC-News/psammead/pull/241) Add AmpImg component. Update Image to have optional srcset prop. |
| 0.2.3 | [PR#264](https://github.com/BBC/psammead/pull/264) Resolving package-lock issues. |
| 0.2.2 | [PR#245](https://github.com/BBC-News/psammead/pull/245) Ensures documentation consistent across component packages. |
| 0.2.1 | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README |
diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index bdf4670aab..7ffda32400 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -2,36 +2,87 @@
## Description
-The `psammead-image` component is a styled `img` element.
+The `psammead-image` component has two images available. The default is a styled `img` element that uses Styled Components.
-## Installation
+There is an alternative AMP Image which can be used. It is a React component returning an `amp-img` element.
-## Props
+### When to use this component
+
+This component can be used at any point on a page.
+
+
-| Argument | Type | Required | Default | Example |
-|-----------|---------------|----------|---------|------------------------------|
-| alt | String | Yes | N/A | "A description of the image" |
-| height | Number/String | No* | None | 400 |
-| src | String | Yes | N/A | "https://ichef.bbci.co.uk/news/640/cpsprodpb/A933/production/_101651334_bouquet_pa.jpg" |
-| width | Number/String | Yes | N/A | 600 |
+## Installation
-*The `height` prop is optional, since in some cases to preserve the image ratio we only want to specify the width and let the browser scale the image accordingly. However, in other cases the height might need to be specified.
+`npm install @bbc/psammead-image`
## Usage
+### Img
+
+Importing the standard Image component renders an `` tag.
+
```jsx
import Image from '@bbc/psammead-image';
-const Wrapper = (src, alt, width, height) => (
-
+const WrappingContainer = ({ alt, src, height, width }) => (
+
);
```
-### When to use this component
+### AmpImg
-This component can be used at any point on a page.
+If you're to use the `AmpImg` component, [please read the AMP documentation here](https://www.ampproject.org/docs/reference/components/amp-img) for further details.
+
+The Amp Image component renders an `` tag.
+
+Example:
+
+```jsx
+import { AmpImg } from '@bbc/psammead-image';
+
+const WrappingContainer = ({ alt, src, height, width }) => (
+
+);
+```
+
+## Props
+
+### Img
+
+| Prop | Type | Required | Default | Example |
+| :------------ | :------------ | :------- | :------ | :------ |
+| `alt` | string | Yes | - | "A picture of a cat" |
+| `height` | number/string | Yes | null | 450 |
+| `src` | string | Yes | - | "https://bbc.com/300/cat.jpg" |
+| `srcset` | string | No | null | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
+| `width` | number/string | Yes | - | 600 |
+
+The `height` prop is optional, since in some cases to preserve the image ratio we only want to specify the width and let the browser scale the image accordingly. However, in other cases the height might need to be specified.
+The `srcset` prop is optional since some projects might not want to use the srcset attribute on images.
+
+### AmpImg
+
+| Prop | Type | Required | Default | Example |
+| :------------ | :------------ | :------- | :------ | :------ |
+| `alt` | string | Yes | - | "A picture of a cat" |
+| `attribution` | string | No | '' | "Getty Images" |
+| `height` | number/string | Yes | null | 450 |
+| `layout` | string | Yes | - | "responsive" |
+| `src` | string | Yes | - | "https://bbc.com/300/cat.jpg" |
+| `srcset` | string | No | null | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
+| `width` | number/string | Yes | - | 600 |
+
+The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
+The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
+The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).
-
### Accessibility notes
@@ -41,14 +92,16 @@ Some images are purely presentational - in these cases, an `alt` attribute must
+
+
## Contributing
-Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md).
+Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).
-### [Code of Conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md)
+### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)
-We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
+We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
### License
-Psammead is [Apache 2.0 licensed](https://github.com/BBC-News/psammead/blob/latest/LICENSE).
+Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).
diff --git a/packages/components/psammead-image/package-lock.json b/packages/components/psammead-image/package-lock.json
deleted file mode 100644
index bccb391f3f..0000000000
--- a/packages/components/psammead-image/package-lock.json
+++ /dev/null
@@ -1,422 +0,0 @@
-{
- "name": "@bbc/psammead-image",
- "version": "0.2.3",
- "lockfileVersion": 1,
- "requires": true,
- "dependencies": {
- "@babel/helper-annotate-as-pure": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
- "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
- "requires": {
- "@babel/types": "^7.0.0"
- }
- },
- "@babel/helper-module-imports": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
- "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
- "requires": {
- "@babel/types": "^7.0.0"
- }
- },
- "@babel/types": {
- "version": "7.2.2",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.2.tgz",
- "integrity": "sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg==",
- "requires": {
- "esutils": "^2.0.2",
- "lodash": "^4.17.10",
- "to-fast-properties": "^2.0.0"
- }
- },
- "@bbc/psammead-test-helpers": {
- "version": "0.3.1",
- "dev": true,
- "requires": {
- "jest-styled-components": "^6.3.1",
- "react-test-renderer": "^16.6.3"
- },
- "dependencies": {
- "atob": {
- "version": "2.1.2",
- "bundled": true,
- "dev": true
- },
- "css": {
- "version": "2.2.4",
- "bundled": true,
- "dev": true,
- "requires": {
- "inherits": "^2.0.3",
- "source-map": "^0.6.1",
- "source-map-resolve": "^0.5.2",
- "urix": "^0.1.0"
- }
- },
- "decode-uri-component": {
- "version": "0.2.0",
- "bundled": true,
- "dev": true
- },
- "inherits": {
- "version": "2.0.3",
- "bundled": true,
- "dev": true
- },
- "jest-styled-components": {
- "version": "6.3.1",
- "bundled": true,
- "dev": true,
- "requires": {
- "css": "^2.2.4"
- }
- },
- "js-tokens": {
- "version": "4.0.0",
- "bundled": true,
- "dev": true
- },
- "loose-envify": {
- "version": "1.4.0",
- "bundled": true,
- "dev": true,
- "requires": {
- "js-tokens": "^3.0.0 || ^4.0.0"
- }
- },
- "object-assign": {
- "version": "4.1.1",
- "bundled": true,
- "dev": true
- },
- "prop-types": {
- "version": "15.6.2",
- "bundled": true,
- "dev": true,
- "requires": {
- "loose-envify": "^1.3.1",
- "object-assign": "^4.1.1"
- }
- },
- "react-is": {
- "version": "16.7.0",
- "bundled": true,
- "dev": true
- },
- "react-test-renderer": {
- "version": "16.7.0",
- "bundled": true,
- "dev": true,
- "requires": {
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "react-is": "^16.7.0",
- "scheduler": "^0.12.0"
- }
- },
- "resolve-url": {
- "version": "0.2.1",
- "bundled": true,
- "dev": true
- },
- "scheduler": {
- "version": "0.12.0",
- "bundled": true,
- "dev": true,
- "requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1"
- }
- },
- "source-map": {
- "version": "0.6.1",
- "bundled": true,
- "dev": true
- },
- "source-map-resolve": {
- "version": "0.5.2",
- "bundled": true,
- "dev": true,
- "requires": {
- "atob": "^2.1.1",
- "decode-uri-component": "^0.2.0",
- "resolve-url": "^0.2.1",
- "source-map-url": "^0.4.0",
- "urix": "^0.1.0"
- }
- },
- "source-map-url": {
- "version": "0.4.0",
- "bundled": true,
- "dev": true
- },
- "urix": {
- "version": "0.1.0",
- "bundled": true,
- "dev": true
- }
- }
- },
- "@emotion/is-prop-valid": {
- "version": "0.7.3",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
- "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
- "requires": {
- "@emotion/memoize": "0.7.1"
- }
- },
- "@emotion/memoize": {
- "version": "0.7.1",
- "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
- "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
- },
- "@emotion/unitless": {
- "version": "0.7.3",
- "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
- "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
- },
- "asap": {
- "version": "2.0.6",
- "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
- "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
- },
- "babel-plugin-styled-components": {
- "version": "1.10.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz",
- "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==",
- "requires": {
- "@babel/helper-annotate-as-pure": "^7.0.0",
- "@babel/helper-module-imports": "^7.0.0",
- "babel-plugin-syntax-jsx": "^6.18.0",
- "lodash": "^4.17.10"
- }
- },
- "babel-plugin-syntax-jsx": {
- "version": "6.18.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
- "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
- },
- "core-js": {
- "version": "1.2.7",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
- "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
- },
- "css-color-keywords": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
- "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
- },
- "css-to-react-native": {
- "version": "2.2.2",
- "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.2.tgz",
- "integrity": "sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==",
- "requires": {
- "css-color-keywords": "^1.0.0",
- "fbjs": "^0.8.5",
- "postcss-value-parser": "^3.3.0"
- }
- },
- "encoding": {
- "version": "0.1.12",
- "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
- "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
- "requires": {
- "iconv-lite": "~0.4.13"
- }
- },
- "esutils": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
- "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
- },
- "fbjs": {
- "version": "0.8.17",
- "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
- "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
- "requires": {
- "core-js": "^1.0.0",
- "isomorphic-fetch": "^2.1.1",
- "loose-envify": "^1.0.0",
- "object-assign": "^4.1.0",
- "promise": "^7.1.1",
- "setimmediate": "^1.0.5",
- "ua-parser-js": "^0.7.18"
- }
- },
- "has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
- },
- "iconv-lite": {
- "version": "0.4.24",
- "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
- "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
- "requires": {
- "safer-buffer": ">= 2.1.2 < 3"
- }
- },
- "is-stream": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
- "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
- },
- "isomorphic-fetch": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
- "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
- "requires": {
- "node-fetch": "^1.0.1",
- "whatwg-fetch": ">=0.10.0"
- }
- },
- "js-tokens": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
- },
- "lodash": {
- "version": "4.17.11",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
- "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
- },
- "loose-envify": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
- "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
- "requires": {
- "js-tokens": "^3.0.0 || ^4.0.0"
- }
- },
- "memoize-one": {
- "version": "4.0.3",
- "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz",
- "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw=="
- },
- "node-fetch": {
- "version": "1.7.3",
- "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
- "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
- "requires": {
- "encoding": "^0.1.11",
- "is-stream": "^1.0.1"
- }
- },
- "object-assign": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
- },
- "postcss-value-parser": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
- "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
- },
- "promise": {
- "version": "7.3.1",
- "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
- "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
- "requires": {
- "asap": "~2.0.3"
- }
- },
- "prop-types": {
- "version": "15.6.2",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
- "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
- "requires": {
- "loose-envify": "^1.3.1",
- "object-assign": "^4.1.1"
- }
- },
- "react": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
- "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
- "dev": true,
- "requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "scheduler": "^0.12.0"
- }
- },
- "react-is": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
- "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
- },
- "safer-buffer": {
- "version": "2.1.2",
- "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
- "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
- },
- "scheduler": {
- "version": "0.12.0",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
- "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
- "dev": true,
- "requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1"
- }
- },
- "setimmediate": {
- "version": "1.0.5",
- "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
- "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
- },
- "styled-components": {
- "version": "4.1.3",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz",
- "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==",
- "requires": {
- "@babel/helper-module-imports": "^7.0.0",
- "@emotion/is-prop-valid": "^0.7.3",
- "@emotion/unitless": "^0.7.0",
- "babel-plugin-styled-components": ">= 1",
- "css-to-react-native": "^2.2.2",
- "memoize-one": "^4.0.0",
- "prop-types": "^15.5.4",
- "react-is": "^16.6.0",
- "stylis": "^3.5.0",
- "stylis-rule-sheet": "^0.0.10",
- "supports-color": "^5.5.0"
- }
- },
- "stylis": {
- "version": "3.5.4",
- "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
- "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
- },
- "stylis-rule-sheet": {
- "version": "0.0.10",
- "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
- "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
- },
- "supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
- "requires": {
- "has-flag": "^3.0.0"
- }
- },
- "to-fast-properties": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
- "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
- },
- "ua-parser-js": {
- "version": "0.7.19",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
- "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
- },
- "whatwg-fetch": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
- "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
- }
- }
-}
diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json
index 816d1ee3a5..c2b4b667fe 100644
--- a/packages/components/psammead-image/package.json
+++ b/packages/components/psammead-image/package.json
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-image",
- "version": "0.2.3",
+ "version": "0.3.0",
"main": "dist/index.js",
"description": "React styled components for an Image",
"repository": {
@@ -21,6 +21,7 @@
"styled-components": "^4.1.2"
},
"devDependencies": {
+ "@bbc/psammead-assets": "^0.1.3",
"@bbc/psammead-test-helpers": "^0.3.0",
"react": "^16.6.3"
},
diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
new file mode 100644
index 0000000000..11e024ab03
--- /dev/null
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image - AmpImg should render image with custom dimensions correctly 1`] = `
+
+`;
+
+exports[`Image - AmpImg should render image with srcset correctly 1`] = `
+
+`;
+
+exports[`Image - AmpImg should render landscape image correctly 1`] = `
+
+`;
+
+exports[`Image - AmpImg should render portrait image correctly 1`] = `
+
+`;
+
+exports[`Image - AmpImg should render square image correctly 1`] = `
+
+`;
diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
index 1409652561..b280302fae 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,52 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Image should render correctly 1`] = `
+exports[`Image - imported as '{ Img }' should render image with custom dimensions correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as '{ Img }' should render landscape image correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as '{ Img }' should render portrait image correctly 1`] = `
.c0 {
display: block;
width: 100%;
@@ -9,8 +55,99 @@ exports[`Image should render correctly 1`] = `
+`;
+
+exports[`Image - imported as '{ Img }' should render square image correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as default 'Image' should render landscape image correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as default 'Image' should render portrait image correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
+`;
+
+exports[`Image - imported as default 'Image' should render square image correctly 1`] = `
+.c0 {
+ display: block;
+ width: 100%;
+}
+
+
`;
diff --git a/packages/components/psammead-image/src/index.amp.jsx b/packages/components/psammead-image/src/index.amp.jsx
new file mode 100644
index 0000000000..6bf4522688
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { number, string } from 'prop-types';
+
+const AmpImg = ({ alt, attribution, layout, src, srcset, height, width }) => {
+ const props = {
+ alt,
+ attribution,
+ layout,
+ src,
+ height,
+ width,
+ };
+
+ if (srcset) {
+ props.srcSet = srcset;
+ }
+
+ return ;
+};
+
+AmpImg.propTypes = {
+ alt: string.isRequired,
+ attribution: string,
+ layout: string.isRequired,
+ src: string.isRequired,
+ srcset: string,
+ height: number.isRequired,
+ width: number.isRequired,
+};
+
+AmpImg.defaultProps = {
+ attribution: '',
+ srcset: null,
+};
+
+export default AmpImg;
diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx
new file mode 100644
index 0000000000..73d202b83e
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.stories.jsx
@@ -0,0 +1,9 @@
+import AmpImg from './index.amp';
+import stories from './testHelpers/stories';
+import { ampDecorator } from '../../../../.storybook/config';
+
+const additionalProps = {
+ layout: 'responsive',
+};
+
+stories(AmpImg, 'Image - AmpImg', true, additionalProps, ampDecorator);
diff --git a/packages/components/psammead-image/src/index.amp.test.jsx b/packages/components/psammead-image/src/index.amp.test.jsx
new file mode 100644
index 0000000000..32f13b789c
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.test.jsx
@@ -0,0 +1,10 @@
+import AmpImg from './index.amp';
+import snapshotTests from './testHelpers/snapshotTests';
+
+describe('Image - AmpImg', () => {
+ const additionalProps = {
+ layout: 'responsive',
+ };
+
+ snapshotTests(AmpImg, additionalProps);
+});
diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx
index d9775b2ad4..84967327cf 100644
--- a/packages/components/psammead-image/src/index.jsx
+++ b/packages/components/psammead-image/src/index.jsx
@@ -1,16 +1,35 @@
-import styled from 'styled-components';
+import React from 'react';
import { number, oneOfType, string } from 'prop-types';
+import styled from 'styled-components';
+
+export { default as AmpImg } from './index.amp';
-const Image = styled.img`
+const StyledImg = styled.img`
display: block;
width: 100%;
`;
-Image.propTypes = {
+export const Img = ({ alt, src, srcset, height, width }) => {
+ const props = { alt, src, height, width };
+
+ if (srcset) {
+ props.srcSet = srcset;
+ }
+
+ return ;
+};
+
+Img.propTypes = {
alt: string.isRequired,
- height: oneOfType([string, number]),
src: string.isRequired,
+ srcset: string,
+ height: oneOfType([string, number]),
width: oneOfType([string, number]).isRequired,
};
-export default Image;
+Img.defaultProps = {
+ height: null,
+ srcset: null,
+};
+
+export default Img;
diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx
index 8990f61c39..d6cd796e8e 100644
--- a/packages/components/psammead-image/src/index.stories.jsx
+++ b/packages/components/psammead-image/src/index.stories.jsx
@@ -1,17 +1,4 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import Readme from '../README.md';
-import Image from './index';
+import { Img } from '.';
+import stories from './testHelpers/stories';
-const imageAlt =
- 'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
-const imageSrc =
- 'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
-const imageWidth = 853;
-
-storiesOf('Image', module)
- .addDecorator(withReadme(Readme))
- .add('default', () => (
-
- ));
+stories(Img, 'Image - Img');
diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx
index c90be99cff..e8392bd5d1 100644
--- a/packages/components/psammead-image/src/index.test.jsx
+++ b/packages/components/psammead-image/src/index.test.jsx
@@ -1,22 +1,10 @@
-import React from 'react';
-import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
-import Image from '.';
+import Image, { Img } from '.';
+import snapshotTests from './testHelpers/snapshotTests';
-const imageAlt =
- 'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
-const imageSrc =
- 'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
-const imageWidth = 853;
-const imageHeight = 1067;
+describe("Image - imported as '{ Img }'", () => {
+ snapshotTests(Img);
+});
-describe('Image', () => {
- shouldMatchSnapshot(
- 'should render correctly',
- ,
- );
+describe("Image - imported as default 'Image'", () => {
+ snapshotTests(Image);
});
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
new file mode 100644
index 0000000000..a0945570f6
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -0,0 +1,50 @@
+const sizes = [300, 450, 600, 1024];
+const landscapeImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg`;
+const portraitImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png`;
+const squareImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg`;
+const customImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg`;
+
+export const landscape = {
+ alt: 'Student sitting an exam',
+ attribution: '',
+ src: landscapeImageUrl.replace('[WIDTH]', sizes[0]),
+ srcset: sizes
+ .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`)
+ .join(', '),
+ width: 1024,
+ height: 576,
+};
+
+export const portrait = {
+ alt:
+ 'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
+ attribution: 'BBC',
+ src: portraitImageUrl.replace('[WIDTH]', sizes[0]),
+ srcset: sizes
+ .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`)
+ .join(', '),
+ width: 1024,
+ height: 1280,
+};
+
+export const square = {
+ alt: 'Tracks through the snow',
+ attribution: 'BBC',
+ src: squareImageUrl.replace('[WIDTH]', sizes[0]),
+ srcset: sizes
+ .map(size => `${squareImageUrl.replace('[WIDTH]', size)} ${size}w`)
+ .join(', '),
+ width: 1024,
+ height: 1024,
+};
+
+export const custom = {
+ alt: 'By Elisa Decker, from her series "Sidewalk"',
+ attribution: 'Elisa Decker',
+ src: customImageUrl.replace('[WIDTH]', sizes[0]),
+ srcset: sizes
+ .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`)
+ .join(', '),
+ width: 445,
+ height: 547,
+};
diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
new file mode 100644
index 0000000000..b788b24200
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { custom, landscape, portrait, square } from './fixtureData';
+
+const snapshotTests = (Component, additionalProps) => {
+ shouldMatchSnapshot(
+ 'should render landscape image correctly',
+ ,
+ );
+ shouldMatchSnapshot(
+ 'should render portrait image correctly',
+ ,
+ );
+ shouldMatchSnapshot(
+ 'should render square image correctly',
+ ,
+ );
+ shouldMatchSnapshot(
+ 'should render image with custom dimensions correctly',
+ ,
+ );
+ shouldMatchSnapshot(
+ 'should render image with srcset correctly',
+ ,
+ );
+};
+
+export default snapshotTests;
diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
new file mode 100644
index 0000000000..1da59472ba
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import Readme from '../../README.md';
+import { custom, landscape, portrait, square } from './fixtureData';
+
+function getProps(image, includeHeight) {
+ const props = {
+ alt: image.alt,
+ src: image.src,
+ srcset: image.srcset,
+ width: image.width,
+ };
+ props.height = includeHeight ? image.height : null;
+
+ return props;
+}
+
+const stories = (
+ Component,
+ title,
+ includeHeight = false,
+ additionalProps = {},
+ styleDecorator = storyFn => storyFn(),
+) =>
+ storiesOf(title, module)
+ .addDecorator(withReadme(Readme))
+ .addDecorator(styleDecorator)
+ .add('landscape image', () => (
+
+ ))
+ .add('portrait image', () => (
+
+ ))
+ .add('square image', () => (
+
+ ))
+ .add('custom ratio image', () => (
+
+ ))
+ .add('image with srcset', () => (
+
+ ));
+
+export default stories;