From 831e93380577a513535267ba52771848cf1ea18e Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 15:28:32 +0100
Subject: [PATCH 01/13] Make media indicator shorter under 400px

---
 .../psammead-media-indicator/CHANGELOG.md     |  1 +
 .../package-lock.json                         | 96 +++++++++----------
 .../psammead-media-indicator/package.json     | 12 +--
 .../src/__snapshots__/index.test.jsx.snap     | 30 ++++++
 .../psammead-media-indicator/src/index.jsx    | 25 ++++-
 5 files changed, 102 insertions(+), 62 deletions(-)

diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
index 315855da01..13928b0a8e 100644
--- 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.0.4   | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Add `topStory` prop, change padding <400px and bump dependencies |
 | 1.0.3   | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
 | 1.0.2   | [PR#722](https://github.com/bbc/psammead/pull/722) Fix hover cap on older browsers |
 | 1.0.1   | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` |
diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
index b3920077d1..30066bf411 100644
--- a/packages/components/psammead-media-indicator/package-lock.json
+++ b/packages/components/psammead-media-indicator/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-indicator",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -138,67 +138,39 @@
       }
     },
     "@bbc/gel-foundations": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.0.tgz",
-      "integrity": "sha512-dHVZ+ig1P/crQtvAOP0bB0PAuuqT2R8hs15pZDsJsO1wvPtbvEe2TO6AxXUIODk9TZgod2j+9K6TB4WV/I2LDw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-3.0.1.tgz",
+      "integrity": "sha512-Ak0/+lPuCq8aPbOlzxj6/ayr5SmwNZo49dcnK3NHNugH5TEKmt+gjQhsZG6PSxpCEPk5OXhviPiNUEVr4wVObA=="
     },
     "@bbc/psammead-storybook-helpers": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-2.1.1.tgz",
-      "integrity": "sha512-kKpeH97+PY439LoUkTceNtgJynjRbwU9AbmNjsZ18h+alVR2PbZ2j2uYXTo6ux1DiCN3L15aLZmu4K3VordLmw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-3.1.0.tgz",
+      "integrity": "sha512-mah7Mh+Gh6apbCEF+WVxCeMtxrDzck06oPYsVqUb/gaKGziJ7U0Sf8vh0VkorcZy0i1DfDWr75NKDBIf45QiMQ==",
       "dev": true,
       "requires": {
-        "@bbc/gel-foundations": "^1.2.0",
+        "@bbc/gel-foundations": "^3.0.0",
         "react-helmet": "^5.2.0"
-      },
-      "dependencies": {
-        "@bbc/gel-foundations": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-1.2.0.tgz",
-          "integrity": "sha512-OpEJf42FSgyZRN0e9pJFm9eYmzbhfB7W7EWlrjh46fWlozyVwKA4uaTPUoGHLbXJkMOhPdpfM3gOAxbuM0FnrQ==",
-          "dev": true
-        }
       }
     },
     "@bbc/psammead-styles": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.3.tgz",
-      "integrity": "sha512-9SG698tmq8o7Ja6sFQ6WwHpVEJtCbP99Z80wSnnB4ZWryfasd+EaRXtvGwGvWG2U9oA34S27syJQIh062Mkztw=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-1.1.0.tgz",
+      "integrity": "sha512-nGNN/tGYQ9Gn+W3NK/1ELHTx8F+i6kxgfNv9pPRcRAfYJH+spTseW82+etK3acbXXr29I5eucRW4XM+SMNeEwQ=="
     },
     "@bbc/psammead-test-helpers": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.3.3.tgz",
-      "integrity": "sha512-w/ENAOLuXZ8f2l3IJ2wYKEuNVH69xn0p4YIV6qx6GpZBYdP12n5sBi1lvGZOKD9tRa3UOGN5WZzxrZLjcUCh+w==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-1.0.0.tgz",
+      "integrity": "sha512-YEx7bb9eFYUw1dpkgmHcuOYQBZjhvOCPM2fUWShfgtwpcaVNuOsKEIbVng3Au//t4arAbYmRs+Upn+ygriLEfw==",
       "dev": true,
       "requires": {
         "jest-styled-components": "^6.3.1",
-        "react-test-renderer": "^16.6.3"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
-          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
-          "dev": true
-        },
-        "react-test-renderer": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",
-          "integrity": "sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==",
-          "dev": true,
-          "requires": {
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "react-is": "^16.8.6",
-            "scheduler": "^0.13.6"
-          }
-        }
+        "react-test-renderer": "^16.8.6"
       }
     },
     "@bbc/psammead-visually-hidden-text": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-visually-hidden-text/-/psammead-visually-hidden-text-0.1.12.tgz",
-      "integrity": "sha512-nTgniZ9edCscJs7xDoh/bWuoCkoa6AIoVpVH2/ekMBDG2UUgj9yGJZts0Ki89l2IlQBQOBZbE/vRzgsuVDszTg=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-visually-hidden-text/-/psammead-visually-hidden-text-1.0.1.tgz",
+      "integrity": "sha512-e281xGygQEHoO5trmddHwNouA7EhpQ+p3Iq3srVPV0ItHxEOzcKc8cmiL0xdgZPsOxauCVcyb1isaS5eF3rNBg=="
     },
     "@emotion/is-prop-valid": {
       "version": "0.8.2",
@@ -361,9 +333,9 @@
       "dev": true
     },
     "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
     "is-what": {
@@ -373,9 +345,9 @@
       "dev": true
     },
     "jest-styled-components": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.1.tgz",
-      "integrity": "sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.3.tgz",
+      "integrity": "sha512-RBMPZSJJSgPDTTJsuYzx5fsij/CULaqQNZOWkn8J/L++rX6P830o2vB9CXGzfQf/bVq9qGr1ZBNoivi+v6JPYg==",
       "dev": true,
       "requires": {
         "css": "^2.2.4"
@@ -498,6 +470,26 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-test-renderer": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",
+      "integrity": "sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.13.6"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
+          "dev": true
+        }
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
index 610a0b7363..7097d1f9c6 100644
--- 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.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "description": "Provides a play icon and media duration for media page promos",
   "repository": {
@@ -17,13 +17,13 @@
   },
   "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-media-indicator/README.md",
   "dependencies": {
-    "@bbc/gel-foundations": "^3.0.0",
-    "@bbc/psammead-styles": "^0.3.3",
-    "@bbc/psammead-visually-hidden-text": "^0.1.12"
+    "@bbc/gel-foundations": "^3.0.1",
+    "@bbc/psammead-styles": "^1.0.1",
+    "@bbc/psammead-visually-hidden-text": "^1.0.1"
   },
   "devDependencies": {
-    "@bbc/psammead-storybook-helpers": "^2.1.1",
-    "@bbc/psammead-test-helpers": "^0.3.3",
+    "@bbc/psammead-storybook-helpers": "^3.1.0",
+    "@bbc/psammead-test-helpers": "^1.0.0",
     "react": "^16.8.6",
     "styled-components": "^4.3.2"
   },
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
index b8647e6f0c..22400f3d17 100644
--- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -41,6 +41,12 @@ exports[`MediaIndicator should render audio correctly without duration details 1
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   className="c0"
@@ -117,6 +123,12 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
   margin: 0 0.25rem;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   className="c0"
@@ -194,6 +206,12 @@ exports[`MediaIndicator should render video by default 1`] = `
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   className="c0"
@@ -262,6 +280,12 @@ exports[`MediaIndicator should render video correctly without duration details 1
   height: 100%;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   className="c0"
@@ -335,6 +359,12 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
   margin: 0 0.25rem;
 }
 
