Merge pull request #3109 from bbc/use-dir-media-indicator

Media Indicator - Pass dir
BBC-archive · Feb 11, 2020 · c588917 · c588917
2 parents 7e33781 + dd15ffc
commit c588917
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 33 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 |
 | ------- | ----------- |
+| 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` |

diff --git 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>;
 ```
 

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": "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
@@ -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"
@@ -364,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 {
@@ -396,6 +401,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
 <div
   aria-hidden="true"
   class="c0"
+  dir="rtl"
 >
   <div
     class="c1"

diff --git 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
@@ -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,18 +54,17 @@ storiesOf('Components|MediaIndicator/Video', module)
   )
   .add(
     'inline video media indicator with headline',
-    ({ script, service }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="video"
           script={script}
           service={service}
+          dir={dir}
           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>
       </>
     ),
@@ -73,15 +77,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,18 +100,17 @@ storiesOf('Components|MediaIndicator/Audio', module)
   )
   .add(
     'inline audio media indicator with headline',
-    ({ script, service }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="audio"
           script={script}
           service={service}
+          dir={dir}
           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>
       </>
     ),
@@ -115,25 +123,29 @@ 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 }) => (
+    ({ longText: textSnippet, script, service, dir }) => (
       <>
         <MediaIndicator
           type="photogallery"
           script={script}
           service={service}
+          dir={dir}
           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>
       </>
     ),

diff --git 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(