Merge pull request #34 from TechnologyAdvice/feature/container-classe…

…s-props

Classes & Props: Container/Grid/Row/Column

src/components/Container/Container.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
  * </Container>
  */
 
-class Container extends Component {
+export default class Container extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
@@ -21,16 +21,14 @@ class Container extends Component {
   render() {
     let classes = classNames(
       'sd-container',
-      this.props.className,
       'ui',
-      'container'
+      this.props.className,
+      'container',
     );
     return (
-      <div className={classes}>
+      <div {...this.props} className={classes}>
         {this.props.children}
       </div>
     );
   }
 }
-
-export default Container;

src/components/Grid/Column.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, {Component, PropTypes} from 'react';
 import numberToWord from 'src/utils/numberToWord';
 
-class Column extends Component {
+export default class Column extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
@@ -13,15 +13,14 @@ class Column extends Component {
   render() {
     let classes = classNames(
       'sd-column',
+      this.props.className,
       this.props.width && numberToWord(this.props.width) + ' wide',
       'column'
     );
     return (
-      <div className={classes} style={this.props.style}>
+      <div {...this.props} className={classes}>
         {this.props.children}
       </div>
     );
   }
 }
-
-export default Column;

src/components/Grid/Grid.js

@@ -1,32 +1,23 @@
 import classNames from 'classnames';
 import React, {Component, PropTypes} from 'react';
 
-class Grid extends Component {
+export default class Grid extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    divided: PropTypes.bool,
-    padded: PropTypes.bool,
-    stretched: PropTypes.bool,
-    style: PropTypes.object,
   };
 
   render() {
     let classes = classNames(
       'sd-grid',
-      this.props.className,
       'ui',
-      {padded: this.props.padded},
-      {'equal width': this.props.stretched},
-      {divided: this.props.divided},
+      this.props.className,
       'grid',
     );
     return (
-      <div className={classes} style={this.props.style}>
+      <div {...this.props} className={classes}>
         {this.props.children}
       </div>
     );
   }
 }
-
-export default Grid;

src/components/Grid/Row.js

@@ -1,22 +1,22 @@
 import classNames from 'classnames';
 import React, {Component, PropTypes} from 'react';
 
-class Row extends Component {
+export default class Row extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    stretched: PropTypes.bool,
-    style: PropTypes.object,
   };
 
   render() {
-    let classes = classNames('sd-row', this.props.className, {stretched: this.props.stretched}, 'row');
+    let classes = classNames(
+      'sd-row',
+      this.props.className,
+      'row'
+    );
     return (
-      <div className={classes} style={this.props.style}>
+      <div {...this.props} className={classes}>
         {this.props.children}
       </div>
     );
   }
 }
-
-export default Row;