Merge pull request #32 from TechnologyAdvice/feature/checkbox-classes

Classes & Props: Checkbox
Semantic-Org · Oct 8, 2015 · b14c41d · b14c41d
2 parents 7969950 + 8f2088b
commit b14c41d
Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {Component, PropTypes} from 'react';
 import radium from 'radium';
 import classNames from 'classnames';
@@ -19,8 +20,9 @@ import $ from 'jquery';
  * <Checkbox type='toggle' />
  */
 @radium
-class Checkbox extends Component {
+export default class Checkbox extends Component {
   static propTypes = {
+    className: PropTypes.string,
     defaultChecked: PropTypes.bool,
     label: PropTypes.string,
     name: PropTypes.string,
@@ -29,6 +31,11 @@ class Checkbox extends Component {
     type: PropTypes.string,
   };
 
+  static defaultProps = {
+    name: 'checkbox',
+    type: 'checkbox',
+  };
+
   componentDidMount() {
     this.container = $(React.findDOMNode(this.refs.container));
     this.checkbox = $(React.findDOMNode(this.refs.checkbox));
@@ -45,16 +52,20 @@ class Checkbox extends Component {
   }
 
   render() {
-    let name = this.props.name || 'checkbox';
-    let hasLabel = !!this.props.label;
-    let classes = classNames('sd-checkbox', 'ui', {fitted: !hasLabel}, this.props.type, 'checkbox');
+    let classes = classNames(
+      'sd-checkbox',
+      'ui',
+      this.props.className,
+      {fitted: !this.props.label},
+      'checkbox'
+    );
+    let checkboxProps = _.clone(this.props);
+    delete checkboxProps.className;
     return (
-      <div className={classes} style={this.props.style} ref='container'>
-        <input defaultChecked={this.props.defaultChecked} type='checkbox' name={name} ref='checkbox' />
+      <div className={classes} ref='container'>
+        <input {...checkboxProps} ref='checkbox' />
         <label>{this.props.label}</label>
       </div>
     );
   }
 }
-
-export default Checkbox;
diff --git a/test/src/components/Checkbox-test.js b/test/src/components/Checkbox-test.js
@@ -2,17 +2,18 @@ import React from 'react';
 import Checkbox from '../../../src/components/Checkbox/Checkbox';
 
 describe('Checkbox', () => {
-  it('is checked by default', () => {
+  it('can be checked by default', () => {
     let renderedCheckbox = render(<Checkbox defaultChecked={true} name='firstName' />).first();
     let isChecked = renderedCheckbox.refs.checkbox.state.initialChecked;
     renderedCheckbox.props.defaultChecked.should.equal(true);
     isChecked.should.equal(true);
   });
   it('should have a semantic ui plugin to handle the check action', () => {
-    let renderedCheckbox = render(<Checkbox name='firstName' label='Include First' />).first();
-    renderedCheckbox.container.checkbox.called.should.equal(true);
+    render(<Checkbox name='firstName' label='Include First' />)
+      .first()
+      .container.checkbox.called.should.equal(true);
   });
   it('should have a fitted class if no label is given', () => {
-    render(<Checkbox name='firstName' />).findClass('sd-checkbox').props.className.should.contain('fitted');
+    render(<Checkbox name='firstName' />).findClass('fitted');
   });
 });