Merge branch 'latest' into psammead-image

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 {

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;
 

README.md

@@ -3,6 +3,8 @@
 <div align="center">
 
 [![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?
+
+<img align="right" width="250" alt="Image of the Psammead from the BBC TV program Five Children and It (2004)" src="http://www.bbc.co.uk/staticarchive/c1c9a6055cf3c6e4eb476a70186e597ea15e6cf7.jpg">
+
+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!
+

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). |

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).

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"
+  ]
+}