wip

CONTRIBUTING.md

@@ -376,9 +376,14 @@ common.hasUIClassName()
 common.hasSubComponents()
 common.isTabbable()
 common.rendersChildren()
-common.implementsAlignedProp()
+
+common.implementsColumnsProp()
 common.implementsIconProp()
 common.implementsImageProp()
+common.implementsNumberToWordProp()
+common.implementsTextAlignProp()
+common.implementsVerticalAlignProp()
+
 common.propKeyOnlyToClassName()
 common.propValueOnlyToClassName()
 common.propKeyAndValueToClassName()

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

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { Form } from 'stardust'
+
+// TODO: update use Button once
+const options = [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }]
+
+class FormControlExample extends Component {
+  state = {}
+
+  handleRadioClick = (e, { value }) => this.setState({ value })
+
+  render() {
+    const { value } = this.state
+    return (
+      <Form>
+        <Form.Input label='A Form.Input' />
+        <Form.Dropdown label='A Form.Dropdown' options={options} />
+        <Form.Select label='A Form.Select' options={options} />
+        <Form.Checkbox label='I agree to the Terms and Conditions' />
+        <Form.Group>
+          <label>A <code>Form.Group</code> of <code>Form.Radio</code>s</label>
+          <Form.Radio label='Foo' name='radios' value='foo' checked={value === 'foo'} onClick={this.handleRadioClick} />
+          <Form.Radio label='Bar' name='radios' value='bar' checked={value === 'bar'} onClick={this.handleRadioClick} />
+          <Form.Radio label='Baz' name='radios' value='baz' checked={value === 'baz'} onClick={this.handleRadioClick} />
+        </Form.Group>
+        <Form.TextArea label='A Form.TextArea' />
+      </Form>
+    )
+  }
+}
+
+export default FormControlExample

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const FormFieldHTMLControlExample = () => (
+  <Form>
+    <Form.Field control='input' label='An input' />
+    <Form.Field control='select' label='A select'>
+      <option value='male'>Male</option>
+      <option value='female'>Female</option>
+    </Form.Field>
+    <Form.Field control='textarea' label='A textarea' />
+    <Form.Field control='button' label='A button'>
+      HTML Button
+    </Form.Field>
+  </Form>
+)
+
+export default FormFieldHTMLControlExample

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/FormFieldInputExample.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { Form } from 'stardust'
+
+const options = [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }]
+
+export default class FormControlExample extends Component {
+  state = {}
+
+  handleRadioClick = (e, { value }) => this.setState({ value })
+
+  render() {
+    const { value } = this.state
+    return (
+      <Form>
+        <Form.Input label='A Form.Input' />
+        <Form.Dropdown label='A Form.Dropdown' options={options} />
+        <Form.Select label='A Form.Select' options={options} />
+        <Form.Checkbox label='I agree to the Terms and Conditions' />
+        <Form.Group>
+          <label>A <code>Form.Group</code> of <code>Form.Radio</code>s</label>
+          <Form.Radio label='Foo' name='radios' value='foo' checked={value === 'foo'} onClick={this.handleRadioClick} />
+          <Form.Radio label='Bar' name='radios' value='bar' checked={value === 'bar'} onClick={this.handleRadioClick} />
+          <Form.Radio label='Baz' name='radios' value='baz' checked={value === 'baz'} onClick={this.handleRadioClick} />
+        </Form.Group>
+        <Form.TextArea label='A Form.TextArea' />
+      </Form>
+    )
+  }
+}
+
+export default FormControlExample

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

@@ -11,6 +11,51 @@ export default class FormTypesExamples extends Component {
           description='A field is a form element containing a label and an input.'
           examplePath='collections/Form/Content/FormFieldExample'
         />
+        <ComponentExample
+          title='Field Control'
+          description='A field can define a control prop.'
+          examplePath='collections/Form/Content/FormFieldControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a plain HTML element'
+          examplePath='collections/Form/Content/FormFieldHTMLControlExample'
+        />
+        {/* Component */}
+        <ComponentExample
+          description='A field control can be a Button'
+          examplePath='collections/Form/Content/FormFieldButtonControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a Checkbox'
+          examplePath='collections/Form/Content/FormFieldCheckboxControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a Form'
+          examplePath='collections/Form/Content/FormFieldFormControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a Input'
+          examplePath='collections/Form/Content/FormFieldInputControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a Radio'
+          examplePath='collections/Form/Content/FormFieldRadioControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a Select'
+          examplePath='collections/Form/Content/FormFieldSelectControlExample'
+        />
+        <ComponentExample
+          description='A field control can be a TextArea'
+          examplePath='collections/Form/Content/FormFieldTextAreaControlExample'
+        />
+        {/*
+        <ComponentExample
+          title='Field Input'
+          description='A field has an Input.'
+          examplePath='collections/Form/Content/FormFieldInputExample'
+        />
+        */}
       </ExampleSection>
     )
   }

docs/app/Examples/collections/Form/FieldControls/FormControlButtonExample.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const { Field } = Form
+
+const FormControlButtonExample = () => (
+  <Form>
+    <Field control='input'></Field>
+    <Field control='input' />
+    <Field.Button />
+    <Field.Checkbox />
+    <Form.ButtonField label='A Form.Button'>
+      Form.Button
+    </Form.ButtonField>
+  </Form>
+)
+
+export default FormControlButtonExample

