Merge pull request #2806 from bbc/fix-mediaplayer-cursor

Fix cursor on placeholder for no-js
BBC-archive · Dec 11, 2019 · 3eec0a7 · 3eec0a7
2 parents d71c3c3 + a58bacb
commit 3eec0a7
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 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.4.2 | [PR#2806](https://github.com/bbc/psammead/pull/2806) Fix StyledPlaceholder cursor when Javascript is disabled |
 | 2.4.1 | [PR#2773](https://github.com/bbc/psammead/pull/2773) Resolve warnings while running unit test |
 | 2.4.0 | [PR#2662](https://github.com/bbc/psammead/pull/2662) Add no JS fallback & `noJsClassName` prop to Canonical MediaPlayer |
 | 2.3.8 | [PR#2708](https://github.com/bbc/psammead/pull/2708) 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.4.1",
+  "version": "2.4.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/Placeholder/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-player/src/Placeholder/__snapshots__/index.test.jsx.snap
@@ -86,12 +86,12 @@ exports[`Media Player: Placeholder should render a video placeholder 1`] = `
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c5 {
@@ -254,12 +254,12 @@ exports[`Media Player: Placeholder should render a video placeholder with guidan
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c6 {
@@ -432,12 +432,12 @@ exports[`Media Player: Placeholder should render a video placeholder without dur
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c5 {
@@ -585,12 +585,12 @@ exports[`Media Player: Placeholder should render an audio placeholder 1`] = `
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c5 {
@@ -742,12 +742,12 @@ exports[`Media Player: Placeholder should render an audio placeholder without du
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c5 {
@@ -913,12 +913,12 @@ exports[`Media Player: Placeholder should render no-js styles when noJsClassName
 }
 
 .c1 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: default;
 }
 
 .c0:hover .c12,

diff --git a/packages/components/psammead-media-player/src/Placeholder/index.jsx b/packages/components/psammead-media-player/src/Placeholder/index.jsx
@@ -7,12 +7,12 @@ import { C_POSTBOX } from '@bbc/psammead-styles/colours';
 import Guidance from '../Guidance';
 
 const StyledPlaceholder = styled.div`
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  ${({ noJsClassName }) => `cursor: ${noJsClassName ? 'default' : 'pointer'};`}
 `;
 
 const StyledPlayButton = styled(PlayButton)`
@@ -53,7 +53,7 @@ const Placeholder = ({
   } = mediaInfo;
 
   return (
-    <StyledPlaceholder onClick={onClick}>
+    <StyledPlaceholder onClick={onClick} noJsClassName={noJsClassName}>
       <Guidance
         service={service}
         guidanceMessage={guidanceMessage}

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
@@ -221,12 +221,12 @@ exports[`Media Player: Canonical Entry renders a landscape container with a plac
 }
 
 .c2 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c6 {
@@ -399,12 +399,12 @@ exports[`Media Player: Canonical Entry renders a placeholder image with guidance
 }
 
 .c2 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c7 {
@@ -593,12 +593,12 @@ exports[`Media Player: Canonical Entry renders a portrait container with a place
 }
 
 .c2 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
 
 .c6 {
@@ -840,12 +840,12 @@ exports[`Media Player: Canonical Entry renders with no-js styles when noJsClassN
 }
 
 .c2 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: default;
 }
 
 .c1:hover .c13,