Merge pull request #416 from mrmeku/patch-1

Documentation for the inputs of the box component

src/components/box/box.jsx

@@ -75,40 +75,59 @@ const Box = props => {
     }, children);
 };
 Box.propTypes = {
+    /** Defines how the browser distributes space between and around content items vertically within this box. */
     alignContent: PropTypes.oneOf([
         'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'
     ]),
+    /** Defines how the browser distributes space between and around flex items horizontally within this box. */
     alignItems: PropTypes.oneOf([
         'flex-start', 'flex-end', 'center', 'baseline', 'stretch'
     ]),
+    /** Specifies how this box should be aligned inside of its container (requires the container to be flexable). */
     alignSelf: PropTypes.oneOf([
         'auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'
     ]),
+    /** Specifies the initial length of this box */
     basis: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.oneOf(['auto'])
     ]),
+    /** Specifies the the HTML nodes which will be child elements of this box. */
     children: PropTypes.node,
+    /** Specifies the class name that will be set on this box */
     className: PropTypes.string,
+    /**
+     * A callback function whose first parameter is the underlying dom elements.
+     * This call back will be executed immediately after the component is mounted or unmounted
+     */
     componentRef: PropTypes.func,
+    /** https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
     direction: PropTypes.oneOf([
         'row', 'row-reverse', 'column', 'column-reverse'
     ]),
+    /** Specifies the type of HTML element of this box. Defaults to div. */
     element: PropTypes.string,
+    /** Specifies the flex grow factor of a flex item. */
     grow: PropTypes.number,
+    /** The height in pixels (if specified as a number) or a string if different units are required. */
     height: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string
     ]),
+    /** https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
     justifyContent: PropTypes.oneOf([
         'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
     ]),
+    /** Specifies the flex shrink factor of a flex item. */
     shrink: PropTypes.number,
+    /** An object whose keys are css property names and whose values correspond the the css property. */
     style: stylePropType,
+    /** The width in pixels (if specified as a number) or a string if different units are required. */
     width: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string
     ]),
+    /** How whitespace should wrap within this block. */
     wrap: PropTypes.oneOf([
         'nowrap', 'wrap', 'wrap-reverse'
     ])