+@media (max-width:24.9375rem) {
+  .c0 {
+    padding: 0.25rem 0.25rem 0;
+  }
+}
+
 <div
   aria-hidden="true"
   className="c0"
diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
index d26ce8002f..30cfba1e03 100644
--- 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,14 @@ const MediaIndicatorWrapper = styled.div`
   ${GEL_MINION};
   color: ${C_EBON};
   height: 2rem;
+
+  ${({ topStory }) =>
+    !topStory &&
+    css`
+      @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
+        padding: ${GEL_SPACING_HLF} ${GEL_SPACING_HLF} 0;
+      }
+    `}
 `;
 
 const FlexWrapper = styled.div`
@@ -28,8 +37,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,6 +62,7 @@ MediaIndicator.propTypes = {
   duration: string,
   offscreenText: string,
   type: oneOf(['video', 'audio']),
+  topStory: bool,
 };
 
 MediaIndicator.defaultProps = {
@@ -54,6 +70,7 @@ MediaIndicator.defaultProps = {
   duration: null,
   offscreenText: null,
   type: 'video',
+  topStory: false,
 };
 
 export default MediaIndicator;

From 3ac39f7d6e022e9712a92135c7a41cf1aa585632 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 15:36:53 +0100
Subject: [PATCH 02/13] Update PR number

---
 packages/components/psammead-media-indicator/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
index 13928b0a8e..250fbe39c4 100644
--- a/packages/components/psammead-media-indicator/CHANGELOG.md
+++ b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 1.0.4   | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Add `topStory` prop, change padding <400px and bump dependencies |
+| 1.0.4   | [PR#776](https://github.com/bbc/psammead/pull/776) Add `topStory` prop, change padding <400px and bump dependencies |
 | 1.0.3   | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
 | 1.0.2   | [PR#722](https://github.com/bbc/psammead/pull/722) Fix hover cap on older browsers |
 | 1.0.1   | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` |

