From 8442a7fe71d9d7eb9cb1b70524653c5ea0bfd685 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Mon, 10 Dec 2018 15:02:36 +0000 Subject: [PATCH 01/26] Add Code Climate badges to main README --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 00d32b128f..a128ca5af0 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@
[![Known Vulnerabilities](https://snyk.io/test/github/bbc-news/psammead/badge.svg)](https://snyk.io/test/github/bbc-news/psammead) +[![Maintainability](https://api.codeclimate.com/v1/badges/3f7b756f1358f3633362/maintainability)](https://codeclimate.com/github/BBC-News/psammead/maintainability) +[![Test Coverage](https://api.codeclimate.com/v1/badges/3f7b756f1358f3633362/test_coverage)](https://codeclimate.com/github/BBC-News/psammead/test_coverage) [![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](http://bbc-news.github.io/psammead) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) From 7f1e6cfd4746f377f2ff97cc4957e00376a9d001 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Thu, 13 Dec 2018 08:17:33 +0000 Subject: [PATCH 02/26] Add code coverage reporter to makefile --- Makefile | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Makefile b/Makefile index 79c5161973..b81145354d 100644 --- a/Makefile +++ b/Makefile @@ -4,6 +4,10 @@ none: install: npm --version; node --version; npm ci; + curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter + chmod +x ./cc-test-reporter + ./cc-test-reporter before-build tests: npm test; + ./cc-test-reporter after-build -t lcov --debug From 3573caf996de8f7a516c7c174706facdedd1f5a0 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Thu, 13 Dec 2018 12:12:23 +0000 Subject: [PATCH 03/26] Consistent formatting in makefile --- Makefile | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index b81145354d..f83bbce37a 100644 --- a/Makefile +++ b/Makefile @@ -4,10 +4,10 @@ none: install: npm --version; node --version; npm ci; - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter - chmod +x ./cc-test-reporter - ./cc-test-reporter before-build + curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter; + chmod +x ./cc-test-reporter; + ./cc-test-reporter before-build; tests: npm test; - ./cc-test-reporter after-build -t lcov --debug + ./cc-test-reporter after-build -t lcov --debug; From 56cc30959a1541fb5d9b7776a3ae85896af2f88f Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Thu, 13 Dec 2018 12:19:24 +0000 Subject: [PATCH 04/26] Provide CC_TEST_REPORTER_ID env variable --- Jenkinsfile | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index d0fec7c444..b2a5bb07d8 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -32,8 +32,10 @@ pipeline { } steps { sh 'rm -rf ./app' - sh 'make install' - sh 'make tests' + withCredentials([string(credentialsId: 'psammead-cc-reporter-id', variable: 'CC_TEST_REPORTER_ID')]) { + sh 'make install' + sh 'make tests' + } } post { always { From ce3558fbe246ea9745b5bee8374d00649be92e54 Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Fri, 14 Dec 2018 09:37:23 +0000 Subject: [PATCH 05/26] Update README.md Co-Authored-By: bcmn --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 702b90256b..dad3d00251 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![Known Vulnerabilities](https://snyk.io/test/github/bbc-news/psammead/badge.svg)](https://snyk.io/test/github/bbc-news/psammead) [![Maintainability](https://api.codeclimate.com/v1/badges/3f7b756f1358f3633362/maintainability)](https://codeclimate.com/github/BBC-News/psammead/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/3f7b756f1358f3633362/test_coverage)](https://codeclimate.com/github/BBC-News/psammead/test_coverage) -[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](http://bbc-news.github.io/psammead) +[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://bbc-news.github.io/psammead) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)
From 05237d4e0f6e87a0c04ccf685ab5da135948e451 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Fri, 14 Dec 2018 09:43:35 +0000 Subject: [PATCH 06/26] Refactor code climate test reporting --- Jenkinsfile | 6 ++++-- Makefile | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index 50658d7d65..5803809d9d 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -32,9 +32,11 @@ pipeline { } steps { sh 'rm -rf ./app' + sh 'make install' + sh 'make code-coverage-before-build' + sh 'make tests' withCredentials([string(credentialsId: 'psammead-cc-reporter-id', variable: 'CC_TEST_REPORTER_ID')]) { - sh 'make install' - sh 'make tests' + sh 'make code-coverage-after-build' } } post { diff --git a/Makefile b/Makefile index a7102cc20f..7849ccf1b7 100644 --- a/Makefile +++ b/Makefile @@ -4,13 +4,17 @@ none: install: npm --version; node --version; npm ci; + +code-coverage-before-build: curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter; chmod +x ./cc-test-reporter; ./cc-test-reporter before-build; +code-coverage-after-build: + ./cc-test-reporter after-build -t lcov --debug; + tests: npm test; - ./cc-test-reporter after-build -t lcov --debug; storybook: git remote set-url origin "https://${GITHUB_TOKEN}@github.com/BBC-News/psammead.git" From 4f998c42a6a5c5b4ced7c6c5321854d876349b57 Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 09:23:15 +0000 Subject: [PATCH 07/26] package --- .../psammead-image-placeholder/package.json | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 packages/components/psammead-image-placeholder/package.json diff --git a/packages/components/psammead-image-placeholder/package.json b/packages/components/psammead-image-placeholder/package.json new file mode 100644 index 0000000000..d9ef52d696 --- /dev/null +++ b/packages/components/psammead-image-placeholder/package.json @@ -0,0 +1,35 @@ +{ + "name": "@bbc/psammead-image-placeholder", + "version": "0.1.0", + "main": "dist/index.js", + "description": "Provides a 'BBC' image placeholder", + "repository": { + "type": "git", + "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-image-placeholder" + }, + "author": { + "name": "Psammead Maintainers", + "email": "PsammeadMaintainers@bbc.co.uk" + }, + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/bbc/psammead/issues" + }, + "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-image-placeholder/README.md", + "dependencies": { + "@bbc/gel-constants": "^0.1.1", + "@bbc/psammead-inline-link": "^0.1.0", + "@bbc/psammead-styles": "^0.1.3", + "@bbc/psammead-visually-hidden-text": "^0.1.0", + "react": "^16.6.3", + "styled-components": "^4.1.2" + }, + "devDependencies": { + "@bbc/psammead-test-helpers": "^0.1.0" + }, + "keywords": [ + "bbc", + "brand", + "logo" + ] +} From 9276b9a4e46f8ab78011b690f56981f7b847aacb Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 10:20:49 +0000 Subject: [PATCH 08/26] add component --- .../psammead-image-placeholder/CHANGELOG.md | 5 + .../psammead-image-placeholder/README.md | 0 .../package-lock.json | 390 ++++++++++++++++++ .../psammead-image-placeholder/package.json | 4 +- .../src/__snapshots__/index.test.jsx.snap | 39 ++ .../psammead-image-placeholder/src/index.jsx | 24 ++ .../src/index.stories.jsx | 18 + .../src/index.test.jsx | 17 + 8 files changed, 494 insertions(+), 3 deletions(-) create mode 100644 packages/components/psammead-image-placeholder/CHANGELOG.md create mode 100644 packages/components/psammead-image-placeholder/README.md create mode 100644 packages/components/psammead-image-placeholder/package-lock.json create mode 100644 packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap create mode 100644 packages/components/psammead-image-placeholder/src/index.jsx create mode 100644 packages/components/psammead-image-placeholder/src/index.stories.jsx create mode 100644 packages/components/psammead-image-placeholder/src/index.test.jsx diff --git a/packages/components/psammead-image-placeholder/CHANGELOG.md b/packages/components/psammead-image-placeholder/CHANGELOG.md new file mode 100644 index 0000000000..3cf0e6c734 --- /dev/null +++ b/packages/components/psammead-image-placeholder/CHANGELOG.md @@ -0,0 +1,5 @@ +# Psammead Image Placeholder Changelog + +| Version | Description | +|---------|-------------| +| 0.1.0 | [PR#213](https://github.com/BBC-News/psammead/pull/213) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). | diff --git a/packages/components/psammead-image-placeholder/README.md b/packages/components/psammead-image-placeholder/README.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/psammead-image-placeholder/package-lock.json b/packages/components/psammead-image-placeholder/package-lock.json new file mode 100644 index 0000000000..b87dd3f9e0 --- /dev/null +++ b/packages/components/psammead-image-placeholder/package-lock.json @@ -0,0 +1,390 @@ +{ + "name": "@bbc/psammead-image-placeholder", + "version": "0.1.0", + "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/types": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.0.tgz", + "integrity": "sha512-b4v7dyfApuKDvmPb+O488UlGuR1WbwMXFsO/cyqMrnfvRAChZKJAYeeglWTjUO1b9UghKKgepAQM5tsvBJca6A==", + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.10", + "to-fast-properties": "^2.0.0" + } + }, + "@bbc/psammead-assets": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.2.tgz", + "integrity": "sha512-fVQB47AGS3yRfOg7HCQghtXhEUZwMzbNBkNKbWb1hc4uSpLq/PZ+/zv28fw/is/bEv7nBePyotNs7ThT/zCrHA==" + }, + "@bbc/psammead-styles": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.1.4.tgz", + "integrity": "sha512-lrt2SjpDQqUpGIONOgeo5rl9Y9pZfKfQOdkg6fr4xOd4YxN0wdlzhlMz6TinmOSK7S9r4cKY+H0HgEDNOqUmIg==" + }, + "@bbc/psammead-test-helpers": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.1.0.tgz", + "integrity": "sha512-k8wbEq1MmVY3rm5gTXHeMLlTTNDLywJwsFxMdXk6iSpeeuft+VT8n65RBlQs5KzSM1RH7q8kbZEyph8wz/houA==", + "dev": true, + "requires": { + "jest-styled-components": "^6.3.1", + "react-test-renderer": "^16.6.3" + } + }, + "@emotion/is-prop-valid": { + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz", + "integrity": "sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==", + "requires": { + "@emotion/memoize": "^0.6.6" + } + }, + "@emotion/memoize": { + "version": "0.6.6", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", + "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==" + }, + "@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=" + }, + "atob": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", + "dev": true + }, + "babel-plugin-styled-components": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.9.4.tgz", + "integrity": "sha512-FIACAvgJsUasYA+CdhPMWUIXWCdUUirz7fL9FGQYNNuOls+bs9OUWWHYVM2W9gjVoS2TXdEMqcOVVyG3Hagd/g==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "http://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": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" + }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + } + }, + "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" + } + }, + "decode-uri-component": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", + "dev": true + }, + "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" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "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" + } + }, + "jest-styled-components": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.1.tgz", + "integrity": "sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==", + "dev": true, + "requires": { + "css": "^2.2.4" + } + }, + "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.1.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.1.0.tgz", + "integrity": "sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==" + }, + "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.6.3", + "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz", + "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.11.2" + } + }, + "react-is": { + "version": "16.6.3", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz", + "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==" + }, + "react-test-renderer": { + "version": "16.6.3", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.6.3.tgz", + "integrity": "sha512-B5bCer+qymrQz/wN03lT0LppbZUDRq6AMfzMKrovzkGzfO81a9T+PWQW6MzkWknbwODQH/qpJno/yFQLX5IWrQ==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.6.3", + "scheduler": "^0.11.2" + } + }, + "resolve-url": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", + "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", + "dev": true + }, + "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.11.3", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.3.tgz", + "integrity": "sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==", + "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=" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-resolve": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", + "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", + "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", + "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", + "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", + "dev": true + }, + "styled-components": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.2.tgz", + "integrity": "sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==", + "requires": { + "@emotion/is-prop-valid": "^0.6.8", + "@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==" + }, + "urix": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", + "dev": true + }, + "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-placeholder/package.json b/packages/components/psammead-image-placeholder/package.json index d9ef52d696..0fe78fc859 100644 --- a/packages/components/psammead-image-placeholder/package.json +++ b/packages/components/psammead-image-placeholder/package.json @@ -17,10 +17,8 @@ }, "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-image-placeholder/README.md", "dependencies": { - "@bbc/gel-constants": "^0.1.1", - "@bbc/psammead-inline-link": "^0.1.0", + "@bbc/psammead-assets": "^0.1.2", "@bbc/psammead-styles": "^0.1.3", - "@bbc/psammead-visually-hidden-text": "^0.1.0", "react": "^16.6.3", "styled-components": "^4.1.2" }, diff --git a/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000000..dcb98ce6bb --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ImagePlaceholder should render landscape images correctly 1`] = ` +.c0 { + position: relative; + height: 0; + overflow: hidden; + background-color: #ECEAE7; + background-position: center center; + background-repeat: no-repeat; + background-size: 30%; + padding-bottom: 56.25%; + width: 100%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); +} + +
+`; + +exports[`ImagePlaceholder should render portrait images correctly 1`] = ` +.c0 { + position: relative; + height: 0; + overflow: hidden; + background-color: #ECEAE7; + background-position: center center; + background-repeat: no-repeat; + background-size: 30%; + padding-bottom: 177.78%; + width: 100%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); +} + +
+`; \ No newline at end of file diff --git a/packages/components/psammead-image-placeholder/src/index.jsx b/packages/components/psammead-image-placeholder/src/index.jsx new file mode 100644 index 0000000000..48a071a254 --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/index.jsx @@ -0,0 +1,24 @@ +import styled from 'styled-components'; +import { number } from 'prop-types'; +import { C_CHALK } from '@bbc/psammead-styles/colours'; +import { BBC_BLOCKS } from '@bbc/psammead-assets/svgs'; + +const ImagePlaceholder = styled.div` + position: relative; + height: 0; + overflow: hidden; + background-color: ${C_CHALK}; + background-position: center center; + background-repeat: no-repeat; + background-size: 30%; + padding-bottom: ${props => props.ratio}%; + width: 100%; + /* placeholder BBC blocks SVG */ + background-image: url(data:image/svg+xml;base64,${BBC_BLOCKS}); +`; + +ImagePlaceholder.propTypes = { + ratio: number.isRequired, +}; + +export default ImagePlaceholder; diff --git a/packages/components/psammead-image-placeholder/src/index.stories.jsx b/packages/components/psammead-image-placeholder/src/index.stories.jsx new file mode 100644 index 0000000000..5b5257befc --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/index.stories.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import ImagePlaceholder from './index'; + +const landscapeImageRatio = 56.25; +const squareImageRatio = 100; +const portraitImageRatio = 177.78; + +storiesOf('ImagePlaceholder', module) + .add('16x9 image placeholder', () => ( + + )) + .add('1x1·image·placeholder', () => ( + + )) + .add('9x16 image placeholder', () => ( + + )); diff --git a/packages/components/psammead-image-placeholder/src/index.test.jsx b/packages/components/psammead-image-placeholder/src/index.test.jsx new file mode 100644 index 0000000000..cd76168c79 --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/index.test.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import ImagePlaceholder from './index'; + +const landscapeImageRatio = 56.25; +const portraitImageRatio = 177.78; + +describe('ImagePlaceholder', () => { + shouldMatchSnapshot( + 'should render landscape images correctly', + , + ); + shouldMatchSnapshot( + 'should render portrait images correctly', + , + ); +}); From b5d7bf827a026f584efa71cbda472308fac56565 Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 11:36:48 +0000 Subject: [PATCH 09/26] add readme --- .../psammead-image-placeholder/README.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/components/psammead-image-placeholder/README.md b/packages/components/psammead-image-placeholder/README.md index e69de29bb2..cb8c60c092 100644 --- a/packages/components/psammead-image-placeholder/README.md +++ b/packages/components/psammead-image-placeholder/README.md @@ -0,0 +1,25 @@ +# psammead-image-placeholder · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-image-placeholder.svg)](https://www.npmjs.com/package/@bbc/psammead-image-placeholder) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) + +## Description + +Psammead Image Placeholder is a `div` with a base-64 encoded SVG background image that depicts the BBC logo. The component accepts a ratio as a prop. In the Psammead component library, Image Placeholder is used within the [psammead-figure](https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-figure) component. + +## When to use this component + +Psammead Image Placeholder is designed to appear as a temporary stand-in to be replaced by an actual image, for example in the case of lazy loading. + +## Accessibility notes + +As a `div` with a background image, Psammead Image Placeholder is a presentational element without semantic meaning. As such it does not need to meet colour contrast requirements. + +## 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). + +### [Code of Conduct](https://github.com/BBC-News/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. + +### License + +Psammead is [Apache 2.0 licensed](https://github.com/BBC-News/psammead/blob/latest/LICENSE). From 5eae0c89903fda2ca9836c2b2926833e06cca980 Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Mon, 17 Dec 2018 13:36:39 +0000 Subject: [PATCH 10/26] Update packages/components/psammead-image-placeholder/src/index.test.jsx Co-Authored-By: radiocontrolled --- .../components/psammead-image-placeholder/src/index.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image-placeholder/src/index.test.jsx b/packages/components/psammead-image-placeholder/src/index.test.jsx index cd76168c79..d4b13a05d8 100644 --- a/packages/components/psammead-image-placeholder/src/index.test.jsx +++ b/packages/components/psammead-image-placeholder/src/index.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; -import ImagePlaceholder from './index'; +import ImagePlaceholder from '.'; const landscapeImageRatio = 56.25; const portraitImageRatio = 177.78; From da0b06bcf7530c972a6d41ed98816e682bba99f9 Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Mon, 17 Dec 2018 13:36:47 +0000 Subject: [PATCH 11/26] Update packages/components/psammead-image-placeholder/src/index.stories.jsx Co-Authored-By: radiocontrolled --- .../components/psammead-image-placeholder/src/index.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image-placeholder/src/index.stories.jsx b/packages/components/psammead-image-placeholder/src/index.stories.jsx index 5b5257befc..e7eded0fd0 100644 --- a/packages/components/psammead-image-placeholder/src/index.stories.jsx +++ b/packages/components/psammead-image-placeholder/src/index.stories.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies -import ImagePlaceholder from './index'; +import ImagePlaceholder from '.'; const landscapeImageRatio = 56.25; const squareImageRatio = 100; From ec00a96a7a44659b1cb7a1eefe97ea6b37153248 Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 13:45:07 +0000 Subject: [PATCH 12/26] fix existing typo and snapshot test for 1x1 --- .../src/__snapshots__/index.test.jsx.snap | 21 ++++++++++++++++++- .../src/index.stories.jsx | 2 +- .../src/index.test.jsx | 5 +++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap index dcb98ce6bb..c46ada8f75 100644 --- a/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap @@ -36,4 +36,23 @@ exports[`ImagePlaceholder should render portrait images correctly 1`] = `
-`; \ No newline at end of file +`; + +exports[`ImagePlaceholder should render square images correctly 1`] = ` +.c0 { + position: relative; + height: 0; + overflow: hidden; + background-color: #ECEAE7; + background-position: center center; + background-repeat: no-repeat; + background-size: 30%; + padding-bottom: 1%; + width: 100%; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); +} + +
+`; diff --git a/packages/components/psammead-image-placeholder/src/index.stories.jsx b/packages/components/psammead-image-placeholder/src/index.stories.jsx index e7eded0fd0..790af0cd75 100644 --- a/packages/components/psammead-image-placeholder/src/index.stories.jsx +++ b/packages/components/psammead-image-placeholder/src/index.stories.jsx @@ -10,7 +10,7 @@ storiesOf('ImagePlaceholder', module) .add('16x9 image placeholder', () => ( )) - .add('1x1·image·placeholder', () => ( + .add('1x1 image·placeholder', () => ( )) .add('9x16 image placeholder', () => ( diff --git a/packages/components/psammead-image-placeholder/src/index.test.jsx b/packages/components/psammead-image-placeholder/src/index.test.jsx index d4b13a05d8..3bca560c27 100644 --- a/packages/components/psammead-image-placeholder/src/index.test.jsx +++ b/packages/components/psammead-image-placeholder/src/index.test.jsx @@ -4,6 +4,7 @@ import ImagePlaceholder from '.'; const landscapeImageRatio = 56.25; const portraitImageRatio = 177.78; +const squareImageRatio = 1; describe('ImagePlaceholder', () => { shouldMatchSnapshot( @@ -14,4 +15,8 @@ describe('ImagePlaceholder', () => { 'should render portrait images correctly', , ); + shouldMatchSnapshot( + 'should render square images correctly', + , + ); }); From 6e1e11dc1d9f06546d631481325b736f6d3618b1 Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Mon, 17 Dec 2018 13:52:59 +0000 Subject: [PATCH 13/26] Update packages/components/psammead-image-placeholder/src/index.stories.jsx Co-Authored-By: radiocontrolled --- .../components/psammead-image-placeholder/src/index.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-image-placeholder/src/index.stories.jsx b/packages/components/psammead-image-placeholder/src/index.stories.jsx index 790af0cd75..9d2be08d77 100644 --- a/packages/components/psammead-image-placeholder/src/index.stories.jsx +++ b/packages/components/psammead-image-placeholder/src/index.stories.jsx @@ -10,7 +10,7 @@ storiesOf('ImagePlaceholder', module) .add('16x9 image placeholder', () => ( )) - .add('1x1 image·placeholder', () => ( + .add('1x1 image placeholder', () => ( )) .add('9x16 image placeholder', () => ( From 2c971c7de1031bf5efbf998639d75e85f65549c3 Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 14:02:22 +0000 Subject: [PATCH 14/26] update snapshot --- .../src/__snapshots__/index.test.jsx.snap | 2 +- .../components/psammead-image-placeholder/src/index.test.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap index c46ada8f75..3abaf83ed1 100644 --- a/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap @@ -47,7 +47,7 @@ exports[`ImagePlaceholder should render square images correctly 1`] = ` background-position: center center; background-repeat: no-repeat; background-size: 30%; - padding-bottom: 1%; + padding-bottom: 100%; width: 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K); } diff --git a/packages/components/psammead-image-placeholder/src/index.test.jsx b/packages/components/psammead-image-placeholder/src/index.test.jsx index 3bca560c27..20b3f469c3 100644 --- a/packages/components/psammead-image-placeholder/src/index.test.jsx +++ b/packages/components/psammead-image-placeholder/src/index.test.jsx @@ -4,7 +4,7 @@ import ImagePlaceholder from '.'; const landscapeImageRatio = 56.25; const portraitImageRatio = 177.78; -const squareImageRatio = 1; +const squareImageRatio = 100; describe('ImagePlaceholder', () => { shouldMatchSnapshot( From 058e09abf7e37d8dec4894ec1c9c26e793bbd2f8 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 14:42:49 +0000 Subject: [PATCH 15/26] Create gel-foundations component and delete gel-constants and gel-foundations-styled-components --- packages/utilities/gel-constants/CHANGELOG.md | 7 - packages/utilities/gel-constants/README.md | 34 --- .../utilities/gel-constants/package-lock.json | 5 - .../CHANGELOG.md | 7 - .../package-lock.json | 267 ------------------ .../package.json | 29 -- .../utilities/gel-foundations/CHANGELOG.md | 5 + .../README.md | 12 +- .../breakpoints.js | 0 .../gel-foundations/package-lock.json | 5 + .../package.json | 9 +- .../spacings.js | 0 .../src/breakpoints.js | 0 .../src/spacings.js | 0 .../src/typography.js | 33 ++- .../typography.js | 0 .../typography_sizes_web.md | 0 17 files changed, 40 insertions(+), 373 deletions(-) delete mode 100644 packages/utilities/gel-constants/CHANGELOG.md delete mode 100644 packages/utilities/gel-constants/README.md delete mode 100644 packages/utilities/gel-constants/package-lock.json delete mode 100644 packages/utilities/gel-foundations-styled-components/CHANGELOG.md delete mode 100644 packages/utilities/gel-foundations-styled-components/package-lock.json delete mode 100644 packages/utilities/gel-foundations-styled-components/package.json create mode 100644 packages/utilities/gel-foundations/CHANGELOG.md rename packages/utilities/{gel-foundations-styled-components => gel-foundations}/README.md (61%) rename packages/utilities/{gel-constants => gel-foundations}/breakpoints.js (100%) create mode 100644 packages/utilities/gel-foundations/package-lock.json rename packages/utilities/{gel-constants => gel-foundations}/package.json (78%) rename packages/utilities/{gel-constants => gel-foundations}/spacings.js (100%) rename packages/utilities/{gel-constants => gel-foundations}/src/breakpoints.js (100%) rename packages/utilities/{gel-constants => gel-foundations}/src/spacings.js (100%) rename packages/utilities/{gel-foundations-styled-components => gel-foundations}/src/typography.js (83%) rename packages/utilities/{gel-foundations-styled-components => gel-foundations}/typography.js (100%) rename packages/utilities/{gel-foundations-styled-components => gel-foundations}/typography_sizes_web.md (100%) diff --git a/packages/utilities/gel-constants/CHANGELOG.md b/packages/utilities/gel-constants/CHANGELOG.md deleted file mode 100644 index b1c86c8773..0000000000 --- a/packages/utilities/gel-constants/CHANGELOG.md +++ /dev/null @@ -1,7 +0,0 @@ -# Gel Constants Changelog - -| Version | Description | -|---------|-------------| -| 0.1.2 | [PR#173](https://github.com/BBC-News/psammead/pull/173) Update PRs welcome link | -| 0.1.1 | [PR#74](https://github.com/BBC-News/psammead/pull/74) Move file contents into a src directory and babel transpile prepublish. | -| 0.1.0 | [PR#70](https://github.com/BBC-News/psammead/pull/70) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). | diff --git a/packages/utilities/gel-constants/README.md b/packages/utilities/gel-constants/README.md deleted file mode 100644 index f9f98b1dea..0000000000 --- a/packages/utilities/gel-constants/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# gel-constants · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-constants.svg)](https://www.npmjs.com/package/@bbc/gel-constants) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) - -This package is a collection of variable constants which can be imported into your application. - -## Installation - -```jsx -npm install @bbc/gel-constants --save -``` - -## Usage - -```jsx -import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-constants/breakpoints'; - -import { GEL_GUTTER_BELOW_600PX } from '@bbc/gel-constants/spacings'; -``` - -## Exports - -`/breakpoints` - GEL breakpoints, as well as typography breakpoints. These use the GEL grid sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes). -`/spacings` - GEL spacings and GEL Grid margins and gutters. These use the GEL grid spacing sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout). - -## 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). - -### [Code of Conduct](https://github.com/BBC-News/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. - -### License - -Psammead is [Apache 2.0 licensed](https://github.com/BBC-News/psammead/blob/latest/LICENSE). diff --git a/packages/utilities/gel-constants/package-lock.json b/packages/utilities/gel-constants/package-lock.json deleted file mode 100644 index 613d7cc58f..0000000000 --- a/packages/utilities/gel-constants/package-lock.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@bbc/gel-constants", - "version": "0.1.2", - "lockfileVersion": 1 -} diff --git a/packages/utilities/gel-foundations-styled-components/CHANGELOG.md b/packages/utilities/gel-foundations-styled-components/CHANGELOG.md deleted file mode 100644 index ae7d95e84a..0000000000 --- a/packages/utilities/gel-foundations-styled-components/CHANGELOG.md +++ /dev/null @@ -1,7 +0,0 @@ -# Gel Foundations Styled Components Changelog - -| Version | Description | -|---------|-------------| -| 0.2.0 | [PR#158](https://github.com/BBC-News/psammead/pull/158) Ensure package comprehensively includes all GEL-defined type sizes. | -| 0.1.1 | [PR#173](https://github.com/BBC-News/psammead/pull/173) Update PRs welcome link | -| 0.1.0 | [PR#69](https://github.com/BBC-News/psammead/pull/69) Create initial package, pulled in typography from [simorgh](https://github.com/BBC-News/simorgh). | diff --git a/packages/utilities/gel-foundations-styled-components/package-lock.json b/packages/utilities/gel-foundations-styled-components/package-lock.json deleted file mode 100644 index a3ca17f775..0000000000 --- a/packages/utilities/gel-foundations-styled-components/package-lock.json +++ /dev/null @@ -1,267 +0,0 @@ -{ - "name": "@bbc/gel-foundations-styled-components", - "version": "0.2.0", - "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/types": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.6.tgz", - "integrity": "sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==", - "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", - "to-fast-properties": "^2.0.0" - } - }, - "@bbc/gel-constants": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@bbc/gel-constants/-/gel-constants-0.1.1.tgz", - "integrity": "sha512-12arxbBpW+uIFxebVyvmVHw8KdQQ53X9ZZLXOfp2n5iRBdYr87cg5NrEQLCW6URfy7b2DLet8oPFF6zCoT6ilw==" - }, - "@emotion/is-prop-valid": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz", - "integrity": "sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==", - "requires": { - "@emotion/memoize": "^0.6.6" - } - }, - "@emotion/memoize": { - "version": "0.6.6", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz", - "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==" - }, - "@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.9.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.9.1.tgz", - "integrity": "sha512-mn7vI7ueBzr7ntLbDAhvILxjOnFPO/JzZsnU1wakgSh4YNrgLZ+oMnycRnC8xpZut3Kuwcz8dZJDsWJBl1OXVA==", - "requires": { - "@babel/helper-annotate-as-pure": "^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-is": { - "version": "16.6.3", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz", - "integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==" - }, - "safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" - }, - "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.2", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.2.tgz", - "integrity": "sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==", - "requires": { - "@emotion/is-prop-valid": "^0.6.8", - "@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/utilities/gel-foundations-styled-components/package.json b/packages/utilities/gel-foundations-styled-components/package.json deleted file mode 100644 index d93b8d26cf..0000000000 --- a/packages/utilities/gel-foundations-styled-components/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "@bbc/gel-foundations-styled-components", - "version": "0.2.0", - "description": "A collection of styled component implementations based on BBC GEL guidelines.", - "repository": { - "type": "git", - "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/gel-foundations-styled-components" - }, - "author": { - "name": "Psammead Maintainers", - "email": "PsammeadMaintainers@bbc.co.uk" - }, - "license": "Apache-2.0", - "bugs": { - "url": "https://github.com/bbc/psammead/issues" - }, - "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/utilities/gel-foundations-styled-components/README.md", - "keywords": [ - "bbc", - "utilities", - "gel", - "styled-components", - "typography" - ], - "dependencies": { - "@bbc/gel-constants": "^0.1.1", - "styled-components": "^4.1.1" - } -} diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md new file mode 100644 index 0000000000..8dd3044b5d --- /dev/null +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -0,0 +1,5 @@ +# Gel Foundations Changelog + +| Version | Description | +|---------|-------------| +| 0.1.0 | [PR#XX](https://github.com/BBC-News/psammead/pull/XX) Create initial package, pulled in from gel-constants and gel-foundations-styled-components packages. | diff --git a/packages/utilities/gel-foundations-styled-components/README.md b/packages/utilities/gel-foundations/README.md similarity index 61% rename from packages/utilities/gel-foundations-styled-components/README.md rename to packages/utilities/gel-foundations/README.md index f5926ffe51..d6676c2432 100644 --- a/packages/utilities/gel-foundations-styled-components/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -1,18 +1,22 @@ -# gel-foundations-styled-components · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations-styled-components.svg)](https://www.npmjs.com/package/@bbc/gel-foundations-styled-components) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) +# gel-foundations · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations.svg)](https://www.npmjs.com/package/@bbc/gel-foundations) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of styled component implementations based on BBC GEL guidelines which can be imported into your application. +This package is a collection of variable constants which can be imported into your application. [More details on the type sizes defined in this package are available here.](./typography_sizes_web.md) ## Installation ```jsx -npm install @bbc/gel-foundations-styled-components --save +npm install @bbc/gel-foundations --save ``` ## Usage ```jsx +import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; + +import { GEL_GUTTER_BELOW_600PX } from '@bbc/gel-foundations/spacings'; + import { GEL_BREVIER } from '@bbc/gel-foundations-styled-components/typography'; ``` @@ -22,6 +26,8 @@ Our typography uses `em` for font-size and `rem` for line-height. `em` allows mo ## Exports +`/breakpoints` - GEL breakpoints, as well as typography breakpoints. These use the GEL grid sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes). +`/spacings` - GEL spacings and GEL Grid margins and gutters. These use the GEL grid spacing sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout). `/typography` - GEL typography. These are based on the gel typography standard which can be found in the [GEL guidelines](https://www.bbc.co.uk/gel/guidelines/typography). ## Contributing diff --git a/packages/utilities/gel-constants/breakpoints.js b/packages/utilities/gel-foundations/breakpoints.js similarity index 100% rename from packages/utilities/gel-constants/breakpoints.js rename to packages/utilities/gel-foundations/breakpoints.js diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json new file mode 100644 index 0000000000..9a3146460d --- /dev/null +++ b/packages/utilities/gel-foundations/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "@bbc/gel-foundations", + "version": "0.1.0", + "lockfileVersion": 1 +} diff --git a/packages/utilities/gel-constants/package.json b/packages/utilities/gel-foundations/package.json similarity index 78% rename from packages/utilities/gel-constants/package.json rename to packages/utilities/gel-foundations/package.json index 3b8b42a3c0..2bc79ef0b3 100644 --- a/packages/utilities/gel-constants/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,10 +1,10 @@ { - "name": "@bbc/gel-constants", + "name": "@bbc/gel-foundations", "version": "0.1.2", "description": "A collection of gel constants", "repository": { "type": "git", - "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/gel-constants" + "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/gel-foundations" }, "author": { "name": "Psammead Maintainers", @@ -14,13 +14,14 @@ "bugs": { "url": "https://github.com/bbc/psammead/issues" }, - "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/utilities/gel-constants/README.md", + "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/utilities/gel-foundations/README.md", "keywords": [ "bbc", "utilities", "gel", "breakpoints", "grid", - "spacing" + "spacing", + "typography" ] } diff --git a/packages/utilities/gel-constants/spacings.js b/packages/utilities/gel-foundations/spacings.js similarity index 100% rename from packages/utilities/gel-constants/spacings.js rename to packages/utilities/gel-foundations/spacings.js diff --git a/packages/utilities/gel-constants/src/breakpoints.js b/packages/utilities/gel-foundations/src/breakpoints.js similarity index 100% rename from packages/utilities/gel-constants/src/breakpoints.js rename to packages/utilities/gel-foundations/src/breakpoints.js diff --git a/packages/utilities/gel-constants/src/spacings.js b/packages/utilities/gel-foundations/src/spacings.js similarity index 100% rename from packages/utilities/gel-constants/src/spacings.js rename to packages/utilities/gel-foundations/src/spacings.js diff --git a/packages/utilities/gel-foundations-styled-components/src/typography.js b/packages/utilities/gel-foundations/src/typography.js similarity index 83% rename from packages/utilities/gel-foundations-styled-components/src/typography.js rename to packages/utilities/gel-foundations/src/typography.js index 89fa93f127..3bfad8618a 100644 --- a/packages/utilities/gel-foundations-styled-components/src/typography.js +++ b/packages/utilities/gel-foundations/src/typography.js @@ -1,7 +1,6 @@ -import { css } from 'styled-components'; -import { MEDIA_QUERY_TYPOGRAPHY } from '@bbc/gel-constants/breakpoints'; +import { MEDIA_QUERY_TYPOGRAPHY } from './breakpoints'; -export const GEL_ATLAS = css` +export const GEL_ATLAS = ` font-size: 4.875em; line-height: 5.25rem; @@ -16,7 +15,7 @@ export const GEL_ATLAS = css` } `; -export const GEL_ELEPHANT = css` +export const GEL_ELEPHANT = ` font-size: 3.75em; line-height: 4rem; @@ -31,7 +30,7 @@ export const GEL_ELEPHANT = css` } `; -export const GEL_IMPERIAL = css` +export const GEL_IMPERIAL = ` font-size: 3.125em; line-height: 3.375rem; @@ -46,7 +45,7 @@ export const GEL_IMPERIAL = css` } `; -export const GEL_ROYAL = css` +export const GEL_ROYAL = ` font-size: 2.5em; line-height: 2.75rem; @@ -61,7 +60,7 @@ export const GEL_ROYAL = css` } `; -export const GEL_FOOLSCAP = css` +export const GEL_FOOLSCAP = ` font-size: 2em; line-height: 2.25rem; @@ -76,7 +75,7 @@ export const GEL_FOOLSCAP = css` } `; -export const GEL_CANON = css` +export const GEL_CANON = ` font-size: 1.75em; line-height: 2rem; @@ -91,7 +90,7 @@ export const GEL_CANON = css` } `; -export const GEL_TRAFALGAR = css` +export const GEL_TRAFALGAR = ` font-size: 1.25em; line-height: 1.5rem; @@ -106,7 +105,7 @@ export const GEL_TRAFALGAR = css` } `; -export const GEL_PARAGON = css` +export const GEL_PARAGON = ` font-size: 1.25em; line-height: 1.5rem; @@ -121,7 +120,7 @@ export const GEL_PARAGON = css` } `; -export const GEL_DOUBLE_PICA = css` +export const GEL_DOUBLE_PICA = ` font-size: 1.25em; line-height: 1.5rem; @@ -131,7 +130,7 @@ export const GEL_DOUBLE_PICA = css` } `; -export const GEL_GREAT_PRIMER = css` +export const GEL_GREAT_PRIMER = ` font-size: 1.125em; line-height: 1.375rem; @@ -141,7 +140,7 @@ export const GEL_GREAT_PRIMER = css` } `; -export const GEL_BODY_COPY = css` +export const GEL_BODY_COPY = ` font-size: 0.9375em; line-height: 1.25rem; @@ -151,7 +150,7 @@ export const GEL_BODY_COPY = css` } `; -export const GEL_PICA = css` +export const GEL_PICA = ` font-size: 0.9375em; line-height: 1.25rem; @@ -161,7 +160,7 @@ export const GEL_PICA = css` } `; -export const GEL_LONG_PRIMER = css` +export const GEL_LONG_PRIMER = ` font-size: 0.9375em; line-height: 1.125rem; @@ -170,7 +169,7 @@ export const GEL_LONG_PRIMER = css` } `; -export const GEL_BREVIER = css` +export const GEL_BREVIER = ` font-size: 0.875em; line-height: 1rem; @@ -183,7 +182,7 @@ export const GEL_BREVIER = css` } `; -export const GEL_MINION = css` +export const GEL_MINION = ` font-size: 0.75em; line-height: 1em; `; diff --git a/packages/utilities/gel-foundations-styled-components/typography.js b/packages/utilities/gel-foundations/typography.js similarity index 100% rename from packages/utilities/gel-foundations-styled-components/typography.js rename to packages/utilities/gel-foundations/typography.js diff --git a/packages/utilities/gel-foundations-styled-components/typography_sizes_web.md b/packages/utilities/gel-foundations/typography_sizes_web.md similarity index 100% rename from packages/utilities/gel-foundations-styled-components/typography_sizes_web.md rename to packages/utilities/gel-foundations/typography_sizes_web.md From 36996acdc5bfe008260f6116eee07452613ff0a9 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 14:46:07 +0000 Subject: [PATCH 16/26] Add spacing to cause linebreak --- packages/utilities/gel-foundations/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index d6676c2432..e9e3fc1f99 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -27,7 +27,7 @@ Our typography uses `em` for font-size and `rem` for line-height. `em` allows mo ## Exports `/breakpoints` - GEL breakpoints, as well as typography breakpoints. These use the GEL grid sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes). -`/spacings` - GEL spacings and GEL Grid margins and gutters. These use the GEL grid spacing sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout). +`/spacings` - GEL spacings and GEL Grid margins and gutters. These use the GEL grid spacing sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout). `/typography` - GEL typography. These are based on the gel typography standard which can be found in the [GEL guidelines](https://www.bbc.co.uk/gel/guidelines/typography). ## Contributing From 3dc027741dbcedff96dad4db29adad26caac686c Mon Sep 17 00:00:00 2001 From: radiocontrolled Date: Mon, 17 Dec 2018 15:59:09 +0000 Subject: [PATCH 17/26] move react to dev deps --- .../components/psammead-image-placeholder/package-lock.json | 2 ++ packages/components/psammead-image-placeholder/package.json | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-image-placeholder/package-lock.json b/packages/components/psammead-image-placeholder/package-lock.json index b87dd3f9e0..b6b21f6d59 100644 --- a/packages/components/psammead-image-placeholder/package-lock.json +++ b/packages/components/psammead-image-placeholder/package-lock.json @@ -256,6 +256,7 @@ "version": "16.6.3", "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz", "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==", + "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -295,6 +296,7 @@ "version": "0.11.3", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.3.tgz", "integrity": "sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==", + "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/packages/components/psammead-image-placeholder/package.json b/packages/components/psammead-image-placeholder/package.json index 0fe78fc859..5c050ad2ca 100644 --- a/packages/components/psammead-image-placeholder/package.json +++ b/packages/components/psammead-image-placeholder/package.json @@ -19,11 +19,11 @@ "dependencies": { "@bbc/psammead-assets": "^0.1.2", "@bbc/psammead-styles": "^0.1.3", - "react": "^16.6.3", "styled-components": "^4.1.2" }, "devDependencies": { - "@bbc/psammead-test-helpers": "^0.1.0" + "@bbc/psammead-test-helpers": "^0.1.0", + "react": "^16.6.3" }, "keywords": [ "bbc", From e5022782aaecfc80f210cdf7337687f972e7739c Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:09:15 +0000 Subject: [PATCH 18/26] Update README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index a2d89f2eab..18541e313c 100644 --- a/README.md +++ b/README.md @@ -183,3 +183,13 @@ Psammead is currently maintained by developers in the BBC Articles and Reach + L Contact us by email on [PsammeadMaintainers@bbc.co.uk](mailto:PsammeadMaintainers@bbc.co.uk), or find us on Slack at #psammead in the bbcnews workspace. +### The Name? + +Image of the Psammead from the BBC TV program Five Children and It (2004) + +Pronounced as sam-me-ad 'sæmiː|æd + +"The Psammead, also known as Sand Fairy, is a sapient magical creature once encountered by five children in a gravel pit". + +**P**erfectly **s**harable **a**tomically **m**odular **m**agically **e**ngineered **a**bstract **d**oodads - This is still just a bad joke + From 0ee7dcb37ea85f9143867d9d43e0cf366425f622 Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Mon, 17 Dec 2018 16:10:16 +0000 Subject: [PATCH 19/26] Update packages/utilities/gel-foundations/CHANGELOG.md Co-Authored-By: dr3 --- packages/utilities/gel-foundations/CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index 8dd3044b5d..08ee1178b7 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -2,4 +2,5 @@ | Version | Description | |---------|-------------| -| 0.1.0 | [PR#XX](https://github.com/BBC-News/psammead/pull/XX) Create initial package, pulled in from gel-constants and gel-foundations-styled-components packages. | +| 0.1.0 | [PR#221](https://github.com/BBC-News/psammead/pull/221) Create initial package, pulled in from gel-constants and gel-foundations-styled-components packages. | + From ce0918d321a2f443284475b6ebb64448ae20006e Mon Sep 17 00:00:00 2001 From: Chris Ashton Date: Mon, 17 Dec 2018 16:10:27 +0000 Subject: [PATCH 20/26] Update packages/utilities/gel-foundations/README.md Co-Authored-By: dr3 --- packages/utilities/gel-foundations/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index e9e3fc1f99..5eea3da7aa 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -1,6 +1,6 @@ # gel-foundations · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations.svg)](https://www.npmjs.com/package/@bbc/gel-foundations) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of variable constants which can be imported into your application. +This package is a collection of constants which can be imported into your application. [More details on the type sizes defined in this package are available here.](./typography_sizes_web.md) From c2a43ccec2bb8cd09360f3275079dc67459ecf2b Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:11:37 +0000 Subject: [PATCH 21/26] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 18541e313c..2cb2e304ca 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,7 @@ Contact us by email on [PsammeadMaintainers@bbc.co.uk](mailto:PsammeadMaintainer Image of the Psammead from the BBC TV program Five Children and It (2004) -Pronounced as sam-me-ad 'sæmiː|æd +Pronounced as `sam-me-ad` 'sæmiː|æd "The Psammead, also known as Sand Fairy, is a sapient magical creature once encountered by five children in a gravel pit". From b2c2ef46c93676e5cbedb629ee65b9c6a1201510 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:21:52 +0000 Subject: [PATCH 22/26] lowercase name --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2cb2e304ca..6c7b4cc366 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,7 @@ Psammead is currently maintained by developers in the BBC Articles and Reach + L Contact us by email on [PsammeadMaintainers@bbc.co.uk](mailto:PsammeadMaintainers@bbc.co.uk), or find us on Slack at #psammead in the bbcnews workspace. -### The Name? +### The name? Image of the Psammead from the BBC TV program Five Children and It (2004) From a1735cd2cb10c8404710d6d683f94d44d324773a Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:27:44 +0000 Subject: [PATCH 23/26] Try new formatting --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6c7b4cc366..ead3f21587 100644 --- a/README.md +++ b/README.md @@ -191,5 +191,7 @@ Pronounced as `sam-me-ad` 'sæmiː|æd "The Psammead, also known as Sand Fairy, is a sapient magical creature once encountered by five children in a gravel pit". -**P**erfectly **s**harable **a**tomically **m**odular **m**agically **e**ngineered **a**bstract **d**oodads - This is still just a bad joke +>**P**erfectly **s**harable **a**tomically **m**odular **m**agically **e**ngineered **a**bstract **d**oodads + +^ This is still just a bad joke From 38f31c5fa97da20ea9ccafc4789fd050ca307afb Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:29:03 +0000 Subject: [PATCH 24/26] Make the image a bit bigger --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ead3f21587..74e5f4aa02 100644 --- a/README.md +++ b/README.md @@ -185,7 +185,7 @@ Contact us by email on [PsammeadMaintainers@bbc.co.uk](mailto:PsammeadMaintainer ### The name? -Image of the Psammead from the BBC TV program Five Children and It (2004) +Image of the Psammead from the BBC TV program Five Children and It (2004) Pronounced as `sam-me-ad` 'sæmiː|æd From c5629bfd6836956d2535a3c0070b35b0a4eec958 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 17 Dec 2018 16:32:27 +0000 Subject: [PATCH 25/26] Update README.md --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 74e5f4aa02..01f6d58a93 100644 --- a/README.md +++ b/README.md @@ -191,7 +191,11 @@ Pronounced as `sam-me-ad` 'sæmiː|æd "The Psammead, also known as Sand Fairy, is a sapient magical creature once encountered by five children in a gravel pit". ->**P**erfectly **s**harable **a**tomically **m**odular **m**agically **e**ngineered **a**bstract **d**oodads - -^ This is still just a bad joke +It MIGHT stand for: + +**P**erfectly **s**harable **a**tomically **m**odular **m**agically **e**ngineered **a**bstract **d**oodads + +Or it _might_ be named Psammead to follow the mythical creature theme of [related repos](https://github.com/BBC-News/simorgh). + +We'll let you decide! From fa4adfbd26c028dc3b3c54bd6ba4233bd642bd08 Mon Sep 17 00:00:00 2001 From: Sareh Date: Tue, 18 Dec 2018 08:06:55 +0000 Subject: [PATCH 26/26] Remove --debug flag from cc-test-reporter Co-Authored-By: bcmn --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index f73c5018de..50ee34f558 100644 --- a/Makefile +++ b/Makefile @@ -11,7 +11,7 @@ code-coverage-before-build: ./cc-test-reporter before-build; code-coverage-after-build: - ./cc-test-reporter after-build -t lcov --debug; + ./cc-test-reporter after-build -t lcov; tests: npm test;