Merge pull request #1923 from bbc/add-rtl-index-alsos

Index Alsos - Add support for RTL

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.6.2 | [PR#1923](https://github.com/bbc/psammead/pull/1923) Add support for RTL to Index Alsos |
 | 2.6.1 | [PR#1845](https://github.com/bbc/psammead/pull/1845) Remove padding-bottom from Index Alsos Wrapper |
 | 2.6.0 | [PR#1832](https://github.com/bbc/psammead/pull/1832) Export IndexAlsos from `src/index.jsx` |
 | 2.5.3 | [PR#1826](https://github.com/bbc/psammead/pull/1826) Talos - Bump Dependencies |

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

@@ -5,6 +5,7 @@
 The `StoryPromo` component is designed to be used on 'index' pages, which are pages that link to other articles/stories. It supports having an image on the left of the promo with info on the right. This info can be any collection of nodes, however typically these would be a headline, text summary and timestamp.
 
 ## Exports
+
 `/index-alsos` - components for links to stories that are related to the top story.
 
 ## Installation
@@ -85,7 +86,9 @@ On the other hand, when there is exactly one Index Also, it should use the `Inde
 | script         | object | yes      | latin | { 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'`|
 | url            | string | yes      | N/A     | `'https://www.bbc.co.uk/news'`|
+| dir            | string | no       | `ltr`   | `rtl`   |
 | mediaIndicator | node   | no       | null    | `<MediaIndicator service="news" type="video" indexAlsos/>` |
+| mediaType      | string | no       | null    | `Video` |
 
 #### IndexAlso Props
 
@@ -96,7 +99,9 @@ On the other hand, when there is exactly one Index Also, it should use the `Inde
 | script         | object | yes      | latin | { 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'`|
 | url            | string | yes      | N/A     | `'https://www.bbc.co.uk/news'`|
+| dir            | string | no       | `ltr`   | `rtl`   |
 | mediaIndicator | node   | no       | null    | `<MediaIndicator service="news" type="video" indexAlsos/>` |
+| mediaType      | string | no       | null    | `Video` |
 
 ## Usage
 

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

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

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

@@ -116,6 +116,7 @@ exports[`Index Alsos should render multiple correctly 1`] = `
       >
         <span
           class="c5"
+          dir="ltr"
         >
           <span
             aria-hidden="true"
@@ -276,6 +277,7 @@ exports[`Index Alsos should render one correctly 1`] = `
     >
       <span
         class="c4"
+        dir="ltr"
       >
         <span
           aria-hidden="true"

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { node, string, shape } from 'prop-types';
+import { node, oneOf, string, shape } from 'prop-types';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 import { GEL_SPACING, GEL_SPACING_DBL } from '@bbc/gel-foundations/spacings';
 import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
@@ -9,6 +9,8 @@ import { getBrevier } from '@bbc/gel-foundations/typography';
 import { getSerifMedium } from '@bbc/psammead-styles/font-styles';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 
+const paddingDir = ({ dir }) => `padding-${dir === 'rtl' ? 'left' : 'right'}`;
+
 const StyledIndexAlsos = styled.div`
   position: relative;
   z-index: 2;
@@ -31,7 +33,7 @@ const StyledIndexAlsosUl = styled.ul`
 `;
 
 const IndexAlsosMediaIndicator = styled.span`
-  padding-right: ${GEL_SPACING};
+  ${paddingDir}: ${GEL_SPACING};
 `;
 
 const RoleText = styled.span.attrs({
@@ -64,14 +66,17 @@ const IndexAlsosLink = ({
   script,
   service,
   url,
+  dir,
   mediaIndicator,
   mediaType,
 }) => {
   return (
     <StyledIndexAlsosLink href={url} script={script} service={service}>
       {mediaIndicator ? (
         <Fragment>
-          <IndexAlsosMediaIndicator>{mediaIndicator}</IndexAlsosMediaIndicator>
+          <IndexAlsosMediaIndicator dir={dir}>
+            {mediaIndicator}
+          </IndexAlsosMediaIndicator>
           <RoleText>
             <VisuallyHiddenText>{mediaType}, </VisuallyHiddenText>
             <IndexAlsosText>{children}</IndexAlsosText>
@@ -89,11 +94,13 @@ IndexAlsosLink.propTypes = {
   script: shape(scriptPropType).isRequired,
   service: string.isRequired,
   url: string.isRequired,
+  dir: oneOf(['ltr', 'rtl']),
   mediaIndicator: node,
   mediaType: string,
 };
 
 IndexAlsosLink.defaultProps = {
+  dir: 'ltr',
   mediaIndicator: null,
   mediaType: null,
 };

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

@@ -17,7 +17,7 @@ describe('Index Alsos', () => {
   shouldMatchSnapshot(
     'should render one correctly',
     <IndexAlsosContainer
-      alsoItems={relatedItems[0]}
+      alsoItems={[relatedItems[0]]}
       script={latin}
       service="news"
     />,

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

@@ -852,6 +852,7 @@ exports[`StoryPromo - Top Story should render with multiple Index Alsos correctl
           >
             <span
               class="c12"
+              dir="ltr"
             >
               <span
                 aria-hidden="true"
@@ -1229,6 +1230,7 @@ exports[`StoryPromo - Top Story should render with one Index Also correctly 1`]
         >
           <span
             class="c11"
+            dir="ltr"
           >
             <span
               aria-hidden="true"

packages/components/psammead-story-promo/src/index.stories.jsx

@@ -82,6 +82,7 @@ const InfoComponent = ({
         alsoItems={alsoItems}
         script={script}
         service={service}
+        dir={dir}
       />
     )}
   </Fragment>
@@ -146,7 +147,7 @@ storiesOf('Components|StoryPromo/StoryPromo', module)
   )
   .add(
     'Index Alsos - one',
-    generateStory({ topStory: true, alsoItems: relatedItems[0] }),
+    generateStory({ topStory: true, alsoItems: [relatedItems[0]] }),
     {
       notes,
       knobs: { escapeHTML: false },

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

@@ -101,7 +101,7 @@ describe('StoryPromo - Top Story', () => {
     'should render with one Index Also correctly',
     <StoryPromo
       image={Image}
-      info={Info({ topStory: true, alsoItems: relatedItems[0] })}
+      info={Info({ topStory: true, alsoItems: [relatedItems[0]] })}
       topStory
     />,
   );

packages/components/psammead-story-promo/testHelpers/IndexAlsosContainer.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { oneOfType, arrayOf, shape, number, string } from 'prop-types';
+import React, { Fragment } from 'react';
+import { oneOfType, oneOf, arrayOf, shape, number, string } from 'prop-types';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 import MediaIndicator from '@bbc/psammead-media-indicator';
 import {
@@ -9,84 +9,67 @@ import {
   IndexAlsosLi,
 } from '../src/IndexAlsos/index';
 
-const IndexAlsosContainer = ({ alsoItems, script, service }) => {
-  const getMediaType = (cpsType, mediaType) => {
-    const isPGL = cpsType === 'PGL';
-    const isMedia = cpsType === 'MAP';
-    const media = mediaType || 'Video';
+const MAX_NUM_INDEX_ALSOS = 3; // Cap the number of Index Alsos at 3.
 
-    if (!isPGL && !isMedia) {
-      return null;
-    }
+const getMediaType = (cpsType, mediaType) => {
+  const isPGL = cpsType === 'PGL';
+  const isMedia = cpsType === 'MAP';
+  const media = mediaType || 'Video';
 
-    const type = isPGL ? 'photogallery' : media.toLowerCase();
+  if (!isPGL && !isMedia) {
+    return null;
+  }
 
-    return type;
-  };
+  const type = isPGL ? 'photogallery' : media.toLowerCase();
 
-  const IndexAlsosMediaIndicator = (cpsType, mediaType) => {
-    const indexAlsosMediaType = getMediaType(cpsType, mediaType);
+  return type;
+};
+
+const buildIndexAlsosMediaIndicator = (cpsType, mediaType, service) => {
+  const indexAlsosMediaType = getMediaType(cpsType, mediaType);
+
+  return indexAlsosMediaType ? (
+    <MediaIndicator service={service} type={indexAlsosMediaType} indexAlsos />
+  ) : null;
+};
 
-    return indexAlsosMediaType ? (
-      <MediaIndicator service={service} type={indexAlsosMediaType} indexAlsos />
-    ) : null;
-  };
+/*
+ * When there are more than one Index Alsos, they should be wrapped in a list item `IndexAlsosLi` within an unordered list `IndexAlsosUl`.
+ * On the other hand, when there is exactly one Index Also, it should use the `IndexAlso` component and it should not be contained within a list.
+ */
+const IndexAlsosContainer = ({ alsoItems, script, service, dir }) => {
+  const IndexAlsosWrapper = alsoItems.length > 1 ? IndexAlsosUl : Fragment;
+  const IndexAlsoItem = alsoItems.length > 1 ? IndexAlsosLi : IndexAlso;
 
   return (
     <IndexAlsos offScreenText="Related content">
-      {alsoItems.length > 1 ? (
-        <IndexAlsosUl>
-          {alsoItems.map(item => {
-            const { id, cpsType, mediaType } = item;
-            const { headline } = item.headlines;
-            const url = item.locators.assetUri;
-            const indexAlsoMediaIndicator = IndexAlsosMediaIndicator(
-              cpsType,
-              mediaType,
-              service,
-            );
-            const indexAlsoMediaType = getMediaType(cpsType, mediaType);
-
-            return (
-              <IndexAlsosLi
-                key={id}
-                script={script}
-                service={service}
-                url={url}
-                mediaIndicator={indexAlsoMediaIndicator}
-                mediaType={indexAlsoMediaType}
-              >
-                {headline}
-              </IndexAlsosLi>
-            );
-          })}
-        </IndexAlsosUl>
-      ) : (
-        // When there is exactly one related item, it should not be contained within a list.
-        (() => {
-          const { cpsType, mediaType } = alsoItems;
-          const { headline } = alsoItems.headlines;
-          const url = alsoItems.locators.assetUri;
-          const indexAlsoMediaIndicator = IndexAlsosMediaIndicator(
+      <IndexAlsosWrapper>
+        {alsoItems.slice(0, MAX_NUM_INDEX_ALSOS).map(item => {
+          const { id, cpsType, mediaType } = item;
+          const { headline } = item.headlines;
+          const url = item.locators.assetUri;
+          const indexAlsoMediaIndicator = buildIndexAlsosMediaIndicator(
             cpsType,
             mediaType,
             service,
           );
           const indexAlsoMediaType = getMediaType(cpsType, mediaType);
 
           return (
-            <IndexAlso
+            <IndexAlsoItem
+              key={id}
               script={script}
               service={service}
               url={url}
+              dir={dir}
               mediaIndicator={indexAlsoMediaIndicator}
               mediaType={indexAlsoMediaType}
             >
               {headline}
-            </IndexAlso>
+            </IndexAlsoItem>
           );
-        })()
-      )}
+        })}
+      </IndexAlsosWrapper>
     </IndexAlsos>
   );
 };
@@ -111,6 +94,11 @@ IndexAlsosContainer.propTypes = {
     .isRequired,
   script: shape(scriptPropType).isRequired,
   service: string.isRequired,
+  dir: oneOf(['ltr', 'rtl']),
+};
+
+IndexAlsosContainer.defaultProps = {
+  dir: 'ltr',
 };
 
 export default IndexAlsosContainer;