Make media indicator shorter under 400px (#776)

Make media indicator shorter under 400px
BBC-archive · Jul 9, 2019 · 30ea37d · 30ea37d
2 parents b548d67 + fb001ec
commit 30ea37d
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 8 deletions.
diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 1.1.0   | [PR#776](https://github.com/bbc/psammead/pull/776) Add `topStory` prop, change padding <400px and bump dependencies |
 | 1.0.5   | [PR#788](https://github.com/BBC/psammead/pull/788) Use rem for the width and height of the Media SVGs |
 | 1.0.4   | [PR#769](https://github.com/bbc/psammead/pull/769) Fix stories not appearing in storybook when using `install:packages:link` |
 | 1.0.3   | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |

diff --git a/packages/components/psammead-media-indicator/README.md b/packages/components/psammead-media-indicator/README.md
@@ -17,11 +17,14 @@ The `MediaIndicator` component provides a 'play' or 'audio' icon as well as a du
 | datetime      | string | No       | Null    | 'PT2M15S'                    |
 | offscreenText | string | No       | Null    | 'Video'                      |
 | type          | string | No       | 'video' | 'audio'                      |
+| topStory      | boolean | No      | false   | true                         |
 
 ## Usage
 
 The typical use-case of this component is on top of images within promos for articles that contains a video asset at the top of the page. It indicates to the user that the link is to a video and how long the video is in duration.
 
+For top story promos, we should pass the `topStory` prop to the `Media Indicator` to keep the same padding, otherwise this will be modified under 400px.
+
 ```jsx
 import MediaIndicator from '@bbc/psammead-media-indicator';
 

diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-indicator",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "description": "Provides a play icon and media duration for media page promos",
   "repository": {

diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -1,5 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MediaIndicator - Top Story should render a top story audio promo render correctly 1`] = `
+.c3 {
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.c2 {
+  vertical-align: middle;
+  margin: 0 0.25rem;
+  fill: #222222;
+  width: 0.8125rem;
+  height: 0.75rem;
+}
+
+.c0 {
+  padding: 0.5rem 0.25rem;
+  background-color: #FFFFFF;
+  display: block;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #222222;
+  height: 2rem;
+}
+
+.c1 {
+  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;
+  height: 100%;
+}
+
+.c4 {
+  vertical-align: middle;
+  margin: 0 0.25rem;
+}
+
+<div
+  aria-hidden="true"
+  class="c0"
+>
+  <div
+    class="c1"
+  >
+    <svg
+      class="c2"
+      focusable="false"
+      height="12px"
+      viewBox="0 0 13 12"
+      width="13px"
+    >
+      <path
+        d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
+      />
+      <path
+        d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
+      />
+    </svg>
+    <span
+      class="c3"
+    >
+      Audio
+    </span>
+    <time
+      class="c4"
+      datetime="PT2M15S"
+    >
+      2:15
+    </time>
+  </div>
+</div>
+`;
+
 exports[`MediaIndicator should render audio correctly without duration details 1`] = `
 .c3 {
   -webkit-clip-path: inset(100%);
@@ -43,6 +127,13 @@ exports[`MediaIndicator should render audio correctly without duration details 1
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    height: 1.25rem;
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   class="c0"
@@ -121,6 +212,13 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
   margin: 0 0.25rem;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    height: 1.25rem;
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   class="c0"
@@ -200,6 +298,13 @@ exports[`MediaIndicator should render video by default 1`] = `
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    height: 1.25rem;
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   class="c0"
@@ -270,6 +375,13 @@ exports[`MediaIndicator should render video correctly without duration details 1
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    height: 1.25rem;
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   class="c0"
@@ -345,6 +457,13 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
   margin: 0 0.25rem;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    height: 1.25rem;
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   class="c0"

diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
-import { string, oneOf } from 'prop-types';
+import styled, { css } from 'styled-components';
+import { string, oneOf, bool } from 'prop-types';
 import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings';
+import { GEL_GROUP_1_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints';
 import { GEL_MINION, GEL_FF_REITH_SANS } from '@bbc/gel-foundations/typography';
 import mediaIcons from './mediaIcons';
 
@@ -15,6 +16,15 @@ const MediaIndicatorWrapper = styled.div`
   ${GEL_MINION};
   color: ${C_EBON};
   height: 2rem;
+
+  ${({ topStory }) =>
+    !topStory &&
+    css`
+      @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
+        height: 1.25rem;
+        padding: ${GEL_SPACING_HLF} ${GEL_SPACING_HLF} 0;
+      }
+    `}
 `;
 
 const FlexWrapper = styled.div`
@@ -28,8 +38,14 @@ const TimeDuration = styled.time`
   margin: 0 ${GEL_SPACING_HLF};
 `;
 
-const MediaIndicator = ({ datetime, duration, offscreenText, type }) => (
-  <MediaIndicatorWrapper aria-hidden="true">
+const MediaIndicator = ({
+  datetime,
+  duration,
+  offscreenText,
+  type,
+  topStory,
+}) => (
+  <MediaIndicatorWrapper aria-hidden="true" topStory={topStory}>
     <FlexWrapper>
       {mediaIcons[type]}
       {offscreenText && (
@@ -47,13 +63,15 @@ MediaIndicator.propTypes = {
   duration: string,
   offscreenText: string,
   type: oneOf(['video', 'audio']),
+  topStory: bool,
 };
 
 MediaIndicator.defaultProps = {
   datetime: null,
   duration: null,
   offscreenText: null,
   type: 'video',
+  topStory: false,
 };
 
 export default MediaIndicator;
diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -14,7 +14,7 @@ const Page = styled.div`
 
 const PageDecorator = storyFn => <Page>{storyFn()}</Page>;
 
-storiesOf('Components|MediaIndicator', module)
+storiesOf('Components|MediaIndicator/Video', module)
   .addDecorator(PageDecorator)
   .addDecorator(withKnobs)
   .addDecorator(dirDecorator)
@@ -35,6 +35,34 @@ storiesOf('Components|MediaIndicator', module)
     ),
     { notes },
   )
+  .add(
+    'top story video with duration',
+    () => (
+      <MediaIndicator
+        duration={text('duration', '2:15')}
+        datetime={text('datetime', 'PT2M15S')}
+        offscreenText={text('offscreenText', 'Video')}
+        type="video"
+        topStory
+      />
+    ),
+    { notes },
+  );
+
+storiesOf('Components|MediaIndicator/Audio', module)
+  .addDecorator(PageDecorator)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
+  .add(
+    'audio without duration',
+    () => (
+      <MediaIndicator
+        offscreenText={text('offscreenText', 'Audio')}
+        type="audio"
+      />
+    ),
+    { notes },
+  )
   .add(
     'audio with duration',
     () => (
@@ -48,11 +76,14 @@ storiesOf('Components|MediaIndicator', module)
     { notes },
   )
   .add(
-    'audio without duration',
+    'top story audio with duration',
     () => (
       <MediaIndicator
         offscreenText={text('offscreenText', 'Audio')}
+        duration={text('duration', '2:15')}
+        datetime={text('datetime', 'PT2M15S')}
         type="audio"
+        topStory
       />
     ),
     { notes },

diff --git a/packages/components/psammead-media-indicator/src/index.test.jsx b/packages/components/psammead-media-indicator/src/index.test.jsx
@@ -38,3 +38,16 @@ describe('MediaIndicator', () => {
     <MediaIndicator offscreenText="Audio" type="audio" />,
   );
 });
+
+describe('MediaIndicator - Top Story', () => {
+  shouldMatchSnapshot(
+    'should render a top story audio promo render correctly',
+    <MediaIndicator
+      duration="2:15"
+      datetime="PT2M15S"
+      offscreenText="Audio"
+      type="audio"
+      topStory
+    />,
+  );
+});