From 07750fa49b11798304f8ae743af1d6b4442fe3ad Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Tue, 11 Feb 2020 08:43:45 +0000
Subject: [PATCH 1/5] Pass dir prop to Media Indicator

---
 .../psammead-media-indicator/CHANGELOG.md     |  1 +
 .../package-lock.json                         |  2 +-
 .../psammead-media-indicator/package.json     |  2 +-
 .../src/__snapshots__/index.test.jsx.snap     |  6 +++
 .../psammead-media-indicator/src/index.jsx    |  5 ++-
 .../src/index.stories.jsx                     | 44 +++++++++++++------
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
index 8d0d13e39b..6915f56468 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 |
 | ------- | ----------- |
+| 4.0.2 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Pass `dir` to the `MediaIndicator`|
 | 4.0.1 | [PR#3075](https://github.com/bbc/psammead/pull/3075) Pass `script` to the `MediaIndicator`|
 | 4.0.0 | [PR#3062](https://github.com/bbc/psammead/pull/3062) Pass Time element as a child and remove spacing from the `MediaIndicatorWrapper`|
 | 3.0.0 | [PR#3029](https://github.com/bbc/psammead/pull/3029) Add prop `isInline` for displaying media indicator inline. Remove boolean prop `indexAlsos` since it should be replaced with `isInline` |
diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
index 4bd0ca2b2f..e781815779 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": "4.0.1",
+  "version": "4.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
index 7352c78cac..a2f8bf90bb 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": "4.0.1",
+  "version": "4.0.2",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
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 21d6423ff8..08204bfc86 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,6 +50,7 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
@@ -123,6 +124,7 @@ exports[`MediaIndicator should render photogallery correctly 1`] = `
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
@@ -182,6 +184,7 @@ exports[`MediaIndicator should render video by default 1`] = `
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
@@ -252,6 +255,7 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
@@ -324,6 +328,7 @@ exports[`MediaIndicator should render video indicator correctly when inline 1`]
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
@@ -396,6 +401,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
 <div
   aria-hidden="true"
   class="c0"
+  dir="ltr"
 >
   <div
     class="c1"
diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
index 7dfc223b6e..9e48f47c9c 100644
--- a/packages/components/psammead-media-indicator/src/index.jsx
+++ b/packages/components/psammead-media-indicator/src/index.jsx
@@ -35,11 +35,12 @@ const FlexWrapper = styled.div`
   height: 100%;
 `;
 
-const MediaIndicator = ({ type, script, service, isInline, children }) => (
+const MediaIndicator = ({ type, script, service, dir, isInline, children }) => (
   <StyledMediaIndicator
     aria-hidden="true"
     script={script}
     service={service}
+    dir={dir}
     isInline={isInline}
   >
     <FlexWrapper>
@@ -53,12 +54,14 @@ MediaIndicator.propTypes = {
   type: oneOf(['video', 'audio', 'photogallery']),
   script: shape(scriptPropType).isRequired,
   service: string.isRequired,
+  dir: oneOf(['ltr', 'rtl']),
   isInline: bool,
   children: node,
 };
 
 MediaIndicator.defaultProps = {
   type: 'video',
+  dir: 'ltr',
   isInline: false,
   children: null,
 };
diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
index 1d0d5ddfe0..7bcecd2a44 100644
--- a/packages/components/psammead-media-indicator/src/index.stories.jsx
+++ b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -31,15 +31,20 @@ storiesOf('Components|MediaIndicator/Video', module)
   .addDecorator(withServicesKnob())
   .add(
     'video without duration',
-    ({ script, service }) => (
-      <MediaIndicator type="video" script={script} service={service} />
+    ({ script, service, dir }) => (
+      <MediaIndicator
+        type="video"
+        script={script}
+        dir={dir}
+        service={service}
+      />
     ),
     { notes },
   )
   .add(
     'video with duration',
-    ({ script, service }) => (
-      <MediaIndicator type="video" script={script} service={service}>
+    ({ script, service, dir }) => (
+      <MediaIndicator type="video" script={script} service={service} dir={dir}>
         <TimeDuration dateTime={text('datetime', 'PT2M15S')}>
           {text('duration', '2:15')}
         </TimeDuration>
@@ -49,12 +54,13 @@ storiesOf('Components|MediaIndicator/Video', module)
   )
   .add(
     'inline video media indicator with headline',
-    ({ script, service }) => (
+    ({ script, service, dir }) => (
       <>
         <MediaIndicator
           type="video"
           script={script}
           service={service}
+          dir={dir}
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>
@@ -73,15 +79,20 @@ storiesOf('Components|MediaIndicator/Audio', module)
   .addDecorator(withServicesKnob())
   .add(
     'audio without duration',
-    ({ script, service }) => (
-      <MediaIndicator type="audio" script={script} service={service} />
+    ({ script, service, dir }) => (
+      <MediaIndicator
+        type="audio"
+        script={script}
+        service={service}
+        dir={dir}
+      />
     ),
     { notes },
   )
   .add(
     'audio with duration',
-    ({ script, service }) => (
-      <MediaIndicator type="audio" script={script} service={service}>
+    ({ script, service, dir }) => (
+      <MediaIndicator type="audio" script={script} service={service} dir={dir}>
         <time dateTime={text('datetime', 'PT2M15S')}>
           {text('duration', '2:15')}
         </time>
@@ -91,12 +102,13 @@ storiesOf('Components|MediaIndicator/Audio', module)
   )
   .add(
     'inline audio media indicator with headline',
-    ({ script, service }) => (
+    ({ script, service, dir }) => (
       <>
         <MediaIndicator
           type="audio"
           script={script}
           service={service}
+          dir={dir}
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>
@@ -115,19 +127,25 @@ storiesOf('Components|MediaIndicator/Photo', module)
   .addDecorator(withServicesKnob())
   .add(
     'photogallery',
-    ({ script, service }) => (
-      <MediaIndicator type="photogallery" script={script} service={service} />
+    ({ script, service, dir }) => (
+      <MediaIndicator
+        type="photogallery"
+        script={script}
+        service={service}
+        dir={dir}
+      />
     ),
     { notes },
   )
   .add(
     'inline photogallery with headline',
-    ({ script, service }) => (
+    ({ script, service, dir }) => (
       <>
         <MediaIndicator
           type="photogallery"
           script={script}
           service={service}
+          dir={dir}
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>

From 4f6e4e9f621d3c917cfbeeb7b7727468b703f608 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Tue, 11 Feb 2020 08:51:23 +0000
Subject: [PATCH 2/5] 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 6915f56468..5270a337e6 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 |
 | ------- | ----------- |
-| 4.0.2 | [PR#XXX](https://github.com/bbc/psammead/pull/XXX) Pass `dir` to the `MediaIndicator`|
+| 4.0.2 | [PR#3109](https://github.com/bbc/psammead/pull/3109) Pass `dir` to the `MediaIndicator`|
 | 4.0.1 | [PR#3075](https://github.com/bbc/psammead/pull/3075) Pass `script` to the `MediaIndicator`|
 | 4.0.0 | [PR#3062](https://github.com/bbc/psammead/pull/3062) Pass Time element as a child and remove spacing from the `MediaIndicatorWrapper`|
 | 3.0.0 | [PR#3029](https://github.com/bbc/psammead/pull/3029) Add prop `isInline` for displaying media indicator inline. Remove boolean prop `indexAlsos` since it should be replaced with `isInline` |

From 8fa330ec85a23c10709b4f6b0798deb46baf21b0 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Tue, 11 Feb 2020 09:17:46 +0000
Subject: [PATCH 3/5] Use localised text

---
 .../src/index.stories.jsx                      | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx
index 7bcecd2a44..86a99880b9 100644
--- a/packages/components/psammead-media-indicator/src/index.stories.jsx
+++ b/packages/components/psammead-media-indicator/src/index.stories.jsx
@@ -54,7 +54,7 @@ storiesOf('Components|MediaIndicator/Video', module)
   )
   .add(
     'inline video media indicator with headline',
-    ({ script, service, dir }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="video"
@@ -64,9 +64,7 @@ storiesOf('Components|MediaIndicator/Video', module)
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>
-          <Link href="https://www.bbc.co.uk/news">
-            {text('extra text', 'example text')}
-          </Link>
+          <Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
         </StyledHeadline>
       </>
     ),
@@ -102,7 +100,7 @@ storiesOf('Components|MediaIndicator/Audio', module)
   )
   .add(
     'inline audio media indicator with headline',
-    ({ script, service, dir }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="audio"
@@ -112,9 +110,7 @@ storiesOf('Components|MediaIndicator/Audio', module)
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>
-          <Link href="https://www.bbc.co.uk/news">
-            {text('extra text', 'example text')}
-          </Link>
+          <Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
         </StyledHeadline>
       </>
     ),
@@ -139,7 +135,7 @@ storiesOf('Components|MediaIndicator/Photo', module)
   )
   .add(
     'inline photogallery with headline',
-    ({ script, service, dir }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="photogallery"
@@ -149,9 +145,7 @@ storiesOf('Components|MediaIndicator/Photo', module)
           isInline={boolean('inline?', true)}
         />
         <StyledHeadline script={script} service={service} promoHasImage={false}>
-          <Link href="https://www.bbc.co.uk/news">
-            {text('extra text', 'example text')}
-          </Link>
+          <Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
         </StyledHeadline>
       </>
     ),

From 7a53cdd0d54ecfe0269d1bdbb654d8801287150d Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Tue, 11 Feb 2020 09:32:32 +0000
Subject: [PATCH 4/5] Pass dir to rtl test

---
 .../src/__snapshots__/index.test.jsx.snap                 | 4 ++--
 .../psammead-media-indicator/src/index.test.jsx           | 8 +++++++-
 2 files changed, 9 insertions(+), 3 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 08204bfc86..9dcc817165 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
@@ -369,7 +369,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
   line-height: 1rem;
   display: inline-block;
   vertical-align: middle;
-  padding-right: 0.5rem;
+  padding-left: 0.5rem;
 }
 
 .c1 {
@@ -401,7 +401,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
 <div
   aria-hidden="true"
   class="c0"
-  dir="ltr"
+  dir="rtl"
 >
   <div
     class="c1"
diff --git a/packages/components/psammead-media-indicator/src/index.test.jsx b/packages/components/psammead-media-indicator/src/index.test.jsx
index 00d13f8d96..b797674a1a 100644
--- a/packages/components/psammead-media-indicator/src/index.test.jsx
+++ b/packages/components/psammead-media-indicator/src/index.test.jsx
@@ -21,7 +21,13 @@ describe('MediaIndicator', () => {
 
   shouldMatchSnapshot(
     'should render video indicator correctly when inline on RTL',
-    <MediaIndicator type="video" script={arabic} service="persian" isInline />,
+    <MediaIndicator
+      type="video"
+      script={arabic}
+      service="persian"
+      dir="rtl"
+      isInline
+    />,
   );
 
   shouldMatchSnapshot(

From dd15ffc25f5292c6b7f3103f31560862c0f86207 Mon Sep 17 00:00:00 2001
From: Denis Hernandez <denis.hernandezesteban@bbc.co.uk>
Date: Tue, 11 Feb 2020 09:35:22 +0000
Subject: [PATCH 5/5] Update README

---
 .../components/psammead-media-indicator/README.md   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/components/psammead-media-indicator/README.md b/packages/components/psammead-media-indicator/README.md
index b0afe5690f..059f763db0 100644
--- a/packages/components/psammead-media-indicator/README.md
+++ b/packages/components/psammead-media-indicator/README.md
@@ -13,11 +13,12 @@ The `MediaIndicator` component provides a 'play', 'audio' or 'camera' icon as we
 <!-- prettier-ignore -->
 | Argument   | Type    | Required | Default | Example      |
 | ---------- | ------- | -------- | ------- | ------------ |
-| type       | string  | No       | 'video' | 'audio'      |
+| type       | string  | no       | 'video' | 'audio'      |
 | script | object | yes | N/A | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
-| service    | string  | Yes      | N/A     | `'news'`     |
-| isInline   | boolean | No       | false   | true         |
-| children   | node    | No       | null    | <IndexAlsos> |
+| service    | string  | yes      | N/A     | `'news'`     |
+| dir        | string  | no       | `'ltr'` | `'rtl'`  |
+| isInline   | boolean | no       | false   | true         |
+| children   | node    | no       | null    | <IndexAlsos> |
 
 ### Supported `type`s
 
@@ -39,7 +40,7 @@ import { latin } from '@bbc/gel-foundations/scripts';
 <MediaIndicator type="audio" script={latin} service="news" />;
 ```
 
-When using this component ensure you add the relevant spacing. 
+When using this component ensure you add the relevant spacing.
 
 E.g.
 
@@ -53,7 +54,7 @@ const TimeDuration = styled.time`
 `;
 
 <MediaIndicator type="audio" script={latin} service="news">
-    <TimeDuration datetime="PT2M15S">2:15</TimeDuration> 
+  <TimeDuration datetime="PT2M15S">2:15</TimeDuration>
 </MediaIndicator>;
 ```