feat(Form): update to v1 API

README.md

@@ -103,18 +103,19 @@ Once you change the flag, you need to refresh your browser to see the changes in
 
 ## How Can I Help?
 
-Our [CONTRIBUTING.md][1] is a step-by-step setup and development guide. It is meant to be read from top to bottom.  Once you're up to speed, we have two areas of focus:
+Our [CONTRIBUTING.md][1] is a step-by-step setup and development guide. It is meant to be read from top to bottom.  Once you're up to speed, each issue here includes more information on how you can help:
 
-### v1.0 Migrations
+### [v1.0 Migrations][15]
 
-Each issue includes more information on how you can help:
+Have a look at the task list on the issue to see where you can jump in.
 
-1. [Moving legacy component APIs to our v1 API][15]
-1. [Removing jQuery and SUI JS][11]
+### [Missing Components][17]
 
-### New Components
+We're seeking component parity with Semantic UI, plus some addons.  There is an issue for every missing component, labeled [`enhancement` `help wanted`][17].  Just comment on the issue you'd like to take.
 
-We're seeking component parity with Semantic UI, plus some addons.  There is an issue for every missing component, labeled [`enhancement` `help wanted`][17].
+### [Help Wanted Label][4]
+
+Any other issue labeled [`help wanted`][4] is ready for a PR.
 
 ## Our Principles
 
@@ -167,7 +168,7 @@ Made with :heart: [@TechnologyAdvice][9], a ridiculous [place to work][16].
 [1]: /~https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md
 [2]: https://technologyadvice.github.io/stardust/
 [3]: https://facebook.github.io/react/
-[4]: #
+[4]: /~https://github.com/TechnologyAdvice/stardust/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted
 [5]: http://semantic-ui.com/
 [6]: /~https://github.com/TechnologyAdvice/stardust/milestone/1
 [7]: /~https://github.com/webpack/webpack-dev-server/

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -6,6 +6,9 @@ import { getUnhandledProps } from 'src/lib'
 import { Grid, Header, Icon } from 'stardust'
 
 const codeIconStyle = {
+  position: 'absolute',
+  top: '0.6em',
+  right: '0.5em',
   fontSize: '1.5em',
   fontWeight: 'bold',
 }