docs/app/Examples/collections/Form/FieldControls/FormControlCheckboxExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const FormControlCheckboxExample = () => (
+  <Form>
+    <Form.Checkbox label='I agree to the Terms and Conditions' />
+  </Form>
+)
+
+export default FormControlCheckboxExample

docs/app/Examples/collections/Form/FieldControls/FormControlInputExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const FormControlInputExample = () => (
+  <Form>
+    <Form.Input label='A Form.Input' />
+  </Form>
+)
+
+export default FormControlInputExample

docs/app/Examples/collections/Form/FieldControls/FormControlRadioExample.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { Form } from 'stardust'
+
+class FormControlRadioExample extends Component {
+  state = {}
+
+  handleRadioClick = (e, { value }) => this.setState({ value })
+
+  render() {
+    return (
+      <Form>
+        <Form.Group className='grouped'>
+          <label>A <code>Form.Group</code> of <code>Form.Radio</code>s</label>
+          <Form.Radio
+            label='Foo'
+            name='formRadios'
+            value='foo'
+            checked={this.state.value === 'foo'}
+            onClick={this.handleRadioClick}
+          />
+          <Form.Radio
+            label='Bar'
+            name='formRadios'
+            value='bar'
+            checked={this.state.value === 'bar'}
+            onClick={this.handleRadioClick}
+          />
+          <Form.Radio
+            label='Baz'
+            name='formRadios'
+            value='baz'
+            checked={this.state.value === 'baz'}
+            onClick={this.handleRadioClick}
+          />
+        </Form.Group>
+      </Form>
+    )
+  }
+}
+
+export default FormControlRadioExample

docs/app/Examples/collections/Form/FieldControls/FormControlSelectExample.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const options = [
+  { text: 'Male', value: 'male' },
+  { text: 'Female', value: 'female' },
+]
+
+const FormControlSelectExample = () => (
+  <Form>
+    <Form.Select label='A Form.Select' options={options} />
+  </Form>
+)
+
+export default FormControlSelectExample

docs/app/Examples/collections/Form/FieldControls/FormControlTextAreaExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form } from 'stardust'
+
+const FormControlTextAreaExample = () => (
+  <Form>
+    <Form.TextArea label='A Form.TextArea' />
+  </Form>
+)
+
+export default FormControlTextAreaExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlButtonExample.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button, Form } from 'stardust'
+
+// TODO: update Button usage once Button is updated to v1 API
+
+const FormFieldControlButtonExample = () => (
+  <Form>
+    <Form.Field control={Button} label='A Button'>
+      A Button
+    </Form.Field>
+  </Form>
+)
+
+export default FormFieldControlButtonExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlCheckboxExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Checkbox, Form } from 'stardust'
+
+const FormFieldControlCheckboxExample = () => (
+  <Form>
+    <Form.Field control={Checkbox} label='I agree to the Terms and Conditions' />
+  </Form>
+)
+
+export default FormFieldControlCheckboxExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlInputExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Input, Form } from 'stardust'
+
+const FormFieldControlInputExample = () => (
+  <Form>
+    <Form.Field control={Input} label='A Input' />
+  </Form>
+)
+
+export default FormFieldControlInputExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlRadioExample.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Form, Radio } from 'stardust'
+
+class FormFieldControlRadioExample extends Component {
+  state = {}
+
+  handleRadioClick = (e, { value }) => this.setState({ value })
+
+  render() {
+    const { value } = this.state
+    return (
+      <Form>
+        <Form.Group>
+          <label>A <code>Form.Group</code> containing <code>Form.Radio</code>s</label>
+          <Form.Field
+            control={Radio}
+            label='Foo'
+            name='fieldControlRadios'
+            value='foo'
+            checked={value === 'foo'}
+            onClick={this.handleRadioClick}
+          />
+          <Form.Field
+            control={Radio}
+            label='Bar'
+            name='fieldControlRadios'
+            value='bar'
+            checked={value === 'bar'}
+            onClick={this.handleRadioClick}
+          />
+          <Form.Field
+            control={Radio}
+            label='Baz'
+            name='fieldControlRadios'
+            value='baz'
+            checked={value === 'baz'}
+            onClick={this.handleRadioClick}
+          />
+        </Form.Group>
+      </Form>
+    )
+  }
+}
+
+export default FormFieldControlRadioExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlSelectExample.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Select, Form } from 'stardust'
+
+const options = [
+  { text: 'Male', value: 'male' },
+  { text: 'Female', value: 'female' },
+]
+
+const FormFieldControlSelectExample = () => (
+  <Form>
+    <Form.Field control={Select} label='A Select' options={options} />
+  </Form>
+)
+
+export default FormFieldControlSelectExample

docs/app/Examples/collections/Form/FieldControls/FormFieldControlTextAreaExample.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { TextArea, Form } from 'stardust'
+
+const FormFieldControlTextAreaExample = () => (
+  <Form>
+    <Form.Field control={TextArea} label='A TextArea' />
+  </Form>
+)
+
+export default FormFieldControlTextAreaExample