Add story for Media Message component & remove border

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version       | Description                                                                                                                  |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| 2.9.0 | [PR#3666](https://github.com/bbc/psammead/pull/3666) Adding story for media message and removing bottom border from strong el |
 | 2.8.2 | [PR#3641](https://github.com/bbc/psammead/pull/3641) Version bump & fixing PR link |
 | 2.8.1 | [PR#3640](https://github.com/bbc/psammead/pull/3640) Make z-index styling be conditional based on whether loadingImage is used |
 | 2.8.0 | [PR#3600](https://github.com/bbc/psammead/pull/3600) Implementing dark mode compatible placeholder with media player |

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

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

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

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media Message matches media message snapshot 1`] = `
+.c0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.c1 {
+  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0.0625rem solid transparent;
+  color: #FFFFFF;
+  background-color: rgba(34,34,34,0.75);
+}
+
+.c2 {
+  display: block;
+  font-weight: normal;
+  bottom: 0;
+  position: absolute;
+  padding: 0.5rem;
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    font-size: 0.875rem;
+  }
+}
+
+@media screen and (-ms-high-contrast:active) {
+  .c1 {
+    background-color: transparent;
+  }
+}
+
+@media screen and (-ms-high-contrast:active) {
+  .c2 {
+    background-color: window;
+  }
+}
+
+@media (min-width:25rem) {
+  .c2 {
+    padding: 1rem;
+  }
+}
+
+<div
+  class="c0"
+>
+
+  <div
+    class="c1"
+  >
+    <strong
+      class="c2"
+    >
+      Контент більше не доступний
+    </strong>
+  </div>
+</div>
+`;

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

@@ -40,7 +40,6 @@ const StyledMessage = styled.strong`
   bottom: 0;
   position: absolute;
   padding: ${GEL_SPACING};
-  border-bottom: 0.0625rem solid transparent;
   @media screen and (-ms-high-contrast: active) {
     background-color: window;
   }

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

@@ -1,19 +1,27 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import Message from './index';
 import '@testing-library/jest-dom/extend-expect';
 
-it('should display the media message', () => {
-  const { getByText } = render(
-    <Message
-      service="news"
-      message="Please enable Javascript or try a different browser"
-      placeholderSrc="http://foo.bar/placeholder.png"
-      placeholderSrcset="http://foo.bar/placeholder.png"
-    />,
-  );
-  const message = getByText(
-    'Please enable Javascript or try a different browser',
+describe('Media Message', () => {
+  it('should display the media message', () => {
+    const { getByText } = render(
+      <Message
+        service="news"
+        message="Please enable Javascript or try a different browser"
+        placeholderSrc="http://foo.bar/placeholder.png"
+        placeholderSrcset="http://foo.bar/placeholder.png"
+      />,
+    );
+    const message = getByText(
+      'Please enable Javascript or try a different browser',
+    );
+    expect(message).toBeInTheDocument();
+  });
+
+  shouldMatchSnapshot(
+    'matches media message snapshot',
+    <Message message="Контент більше не доступний" service="ukrainian" />,
   );
-  expect(message).toBeInTheDocument();
 });

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { boolean, withKnobs } from '@storybook/addon-knobs';
+import { boolean, text, withKnobs } from '@storybook/addon-knobs';
+import styled from 'styled-components';
+import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
 import { CanonicalMediaPlayer, AmpMediaPlayer } from '.';
+import MediaMessage from './Message';
 import { ampDecorator } from '../../../../.storybook/config';
 import notes from '../README.md';
 
@@ -11,6 +14,12 @@ const withDuration = {
   datetime: 'PT2M30S',
 };
 
+const StyledMessageContainer = styled.div`
+  padding-top: 56.25%;
+  position: relative;
+  overflow: hidden;
+`;
+
 storiesOf('Components|Media Player', module)
   .add(
     'Articles Canonical',
@@ -97,6 +106,23 @@ storiesOf('Components|Media Player', module)
       />
     ),
     { notes, knobs: { escapeHTML: false } },
+  )
+  .addDecorator(withKnobs)
+  .addDecorator(withServicesKnob({ defaultService: 'ukrainian' }))
+  .add(
+    'Media Message',
+    ({ service }) => {
+      const id = text('Message', 'Контент більше не доступний');
+      return (
+        <StyledMessageContainer>
+          <MediaMessage service={service} message={id} />
+        </StyledMessageContainer>
+      );
+    },
+    {
+      notes,
+      knobs: { escapeHTML: false },
+    },
   );
 
 storiesOf('Components|Media Player', module)