@@ -17,10 +20,10 @@ const codeIconStyle = {
 export default class ComponentExample extends Component {
   static propTypes = {
     children: PropTypes.node,
-    description: PropTypes.string,
+    description: PropTypes.node,
     examplePath: PropTypes.string.isRequired,
     exampleSrc: PropTypes.node,
-    title: PropTypes.string,
+    title: PropTypes.node,
   }
 
   constructor(props, context) {
@@ -57,14 +60,14 @@ export default class ComponentExample extends Component {
           <Grid>
             <Grid.Column width={12}>
               {title && <Header as='h3' style={{ marginBottom: 0 }}>{title}</Header>}
-              {description && <p>{description}</p>}
+              {description ? <p>{description}</p> : children}
             </Grid.Column>
             <Grid.Column width={4} textAlign='right'>
               <Icon name='code link' color='grey' onClick={this.toggleShowCode} style={codeIconStyle} />
             </Grid.Column>
           </Grid>
         </Grid.Column>
-        {children && <Grid.Column>{children}</Grid.Column>}
+        {description && children && <Grid.Column>{children}</Grid.Column>}
         <Grid.Column className='rendered-example'>
           {createElement(this.component, rest)}
         </Grid.Column>

docs/app/Components/ComponentDoc/ComponentExamples.js

@@ -29,7 +29,7 @@ export default class ComponentExamples extends Component {
             <Message.Content>
               If there's no
               <a href='/~https://github.com/TechnologyAdvice/stardust/pulls'> pull request </a>
-              open for <code>&lt;{name} /&gt;</code> examples, you should
+              open for <code>{`<${name} />`}</code> examples, you should
               <a href='/~https://github.com/TechnologyAdvice/stardust/blob/master/CONTRIBUTING.md'> contribute</a>!
             </Message.Content>
           </Message>

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -23,7 +23,12 @@ export default class ComponentProps extends Component {
     }
   }
   defaultValueRenderer = (item) => {
-    const defaultValue = _.get(item, 'defaultValue.value')
+    let defaultValue = _.get(item, 'defaultValue.value')
+
+    if (_.startsWith(defaultValue, 'function ')) {
+      defaultValue = defaultValue.match(/^function(.*)\{/)[1].trim()
+    }
+
     const defaultIsComputed = <span className='ui mini gray circular label'>computed</span>
 
     return (
@@ -62,7 +67,7 @@ export default class ComponentProps extends Component {
     return (
       <div>
         <Table data={content} className='very basic compact'>
-          <Table.Column dataKey='name' cellRenderer={this.nameRenderer} />
+          <Table.Column dataKey='Prop' cellRenderer={this.nameRenderer} />
           <Table.Column cellRenderer={this.requiredRenderer} />
           <Table.Column dataKey='type' />
           <Table.Column dataKey='defaultValue' cellRenderer={this.defaultValueRenderer} />

docs/app/Components/Sidebar/Sidebar.js

@@ -37,7 +37,7 @@ MenuItem.defaultProps = {
   activeClassName: 'active',
   className: 'item',
 }
-const selectedItemLabel = <span style={{ color: '#4db', float: 'right' }}>Press Enter</span>
+const selectedItemLabel = <span style={{ color: '#35bdb2', float: 'right' }}>Press Enter</span>
 
 export default class Sidebar extends Component {
   static contextTypes = {

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

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

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

@@ -13,7 +13,7 @@ export default class RadioRemoteControlExample extends Component {
         </Button>
         <Radio
           label='Check this radio'
-          onClick={this.toggle}
+          onChange={this.toggle}
           checked={this.state.checked}
         />
       </div>

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

@@ -3,7 +3,7 @@ import { Form, Radio } from 'stardust'
 
 export default class RadioGroupExample extends Component {
   state = {}
-  handleClick = (e, { value }) => this.setState({ value })
+  handleChange = (e, { value }) => this.setState({ value })
 
   render() {
     return (
@@ -17,7 +17,7 @@ export default class RadioGroupExample extends Component {
             name='radioGroup'
             value='this'
             checked={this.state.value === 'this'}
-            onClick={this.handleClick}
+            onChange={this.handleChange}
           />
         </Form.Field>
         <Form.Field>
@@ -26,7 +26,7 @@ export default class RadioGroupExample extends Component {
             name='radioGroup'
             value='that'
             checked={this.state.value === 'that'}
-            onClick={this.handleClick}
+            onChange={this.handleChange}
           />
         </Form.Field>
       </Form>

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

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

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

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

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

@@ -2,6 +2,8 @@ import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
+import { Message } from 'src'
+
 const RadioTypesExamples = () => (
   <ExampleSection title='Types'>
     <ComponentExample
@@ -23,7 +25,14 @@ const RadioTypesExamples = () => (
       title='Radio Group'
       description='Radios can be part of a group.'
       examplePath='addons/Radio/Types/RadioGroup'
-    />
+    >
+      <Message warning>
+        Radios in a group must be
+        <a href='https://facebook.github.io/react/docs/forms.html#controlled-components' target='_blank'>
+          &nbsp;controlled components.
+        </a>
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )
 

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

@@ -7,10 +7,10 @@ const RadioFittedExample = () => (
       <Radio />
     </Segment>
     <Segment className='compact'>
-      <Radio type='slider' />
+      <Radio slider />
     </Segment>
     <Segment className='compact'>
-      <Radio type='toggle' />
+      <Radio toggle />
     </Segment>
   </div>
 )

docs/app/Examples/collections/Form/Content/FormFieldExample.js

@@ -1,14 +1,13 @@
-import React, { Component } from 'react'
-import { Form, Input } from 'stardust'
+import React from 'react'
+import { Form } from 'stardust'
 
-export default class FormFieldExample extends Component {
-  render() {
-    return (
-      <Form>
-        <Form.Field label='User Input'>
-          <Input placeholder='User Input' />
-        </Form.Field>
-      </Form>
-    )
-  }
-}
+const FormFieldExample = () => (
+  <Form>
+    <Form.Field>
+      <label>User Input</label>
+      <input />
+    </Form.Field>
+  </Form>
+)
+
+export default FormFieldExample

docs/app/Examples/collections/Form/Content/index.js

@@ -1,17 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-export default class FormTypesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Content'>
-        <ComponentExample
-          title='Field'
-          description='A field is a form element containing a label and an input.'
-          examplePath='collections/Form/Content/FormFieldExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const FormTypesExamples = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Field'
+      description='A field is a form element containing a label and an input.'
+      examplePath='collections/Form/Content/FormFieldExample'
+    />
+  </ExampleSection>
+)
+export default FormTypesExamples

docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js

@@ -1,14 +1,13 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Form, Input } from 'stardust'
 
-export default class FormFieldInlineExample extends Component {
-  render() {
-    return (
-      <Form>
-        <Form.Field label='First name' className='inline'>
-          <Input placeholder='First name' />
-        </Form.Field>
-      </Form>
-    )
-  }
-}
+const FormFieldInlineExample = () => (
+  <Form>
+    <Form.Field inline>
+      <label>First name</label>
+      <Input placeholder='First name' />
+    </Form.Field>
+  </Form>
+)
+
+export default FormFieldInlineExample

docs/app/Examples/collections/Form/FieldVariations/index.js

@@ -1,17 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-export default class FormFieldVariationsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Field Variations'>
-        <ComponentExample
-          title='Inline'
-          description='A field can have its label next to instead of above it.'
-          examplePath='collections/Form/FieldVariations/FormFieldInlineExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const FormFieldVariationsExamples = () => (
+  <ExampleSection title='Field Variations'>
+    <ComponentExample
+      title='Inline'
+      description='A field can have its label next to instead of above it.'
+      examplePath='collections/Form/FieldVariations/FormFieldInlineExample'
+    />
+  </ExampleSection>
+)
+
+export default FormFieldVariationsExamples

docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js

@@ -1,19 +1,19 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Form, Input } from 'stardust'
 
-export default class FormGroupEvenlyDividedExample extends Component {
-  render() {
-    return (
-      <Form>
-        <Form.Fields evenlyDivided>
-          <Form.Field label='First name'>
-            <Input placeholder='First name' />
-          </Form.Field>
-          <Form.Field label='Last name'>
-            <Input placeholder='Last name' />
-          </Form.Field>
-        </Form.Fields>
-      </Form>
-    )
-  }
-}
+const FormGroupEvenlyDividedExample = () => (
+  <Form>
+    <Form.Group widths='equal'>
+      <Form.Field>
+        <label>First name</label>
+        <Input placeholder='First name' />
+      </Form.Field>
+      <Form.Field>
+        <label>Last name</label>
+        <Input placeholder='Last name' />
+      </Form.Field>
+    </Form.Group>
+  </Form>
+)
+
+export default FormGroupEvenlyDividedExample