Update grid props

packages/components/psammead-grid/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.1.1 | [PR#2893](https://github.com/bbc/psammead/pull/2893) Add `parentColumns` to prop list in README |
 | 1.1.0 | [PR#2876](https://github.com/bbc/psammead/pull/2876) Remove alpha tag |
 | 1.1.0-alpha.2 | [PR#2815](https://github.com/bbc/psammead/pull/2815) Remove display:inline on outer grids |
 | 1.1.0-alpha.1 | [PR#2796](https://github.com/bbc/psammead/pull/2796) Fix padding on outer grid  |

packages/components/psammead-grid/README.md

@@ -19,6 +19,7 @@ Psammead Grid is a component that you can use to set out column-based layouts us
 | item | boolean | no | false | `item` |
 | enableGelGutters | boolean | no | false | `enableGelGutter` |
 | margins | object | no | `{ group0: false, group1: false, group2: false, group3: false, group4: false, group5: false }` | `{ group0: true, group1: true, group2: true, group3: true }` |
+| parentColumns | object | no | null | `columns: { group0: 6, group1: 6, group2: 3, group3: 3, group4: 4, group5: 4}` |
 
 - When should I use the `columns` prop?
   - This should always be defined.
@@ -41,7 +42,7 @@ Psammead Grid is a component that you can use to set out column-based layouts us
       group2: 1,
       group3: 1,
       group4: 1,
-      group5: 1
+      group5: 1,
     }}
   >
     This spans 1 out of 6 columns for all widths
@@ -54,7 +55,7 @@ Psammead Grid is a component that you can use to set out column-based layouts us
       group2: 5,
       group3: 5,
       group4: 5,
-      group5: 5
+      group5: 5,
     }}
   >
     This spans 5 out of 6 columns for all widths
@@ -67,6 +68,8 @@ Psammead Grid is a component that you can use to set out column-based layouts us
   - If you don't pass it in, the offset value defaults to 1, the start of the grid.
 - Why is there no vertical spacing on the grid?
   - The Grid implementation only has gutters/margins for columns, [according to the GEL specification](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes). This is to allow flexibility for a variety of spacing. To add vertical spacing, you should add padding/margin/top/bottom to the contents.
+- When should I use the `parentColumns` prop?
+  - `parentColumns` is an object structured just like the `columns` prop. It is intended to be passed into a child `<Grid>` element because if your code is rendering the child grid before the parent grid, the child grid will not recieve the parent's grid column props therefore you will have to explicitly pass in the parent's columns into the child grid.
 
 ## Usage
 
@@ -79,7 +82,7 @@ When we refer to `group3` in this component, we're referring to the breakpoint w
 Here is an example of a `<Grid>` that has 8 columns for `group4` (from 1008px to 1279px). It has four child `<Grid item>` elements, one which spans 6/8 columns and three others which spans 2/8 columns within this breakpoint.
 
 ```jsx
-import Grid from "@bbc/psammead-grid";
+import Grid from '@bbc/psammead-grid';
 
 const MyComponent = () => (
   <Grid
@@ -89,7 +92,7 @@ const MyComponent = () => (
       group2: 8,
       group3: 8,
       group4: 8,
-      group5: 8
+      group5: 8,
     }}
   >
     <Grid
@@ -100,7 +103,7 @@ const MyComponent = () => (
         group2: 6,
         group3: 6,
         group4: 6,
-        group5: 6
+        group5: 6,
       }}
     >
       <p>Item 1 - Paragraph that spans 6 out of 8 columns through group4</p>
@@ -113,7 +116,7 @@ const MyComponent = () => (
         group2: 2,
         group3: 2,
         group4: 2,
-        group5: 2
+        group5: 2,
       }}
     >
       <p>Item 2 - Paragraph that spans 2 out of 8 columns through group4</p>
@@ -126,7 +129,7 @@ const MyComponent = () => (
         group2: 2,
         group3: 2,
         group4: 2,
-        group5: 2
+        group5: 2,
       }}
     >
       <p>Item 3 - Paragraph that spans 2 out of 8 columns through group4</p>
@@ -139,7 +142,7 @@ const MyComponent = () => (
         group2: 2,
         group3: 2,
         group4: 2,
-        group5: 2
+        group5: 2,
       }}
     >
       <p>Item 4 - Paragraph that spans 2 out of 8 columns through group4</p>
@@ -157,7 +160,7 @@ Using `enableGelGutters` on the `Grid` element. Note: this should _not_ be added
 Usage of `margins` can be on either `<Grid>` or `<Grid item>`.
 
 ```jsx
-import Grid from "@bbc/psammead-grid";
+import Grid from '@bbc/psammead-grid';
 
 const MyComponent = () => (
   <Grid
@@ -168,7 +171,7 @@ const MyComponent = () => (
       group2: 4,
       group3: 6,
       group4: 8,
-      group5: 12
+      group5: 12,
     }}
     margins={{
       group0: true,
@@ -187,7 +190,7 @@ const MyComponent = () => (
         group2: 4,
         group3: 6,
         group4: 6,
-        group5: 12
+        group5: 12,
       }}
     >
       <p>
@@ -202,7 +205,7 @@ const MyComponent = () => (
         group2: 4,
         group3: 6,
         group4: 2,
-        group5: 12
+        group5: 12,
       }}
     >
       <p>
@@ -226,7 +229,7 @@ Note that here, any time you use `<Grid>` that generates a new grid. The total n
 Here we have no margins on the Grid item around the Image, but there is on the Paragraph items.
 
 ```jsx
-import Grid from "@bbc/psammead-grid";
+import Grid from '@bbc/psammead-grid';
 
 const MyComponent = () => (
   <Grid
@@ -236,7 +239,7 @@ const MyComponent = () => (
       group2: 6,
       group3: 6,
       group4: 6,
-      group5: 6
+      group5: 6,
     }}
   >
     <Grid
@@ -246,7 +249,7 @@ const MyComponent = () => (
         group2: 6,
         group3: 6,
         group4: 6,
-        group5: 6
+        group5: 6,
       }}
     >
       <Grid
@@ -257,7 +260,7 @@ const MyComponent = () => (
           group2: 6,
           group3: 3,
           group4: 3,
-          group5: 3
+          group5: 3,
         }}
       >
         <ExampleImage />
@@ -270,7 +273,7 @@ const MyComponent = () => (
           group2: 6,
           group3: 3,
           group4: 3,
-          group5: 3
+          group5: 3,
         }}
       >
         <ExampleParagraph />
@@ -284,7 +287,7 @@ const MyComponent = () => (
         group2: 2,
         group3: 2,
         group4: 2,
-        group5: 2
+        group5: 2,
       }}
     >
       <ExampleImage />
@@ -297,7 +300,7 @@ const MyComponent = () => (
         group2: 4,
         group3: 4,
         group4: 4,
-        group5: 4
+        group5: 4,
       }}
     >
       <ExampleParagraph />

packages/components/psammead-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-grid",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Grid component",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-grid/src/index.jsx

@@ -334,6 +334,13 @@ Grid.propTypes = {
     group5: number,
   }),
   item: bool,
+  parentColumns: shape({
+    group1: number,
+    group2: number,
+    group3: number,
+    group4: number,
+    group5: number,
+  }),
 };
 
 Grid.defaultProps = {
@@ -348,6 +355,7 @@ Grid.defaultProps = {
   },
   startOffset: {},
   item: false,
+  parentColumns: null,
 };
 
 export default Grid;