Merge pull request #105 from BBC-News/add-brand

Adds Brand component to Psammead

babel.config.js

@@ -1,6 +1,15 @@
 const presets = ['@babel/preset-env', '@babel/preset-react'];
 
 module.exports = {
+  plugins: [
+    [
+      'babel-plugin-styled-components',
+      {
+        ssr: true,
+        fileName: false,
+      },
+    ],
+  ],
   presets,
   env: {
     // used by Jest

package.json

@@ -49,7 +49,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.6",
     "babel-loader": "^8.0.4",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-styled-components": "^1.9.2",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "eslint": "^5.9.0",
@@ -65,7 +65,7 @@
     "husky": "^1.2.0",
     "jest": "^23.6.0",
     "jest-fetch-mock": "^1.6.5",
-    "jest-styled-components": "^5.0.1",
+    "jest-styled-components": "^6.3.1",
     "lerna": "^3.3.1",
     "prettier": "^1.15.2",
     "react": "^16.6.3",

packages/components/psammead-brand/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Psammead Brand Changelog
+
+| Version | Description |
+|---------|-------------|
+| 0.1.0 | [PR#105](https://github.com/BBC-News/psammead/pull/105) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). |

packages/components/psammead-brand/README.md

@@ -0,0 +1,34 @@
+# Brand · [![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-brand.svg)](https://www.npmjs.com/package/@bbc/psammead-brand) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)
+
+## Description	
+The `Brand` component provides the BBC News logo (as SVG), nested inside a styled span, link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news". `Brand` takes a `brandName` as a prop. This prop is passed to a [VisuallyHiddenText](../VisuallyHiddenText) component, nested inside Brand. Note that this does not currently affect the branding itself, which always renders as `BBC NEWS`.
+
+## Usage 
+```
+import Brand from '@bbc/psammead-brand';
+
+const Header = (brandName) => (
+  <header role="banner">
+    <Brand brandName={brandName} />
+  </header>
+);
+```
+
+## When to use this component	
+The `Brand` component is designed to be used where a BBC logo is required as SVG. `Brand` is used in the [BrandContainer](../../containers/Brand), which consumes a service context it passes to the `Brand`. 
+
+## Accessibility notes	
+* Visually hidden text is provided (e.g. for screen reader users)
+* `Brand` is keyboard-accessible and provides hover and focus styles
+
+## 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).