Merge branch 'latest' into replace-storybook-addon

BBC-archive · May 13, 2019 · 8702536 · 8702536
2 parents 5b781f0 + 8c9d0ae
commit 8702536
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 33 deletions.
diff --git a/packages/components/psammead-story-promo/CHANGELOG.md b/packages/components/psammead-story-promo/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 0.1.4   | [PR#489](https://github.com/BBC-News/psammead/pull/489) Add grid fallback. |
 | 0.1.3   | [PR#498](https://github.com/bbc/psammead/pull/498) Update stories to use new input provider |
 | 0.1.2   | [PR#488](https://github.com/BBC-News/psammead/pull/488) Hide story summary on device width lower than 600px. |
 | 0.1.1   | [PR#474](https://github.com/BBC-News/psammead/pull/474) Update Story promo headline to use Great Primer. |

diff --git a/packages/components/psammead-story-promo/package-lock.json b/packages/components/psammead-story-promo/package-lock.json
diff --git a/packages/components/psammead-story-promo/package.json b/packages/components/psammead-story-promo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-story-promo",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "description": "A story promo for use on index pages",
   "repository": {

diff --git a/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo/src/__snapshots__/index.test.jsx.snap
@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StoryPromo should render correctly 1`] = `
-.c0 {
-  display: grid;
-  grid-template-columns: repeat(6,1fr);
-  grid-column-gap: 0.5rem;
-}
-
 .c1 {
-  grid-column: 1 / span 2;
+  display: inline-block;
+  vertical-align: top;
+  max-width: 33.33%;
 }
 
 .c2 {
-  grid-column: 3 / span 4;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 0.5rem;
+  max-width: 66.67%;
 }
 
 .c3 {
@@ -34,27 +33,46 @@ exports[`StoryPromo should render correctly 1`] = `
   padding-bottom: 0.5rem;
 }
 
-@media (min-width:37.5rem) {
+@supports (display:grid) {
   .c0 {
-    grid-column-gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(6,1fr);
+    grid-column-gap: 0.5rem;
   }
 }
 
 @media (min-width:80rem) {
-  .c0 {
-    grid-template-columns: repeat(12,1fr);
+  .c1 {
+    max-width: 33.33%;
   }
 }
 
-@media (min-width:80rem) {
+@supports (display:grid) {
   .c1 {
-    grid-column: 1 / span 4;
+    display: block;
+    max-width: initial;
+    grid-column: 1 / span 2;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c2 {
+    padding: 0 1rem;
   }
 }
 
 @media (min-width:80rem) {
   .c2 {
-    grid-column: 5 / span 8;
+    max-width: 66.67%;
+  }
+}
+
+@supports (display:grid) {
+  .c2 {
+    display: block;
+    max-width: initial;
+    padding: initial;
+    grid-column: 3 / span 4;
   }
 }
 

diff --git a/packages/components/psammead-story-promo/src/index.jsx b/packages/components/psammead-story-promo/src/index.jsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { node } from 'prop-types';
 import {
   GEL_SPACING,
+  GEL_SPACING_DBL,
   GEL_GUTTER_BELOW_600PX,
   GEL_GUTTER_ABOVE_600PX,
 } from '@bbc/gel-foundations/spacings';
@@ -19,33 +20,77 @@ import {
 } from '@bbc/gel-foundations/typography';
 import { C_SHADOW } from '@bbc/psammead-styles/colours';
 
+const twoOfSixColumnsMaxWidthScaleable = `33.33%`;
+// (2 / 6) * 100 = 0.3333333333 = 33.33%
+
+const fourOfTwelveColumnsMaxWidthScaleable = `33.33%`;
+// (4 / 12) * 100 = 0.3333333333 = 33.33%
+
+const fourOfSixColumnsMaxWidthScaleable = `66.67%`;
+// (4 / 6) * 100 = 66.6666666667 = 66.67%
+
+const eightOfTwelveColumnsMaxScaleable = `66.67%`;
+// (8 / 12) * 100 = 66.6666666667 = 66.67%
+
 const StoryPromoWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-column-gap: ${GEL_GUTTER_BELOW_600PX};
+  @supports (display: grid) {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: ${GEL_GUTTER_BELOW_600PX};
 
-  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
-    grid-column-gap: ${GEL_GUTTER_ABOVE_600PX};
-  }
+    @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+      grid-column-gap: ${GEL_GUTTER_ABOVE_600PX};
+    }
 
-  @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
-    grid-template-columns: repeat(12, 1fr);
+    @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
+      grid-template-columns: repeat(12, 1fr);
+    }
   }
 `;
 
 const ImageGridItem = styled.div`
-  grid-column: 1 / span 2;
+  display: inline-block;
+  vertical-align: top;
+  max-width: ${twoOfSixColumnsMaxWidthScaleable};
 
   @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
-    grid-column: 1 / span 4;
+    max-width: ${fourOfTwelveColumnsMaxWidthScaleable};
+  }
+
+  @supports (display: grid) {
+    display: block;
+    max-width: initial;
+    grid-column: 1 / span 2;
+
+    @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
+      grid-column: 1 / span 4;
+    }
   }
 `;
 
 const TextGridItem = styled.div`
-  grid-column: 3 / span 4;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 ${GEL_SPACING};
+  max-width: ${fourOfSixColumnsMaxWidthScaleable};
+
+  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    padding: 0 ${GEL_SPACING_DBL};
+  }
 
   @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
-    grid-column: 5 / span 8;
+    max-width: ${eightOfTwelveColumnsMaxScaleable};
+  }
+
+  @supports (display: grid) {
+    display: block;
+    max-width: initial;
+    padding: initial;
+    grid-column: 3 / span 4;
+
+    @media (min-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN}) {
+      grid-column: 5 / span 8;
+    }
   }
 `;
 

diff --git a/packages/components/psammead-story-promo/src/index.stories.jsx b/packages/components/psammead-story-promo/src/index.stories.jsx
@@ -12,7 +12,7 @@ const ImageComponent = (
     alt={text('Image alt text', '2019-03-01T14:00+00:00')}
     src={text(
       'Image src',
-      'https://ichef.bbci.co.uk/news/660/cpsprodpb/909B/production/_106491073_gettyimages-909260196.jpg',
+      'https://ichef.bbci.co.uk/news/660/cpsprodpb/11897/production/_106613817_999_al_.jpg',
     )}
     width="640"
   />