Merge pull request #3237 from bbc/most-read-ie-fix

Most Read IE11 Fix
BBC-archive · Mar 10, 2020 · 3e46582 · 3e46582
2 parents 970577c + e632554
commit 3e46582
Show file tree

Hide file tree

Showing 6 changed files with 436 additions and 3 deletions.
diff --git a/packages/components/psammead-most-read/CHANGELOG.md b/packages/components/psammead-most-read/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.1 | [PR#3237](https://github.com/bbc/psammead/pull/3237) Fixed most-read IE layout bug |
 | 4.0.0 | [PR#3201](https://github.com/bbc/psammead/pull/3201) Refactor RankWrapper in MostRead |
 | 3.0.0 | [PR#3200](https://github.com/bbc/psammead/pull/3200) Show OneColumn in MostRead for all breakpoints for STY Pages |
 | 2.0.3 | [PR#3219](https://github.com/bbc/psammead/pull/3219) Talos - Bump Dependencies - @bbc/psammead-grid |

diff --git a/packages/components/psammead-most-read/package-lock.json b/packages/components/psammead-most-read/package-lock.json
diff --git a/packages/components/psammead-most-read/package.json b/packages/components/psammead-most-read/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-most-read",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A component for the most read item",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap b/packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap
@@ -67,6 +67,54 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c0 {
     display: block;
@@ -711,6 +759,54 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c0 {
     display: block;

diff --git a/packages/components/psammead-most-read/src/Item/index.jsx b/packages/components/psammead-most-read/src/Item/index.jsx
@@ -118,7 +118,7 @@ const StyledGrid = styled(Grid).attrs({
 export const MostReadItemWrapper = ({ dir, children, columnLayout }) => (
   <StyledGrid
     {...mostReadItemGridProps(columnLayout)}
-    parentColumns={mostReadListGridProps.columns} // parentColumns is required here because on IE, this component would be rendered before it's parent therefore not receiving the parent's grid columns values so we have to explicitly pass it as a prop here so it works on IE
+    parentColumns={mostReadListGridProps(columnLayout).columns} // parentColumns is required here because on IE, this component would be rendered before it's parent therefore not receiving the parent's grid columns values so we have to explicitly pass it as a prop here so it works on IE
     dir={dir}
     forwardedAs="li"
   >