docs(Form): add data usage examples (#1521)

docs/app/Examples/collections/Form/Usage/FormExampleCaptureValues.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Form } from 'semantic-ui-react'
+
+class FormExampleCaptureValues extends Component {
+  state = { name: '', email: '', submittedName: '', submittedEmail: '' }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleSubmit = e => {
+    e.preventDefault()
+    const { name, email } = this.state
+
+    this.setState({ submittedName: name, submittedEmail: email })
+  }
+
+  render() {
+    const { name, email, submittedName, submittedEmail } = this.state
+
+    return (
+      <div>
+        <Form onSubmit={this.handleSubmit}>
+          <Form.Group>
+            <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
+            <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
+            <Form.Button content='Submit' />
+          </Form.Group>
+        </Form>
+        <strong>onChange:</strong>
+        <pre>{JSON.stringify({ name, email }, null, 2)}</pre>
+        <strong>onSubmit:</strong>
+        <pre>{JSON.stringify({ submittedName, submittedEmail }, null, 2)}</pre>
+      </div>
+    )
+  }
+}
+
+export default FormExampleCaptureValues

docs/app/Examples/collections/Form/Usage/FormExampleClearOnSubmit.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Form } from 'semantic-ui-react'
+
+class FormExampleClearOnSubmit extends Component {
+  state = {}
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  handleSubmit = e => {
+    e.preventDefault()
+    this.setState({ email: '', name: '' })
+  }
+
+  render() {
+    const { name, email } = this.state
+
+    return (
+      <Form onSubmit={this.handleSubmit}>
+        <Form.Group>
+          <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
+          <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
+          <Form.Button content='Submit' />
+        </Form.Group>
+      </Form>
+    )
+  }
+}
+
+export default FormExampleClearOnSubmit

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+
+import { Message, Icon } from 'src'
+
+const FormFormUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <Message info icon>
+      <Icon name='pointing right' />
+      <Message.Content>
+        <Message.Header>Tip</Message.Header>
+        <p>
+          Our <code>{'<Form />'}</code> handles data just like a vanilla React <code>{'<form />'}</code>.
+          See React's
+          <a href='https://facebook.github.io/react/docs/forms.html#controlled-components' target='_blank'>
+            {' '}controlled components{' '}
+          </a>
+          docs for more.
+        </p>
+      </Message.Content>
+    </Message>
+    <ComponentExample
+      title='Capture Values'
+      description='You can capture form data on change or on submit.'
+      examplePath='collections/Form/Usage/FormExampleCaptureValues'
+    />
+    <ComponentExample
+      title='Clear On Submit'
+      description='You can clear form values on submit.'
+      examplePath='collections/Form/Usage/FormExampleClearOnSubmit'
+    />
+  </ExampleSection>
+)
+
+export default FormFormUsageExamples

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

@@ -6,6 +6,7 @@ import Shorthand from './Shorthand'
 import FieldVariations from './FieldVariations'
 import GroupVariations from './GroupVariations'
 import States from './States'
+import Usage from './Usage'
 
 const FormExamples = () => (
   <div>
@@ -16,6 +17,7 @@ const FormExamples = () => (
     <Variations />
     <FieldVariations />
     <GroupVariations />
+    <Usage />
   </div>
 )