From d5a1b783d9db1e377601c257eda206df7267e960 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 16:09:10 +0100
Subject: [PATCH 03/13] Add stories

---
 .../src/index.stories.jsx                     | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
index 447b47e4d5..fdf8555901 100644
--- 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,31 @@ 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="true"
+      />
+    ),
+    { notes },
+  );
+
+storiesOf('Components|MediaIndicator/Audio', module)
+  .add(
+    'audio without duration',
+    () => (
+      <MediaIndicator
+        offscreenText={text('offscreenText', 'Audio')}
+        type="audio"
+      />
+    ),
+    { notes },
+  )
   .add(
     'audio with duration',
     () => (
@@ -48,11 +73,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="true"
       />
     ),
     { notes },

From 1eaf9f9f3d891d001d26a0dfa31ee0c583cdeb3b Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 16:09:41 +0100
Subject: [PATCH 04/13] Add test

---
 .../src/__snapshots__/index.test.jsx.snap     | 82 +++++++++++++++++++
 .../src/index.test.jsx                        | 13 +++
 2 files changed, 95 insertions(+)

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
index 22400f3d17..6137646b0f 100644
--- 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,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MediaIndicator - Top Story should render 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;
+}
+
+.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"
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <svg
+      className="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
+      className="c3"
+    >
+      Audio
+    </span>
+    <time
+      className="c4"
+      dateTime="PT2M15S"
+    >
+      2:15
+    </time>
+  </div>
+</div>
+`;
+
 exports[`MediaIndicator should render audio correctly without duration details 1`] = `
 .c3 {
   -webkit-clip-path: inset(100%);
diff --git a/packages/components/psammead-media-indicator/src/index.test.jsx b/packages/components/psammead-media-indicator/src/index.test.jsx
index e33efb9ef3..b22545d04d 100644
--- 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="true"
+    />,
+  );
+});

From 971853bdf149c543de1666657af43981c28bb78e Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 16:13:21 +0100
Subject: [PATCH 05/13] Update snapshot

---
 .../src/__snapshots__/index.test.jsx.snap                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 6137646b0f..0bf556be3e 100644
