Adds MostRead to STY's second column

package.json

@@ -70,15 +70,15 @@
     "@bbc/psammead-consent-banner": "^2.3.28",
     "@bbc/psammead-copyright": "^1.2.24",
     "@bbc/psammead-figure": "^1.2.12",
-    "@bbc/psammead-grid": "^1.1.10",
+    "@bbc/psammead-grid": "^1.1.11",
     "@bbc/psammead-headings": "^3.1.28",
     "@bbc/psammead-image": "^1.2.4",
     "@bbc/psammead-image-placeholder": "^1.2.33",
     "@bbc/psammead-inline-link": "^1.3.20",
     "@bbc/psammead-locales": "^4.1.2",
     "@bbc/psammead-media-indicator": "^4.0.4",
     "@bbc/psammead-media-player": "^2.7.4",
-    "@bbc/psammead-most-read": "^2.0.2",
+    "@bbc/psammead-most-read": "^4.0.2",
     "@bbc/psammead-navigation": "^6.0.2",
     "@bbc/psammead-paragraph": "^2.2.26",
     "@bbc/psammead-radio-schedule": "0.1.0-alpha.20",

src/app/containers/MostRead/Canonical/index.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
 import 'isomorphic-fetch';
-import { bool, string } from 'prop-types';
+import { bool, string, oneOf } from 'prop-types';
 import styled from 'styled-components';
 import {
   GEL_GROUP_1_SCREEN_WIDTH_MAX,
@@ -77,7 +77,7 @@ const ConstrainedMostReadSection = styled(MostReadSection)`
 
 const CanonicalMostRead = ({
   endpoint,
-  maxTwoColumns,
+  columnLayout,
   constrainMaxWidth,
   isOnFrontPage,
 }) => {
@@ -162,21 +162,21 @@ const CanonicalMostRead = ({
         <MostReadList
           numberOfItems={items.length}
           dir={dir}
-          maxTwoColumns={maxTwoColumns}
+          columnLayout={columnLayout}
         >
           {items.map((item, i) => (
             <MostReadItemWrapper
               dir={dir}
               key={item.id}
-              maxTwoColumns={maxTwoColumns}
+              columnLayout={columnLayout}
             >
               <MostReadRank
                 service={service}
                 script={script}
                 listIndex={i + 1}
                 numberOfItems={items.length}
                 dir={dir}
-                maxTwoColumns={maxTwoColumns}
+                columnLayout={columnLayout}
               />
               <MostReadLink
                 dir={dir}
@@ -198,12 +198,12 @@ const CanonicalMostRead = ({
 CanonicalMostRead.propTypes = {
   endpoint: string.isRequired,
   constrainMaxWidth: bool.isRequired,
-  maxTwoColumns: bool,
+  columnLayout: oneOf(['oneColumn', 'twoColumn', 'multiColumn']),
   isOnFrontPage: bool,
 };
 
 CanonicalMostRead.defaultProps = {
-  maxTwoColumns: false,
+  columnLayout: 'multiColumn',
   isOnFrontPage: false,
 };
 

src/app/containers/MostRead/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
   margin: 0;
   padding: 0;
   grid-auto-flow: column;
-  grid-template-rows: repeat( 5,[col-start] auto [col-end] );
+  grid-template-rows: repeat(10,auto);
 }
 
 .c13 {
@@ -201,64 +201,75 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
   }
 }
 
-@media (max-width:37.4375rem) {
+@media (min-width:37.5rem) {
   .c8 {
-    grid-template-rows: repeat( 10,[col-start] auto [col-end] );
+    grid-template-rows: repeat( 5,auto );
   }
 }
 
 @media (min-width:80rem) {
   .c8 {
     grid-auto-flow: row;
-    grid-template-rows: repeat( 5,[col-start] auto [col-end] );
   }
 }
 
 @media (max-width:14.9375rem) {
   .c12 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:15rem) and (max-width:24.9375rem) {
   .c12 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c12 {
-    min-width: 2.1rem;
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c12 {
+    min-width: 3rem;
   }
 }
 
 @media (min-width:37.5rem) {
   .c12 {
-    min-width: auto;
+    min-width: 1.5rem;
   }
 }
 
 @media (min-width:80rem) {
   .c12 {
-    min-width: auto;
+    min-width: 1.5rem;
   }
 }
 
 @media (max-width:14.9375rem) {
   .c16 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:15rem) and (max-width:24.9375rem) {
   .c16 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c16 {
-    min-width: 2.1rem;
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c16 {
+    min-width: 3rem;
   }
 }
 
@@ -270,31 +281,37 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
 
 @media (min-width:80rem) {
   .c16 {
-    min-width: auto;
+    min-width: 1.5rem;
   }
 }
 
 @media (max-width:14.9375rem) {
   .c17 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:15rem) and (max-width:24.9375rem) {
   .c17 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c17 {
-    min-width: 2.1rem;
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c17 {
+    min-width: 3rem;
   }
 }
 
 @media (min-width:37.5rem) {
   .c17 {
-    min-width: auto;
+    min-width: 1.5rem;
   }
 }
 
@@ -306,19 +323,25 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
 
 @media (max-width:14.9375rem) {
   .c18 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:15rem) and (max-width:24.9375rem) {
   .c18 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c18 {
-    min-width: 2.1rem;
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c18 {
+    min-width: 3rem;
   }
 }
 
@@ -330,37 +353,79 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
 
 @media (min-width:80rem) {
   .c18 {
-    min-width: auto;
+    min-width: 1.5rem;
   }
 }
 
 @media (max-width:14.9375rem) {
   .c19 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:15rem) and (max-width:24.9375rem) {
   .c19 {
-    min-width: 1.8rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c19 {
-    min-width: 2.1rem;
+    min-width: 2rem;
   }
 }
 
 @media (min-width:37.5rem) {
   .c19 {
-    min-width: auto;
+    min-width: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c19 {
+    min-width: 1.5rem;
   }
 }
 
 @media (min-width:80rem) {
   .c19 {
-    min-width: auto;
+    min-width: 1.5rem;
+  }
+}
+
+@media (max-width:14.9375rem) {
+  .c20 {
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c20 {
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c20 {
+    min-width: 2rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c20 {
+    min-width: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c20 {
+    min-width: 3rem;
+  }
+}
+
+@media (min-width:80rem) {
+  .c20 {
+    min-width: 3rem;
   }
 }
 
@@ -807,7 +872,7 @@ exports[`MostReadContainerCanonical Assertion should render most read correctly
           class="c11"
         >
           <div
-            class="c18"
+            class="c20"
             dir="rtl"
           >
             <span