Merge pull request #1202 from cozy/fear/labs/GridItem

feat(GridItem): Expose experimental GridItem

docs/styleguide.config.js

@@ -116,6 +116,10 @@ module.exports = {
         '../react/MuiCozyTheme/ExpansionPanel',
         '../react/MuiCozyTheme/Grid'
       ]
+    },
+    {
+      name: 'Labs',
+      components: () => ['../react/Labs/GridItem']
     }
   ],
   components: '../react/**/*.jsx',

react/Labs/GridItem/Readme.md

@@ -0,0 +1,28 @@
+## Grid Item
+
+GridItem is currently experimental since its behavior is
+not well defined yet.
+
+```
+const MuiCozyTheme = require('../../MuiCozyTheme').default;
+const Grid = require('../../MuiCozyTheme/Grid').default;
+const GridItem = require('.').default;
+const Card = require('../../Card').default;
+
+<MuiCozyTheme>
+    <Grid container spacing={24}>
+        <GridItem>
+            <Card className="u-ellipsis">Homer Simpson</Card>
+        </GridItem>
+        <GridItem>
+             <Card className="u-ellipsis">Homer Simpson</Card>
+        </GridItem>
+        <GridItem>
+             <Card className="u-ellipsis">Homer Simpson</Card>
+        </GridItem>
+        <GridItem>
+             <Card className="u-ellipsis">Homer Simpson</Card>
+        </GridItem>
+    </Grid>
+</MuiCozyTheme>
+```

react/Labs/GridItem/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import Grid from '../../MuiCozyTheme/Grid'
+import styles from './styles.styl'
+
+const GridItem = ({ onClick, children }) => {
+  return (
+    <Grid
+      item
+      xs={3}
+      sm={2}
+      onClick={() => onClick && onClick()}
+      className={cx(styles['gridItem-container'])}
+    >
+      {children}
+    </Grid>
+  )
+}
+GridItem.propTypes = {
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired
+}
+export default GridItem

react/Labs/GridItem/styles.styl

@@ -0,0 +1,8 @@
+.gridItem-container {
+    text-align center
+    box-sizing border-box
+    border-radius 4px
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis 
+}

react/Labs/Readme.md

@@ -0,0 +1,4 @@
+# Labs
+
+In this directory, components you will find are experimental and
+subject to API change without creating any breaking change.

react/__snapshots__/examples.spec.jsx.snap

@@ -3307,6 +3307,8 @@ exports[`Label should render examples: Label 3`] = `
 </div>"
 `;
 
+exports[`Labs/GridItem should render examples: Labs/GridItem 1`] = `"<div></div>"`;
+
 exports[`ListItemText should render examples: ListItemText 1`] = `
 "<div>
   <div class=\\"styles__c-list-text___3kc3E\\">

react/examples.spec.jsx

@@ -51,3 +51,4 @@ testComponent('Tabs')
 testComponent('Text')
 testComponent('Textarea')
 testComponent('Toggle')
+testComponent('Labs/GridItem')