Add Copyright component

packages/components/psammead-copyright/CHANGELOG.md

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

packages/components/psammead-copyright/README.md

@@ -0,0 +1,27 @@
+# psammead-copyright · [![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-copyright.svg)](https://www.npmjs.com/package/@bbc/psammead-copyright) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+
+### Description
+Displays the source attribution of an image in block capitals in the bottom-right of the parent element. 
+
+### When to use this component
+This component is intended to be used alongside images or diagrams contained within a [Figure component](../).
+
+### When not to use this component
+This component should not be used arbitrarily to represent source attribution across the page. As above, it is not intended to be used outside the [Figure component](../). The accessibility text would be incorrect and potentially confusing.
+
+Do not use this component if you know the source attribution is already covered by another copyright disclosure on the page, such as in the [Footer component](../../Footer).
+
+### Accessibility notes
+The default styling of this component is intended to comply with WCAG colour contrast standards.
+
+## 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-copyright/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Copyright should render correctly 1`] = `
+.c0 {
+  font-size: 0.75em;
+  line-height: 1em;
+  background-color: rgba(34,34,34,0.75);
+  text-transform: uppercase;
+  color: #FFFFFF;
+  padding: 0.25rem 0.5rem;
+  font-family: ReithSansNewsRegular,Helvetica,Arial,sans-serif;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+}
+
+<p
+  className="c0"
+  role="text"
+>
+  Getty Images
+</p>
+`;

packages/components/psammead-copyright/index.jsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { C_WHITE } from '@bbc/psammead-styles/colours';
+import { FF_NEWS_SANS_REG } from '@bbc/psammead-styles/fonts';
+import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-constants/spacings';
+import { GEL_MINION } from '@bbc/gel-foundations-styled-components/typography';
+
+const Copyright = styled.p.attrs({
+  role: 'text',
+})`
+  ${GEL_MINION};
+  background-color: rgba(34, 34, 34, 0.75);
+  text-transform: uppercase;
+  color: ${C_WHITE};
+  padding: ${GEL_SPACING_HLF} ${GEL_SPACING};
+  font-family: ${FF_NEWS_SANS_REG};
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+`;
+
+export default Copyright;

packages/components/psammead-copyright/index.stories.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import Copyright from './index';
+
+storiesOf('Copyright', module).add('default', () => (
+  <Copyright>Getty Images</Copyright>
+));

packages/components/psammead-copyright/index.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import Copyright from './index';
+
+describe('Copyright', () => {
+  shouldMatchSnapshot(
+    'should render correctly',
+    <Copyright>Getty Images</Copyright>,
+  );
+});