Checkbox without jQuery

.eslintrc

@@ -7,7 +7,7 @@
     "complexity": [1, 10],
     "consistent-return": 0,
     "no-confusing-arrow": 0,
-    "react/sort-comp": 1,
+    "react/sort-comp": 0,
     "valid-jsdoc": 0,
     "react/jsx-curly-spacing": 0
   }

docs/app/Components/ComponentDoc/ComponentDescription.js

@@ -25,10 +25,12 @@ export default class ComponentDescription extends Component {
 
   renderSemanticDocsLink = () => {
     const { _meta } = this.props
-    if (!META.isSemanticUI(_meta) || !META.isParent(_meta)) {
-      return null
-    }
-    const url = `http://semantic-ui.com/${_meta.type}s/${_meta.name}.html`.toLowerCase()
+
+    if (!META.isSemanticUI(_meta)) return null
+
+    const name = META.isParent(_meta) ? _meta.name : _meta.parent
+    const url = `http://semantic-ui.com/${_meta.type}s/${name}.html`.toLowerCase()
+
     return (
       <List.Item icon='book'>
         <a href={url} target='_blank'>

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -21,6 +21,7 @@ const ComponentDoc = ({ _meta }) => {
         docPath={docPath}
       />
       <ComponentProps props={docgen.props} />
+      {docgen.props && <ComponentProps props={docgen.props} />}
       <ComponentExamples name={_meta.name} />
     </div>
   )

docs/app/Examples/addons/Radio/RadioExamples.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Types from './Types/Types'
+import States from './States/States'
+import Variations from './Variations/Variations'
+
+const RadioExamples = () => (
+  <div>
+    <Types />
+    <States />
+    <Variations />
+  </div>
+)
+
+export default RadioExamples

docs/app/Examples/addons/Radio/States/Checked.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Radio } from 'stardust'
+
+const RadioCheckedExample = () => (
+  <Radio label='This radio comes prechecked' defaultChecked />
+)
+
+export default RadioCheckedExample

docs/app/Examples/addons/Radio/States/Disabled.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Form, Radio, Field } from 'stardust'
+
+const RadioDisabledExample = () => (
+  <Form>
+    <Form.Field>
+      <Radio label='Disabled' disabled />
+    </Form.Field>
+    <Form.Field>
+      <Radio type='toggle' label='Disabled' disabled />
+    </Form.Field>
+  </Form>
+)
+
+export default RadioDisabledExample

docs/app/Examples/addons/Radio/States/RadioRemoteControlExample.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Button, Radio } from 'stardust'
+
+export default class RadioRemoteControlExample extends Component {
+  state = { checked: false }
+  toggle = () => this.setState({ checked: !this.state.checked })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.toggle}>
+          Toggle it
+        </Button>
+        <Radio
+          label='Check this radio'
+          onClick={this.toggle}
+          checked={this.state.checked}
+        />
+      </div>
+    )
+  }
+}

docs/app/Examples/addons/Radio/States/ReadOnly.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Radio } from 'stardust'
+
+const RadioReadOnlyExample = () => (
+  <Radio label='This radio is read-only' readOnly />
+)
+
+export default RadioReadOnlyExample

docs/app/Examples/addons/Radio/States/States.js

@@ -0,0 +1,41 @@
+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 RadioStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <ComponentExample
+          title='Checked'
+          description='A radio can come pre-checked'
+          examplePath='addons/Radio/States/Checked'
+        >
+          <Message>
+            Use{' '}
+            <a href='https://facebook.github.io/react/docs/forms.html#default-value' target='_blank'>
+              <code>defaultChecked</code>
+            </a>
+            {' '}as you normally would to set default form values.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Disabled'
+          description='Radioes can be disabled'
+          examplePath='addons/Radio/States/Disabled'
+        />
+        <ComponentExample
+          title='Read Only'
+          description='Make the radio unable to be edited by the user'
+          examplePath='addons/Radio/States/ReadOnly'
+        />
+        <ComponentExample
+          title='Remote Control'
+          description='You can trigger events remotely.'
+          examplePath='addons/Radio/States/RadioRemoteControlExample'
+        />
+      </ExampleSection>
+    )
+  }
+}

docs/app/Examples/addons/Radio/Types/Radio.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Radio } from 'stardust'
+
+const RadioRadioExample = () => (
+  <Radio label='Make my profile visible' />
+)
+
+export default RadioRadioExample

docs/app/Examples/addons/Radio/Types/RadioGroup.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Form, Radio } from 'stardust'
+
+export default class RadioGroupExample extends Component {
+  state = {}
+  handleClick = (e, { value }) => this.setState({ value })
+
+  render() {
+    return (
+      <Form>
+        <Form.Field>
+          Selected value: <b>{this.state.value}</b>
+        </Form.Field>
+        <Form.Field>
+          <Radio
+            label='Choose this'
+            name='radioGroup'
+            value='this'
+            checked={this.state.value === 'this'}
+            onClick={this.handleClick}
+          />
+        </Form.Field>
+        <Form.Field>
+          <Radio
+            label='Or that'
+            name='radioGroup'
+            value='that'
+            checked={this.state.value === 'that'}
+            onClick={this.handleClick}
+          />
+        </Form.Field>
+      </Form>
+    )
+  }
+}

