Merge branch 'latest' into format-duration-utility

BBC-archive · Feb 11, 2020 · 8b8e4e5 · 8b8e4e5
2 parents 9929579 + 39c660c
commit 8b8e4e5
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/packages/components/psammead-media-player/CHANGELOG.md b/packages/components/psammead-media-player/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 2.7.2 | [PR#3113](https://github.com/bbc/psammead/pull/3113) Added bottom margin padding for live radio audio player  |
 | 2.7.1 | [PR#3060](https://github.com/bbc/psammead/pull/3060) Refactored Message component to display message for Expired AV Stream  |
 | 2.7.0 | [PR#3033](https://github.com/bbc/psammead/pull/3033) Refactor for No JS Canonical and AMP Media Player |
 | 2.6.4 | [PR#3033](https://github.com/bbc/psammead/pull/3033) Talos - Bump Dependencies - @bbc/psammead-play-button |

diff --git a/packages/components/psammead-media-player/package-lock.json b/packages/components/psammead-media-player/package-lock.json
diff --git a/packages/components/psammead-media-player/package.json b/packages/components/psammead-media-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-player",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "Provides a media player with optional placeholder",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/__snapshots__/index.test.jsx.snap
@@ -106,6 +106,13 @@ exports[`Media Player: AMP Entry renders the audio skin 1`] = `
   height: 165px;
   position: relative;
   overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+@media (min-width:63rem) {
+  .c0 {
+    margin-bottom: 2rem;
+  }
 }
 
 <div>
@@ -720,6 +727,7 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = `
   height: 165px;
   position: relative;
   overflow: hidden;
+  margin-bottom: 1rem;
 }
 
 .c1 {
@@ -732,6 +740,12 @@ exports[`Media Player: Canonical Entry renders the audio skin 1`] = `
   height: 100%;
 }
 
+@media (min-width:63rem) {
+  .c0 {
+    margin-bottom: 2rem;
+  }
+}
+
 <div
   class="c0"
 >

diff --git a/packages/components/psammead-media-player/src/index.jsx b/packages/components/psammead-media-player/src/index.jsx
@@ -1,6 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { string, bool, oneOf, shape } from 'prop-types';
+import {
+  GEL_SPACING_DBL,
+  GEL_SPACING_QUAD,
+} from '@bbc/gel-foundations/spacings';
+import { GEL_GROUP_4_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
 import Placeholder from './Placeholder';
 import Amp from './Amp';
 import Canonical from './Canonical';
@@ -18,6 +23,11 @@ const StyledAudioContainer = styled.div`
   height: 165px;
   position: relative;
   overflow: hidden;
+  margin-bottom: ${GEL_SPACING_DBL};
+
+  @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) {
+    margin-bottom: ${GEL_SPACING_QUAD};
+  }
 `;
 
 export const CanonicalMediaPlayer = ({