Merge branch 'latest' into explicitly-set-h1-styles-display-and-font-…

…weight

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.2.1 | [PR#2576](https://github.com/bbc/psammead/pull/2576) Add support for 240px screen width & remove Guidance SVG |
 | 2.2.0 | [PR#2517](https://github.com/bbc/psammead/pull/2517) Add Guidance to media placeholder image |
 | 2.1.5 | [PR#2545](https://github.com/bbc/psammead/pull/2545) Update psammead-media-player prop documentation |
 | 2.1.4 | [PR#2516](https://github.com/bbc/psammead/pull/2516) Add notes to stories. Fix prop-type warnings |

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

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",

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

@@ -1,95 +1,43 @@
 // 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;
+  padding: 0.5rem;
 }
 
-.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;
+.c1 {
   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;
   }
 }
 
+@media (min-width:25rem) {
+  .c0 {
+    padding: 1rem;
+  }
+}
+
 <div
   class="c0"
 >
-  <div
+  <strong
     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>
+    Guidance: Contains strong language with adult humor
+  </strong>
 </div>
 `;

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

@@ -1,73 +1,44 @@
 import React from 'react';
-import { string, node } from 'prop-types';
+import { string } 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_SPACING_DBL, GEL_SPACING } from '@bbc/gel-foundations/spacings';
 import { GEL_LONG_PRIMER } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
+import { GEL_GROUP_2_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
 
 const GUIDANCE_BACKGROUND = 'rgba(34, 34, 34, 0.75)';
 
-const StyledGuidance = styled.div`
+const GuidanceWrapper = 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};
+  padding: ${GEL_SPACING};
+
+  @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
+    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>
-  );
-};
+const Guidance = ({ guidanceMessage, service }) => (
+  <GuidanceWrapper service={service}>
+    <GuidanceMessage>{guidanceMessage}</GuidanceMessage>
+  </GuidanceWrapper>
+);
 
 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

@@ -8,8 +8,6 @@ describe('Media Player: Guidance', () => {
     <Guidance
       guidanceMessage="Guidance: Contains strong language with adult humor"
       service="news"
-    >
-      <p>within the guidance container</p>
-    </Guidance>,
+    />,
   );
 });