Update Grid Stories

package.json

@@ -60,7 +60,7 @@
     "@bbc/psammead-locales": "^2.23.0",
     "@bbc/psammead-media-indicator": "^2.6.4",
     "@bbc/psammead-paragraph": "^2.2.13",
-    "@bbc/psammead-story-promo": "2.7.18",
+    "@bbc/psammead-story-promo": "2.8.0-alpha.1",
     "@bbc/psammead-storybook-helpers": "^6.0.3",
     "@bbc/psammead-styles": "^4.0.1",
     "@bbc/psammead-test-helpers": "^3.0.2",

packages/components/psammead-grid/CHANGELOG.md

@@ -3,5 +3,6 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.0.0-alpha.2 | [PR#2315](https://github.com/bbc/psammead/pull/2315) Update usage of group0 (0-239px) & fix Storybook stories. |
 | 1.0.0-alpha.1 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.0 | [PR#2213](https://github.com/bbc/psammead/pull/2213) Initial package creation - Grid export. |

packages/components/psammead-grid/README.md

@@ -14,8 +14,8 @@ Psammead Grid is a component that you can use to set out column-based layouts us
 <!-- prettier-ignore -->
 | Argument | Type | Required | Default | Example |
 | -------- | ---- | -------- | ------- | ------- |
-| columns | object | yes | N/A | { group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 } |
-| startOffset | object | no | Sets all values as 1 for each of the groups defined in `columns` | { group1: 1, group2: 1, group3: 1, group4: 2, group5: 5 } |
+| columns | object | yes | N/A | { group0: 6, group1: 6, group2: 6, group3: 6, group4: 8, group5: 20 } |
+| startOffset | object | no | Sets all values as 1 for each of the groups defined in `columns` | { group0: 1, group1: 1, group2: 1, group3: 1, group4: 2, group5: 5 } |
 | item | boolean | no | false | `item` |
 | enableGelGutters | boolean | no | false | `enableGelGutter` |
 | enableGelMargins | boolean | no | false | `enableGelMargins` |

packages/components/psammead-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "publishConfig": {
     "tag": "alpha"
   },

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

@@ -27,6 +27,30 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c1 {
     display: inline-block;
@@ -64,6 +88,30 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c4 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c4 {
     display: inline-block;
@@ -94,10 +142,26 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c5 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -132,10 +196,26 @@ exports[`Grid component should render Grid with Grid items 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c6 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -356,6 +436,30 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c1 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c1 {
     display: inline-block;
@@ -393,6 +497,30 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c5 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
   .c5 {
     display: inline-block;
@@ -423,10 +551,26 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c6 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c6 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }
@@ -461,10 +605,26 @@ exports[`Grid component should render Grid with Grid items including nested non-
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c7 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c7 {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }
+}
+
 @media (min-width:25rem) and (max-width:37.4375rem) {
   .c7 {
     display: inline-block;
-    width: NaN%;
+    width: 100%;
     vertical-align: top;
   }
 }