--- 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,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MediaIndicator - Top Story should render top story audio promo render correctly 1`] = `
+exports[`MediaIndicator - Top Story should render a top story audio promo render correctly 1`] = `
 .c3 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);

From 184502ef2041a51b90de3606d6c0cc57adfe7c8c Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Thu, 4 Jul 2019 17:30:54 +0100
Subject: [PATCH 06/13] Add decorators to Video stories

---
 .../components/psammead-media-indicator/src/index.stories.jsx  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
index fdf8555901..d061ad641f 100644
--- a/packages/components/psammead-media-indicator/src/index.stories.jsx
+++ b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -50,6 +50,9 @@ storiesOf('Components|MediaIndicator/Video', module)
   );
 
 storiesOf('Components|MediaIndicator/Audio', module)
+  .addDecorator(PageDecorator)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
   .add(
     'audio without duration',
     () => (

From c9a023ee872f3e822a4bb0358c2f6757579e3c2f Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Fri, 5 Jul 2019 08:59:34 +0100
Subject: [PATCH 07/13] Update README

---
 packages/components/psammead-media-indicator/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/psammead-media-indicator/README.md b/packages/components/psammead-media-indicator/README.md
index 9b676b2cc5..8fb403ecbe 100644
--- 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';
 

From 634dbb5d22112f9a51d7243434161f762a29970e Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Fri, 5 Jul 2019 09:19:56 +0100
Subject: [PATCH 08/13] Top story is boolean!!

---
 .../components/psammead-media-indicator/src/index.stories.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
index d061ad641f..f0f7eba3f5 100644
--- a/packages/components/psammead-media-indicator/src/index.stories.jsx
+++ b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -43,7 +43,7 @@ storiesOf('Components|MediaIndicator/Video', module)
         datetime={text('datetime', 'PT2M15S')}
         offscreenText={text('offscreenText', 'Video')}
         type="video"
-        topStory="true"
+        topStory
       />
     ),
     { notes },
@@ -83,7 +83,7 @@ storiesOf('Components|MediaIndicator/Audio', module)
         duration={text('duration', '2:15')}
         datetime={text('datetime', 'PT2M15S')}
         type="audio"
-        topStory="true"
+        topStory
       />
     ),
     { notes },

From ebde6d9e84d12904509d50946cd28859ee516670 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Fri, 5 Jul 2019 09:26:08 +0100
Subject: [PATCH 09/13] Another topStory

---
 packages/components/psammead-media-indicator/src/index.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-media-indicator/src/index.test.jsx b/packages/components/psammead-media-indicator/src/index.test.jsx
index b22545d04d..213fdeaf23 100644
--- a/packages/components/psammead-media-indicator/src/index.test.jsx
+++ b/packages/components/psammead-media-indicator/src/index.test.jsx
@@ -47,7 +47,7 @@ describe('MediaIndicator - Top Story', () => {
       datetime="PT2M15S"
       offscreenText="Audio"
       type="audio"
-      topStory="true"
+      topStory
     />,
   );
 });

From 349f89e90af6b4ac3360b746f29960c04ad5e7fb Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Fri, 5 Jul 2019 10:44:14 +0100
Subject: [PATCH 10/13] Change height under 400px

---
 .../src/__snapshots__/index.test.jsx.snap                    | 5 +++++
 packages/components/psammead-media-indicator/src/index.jsx   | 1 +
 2 files changed, 6 insertions(+)

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
index 0bf556be3e..ad6517479e 100644
--- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -125,6 +125,7 @@ exports[`MediaIndicator should render audio correctly without duration details 1
 
 @media (max-width:24.9375rem) {
   .c0 {
+    height: 1.25rem;
     padding: 0.25rem 0.25rem 0;
   }
 }
@@ -207,6 +208,7 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 
 @media (max-width:24.9375rem) {
   .c0 {
+    height: 1.25rem;
     padding: 0.25rem 0.25rem 0;
   }
 }
@@ -290,6 +292,7 @@ exports[`MediaIndicator should render video by default 1`] = `
 
 @media (max-width:24.9375rem) {
   .c0 {
+    height: 1.25rem;
     padding: 0.25rem 0.25rem 0;
   }
 }
@@ -364,6 +367,7 @@ exports[`MediaIndicator should render video correctly without duration details 1
 
 @media (max-width:24.9375rem) {
   .c0 {
+    height: 1.25rem;
     padding: 0.25rem 0.25rem 0;
   }
 }
