Move Media Icons from psammead-media-indicator into psammead-assets

packages/utilities/psammead-assets/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.2.5 | [PR#2115](https://github.com/bbc/psammead/pull/2115) Added media icons SVGs |
 | 2.2.4 | [PR#1942](https://github.com/bbc/psammead/pull/1942) Talos - Bump React to 16.9.0 |
 | 2.2.3 | [PR#1847](https://github.com/bbc/psammead/pull/1847) Fixed Telugu typos |
 | 2.2.2 | [PR#1806](https://github.com/bbc/psammead/pull/1806/) Change strings to booleans |

packages/utilities/psammead-assets/index.test.jsx

@@ -7,6 +7,7 @@ const ampBoilerplateExpectedExports = {
 
 const svgsExpectedExports = {
   BBC_BLOCKS: 'string',
+  icons: 'object',
   afaanoromoo: 'object',
   afrique: 'object',
   amharic: 'object',

packages/utilities/psammead-assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-assets",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "sideEffects": false,
   "description": "A collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.",
   "repository": {

packages/utilities/psammead-assets/src/svgs.jsx

@@ -1,4 +1,5 @@
 export BBC_BLOCKS from './svgs/bbcBlocks';
+export icons from './svgs/mediaIcons';
 export afaanoromoo from './svgs/afaanoromoo';
 export afrique from './svgs/afrique';
 export amharic from './svgs/amharic';

packages/utilities/psammead-assets/src/svgs.stories.jsx

@@ -61,7 +61,7 @@ getSVG.propTypes = {
 const stories = storiesOf('Utilities|SVGs', module).addDecorator(withKnobs);
 
 Object.keys(svgs)
-  .filter(svgName => svgName !== 'BBC_BLOCKS')
+  .filter(svgName => svgName !== 'BBC_BLOCKS' && svgName !== 'icons')
   .forEach(svgName => {
     stories.add(
       svgName,

packages/utilities/psammead-assets/src/svgs.test.jsx

@@ -3,7 +3,7 @@ import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import * as svgs from './svgs';
 
 Object.keys(svgs)
-  .filter(svgName => svgName !== 'BBC_BLOCKS')
+  .filter(svgName => svgName !== 'BBC_BLOCKS' && svgName !== 'icons')
   .forEach(svgName => {
     describe(`${svgName} SVG`, () => {
       shouldMatchSnapshot(

packages/utilities/psammead-assets/src/svgs/mediaIcons.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { C_EBON } from '@bbc/psammead-styles/colours';
+import { GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings';
+
+// `currentColor` has been used to better reflect user colour choices in Firefox.
+const MediaIcon = styled.svg`
+  vertical-align: middle;
+  margin: 0 ${GEL_SPACING_HLF};
+  color: ${C_EBON};
+  fill: currentColor;
+`;
+
+const VideoMediaIcon = styled(MediaIcon)`
+  width: 0.75rem;
+  height: 0.75rem;
+`;
+
+const AudioMediaIcon = styled(MediaIcon)`
+  width: 0.8125rem;
+  height: 0.75rem;
+`;
+
+const PhotoMediaIcon = styled(MediaIcon)`
+  width: 1rem;
+  height: 0.8125rem;
+`;
+
+const icons = {
+  video: (
+    <VideoMediaIcon
+      viewBox="0 0 32 32"
+      width="12px"
+      height="12px"
+      focusable="false"
+    >
+      <polygon points="3,32 29,16 3,0" />
+    </VideoMediaIcon>
+  ),
+  audio: (
+    <AudioMediaIcon
+      viewBox="0 0 13 12"
+      width="13px"
+      height="12px"
+      focusable="false"
+    >
+      <path d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z" />
+      <path d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z" />
+    </AudioMediaIcon>
+  ),
+  photogallery: (
+    <PhotoMediaIcon
+      viewBox="0 0 32 26"
+      width="16px"
+      height="13px"
+      focusable="false"
+    >
+      <path d="M9,2V0H4V2H0V26H32V2ZM6.5,10A2.5,2.5,0,1,1,9,7.52,2.5,2.5,0,0,1,6.5,10ZM20,23a9,9,0,1,1,9-9A9,9,0,0,1,20,23Z" />
+      <circle cx="20" cy="14.02" r="5.5" />
+    </PhotoMediaIcon>
+  ),
+};
+
+export default icons;