Merge pull request #1179 from cozy/feat/Grid

feat: Add Grid system

docs/styleguide.config.js

@@ -112,7 +112,8 @@ module.exports = {
         '../react/MuiCozyTheme/Menus',
         '../react/MuiCozyTheme/List',
         '../react/MuiCozyTheme/RaisedList',
-        '../react/MuiCozyTheme/ExpansionPanel'
+        '../react/MuiCozyTheme/ExpansionPanel',
+        '../react/MuiCozyTheme/Grid'
       ]
     }
   ],

react/MuiCozyTheme/Grid/Readme.md

@@ -0,0 +1,71 @@
+# Grid
+
+Displays a Grid of items
+
+### Default usage
+
+```
+const MuiCozyTheme = require('..').default;
+const Grid = require('.').default;
+const Card = require('../../Card').default;
+
+<MuiCozyTheme>
+    <Grid container spacing={24}>
+        <Grid item xs={12}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+      </Grid>
+</MuiCozyTheme>
+```
+
+### Responsive usage
+
+```
+const MuiCozyTheme = require('..').default;
+const Grid = require('.').default;
+const Card = require('../../Card').default;
+
+<MuiCozyTheme>
+    <Grid container spacing={8}>
+        <Grid item xs={12}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+       <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+        <Grid item xs={3} sm={2}>
+           <Card>Homer Simpson</Card>
+        </Grid>
+      </Grid>
+</MuiCozyTheme>
+```

react/MuiCozyTheme/Grid/index.js

@@ -0,0 +1,3 @@
+import Grid from '@material-ui/core/Grid'
+
+export default Grid

react/MuiCozyTheme/theme.js

@@ -173,6 +173,25 @@ export const theme = createMuiTheme({
         paddingRight: 24
       }
     }
+  },
+  breakpoints: {
+    // Define custom breakpoint values.
+    // These will apply to Material-UI components that use responsive
+    // breakpoints, such as `Grid` and `Hidden`. You can also use the
+    // theme breakpoint functions `up`, `down`, and `between` to create
+    // media queries for these breakpoints
+    // xs = all
+    // sm = tiny
+    // md = small
+    // lg = medium
+    // xl = large
+    values: {
+      xs: 0,
+      sm: 480,
+      md: 768,
+      lg: 1023,
+      xl: 1200
+    }
   }
 })
 

react/__snapshots__/examples.spec.jsx.snap

@@ -3295,6 +3295,10 @@ exports[`MuiCozyTheme/ExpansionPanel should render examples: MuiCozyTheme/Expans
 
 exports[`MuiCozyTheme/ExpansionPanel should render examples: MuiCozyTheme/ExpansionPanel 2`] = `"<div></div>"`;
 
+exports[`MuiCozyTheme/Grid should render examples: MuiCozyTheme/Grid 1`] = `"<div></div>"`;
+
+exports[`MuiCozyTheme/Grid should render examples: MuiCozyTheme/Grid 2`] = `"<div></div>"`;
+
 exports[`MuiCozyTheme/List should render examples: MuiCozyTheme/List 1`] = `"<div></div>"`;
 
 exports[`MuiCozyTheme/List should render examples: MuiCozyTheme/List 2`] = `"<div></div>"`;

react/examples.spec.jsx

@@ -41,6 +41,7 @@ testComponent('MuiCozyTheme/Buttons')
 testComponent('MuiCozyTheme/ExpansionPanel')
 testComponent('MuiCozyTheme/List')
 testComponent('MuiCozyTheme/Menus')
+testComponent('MuiCozyTheme/Grid')
 testComponent('Radio')
 testComponent('SelectBox')
 testComponent('Sidebar')