Update react-foundation to latest version, change docs to use Grid/Ce…

…ll instead of Row/Column Fixes digiaonline/react-foundation#70, related to digiaonline/react-foundation#50
digiaonline · May 17, 2019 · d8ba6da · d8ba6da
1 parent 6bc1439
commit d8ba6da
Show file tree

Hide file tree

Showing 32 changed files with 317 additions and 300 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "raw-loader": "^0.5.1",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
-    "react-foundation": "^0.6.0",
+    "react-foundation": "^0.9.6",
     "react-hot-loader": "^1.3.0",
     "react-redux": "^4.0.6",
     "react-router": "^2.0.0-rc4",

diff --git a/src/components/docs/badge.js b/src/components/docs/badge.js
@@ -2,16 +2,16 @@ import React from 'react';
 import Playground from 'component-playground';
 import {
   Colors,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Icon,
   Badge,
 } from 'react-foundation';
 
 export const BadgeDocs = () => (
   <section className="badge-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Badge</h2>
         <div>
           <h3>Basics</h3>
@@ -31,8 +31,8 @@ export const BadgeDocs = () => (
                       scope={{ React, Colors, Badge, Icon }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/breadcrumbs.js b/src/components/docs/breadcrumbs.js
@@ -1,23 +1,23 @@
 import React from 'react';
 import Playground from 'component-playground';
 import {
-  Row,
-  Column,
   Inline,
+  Grid,
+  Cell,
   Breadcrumbs,
   BreadcrumbItem,
 } from 'react-foundation';
 
 export const BreadcrumbsDocs = () => (
   <section className="breadcrumbs-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Breadcrumbs</h2>
         <Playground codeText={require('raw!../examples/breadcrumbs/basics')}
                     scope={{ React, Inline, Breadcrumbs, BreadcrumbItem }}
                     theme="eiffel"/>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/button-group.js b/src/components/docs/button-group.js
@@ -4,16 +4,16 @@ import {
   Breakpoints,
   Colors,
   Sizes,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Link,
   ButtonGroup,
 } from 'react-foundation';
 
 export const ButtonGroupDocs = () => (
   <section className="button-group-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Button Group</h2>
         <div>
           <h3>Basics</h3>
@@ -51,8 +51,8 @@ export const ButtonGroupDocs = () => (
                       scope={{ React, Breakpoints, ButtonGroup, Link }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/button.js b/src/components/docs/button.js
@@ -3,16 +3,16 @@ import Playground from 'component-playground';
 import {
   Colors,
   Sizes,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Link,
   Button,
 } from 'react-foundation';
 
 export const ButtonDocs = () => (
   <section className="button-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Button</h2>
         <div>
           <h3>Basics</h3>
@@ -44,8 +44,8 @@ export const ButtonDocs = () => (
                       scope={{ React, Sizes, Button }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/callout.js b/src/components/docs/callout.js
@@ -4,15 +4,15 @@ import Playground from 'component-playground';
 import {
   Colors,
   Sizes,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Callout,
 } from 'react-foundation';
 
 export const CalloutDocs = () => (
   <section className="callout-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Callout</h2>
         <div>
           <h3>Basics</h3>
@@ -32,8 +32,8 @@ export const CalloutDocs = () => (
                       scope={{ React, Sizes, Callout }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/flex-video.js b/src/components/docs/flex-video.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import Playground from 'component-playground';
 import {
-  Row,
-  Column,
+  Grid,
+  Cell,
   FlexVideo,
 } from 'react-foundation';
 
 export const FlexVideoDocs = () => (
   <section className="flex-video-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Flex Video</h2>
         <Playground codeText={require('raw!../examples/flex-video/basics')}
                     scope={{ React, FlexVideo }}
                     theme="eiffel"/>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/grid.js b/src/components/docs/grid.js
@@ -3,92 +3,92 @@ import Playground from 'component-playground';
 import {
   Breakpoints,
   Colors,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Block,
   Callout,
   Thumbnail,
 } from 'react-foundation';
 
 export const GridDocs = () => (
   <section className="grid-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Grid</h2>
         <div>
           <h3>Basics</h3>
           <Playground codeText={require('raw!../examples/grid/basics')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Small Grids</h3>
           <Playground codeText={require('raw!../examples/grid/small')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Medium Grids</h3>
           <Playground codeText={require('raw!../examples/grid/medium')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Combined Column/Row</h3>
           <Playground codeText={require('raw!../examples/grid/column-row')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Fluid Row</h3>
           <Playground codeText={require('raw!../examples/grid/fluid-row')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Nesting</h3>
           <Playground codeText={require('raw!../examples/grid/nested')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Offsets</h3>
           <Playground codeText={require('raw!../examples/grid/offset')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Incomplete Rows</h3>
           <Playground codeText={require('raw!../examples/grid/end')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Collapse/Uncollapse Rows</h3>
           <Playground codeText={require('raw!../examples/grid/collapse')}
-                      scope={{ React, Breakpoints, Colors, Row, Column, Block, Callout }}
+                      scope={{ React, Breakpoints, Colors, Grid, Cell, Block, Callout }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Centered Columns</h3>
           <Playground codeText={require('raw!../examples/grid/center')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Source Ordering</h3>
           <Playground codeText={require('raw!../examples/grid/order')}
-                      scope={{ React, Row, Column }}
+                      scope={{ React, Grid, Cell }}
                       theme="eiffel"/>
         </div>
         <div>
           <h3>Block Grids</h3>
           <Playground codeText={require('raw!../examples/grid/block')}
-                      scope={{ React, Row, Column, Thumbnail }}
+                      scope={{ React, Grid, Cell, Thumbnail }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );
 

diff --git a/src/components/docs/label.js b/src/components/docs/label.js
@@ -2,16 +2,16 @@ import React from 'react';
 import Playground from 'component-playground';
 import {
   Colors,
-  Row,
-  Column,
+  Grid,
+  Cell,
   Icon,
   Label,
 } from 'react-foundation';
 
 export const LabelDocs = () => (
   <section className="label-docs">
-    <Row>
-      <Column large={12}>
+    <Grid>
+      <Cell large={12}>
         <h2>Label</h2>
         <div>
           <h3>Basics</h3>
@@ -31,8 +31,8 @@ export const LabelDocs = () => (
                       scope={{ React, Colors, Label, Icon }}
                       theme="eiffel"/>
         </div>
-      </Column>
-    </Row>
+      </Cell>
+    </Grid>
   </section>
 );