wip, wiring plugin on checkbox

.eslintrc

@@ -1,6 +1,3 @@
 {
   "extends": "ta-webapp",
-  "env": {
-    "node": true
-  }
 }

docs/app/Component Guidelines.md

@@ -21,15 +21,15 @@ Semantic UI [Modules](http://semantic-ui.com/introduction/glossary.html) are com
 These are things that have state, like a [Dropdown](http://semantic-ui.com/modules/dropdown.html).
 
 **Element**
-Stardust components exposes the jQuery element on the component as `element`:
+Stardust components expose the jQuery element on the component as `element`:
 
 ```jsx
 let checkbox = <Checkbox />;
 checkbox.element; // the jQuery element
 ```
 
 **Plugin**
-The jQuery plugin can be called using `element`:
+The Semantic UI jQuery plugin can be accessed using `element`:
 
 ```jsx
 let checkbox = <Checkbox />;

docs/app/Examples/modules/Checkbox/Types/Checkbox.js

@@ -1,10 +1,22 @@
 import React, {Component} from 'react';
-import {Checkbox} from 'stardust';
+import {Button, Checkbox} from 'stardust';
 
 export default class CheckboxCheckboxExample extends Component {
+  toggle = () => {
+    this.refs.checkbox.plugin('toggle');
+  };
+
+  handleChange(e) {
+    console.log('it change');
+    console.log(e);
+  }
+
   render() {
     return (
-      <Checkbox label='Make my profile visible'/>
+      <div>
+        <Button onClick={this.toggle}>Toggle it!</Button>
+        <Checkbox label='Make my profile visible' ref='checkbox' onChange={this.handleChange}/>
+      </div>
     );
   }
 }

gulp/tasks/docs.js

@@ -39,7 +39,9 @@ gulp.task('generate-docs-json', cb => {
     paths.srcViews + '/**/*.js',
     '!' + paths.src + '/**/Style.js'
   ])
-    .pipe(g.plumber(err => {
+    // do not remove the function keyword
+    // we need 'this' scope here
+    .pipe(g.plumber(function(err) {
       g.util.log(err);
       this.emit('end');
     }))

src/modules/Checkbox/Checkbox.js

@@ -14,9 +14,11 @@ export default class Checkbox extends Component {
     type: PropTypes.string,
   };
 
+  state = {checked: false};
+
   componentDidMount() {
     this.element = $(this.refs.element);
-    this.element.checkbox(this.props.settings);
+    // this.element.checkbox(this.props.settings);
   }
 
   componentWillUnmount() {
@@ -29,16 +31,18 @@ export default class Checkbox extends Component {
     type: META.type.module,
   };
 
+  plugin() {
+    this.element.checkbox(...arguments);
+  }
+
   render() {
     let type = this.props.type;
-
     if (!type) {
       type = 'checkbox';
       if (_.includes(this.props.className, 'radio')) {
         type = 'radio';
       }
     }
-
     const classes = classNames(
       'sd-checkbox',
       'ui',
@@ -48,9 +52,7 @@ export default class Checkbox extends Component {
       {fitted: !this.props.label},
       'checkbox'
     );
-
     const props = getUnhandledProps(this);
-
     return (
       <div className={classes} ref='element'>
         <input {...props} type={type} />