expose module settings as props, add example, update guidelines

Author: levithomason

docs/app/Component Guidelines.md

@@ -17,39 +17,38 @@ They ensure consistency and optimal development experience for Stardust users.
 
 ### Modules
 
-Semantic UI [Modules](http://semantic-ui.com/introduction/glossary.html) are components that include a jQuery plugin.
+Semantic UI [Modules](http://semantic-ui.com/introduction/glossary.html) are components that define appearance and behavior.
 These are things that have state, like a [Dropdown](http://semantic-ui.com/modules/dropdown.html).
+They usually require a Semantic UI jQuery plugin.
 
-**Element**
-Stardust components expose the jQuery element on the component as `element`:
+All the appropriate lifecycle work is handled.  You can just use the module.
+
+**Settings**
+Semantic UI's jQuery plugin settings are exposed as props:
 
 ```jsx
-let checkbox = <Checkbox />;
-checkbox.element; // the jQuery element
+<Checkbox onChange={this.handleChange} />; // the Semantic UI change callback
 ```
+>Settings are applied on componentDidMount.
 
 **Plugin**
-The Semantic UI jQuery plugin can be accessed using `element`:
-
-```jsx
-let checkbox = <Checkbox />;
-checkbox.element.checkbox(); // the Semantic UI Checkbox plugin
-```
-You can also trigger behaviors with the plugin:
+Stardust exposes the Semantic UI jQuery plugin as `plugin`. Use it to trigger behaviors:
 
 ```jsx
-let checkbox = <Checkbox />;
-checkbox.element.checkbox('toggle'); // toggles the checkbox
+<Checkbox ref='checkbox' />;
+// ...
+this.refs.checkbox.plugin('toggle'); // toggles the checkbox
+this.refs.checkbox.plugin('is checked'); // get the state
 ```
 
-**Settings**
-Module jQuery plugins can be configured via the `settings` prop:
+**Element**
+Stardust components expose the jQuery element as `element`:
 
 ```jsx
-let settings = {allowAdditions: true};
-let dropdown = <Dropdown settings={settings}/>;
+<Checkbox ref='checkbox' ref='checkbox' />;
+// then
+this.refs.checkbox.element; // the jQuery element
 ```
->Settings are applied on componentDidMount.
 
 ## Classes
 

docs/app/Examples/modules/Checkbox/States/CheckboxRemoteControlExample.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import {Button, Checkbox} from 'stardust';
+
+export default class CheckboxRemoteControlExample extends Component {
+  state = {checked: false};
+
+  toggle = () => {
+    this.refs.checkbox.plugin('toggle');
+  };
+
+  handleChange = () => {
+    this.setState({
+      checked: this.refs.checkbox.plugin('is checked')
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.toggle}>Toggle it</Button>
+        <Checkbox label='Check this box' onChange={this.handleChange} ref='checkbox' />
+        <p>It is {!this.state.checked && 'not '}checked.</p>
+      </div>
+    );
+  }
+}

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

@@ -12,7 +12,7 @@ export default class CheckboxStatesExamples extends Component {
           description='A checkbox can come pre-checked'
           examplePath='modules/Checkbox/States/Checked'
         >
-          <Message className='info'>
+          <Message>
             Use
             &nbsp;
             <a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
@@ -32,6 +32,11 @@ export default class CheckboxStatesExamples extends Component {
           description='Make the checkbox unable to be edited by the user'
           examplePath='modules/Checkbox/States/ReadOnly'
         />
+        <ComponentExample
+          title='Remote Control'
+          description='You can trigger events remotely.'
+          examplePath='modules/Checkbox/States/CheckboxRemoteControlExample'
+        />
       </ExampleSection>
     );
   }

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

@@ -1,22 +1,10 @@
 import React, {Component} from 'react';
-import {Button, Checkbox} from 'stardust';
+import {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 (
-      <div>
-        <Button onClick={this.toggle}>Toggle it!</Button>
-        <Checkbox label='Make my profile visible' ref='checkbox' onChange={this.handleChange}/>
-      </div>
+      <Checkbox label='Make my profile visible' />
     );
   }
 }

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

@@ -15,7 +15,7 @@ export default class CheckboxVariationsExamples extends Component {
           <Message>
             The&nbsp;
             <a href='http://semantic-ui.com/modules/checkbox.html#fitted' target='_blank'>
-              fitted
+              <code>fitted</code>
             </a>
             &nbsp;class is automatically applied if there is no <code>label</code> prop.
           </Message>

src/modules/Checkbox/Checkbox.js

@@ -7,18 +7,41 @@ import $ from 'jquery';
 
 export default class Checkbox extends Component {
   static propTypes = {
+    beforeChecked: PropTypes.func,
+    beforeDeterminate: PropTypes.func,
+    beforeIndeterminate: PropTypes.func,
+    beforeUnchecked: PropTypes.func,
     className: PropTypes.string,
     label: PropTypes.string,
-    name: PropTypes.string,
-    settings: PropTypes.object,
+    onChange: PropTypes.func,
+    onChecked: PropTypes.func,
+    onDeterminate: PropTypes.func,
+    onDisable: PropTypes.func,
+    onEnable: PropTypes.func,
+    onIndeterminate: PropTypes.func,
+    onUnchecked: PropTypes.func,
     type: PropTypes.string,
   };
 
-  state = {checked: false};
+  static defaultProps = {
+    type: 'checkbox'
+  };
 
   componentDidMount() {
     this.element = $(this.refs.element);
-    // this.element.checkbox(this.props.settings);
+    this.element.checkbox({
+      onChange: this.props.onChange,
+      onChecked: this.props.onChecked,
+      onIndeterminate: this.props.onIndeterminate,
+      onDeterminate: this.props.onDeterminate,
+      onUnchecked: this.props.onUnchecked,
+      beforeChecked: this.props.beforeChecked,
+      beforeIndeterminate: this.props.beforeIndeterminate,
+      beforeDeterminate: this.props.beforeDeterminate,
+      beforeUnchecked: this.props.beforeUnchecked,
+      onEnable: this.props.onEnable,
+      onDisable: this.props.onDisable,
+    });
   }
 
   componentWillUnmount() {
@@ -32,16 +55,13 @@ export default class Checkbox extends Component {
   };
 
   plugin() {
-    this.element.checkbox(...arguments);
+    return this.element.checkbox(...arguments);
   }
 
   render() {
     let type = this.props.type;
-    if (!type) {
-      type = 'checkbox';
-      if (_.includes(this.props.className, 'radio')) {
-        type = 'radio';
-      }
+    if (_.includes(this.props.className, 'radio')) {
+      type = 'radio';
     }
     const classes = classNames(
       'sd-checkbox',

test/specs/Conformance-test.js

@@ -126,21 +126,6 @@ describe('Conformance', () => {
                 .indexOf(sdClass).should.equal(0);
             });
           }
-
-          if (META.isModule(SDComponent) && !META.isChild(SDComponent)) {
-            describe('settings', () => {
-              it('is defined in propTypes', () => {
-                SDComponent.propTypes.settings.should.be.a('function');
-              });
-              it('is not spread', () => {
-                const props = {settings: {}};
-                render(<SDComponent {...props} />)
-                  .children()
-                  .some(element => _.has(element.props, 'settings'))
-                  .should.equal(false);
-              });
-            });
-          }
         });
       });
     });