Add clock icon for Radio Schedules

packages/utilities/psammead-assets/CHANGELOG.md

@@ -3,14 +3,15 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.12.0 | [PR#2935](https://github.com/bbc/psammead/pull/2935) Add a Clock icon to core icons |
 | 2.11.0 | [PR#2826](https://github.com/bbc/psammead/pull/2826) Add amp ads js script boilerplate |
 | 2.10.3 | [PR#2694](https://github.com/bbc/psammead/pull/2694) Add properties to hide Navigation Icons from screen readers |
 | 2.10.2 | [PR#2686](https://github.com/bbc/psammead/pull/2686) Add SVG for Archive brand logo |
 | 2.10.1 | [PR#2655](https://github.com/bbc/psammead/pull/2655) Update Navigation Icons to scale with browser font size |
 | 2.10.0 | [PR#2631](https://github.com/bbc/psammead/pull/2631) Add AMP_BIND, AMP_LIST, AMP_MUSTACHE scripts to amp-boilerplate exports |
 | 2.9.0 | [PR#2641](https://github.com/bbc/psammead/pull/2641) Add Core icons group with Alert and Info icons |
-| 2.8.0 | [PR#2581](https://github.com/bbc/psammead/pull/2581) Added hamburger and cross icons for Navigation |
-| 2.7.0 | [PR#2531](https://github.com/bbc/psammead/pull/2531) Added Guidance icon |
+| 2.8.0 | [PR#2581](https://github.com/bbc/psammead/pull/2581) Add hamburger and cross icons for Navigation |
+| 2.7.0 | [PR#2531](https://github.com/bbc/psammead/pull/2531) Add Guidance icon |
 | 2.6.0 | [PR#2433](https://github.com/bbc/psammead/pull/2433) Add AMP js script boilerplate to psammead-assets. |
 | 2.5.0 | [PR#2309](https://github.com/bbc/psammead/pull/2309) Add SVGs for Weather, Cymru Fyw and Naidheachdan |
 | 2.4.1 | [PR#2189](https://github.com/bbc/psammead/pull/2189) Add storybook stories for media icons in psammead-assets |

packages/utilities/psammead-assets/README.md

@@ -56,7 +56,7 @@ import { coreIcons } from '@bbc/psammead-assets/svgs';
 
 ## Media Icons SVGs
 
-Media icons is an object containing styled SVG icons for video, audio and photogallery. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` component.
+Media icons is an object containing styled SVG icons for video, audio, photogallery and guidance. Media icons are sized to work well alongside specific text with typography group `GEL Minion`. They are used in `psammead-media-indicator` and `psammead-media-player` components.
 
 ### Usage
 

packages/utilities/psammead-assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-assets",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "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/coreIcons.jsx

@@ -6,31 +6,46 @@ import {
   GEL_SPACING_DBL,
 } from '@bbc/gel-foundations/spacings';
 
+const defaultAttrs = {
+  focusable: 'false',
+  'aria-hidden': 'true',
+};
+
+const coreAttrs = {
+  viewBox: '0 0 32 32',
+  width: GEL_SPACING_DBL,
+  height: GEL_SPACING_DBL,
+};
+
 const CoreIcon = styled.svg`
   vertical-align: middle;
   margin: 0 ${GEL_SPACING_HLF};
   color: ${C_EBON};
   fill: currentColor;
 `;
 
-const defaultAttrs = {
-  viewBox: '0 0 32 32',
-  width: GEL_SPACING_DBL,
-  height: GEL_SPACING_DBL,
-  focusable: 'false',
-};
+const ClockIcon = styled(CoreIcon)`
+  width: 0.725rem;
+  height: 0.725rem;
+`;
 
 const CoreIcons = {
   alert: (
-    <CoreIcon {...defaultAttrs}>
+    <CoreIcon {...defaultAttrs} {...coreAttrs}>
       <path d="M16 2L0 30h32zm2 25h-4v-4h4zm-4-6V11h4v10z" />
     </CoreIcon>
   ),
   info: (
-    <CoreIcon {...defaultAttrs}>
+    <CoreIcon {...defaultAttrs} {...coreAttrs}>
       <path d="M16 0a16 16 0 1 0 16 16A16 16 0 0 0 16 0zm2 25h-4V13h4zm0-14h-4V7h4z" />
     </CoreIcon>
   ),
+  clock: (
+    <ClockIcon viewBox="0 0 13 13" width="13" height="13" {...defaultAttrs}>
+      <path d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z" />
+      <path d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z" />
+    </ClockIcon>
+  ),
 };
 
 export default CoreIcons;

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

@@ -6,6 +6,11 @@ import {
   GEL_SPACING_DBL,
 } from '@bbc/gel-foundations/spacings';
 
+const defaultAttrs = {
+  focusable: 'false',
+  'aria-hidden': 'true',
+};
+
 // `currentColor` has been used to better reflect user colour choices in Firefox.
 const MediaIcon = styled.svg`
   vertical-align: middle;
@@ -40,7 +45,7 @@ const mediaIcons = {
       viewBox="0 0 32 32"
       width="12px"
       height="12px"
-      focusable="false"
+      {...defaultAttrs}
     >
       <polygon points="3,32 29,16 3,0" />
     </VideoMediaIcon>
@@ -50,7 +55,7 @@ const mediaIcons = {
       viewBox="0 0 13 12"
       width="13px"
       height="12px"
-      focusable="false"
+      {...defaultAttrs}
     >
       <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" />
@@ -61,14 +66,14 @@ const mediaIcons = {
       viewBox="0 0 32 26"
       width="16px"
       height="13px"
-      focusable="false"
+      {...defaultAttrs}
     >
       <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>
   ),
   guidance: (
-    <GuidanceIcon viewBox="0 0 32 32" width="32" height="32" focusable="false">
+    <GuidanceIcon viewBox="0 0 32 32" width="32" height="32" {...defaultAttrs}>
       <path d="M32,16A16,16,0,1,1,16,0,16,16,0,0,1,32,16Zm-8.6-.8H16.6v3.1h2.9c-.2,1.5-1.6,2.4-3.7,2.4s-3.7-2.4-3.7-4.7,1-4.7,3.7-4.7,3,.8,3.2,2.2h4.2c-.4-4-3.9-5.8-7.2-5.8-4.8,0-8,3.7-8,8.3s3.1,8.3,8,8.3a5.4,5.4,0,0,0,4.5-2.1l.2,1.7h2.7Z" />
     </GuidanceIcon>
   ),