@@ -443,6 +447,7 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 
 @media (max-width:24.9375rem) {
   .c0 {
+    height: 1.25rem;
     padding: 0.25rem 0.25rem 0;
   }
 }
diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
index 30cfba1e03..225f26ec77 100644
--- a/packages/components/psammead-media-indicator/src/index.jsx
+++ b/packages/components/psammead-media-indicator/src/index.jsx
@@ -21,6 +21,7 @@ const MediaIndicatorWrapper = styled.div`
     !topStory &&
     css`
       @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
+        height: 1.25rem;
         padding: ${GEL_SPACING_HLF} ${GEL_SPACING_HLF} 0;
       }
     `}

From f1ad77f3a30c64fc4ce5590500b90217bd88cc79 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Fri, 5 Jul 2019 13:39:14 +0100
Subject: [PATCH 11/13] Bump minor instead of patch

---
 packages/components/psammead-media-indicator/CHANGELOG.md      | 2 +-
 packages/components/psammead-media-indicator/package-lock.json | 2 +-
 packages/components/psammead-media-indicator/package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
index 250fbe39c4..a2869f4a00 100644
--- a/packages/components/psammead-media-indicator/CHANGELOG.md
+++ b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
-| 1.0.4   | [PR#776](https://github.com/bbc/psammead/pull/776) Add `topStory` prop, change padding <400px and bump dependencies |
+| 1.1.0   | [PR#776](https://github.com/bbc/psammead/pull/776) Add `topStory` prop, change padding <400px and bump dependencies |
 | 1.0.3   | [PR#713](https://github.com/bbc/psammead/pull/713) Update `styled-components` to 4.3.2 |
 | 1.0.2   | [PR#722](https://github.com/bbc/psammead/pull/722) Fix hover cap on older browsers |
 | 1.0.1   | [PR#677](https://github.com/bbc/psammead/pull/677) Use `@bbc/gel-foundations@3.0.0` |
diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
index 30066bf411..b07498acac 100644
--- a/packages/components/psammead-media-indicator/package-lock.json
+++ b/packages/components/psammead-media-indicator/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-indicator",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
index 7097d1f9c6..27553a175c 100644
--- 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.4",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "description": "Provides a play icon and media duration for media page promos",
   "repository": {

From ad363746267dc7a7a662755df3ff867c15ad2b29 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 8 Jul 2019 17:13:59 +0100
Subject: [PATCH 12/13] snapshots

---
 .../src/__snapshots__/index.test.jsx.snap     | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

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
index 91e7161269..52427ee9c5 100644
--- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -16,6 +16,8 @@ exports[`MediaIndicator - Top Story should render a top story audio promo render
   vertical-align: middle;
   margin: 0 0.25rem;
   fill: #222222;
