Add guidance to Media player

packages/components/psammead-media-player/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.2.0 | [PR#2517](https://github.com/bbc/psammead/pull/2517) Add Guidance to media placeholder image |
 | 2.1.4 | [PR#2516](https://github.com/bbc/psammead/pull/2516) Add notes to stories. Fix prop-type warnings |
 | 2.1.3 | [PR#2542](https://github.com/bbc/psammead/pull/2542) Talos - Bump Dependencies - @bbc/psammead-play-button |
 | 2.1.2 | [PR#2467](https://github.com/bbc/psammead/pull/2476) Update image `alt` to be empty for Media Player placeholder |

packages/components/psammead-media-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -29,6 +29,7 @@
     "styled-components": "^4.3.2"
   },
   "dependencies": {
+    "@bbc/psammead-assets": "^2.7.0",
     "@bbc/psammead-image": "^1.2.3",
     "@bbc/psammead-play-button": "^1.0.0"
   }

packages/components/psammead-media-player/src/Guidance/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media Player: Guidance should render Guidance 1`] = `
+.c4 {
+  vertical-align: middle;
+  margin: 0 0.25rem;
+  color: #222222;
+  fill: currentColor;
+  width: 1rem;
+  height: 1rem;
+}
+
+.c0 {
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+}
+
+.c1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(34,34,34,0.75);
+  color: #FFFFFF;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.c5 {
+  padding-left: 0.25rem;
+  font-weight: normal;
+}
+
+.c3 > svg {
+  color: #FFFFFF;
+  fill: currentColor;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    font-size: 0.875rem;
+  }
+}
+
+<div
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <div
+      class="c2"
+    >
+      <div
+        aria-hidden="true"
+        class="c3"
+      >
+        <svg
+          class="c4"
+          focusable="false"
+          height="32"
+          viewBox="0 0 32 32"
+          width="32"
+        >
+          <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"
+          />
+        </svg>
+      </div>
+      <strong
+        class="c5"
+      >
+        Guidance: Contains strong language with adult humor
+      </strong>
+    </div>
+  </div>
+  <p>
+    within the guidance container
+  </p>
+</div>
+`;

packages/components/psammead-media-player/src/Guidance/index.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { string, node } from 'prop-types';
+import styled from 'styled-components';
+import { C_WHITE } from '@bbc/psammead-styles/colours';
+import { mediaIcons } from '@bbc/psammead-assets/svgs';
+import {
+  GEL_SPACING_DBL,
+  GEL_SPACING_TRPL,
+  GEL_SPACING_HLF,
+} from '@bbc/gel-foundations/spacings';
+import { GEL_LONG_PRIMER } from '@bbc/gel-foundations/typography';
+import { getSansRegular } from '@bbc/psammead-styles/font-styles';
+
+const GUIDANCE_BACKGROUND = 'rgba(34, 34, 34, 0.75)';
+
+const StyledGuidance = styled.div`
+  ${({ service }) => getSansRegular(service)}
+  ${GEL_LONG_PRIMER};
+`;
+
+const GuidanceWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: ${GUIDANCE_BACKGROUND};
+  color: ${C_WHITE};
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${GEL_SPACING_DBL};
+`;
+
+const GuidanceMessage = styled.strong`
+  padding-left: ${GEL_SPACING_HLF};
+  font-weight: normal;
+`;
+
+const IconWrapper = styled.div`
+  > svg {
+    color: ${C_WHITE};
+    fill: currentColor;
+    height: ${GEL_SPACING_TRPL};
+    width: ${GEL_SPACING_TRPL};
+  }
+`;
+
+const Guidance = ({ guidanceMessage, service, children }) => {
+  return (
+    <StyledGuidance service={service}>
+      <GuidanceWrapper>
+        <Content>
+          <IconWrapper aria-hidden="true">{mediaIcons.guidance}</IconWrapper>
+          <GuidanceMessage>{guidanceMessage}</GuidanceMessage>
+        </Content>
+      </GuidanceWrapper>
+      {children}
+    </StyledGuidance>
+  );
+};
+
+Guidance.propTypes = {
+  guidanceMessage: string.isRequired,
+  service: string.isRequired,
+  children: node,
+};
+
+Guidance.defaultProps = {
+  children: null,
+};
+
+export default Guidance;

packages/components/psammead-media-player/src/Guidance/index.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import Guidance from '.';
+
+describe('Media Player: Guidance', () => {
+  shouldMatchSnapshot(
+    'should render Guidance',
+    <Guidance
+      guidanceMessage="Guidance: Contains strong language with adult humor"
+      service="news"
+    >
+      <p>within the guidance container</p>
+    </Guidance>,
+  );
+});