Checkbox plugin

.eslintrc

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

docs/app/Component Guidelines.md

@@ -3,6 +3,8 @@
 Every component in Stardust must conform to these guidelines.
 They ensure consistency and optimal development experience for Stardust users.
 
+1. Semantic UI
+  - [Modules](#Modules)
 1. [Classes](#Classes)
   - [Extend React.Component](#Extend React.Component)
   - [Identical class and component names](#Identical class and component names)
@@ -11,6 +13,43 @@ They ensure consistency and optimal development experience for Stardust users.
 1. [Props](#Props)
   - [className](#className)
 
+## Semantic UI
+
+### Modules
+
+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.
+
+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
+<Checkbox onChange={this.handleChange} />; // the Semantic UI change callback
+```
+>Settings are applied on componentDidMount.
+
+**Plugin**
+Stardust exposes the Semantic UI jQuery plugin as `plugin`. Use it to trigger behaviors:
+
+```jsx
+<Checkbox ref='checkbox' />;
+// ...
+this.refs.checkbox.plugin('toggle'); // toggles the checkbox
+this.refs.checkbox.plugin('is checked'); // get the state
+```
+
+**Element**
+Stardust components expose the jQuery element as `element`:
+
+```jsx
+<Checkbox ref='checkbox' ref='checkbox' />;
+// then
+this.refs.checkbox.element; // the jQuery element
+```
+
 ## Classes
 
 ### Extend React.Component
@@ -137,6 +176,11 @@ Stardust components construct the `className` prop in this order.
 1. `this.props.className`
 1. `<component>` (Semantic UI class)
 
+Where it makes sense, some optional classes are automatically applied.
+For instance, the [`fitted`](http://semantic-ui.com/modules/checkbox.html#fitted)
+class on checkboxes with no labels (as prescribed by the checkbox docs).
+All magic is noted in the documentation examples.
+
 #### Inherits `props.className` after `sd-<component>`
 
 **Always**

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -9,6 +9,7 @@ import exampleContext from 'docs/app/utils/ExampleContext';
  */
 export default class ComponentExample extends Component {
   static propTypes = {
+    children: PropTypes.node,
     description: PropTypes.string,
     examplePath: PropTypes.string.isRequired,
     title: PropTypes.string,
@@ -17,11 +18,21 @@ export default class ComponentExample extends Component {
   state = {showCode: false};
   fileContents = require(`!raw!docs/app/Examples/${this.props.examplePath}`);
   component = exampleContext(`./${this.props.examplePath}.js`);
+  // 'elements/Button/Types/Button' => #Button-Types-Button
+  anchor = this.props.examplePath.split('/').slice(1).join('-');
 
   toggleShowCode = () => {
     this.setState({showCode: !this.state.showCode});
   };
 
+  handleMouseEnter = () => {
+    this.setState({showLink: true});
+  };
+
+  handleMouseLeave = () => {
+    this.setState({showLink: false});
+  };
+
   render() {
     const code = (
       <Column>
@@ -31,13 +42,28 @@ export default class ComponentExample extends Component {
       </Column>
     );
 
+    const linkIconStyle = {
+      display: this.state.showLink ? 'inline-block' : 'none',
+      marginLeft: '0.25em',
+    };
+
+    const children = <Column>{this.props.children}</Column>;
+
     return (
-      <Grid className='one column' style={{marginBottom: '4em'}}>
+      <Grid className='one column' style={{marginBottom: '4em'}} id={this.anchor}>
         <Column>
           <Grid>
             <Column width={12}>
-              <h3 className='ui header' style={{marginBottom: 0}}>
+              <h3
+                className='ui header'
+                style={{marginBottom: 0}}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+              >
                 {this.props.title}
+                <a href={`#${this.anchor}`}>
+                  <i className='linkify icon' style={linkIconStyle} />
+                </a>
               </h3>
               <p>{this.props.description}</p>
             </Column>
@@ -49,7 +75,7 @@ export default class ComponentExample extends Component {
             </Column>
           </Grid>
         </Column>
-
+        {this.props.children && children}
         <Column>
           {createElement(this.component)}
         </Column>

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

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {Button, Checkbox} from 'stardust';
+
+export default class CheckboxRemoteControlExample extends Component {
+  toggle = () => {
+    this.refs.checkbox.plugin('toggle');
+  };
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.toggle}>Toggle it</Button>
+        <Checkbox label='Check this box' ref='checkbox' />
+      </div>
+    );
+  }
+}

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

@@ -1,18 +1,8 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {Checkbox} from 'stardust';
 
-export default class CheckboxCheckedExample extends Component {
-  state = {isChecked: true};
-
-  handleChange = e => {
-    this.setState({
-      isChecked: !this.state.isChecked
-    });
-  };
-
-  render() {
-    return (
-      <Checkbox label='This checkbox comes prechecked' checked={this.state.isChecked} onChange={this.handleChange} />
-    );
-  }
-}
+export default CheckboxCheckedExample => {
+  return (
+    <Checkbox defaultChecked label='This checkbox comes prechecked' />
+  );
+};

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

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
 
 export default class CheckboxStatesExamples extends Component {
   render() {
@@ -10,7 +11,17 @@ export default class CheckboxStatesExamples extends Component {
           title='Checked'
           description='A checkbox can come pre-checked'
           examplePath='modules/Checkbox/States/Checked'
-        />
+        >
+          <Message>
+            Use
+            &nbsp;
+            <a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
+              <code>defaultChecked</code>
+            </a>
+            &nbsp;
+            as you normally would to set default form values.
+          </Message>
+        </ComponentExample>
         <ComponentExample
           title='Disabled'
           description='Checkboxes can be disabled'
@@ -21,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

@@ -4,7 +4,7 @@ import {Checkbox} from 'stardust';
 export default class CheckboxCheckboxExample extends Component {
   render() {
     return (
-      <Checkbox label='Make my profile visible'/>
+      <Checkbox label='Make my profile visible' />
     );
   }
 }

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

@@ -6,13 +6,13 @@ export default class CheckboxFittedExample extends Component {
     return (
       <div>
         <Segment className='compact'>
-          <Checkbox className='fitted' />
+          <Checkbox />
         </Segment>
         <Segment className='compact'>
-          <Checkbox className='fitted slider' />
+          <Checkbox className='slider' />
         </Segment>
         <Segment className='compact'>
-          <Checkbox className='fitted toggle' />
+          <Checkbox className='toggle' />
         </Segment>
       </div>
     );

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

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
 
 export default class CheckboxVariationsExamples extends Component {
   render() {
@@ -10,7 +11,15 @@ export default class CheckboxVariationsExamples extends Component {
           title='Fitted'
           description='A fitted checkbox does not leave padding for a label'
           examplePath='modules/Checkbox/Variations/Fitted'
-        />
+        >
+          <Message>
+            The&nbsp;
+            <a href='http://semantic-ui.com/modules/checkbox.html#fitted' target='_blank'>
+              <code>fitted</code>
+            </a>
+            &nbsp;class is automatically applied if there is no <code>label</code> prop.
+          </Message>
+        </ComponentExample>
       </ExampleSection>
     );
   }

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/elements/Input/Input.js

@@ -43,7 +43,6 @@ export default class Input extends Component {
     const actionChildren = [];
 
     Children.forEach(this.props.children, child => {
-      // TODO: use child._meta here, once merged, to determine component type
       const isButton = child.type.name === 'Button';
       const isDropdown = child.type.name === 'Dropdown';
       // TODO: use child.type.name === 'Label' once Label component is merged.

src/modules/Checkbox/Checkbox.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import META from 'src/utils/Meta';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import $ from 'jquery';
@@ -10,14 +11,8 @@ export default class Checkbox extends Component {
     beforeDeterminate: PropTypes.func,
     beforeIndeterminate: PropTypes.func,
     beforeUnchecked: PropTypes.func,
-    className: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.array,
-      PropTypes.object,
-    ]),
-    defaultChecked: PropTypes.bool,
+    className: PropTypes.string,
     label: PropTypes.string,
-    name: PropTypes.string,
     onChange: PropTypes.func,
     onChecked: PropTypes.func,
     onDeterminate: PropTypes.func,
@@ -28,11 +23,13 @@ export default class Checkbox extends Component {
     type: PropTypes.string,
   };
 
-  componentDidMount() {
-    this.container = $(this.refs.container);
-    this.input = $(this.refs.input);
+  static defaultProps = {
+    type: 'checkbox'
+  };
 
-    this.container.checkbox({
+  componentDidMount() {
+    this.element = $(this.refs.element);
+    this.element.checkbox({
       onChange: this.props.onChange,
       onChecked: this.props.onChecked,
       onIndeterminate: this.props.onIndeterminate,
@@ -48,7 +45,7 @@ export default class Checkbox extends Component {
   }
 
   componentWillUnmount() {
-    this.container.off();
+    this.element.off();
   }
 
   static _meta = {
@@ -57,16 +54,15 @@ export default class Checkbox extends Component {
     type: META.type.module,
   };
 
+  plugin() {
+    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',
       'ui',
@@ -76,12 +72,10 @@ export default class Checkbox extends Component {
       {fitted: !this.props.label},
       'checkbox'
     );
-
-    const checkboxProps = _.clone(this.props);
-    delete checkboxProps.className;
+    const props = getUnhandledProps(this);
     return (
-      <div className={classes} ref='container'>
-        <input {...checkboxProps} type={type} ref='checkbox' />
+      <div className={classes} ref='element'>
+        <input {...props} type={type} />
         <label>{this.props.label}</label>
       </div>
     );

src/modules/Modal/Modal.js

@@ -7,6 +7,7 @@ class Modal extends Component {
     children: PropTypes.any,
     className: PropTypes.string,
     ref: PropTypes.string,
+    settings: PropTypes.object,
   };
 
   static defaultProps = {