Use updated media indicator in Story Promo and Index Alsos

CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.0.73 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Update `@bbc/psammead-media-indicator` to major version 4 & update relvant usage in packages. |
 | 2.0.72 | [PR#3038](https://github.com/bbc/psammead/pull/3038) Refactor no-JS scenarios for @bbc/psammead-media-player, adding jest-dom |
 | 2.0.71 | [PR#3051](https://github.com/bbc/psammead/pull/3051) Bumping dependencies |
 | 2.0.70 | [PR#2988](https://github.com/bbc/psammead/pull/2988) Add @bbc/psammead-timestamp-container to dependencies |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead",
-  "version": "2.0.72",
+  "version": "2.0.73",
   "description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
   "main": "index.js",
   "private": true,
@@ -59,7 +59,7 @@
     "@bbc/psammead-image-placeholder": "^1.2.33",
     "@bbc/psammead-inline-link": "^1.3.20",
     "@bbc/psammead-locales": "^4.1.1",
-    "@bbc/psammead-media-indicator": "^2.6.27",
+    "@bbc/psammead-media-indicator": "^4.0.1",
     "@bbc/psammead-paragraph": "^2.2.24",
     "@bbc/psammead-story-promo": "2.8.0-alpha.1",
     "@bbc/psammead-storybook-helpers": "^8.2.3",

packages/components/psammead-grid/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.1.7 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Update Grid Stories to include new major version of MediaIndicator |
 | 1.1.6 | [PR#3076](https://github.com/bbc/psammead/pull/3076) Add `parentEnableGelGutters` to documentation |
 | 1.1.5 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.1.4 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |

packages/components/psammead-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Grid component",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-grid/src/index.stories.jsx

@@ -6,12 +6,16 @@ import {
   buildRTLSubstories,
 } from '@bbc/psammead-storybook-helpers';
 import Image from '@bbc/psammead-image';
-import MediaIndicator from '@bbc/psammead-media-indicator';
 import StoryPromo, { Headline, Summary, Link } from '@bbc/psammead-story-promo';
 import IndexAlsosContainer from '../../psammead-story-promo/testHelpers/IndexAlsosContainer';
 import relatedItems from '../../psammead-story-promo/testHelpers/relatedItems';
 import Grid from '.';
-import { ExampleImage, ExampleParagraph } from './testHelpers';
+import {
+  ExampleImage,
+  ExampleParagraph,
+  ExampleMediaIndicator,
+  ExampleTime,
+} from './testHelpers';
 import notes from '../README.md';
 
 const STORY_KIND = 'Components|Grid';
@@ -1167,13 +1171,16 @@ storiesOf(STORY_KIND, module)
     ({ service, script, dir, text }) => {
       // eslint-disable-next-line react/prop-types
       const generateStory = ({ topStory, alsoItems = null, mediaType }) => {
-        const MediaIndicatorComponent = type => (
-          <MediaIndicator
-            duration={type !== 'photogallery' && '2:15'}
-            datetime="PT2M15S"
+        const MediaIndicatorComponent = () => (
+          <ExampleMediaIndicator
+            script={script}
             service={service}
-            type={type}
-          />
+            type={mediaType}
+          >
+            {mediaType !== 'photogallery' && (
+              <ExampleTime dateTime="PT2M15S">2:15</ExampleTime>
+            )}
+          </ExampleMediaIndicator>
         );
 
         const Info = (
@@ -1210,7 +1217,8 @@ storiesOf(STORY_KIND, module)
             image={Img}
             info={Info}
             mediaIndicator={
-              mediaType && MediaIndicatorComponent(mediaType, service)
+              mediaType &&
+              MediaIndicatorComponent({ script, service, mediaType })
             }
             topStory={topStory}
           />

packages/components/psammead-grid/src/testHelpers.jsx

@@ -4,7 +4,16 @@ import styled from 'styled-components';
 import Paragraph from '@bbc/psammead-paragraph';
 import { cyrillicAndLatin } from '@bbc/gel-foundations/scripts';
 import Image from '@bbc/psammead-image';
-import { GEL_SPACING } from '@bbc/gel-foundations/dist/spacings';
+import {
+  GEL_SPACING_HLF,
+  GEL_SPACING,
+  GEL_SPACING_QUAD,
+} from '@bbc/gel-foundations/spacings';
+import {
+  GEL_GROUP_1_SCREEN_WIDTH_MAX,
+  GEL_GROUP_2_SCREEN_WIDTH_MIN,
+} from '@bbc/gel-foundations/breakpoints';
+import MediaIndicator from '@bbc/psammead-media-indicator';
 
 export const ExampleParagraph = ({ identifier }) => (
   <Paragraph script={cyrillicAndLatin} service="news">
@@ -38,6 +47,25 @@ export const ExampleImage = () => (
   </ImageSpacing>
 );
 
+export const ExampleMediaIndicator = styled(MediaIndicator)`
+  @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
+    position: absolute;
+    bottom: 0;
+  }
+  > * {
+    @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
+      height: 1.25rem;
+      padding: ${GEL_SPACING_HLF} ${GEL_SPACING_HLF} 0;
+    }
+    height: ${GEL_SPACING_QUAD};
+    padding: ${GEL_SPACING} ${GEL_SPACING_HLF};
+  }
+`;
+
+export const ExampleTime = styled.time`
+  padding: 0 ${GEL_SPACING_HLF};
+`;
+
 ExampleParagraph.propTypes = {
   identifier: string,
 };

packages/components/psammead-story-promo/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 4.0.0-alpha.8 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Use new major version of MediaIndicator. StoryPromo has updated styling around the MediaIndicator. Index Alsos test helper now using prop `isInline` for the MediaIndicator. |
 | 4.0.0-alpha.7 | [PR#3027](https://github.com/bbc/psammead/pull/3027) Use mobile and tablet stylings |
 | 4.0.0-alpha.6 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 4.0.0-alpha.5 | [PR#3026](https://github.com/bbc/psammead/pull/3026) Apply Pica to the regular story promo headline across all breakpoints |

packages/components/psammead-story-promo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-story-promo/src/IndexAlsos/__snapshots__/index.test.jsx.snap

@@ -10,8 +10,29 @@ exports[`Index Alsos should render multiple correctly 1`] = `
   height: 0.75rem;
 }
 
-.c6 > svg {
-  margin: 0;
+.c5 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 0.5rem;
+}
+
+.c6 {
+  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%;
 }
 
 .c1 {
@@ -43,10 +64,6 @@ exports[`Index Alsos should render multiple correctly 1`] = `
   margin: 0;
 }
 
-.c5 {
-  padding-right: 0.5rem;
-}
-
 .c8 {
   display: inline;
   vertical-align: middle;
@@ -73,6 +90,24 @@ exports[`Index Alsos should render multiple correctly 1`] = `
   color: #6E6E73;
 }
 
+.c4 svg {
+  margin: 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c5 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c5 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 @media (min-width:20rem) and (max-width:37.4375rem) {
   .c4 {
     font-size: 0.875rem;
@@ -108,12 +143,11 @@ exports[`Index Alsos should render multiple correctly 1`] = `
         class="c4"
         href="/hausa/labarai-48916590"
       >
-        <span
+        <div
+          aria-hidden="true"
           class="c5"
-          dir="ltr"
         >
-          <span
-            aria-hidden="true"
+          <div
             class="c6"
           >
             <svg
@@ -128,8 +162,8 @@ exports[`Index Alsos should render multiple correctly 1`] = `
                 points="3,32 29,16 3,0"
               />
             </svg>
-          </span>
-        </span>
+          </div>
+        </div>
         <span
           class=""
           role="text"
@@ -177,8 +211,29 @@ exports[`Index Alsos should render one correctly 1`] = `
   height: 0.75rem;
 }
 
-.c5 > svg {
-  margin: 0;
+.c4 {
+  color: #222222;
+  background-color: #FFFFFF;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 0.5rem;
+}
+
+.c5 {
+  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%;
 }
 
 .c1 {
@@ -204,10 +259,6 @@ exports[`Index Alsos should render one correctly 1`] = `
   padding: 0.5rem 0;
 }
 
-.c4 {
-  padding-right: 0.5rem;
-}
-
 .c7 {
   display: inline;
   vertical-align: middle;
@@ -234,6 +285,24 @@ exports[`Index Alsos should render one correctly 1`] = `
   color: #6E6E73;
 }
 
+.c3 svg {
+  margin: 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c4 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c4 {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}
+
 @media (min-width:20rem) and (max-width:37.4375rem) {
   .c3 {
     font-size: 0.875rem;
@@ -264,12 +333,11 @@ exports[`Index Alsos should render one correctly 1`] = `
       class="c3"
       href="/hausa/labarai-48916590"
     >
-      <span
+      <div
+        aria-hidden="true"
         class="c4"
-        dir="ltr"
       >
-        <span
-          aria-hidden="true"
+        <div
           class="c5"
         >
           <svg
@@ -284,8 +352,8 @@ exports[`Index Alsos should render one correctly 1`] = `
               points="3,32 29,16 3,0"
             />
           </svg>
-        </span>
-      </span>
+        </div>
+      </div>
       <span
         class=""
         role="text"