diff --git a/Jenkinsfile b/Jenkinsfile index 03e234774b..0765b07c5e 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -45,7 +45,11 @@ pipeline { } } 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 code-coverage-after-build' + } } post { always { diff --git a/Makefile b/Makefile index 9b7bc4c395..50ee34f558 100644 --- a/Makefile +++ b/Makefile @@ -5,6 +5,14 @@ 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; + tests: npm test; diff --git a/README.md b/README.md index a2d89f2eab..0a35d032ce 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)](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) @@ -183,3 +185,19 @@ 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". + +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! + 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..cb8c60c092 --- /dev/null +++ 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). diff --git a/packages/utilities/gel-foundations-styled-components/package-lock.json b/packages/components/psammead-image-placeholder/package-lock.json similarity index 63% rename from packages/utilities/gel-foundations-styled-components/package-lock.json rename to packages/components/psammead-image-placeholder/package-lock.json index a3ca17f775..b6b21f6d59 100644 --- a/packages/utilities/gel-foundations-styled-components/package-lock.json +++ b/packages/components/psammead-image-placeholder/package-lock.json @@ -1,6 +1,6 @@ { - "name": "@bbc/gel-foundations-styled-components", - "version": "0.2.0", + "name": "@bbc/psammead-image-placeholder", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -13,19 +13,34 @@ } }, "@babel/types": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.6.tgz", - "integrity": "sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==", + "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/gel-constants": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@bbc/gel-constants/-/gel-constants-0.1.1.tgz", - "integrity": "sha512-12arxbBpW+uIFxebVyvmVHw8KdQQ53X9ZZLXOfp2n5iRBdYr87cg5NrEQLCW6URfy7b2DLet8oPFF6zCoT6ilw==" + "@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", @@ -50,10 +65,16 @@ "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.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.9.1.tgz", - "integrity": "sha512-mn7vI7ueBzr7ntLbDAhvILxjOnFPO/JzZsnU1wakgSh4YNrgLZ+oMnycRnC8xpZut3Kuwcz8dZJDsWJBl1OXVA==", + "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", @@ -62,14 +83,26 @@ }, "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", + "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": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "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", @@ -85,6 +118,12 @@ "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", @@ -125,6 +164,12 @@ "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", @@ -139,6 +184,15 @@ "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", @@ -158,9 +212,9 @@ } }, "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==" + "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", @@ -198,21 +252,86 @@ "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==", + "dev": true, + "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==", + "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=" }, + "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", @@ -258,6 +377,12 @@ "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", diff --git a/packages/components/psammead-image-placeholder/package.json b/packages/components/psammead-image-placeholder/package.json new file mode 100644 index 0000000000..5c050ad2ca --- /dev/null +++ b/packages/components/psammead-image-placeholder/package.json @@ -0,0 +1,33 @@ +{ + "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/psammead-assets": "^0.1.2", + "@bbc/psammead-styles": "^0.1.3", + "styled-components": "^4.1.2" + }, + "devDependencies": { + "@bbc/psammead-test-helpers": "^0.1.0", + "react": "^16.6.3" + }, + "keywords": [ + "bbc", + "brand", + "logo" + ] +} 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..3abaf83ed1 --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/__snapshots__/index.test.jsx.snap @@ -0,0 +1,58 @@ +// 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); +} + +
+`; + +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: 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.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..9d2be08d77 --- /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 '.'; + +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..20b3f469c3 --- /dev/null +++ b/packages/components/psammead-image-placeholder/src/index.test.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import ImagePlaceholder from '.'; + +const landscapeImageRatio = 56.25; +const portraitImageRatio = 177.78; +const squareImageRatio = 100; + +describe('ImagePlaceholder', () => { + shouldMatchSnapshot( + 'should render landscape images correctly', + , + ); + shouldMatchSnapshot( + 'should render portrait images correctly', + , + ); + shouldMatchSnapshot( + 'should render square images correctly', + , + ); +}); 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.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..08ee1178b7 --- /dev/null +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -0,0 +1,6 @@ +# Gel Foundations Changelog + +| Version | Description | +|---------|-------------| +| 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. | + diff --git a/packages/utilities/gel-foundations-styled-components/README.md b/packages/utilities/gel-foundations/README.md similarity index 62% rename from packages/utilities/gel-foundations-styled-components/README.md rename to packages/utilities/gel-foundations/README.md index f5926ffe51..5eea3da7aa 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 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