+  width: 0.8125rem;
+  height: 0.75rem;
 }
 
 .c0 {
@@ -134,13 +136,13 @@ exports[`MediaIndicator should render audio correctly without duration details 1
 
 <div
   aria-hidden="true"
-  class="c0"
+  className="c0"
 >
   <div
-    class="c1"
+    className="c1"
   >
     <svg
-      class="c2"
+      className="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 13 12"
@@ -154,7 +156,7 @@ exports[`MediaIndicator should render audio correctly without duration details 1
       />
     </svg>
     <span
-      class="c3"
+      className="c3"
     >
       Audio
     </span>
@@ -219,13 +221,13 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 
 <div
   aria-hidden="true"
-  class="c0"
+  className="c0"
 >
   <div
-    class="c1"
+    className="c1"
   >
     <svg
-      class="c2"
+      className="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 13 12"
@@ -239,13 +241,13 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
       />
     </svg>
     <span
-      class="c3"
+      className="c3"
     >
       Audio
     </span>
     <time
-      class="c4"
-      datetime="PT2M15S"
+      className="c4"
+      dateTime="PT2M15S"
     >
       2:15
     </time>
@@ -305,13 +307,13 @@ exports[`MediaIndicator should render video by default 1`] = `
 
 <div
   aria-hidden="true"
-  class="c0"
+  className="c0"
 >
   <div
-    class="c1"
+    className="c1"
   >
     <svg
-      class="c2"
+      className="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -322,7 +324,7 @@ exports[`MediaIndicator should render video by default 1`] = `
       />
     </svg>
     <span
-      class="c3"
+      className="c3"
     >
       Video
     </span>
@@ -382,13 +384,13 @@ exports[`MediaIndicator should render video correctly without duration details 1
 
 <div
   aria-hidden="true"
-  class="c0"
+  className="c0"
 >
   <div
-    class="c1"
+    className="c1"
   >
     <svg
-      class="c2"
+      className="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -399,7 +401,7 @@ exports[`MediaIndicator should render video correctly without duration details 1
       />
     </svg>
     <span
-      class="c3"
+      className="c3"
     >
       Video
     </span>
@@ -464,13 +466,13 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 
 <div
   aria-hidden="true"
-  class="c0"
+  className="c0"
 >
   <div
-    class="c1"
+    className="c1"
   >
     <svg
-      class="c2"
+      className="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -481,13 +483,13 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
       />
     </svg>
     <span
-      class="c3"
+      className="c3"
     >
       Video
     </span>
     <time
-      class="c4"
-      datetime="PT2M15S"
+      className="c4"
+      dateTime="PT2M15S"
     >
       2:15
     </time>

From fb001ecabdc46b2d3b989078b982ce35ec7ad6b8 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@bbc.co.uk>
Date: Mon, 8 Jul 2019 17:22:13 +0100
Subject: [PATCH 13/13] even more snapshots

---
 .../src/__snapshots__/index.test.jsx.snap     | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

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
index 52427ee9c5..9702ca018c 100644
--- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
@@ -50,13 +50,13 @@ exports[`MediaIndicator - Top Story should render a top story audio promo render
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 13 12"
@@ -70,13 +70,13 @@ exports[`MediaIndicator - Top Story should render a top story audio promo render
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Audio
     </span>
     <time
-      className="c4"
-      dateTime="PT2M15S"
+      class="c4"
+      datetime="PT2M15S"
     >
       2:15
     </time>
@@ -136,13 +136,13 @@ exports[`MediaIndicator should render audio correctly without duration details 1
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 13 12"
@@ -156,7 +156,7 @@ exports[`MediaIndicator should render audio correctly without duration details 1
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Audio
     </span>
@@ -221,13 +221,13 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 13 12"
@@ -241,13 +241,13 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Audio
     </span>
     <time
-      className="c4"
-      dateTime="PT2M15S"
+      class="c4"
+      datetime="PT2M15S"
     >
       2:15
     </time>
@@ -307,13 +307,13 @@ exports[`MediaIndicator should render video by default 1`] = `
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -324,7 +324,7 @@ exports[`MediaIndicator should render video by default 1`] = `
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Video
     </span>
@@ -384,13 +384,13 @@ exports[`MediaIndicator should render video correctly without duration details 1
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -401,7 +401,7 @@ exports[`MediaIndicator should render video correctly without duration details 1
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Video
     </span>
@@ -466,13 +466,13 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 
 <div
   aria-hidden="true"
-  className="c0"
+  class="c0"
 >
   <div
-    className="c1"
+    class="c1"
   >
     <svg
-      className="c2"
+      class="c2"
       focusable="false"
       height="12px"
       viewBox="0 0 32 32"
@@ -483,13 +483,13 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
       />
     </svg>
     <span
-      className="c3"
+      class="c3"
     >
       Video
     </span>
     <time
-      className="c4"
-      dateTime="PT2M15S"
+      class="c4"
+      datetime="PT2M15S"
     >
       2:15
     </time>