Demonstrate/test nested grids

andrew-codes · Dec 3, 2018 · abc5b95 · abc5b95
1 parent 298d9c1
commit abc5b95
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/components/grid/docs/Grid.mdx b/components/grid/docs/Grid.mdx
@@ -95,6 +95,23 @@ Using a 12-column grid layout, the `Grid` provides both visual consistency betwe
   </Grid>
 </Playground>
 
+## Nesting Grids
+
+<Playground>
+  <Grid data-test="outer-grid">
+    <GridItem xs={2}>x2</GridItem>
+    <GridItem xs={4}>x4</GridItem>
+    <GridItem xs={6}>
+      <Grid data-test="nested-grid">
+        <GridItem xs={2} data-test="x2">x2</GridItem>
+        <GridItem xs={4} data-test="x4">x4</GridItem>
+        <GridItem xs={6} data-test="x6">x6</GridItem>
+      </Grid>
+    </GridItem>
+  </Grid>
+
+</Playground>
+
 ## Grid API
 
 <PropsTable of={Grid} />

diff --git a/cypress/integration/components/Grid.spec.js b/cypress/integration/components/Grid.spec.js
@@ -67,4 +67,17 @@ context('@andrew-codes/grid', () => {
       'column-reverse',
     );
   });
+
+  it('grids can be nested', () => {
+    cy.get('[data-test="nested-grid"]').as('nestedGrid');
+    cy.get('@nestedGrid')
+      .find('[data-test="x2"]')
+      .should('have.css', 'width', '63px');
+    cy.get('@nestedGrid')
+      .find('[data-test="x4"]')
+      .should('have.css', 'width', '126px');
+    cy.get('@nestedGrid')
+      .find('[data-test="x6"]')
+      .should('have.css', 'width', '190px');
+  });
 });