docs/app/Examples/addons/Radio/Types/Slider.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Radio } from 'stardust'
+
+const RadioSliderExample = () => (
+  <Radio type='slider' />
+)
+
+export default RadioSliderExample

docs/app/Examples/addons/Radio/Types/Toggle.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Radio } from 'stardust'
+
+const RadioToggleExample = () => (
+  <Radio type='toggle' />
+)
+
+export default RadioToggleExample

docs/app/Examples/addons/Radio/Types/Types.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RadioTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Radio'
+      description='A radio for checking.'
+      examplePath='addons/Radio/Types/Radio'
+    />
+    <ComponentExample
+      title='Toggle'
+      description='A radio can toggle.'
+      examplePath='addons/Radio/Types/Toggle'
+    />
+    <ComponentExample
+      title='Slider'
+      description='A radio can look like a slider.'
+      examplePath='addons/Radio/Types/Slider'
+    />
+    <ComponentExample
+      title='Radio Group'
+      description='Radios can be part of a group.'
+      examplePath='addons/Radio/Types/RadioGroup'
+    />
+  </ExampleSection>
+)
+
+export default RadioTypesExamples

docs/app/Examples/addons/Radio/Variations/Fitted.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Radio, Segment } from 'stardust'
+
+const RadioFittedExample = () => (
+  <div>
+    <Segment className='compact'>
+      <Radio />
+    </Segment>
+    <Segment className='compact'>
+      <Radio type='slider' />
+    </Segment>
+    <Segment className='compact'>
+      <Radio type='toggle' />
+    </Segment>
+  </div>
+)
+
+export default RadioFittedExample

docs/app/Examples/addons/Radio/Variations/Variations.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'stardust'
+
+const RadioVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Fitted'
+      description='A fitted radio does not leave padding for a label'
+      examplePath='addons/Radio/Variations/Fitted'
+    >
+      <Message>
+        The{' '}
+        <a href='http://semantic-ui.com/modules/checkbox.html#fitted' target='_blank'>
+          <code>fitted</code>
+        </a>
+        {' '}class is automatically applied if there is no <code>label</code> prop.
+      </Message>
+    </ComponentExample>
+  </ExampleSection>
+)
+
+export default RadioVariationsExamples

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

@@ -2,15 +2,14 @@ import React, { Component } from 'react'
 import { Button, Checkbox } from 'stardust'
 
 export default class CheckboxRemoteControlExample extends Component {
-  toggle = () => {
-    this.refs.checkbox.plugin('toggle')
-  };
+  state = { checked: false }
+  toggle = () => this.setState({ checked: !this.state.checked })
 
   render() {
     return (
       <div>
         <Button onClick={this.toggle}>Toggle it</Button>
-        <Checkbox label='Check this box' ref='checkbox' />
+        <Checkbox label='Check this box' onClick={this.toggle} checked={this.state.checked} />
       </div>
     )
   }

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

@@ -3,6 +3,6 @@ import { Checkbox } from 'stardust'
 
 export default CheckboxCheckedExample => {
   return (
-    <Checkbox defaultChecked label='This checkbox comes prechecked' />
+    <Checkbox label='This checkbox comes prechecked' defaultChecked />
   )
 }

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

@@ -6,10 +6,10 @@ export default class CheckboxDisabledExample extends Component {
     return (
       <Form>
         <Form.Field>
-          <Checkbox className='disabled' label='Disabled' />
+          <Checkbox label='Disabled' disabled />
         </Form.Field>
         <Form.Field>
-          <Checkbox className='toggle' disabled label='Disabled' />
+          <Checkbox type='toggle' label='Disabled' disabled />
         </Form.Field>
       </Form>
     )

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

@@ -4,7 +4,7 @@ import { Checkbox } from 'stardust'
 export default class CheckboxReadOnlyExample extends Component {
   render() {
     return (
-      <Checkbox className='read-only' label='This checkbox is read-only' />
+      <Checkbox label='This checkbox is read-only' readOnly />
     )
   }
 }

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

@@ -13,13 +13,11 @@ export default class CheckboxStatesExamples extends Component {
           examplePath='modules/Checkbox/States/Checked'
         >
           <Message>
-            Use
-            &nbsp;
+            Use{' '}
             <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.
+            {' '}as you normally would to set default form values.
           </Message>
         </ComponentExample>
         <ComponentExample
@@ -28,7 +26,7 @@ export default class CheckboxStatesExamples extends Component {
           examplePath='modules/Checkbox/States/Disabled'
         />
         <ComponentExample
-          title='ReadOnly'
+          title='Read Only'
           description='Make the checkbox unable to be edited by the user'
           examplePath='modules/Checkbox/States/ReadOnly'
         />

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

@@ -4,9 +4,7 @@ import { Checkbox } from 'stardust'
 export default class CheckboxRadioExample extends Component {
   render() {
     return (
-      <div>
-        <Checkbox className='radio' label='Radio choice' />
-      </div>
+      <Checkbox type='radio' label='Radio choice' />
     )
   }
 }