docs(Form): add usage example with Checkbox

CHANGELOG.md

@@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `muted` prop in `Video` component @layershifter ([#1847](https://github.com/stardust-ui/react/pull/1847))
 - Fix `felaRenderer` is used in `Provider` explicitly @lucivpav ([#1842](https://github.com/stardust-ui/react/pull/1842))
 
+### Documentation
+- Add usage example regarding `Checkbox` in `Form` @lucivpav ([#1845](https://github.com/stardust-ui/react/pull/1845))
+
 <!--------------------------------[ v0.37.0 ]------------------------------- -->
 ## [v0.37.0](https://github.com/stardust-ui/react/tree/v0.37.0) (2019-08-26)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.36.2...v0.37.0)

docs/src/examples/components/Form/Types/index.tsx

@@ -14,16 +14,6 @@ const Types = () => (
       description="The form controls can appear next to the label instead of below it."
       examplePath="components/Form/Types/FormExampleInline"
     />
-    <ComponentExample
-      title="Dropdown"
-      description="A form can have a Dropdown as a field."
-      examplePath="components/Form/Types/FormExampleDropdown"
-    />
-    <ComponentExample
-      title="Slider"
-      description="A form can have a Slider as a field."
-      examplePath="components/Form/Types/FormExampleSlider"
-    />
   </ExampleSection>
 )
 

docs/src/examples/components/Form/Usage/FormExampleCheckbox.shorthand.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Form, Button, Checkbox } from '@stardust-ui/react'
+
+const fields = [
+  {
+    label: 'Email',
+    name: 'email',
+    id: 'email-inline-shorthand',
+    key: 'email',
+    required: true,
+    inline: true,
+  },
+  {
+    control: {
+      as: Checkbox,
+      label: 'Subscribe to newsletter',
+    },
+    key: 'newsletter',
+    id: 'newsletter-inline-shorthand',
+  },
+  {
+    control: {
+      as: Button,
+      content: 'Submit',
+    },
+    key: 'submit',
+  },
+]
+
+const FormExampleCheckbox = () => (
+  <Form
+    onSubmit={() => {
+      alert('Form submitted')
+    }}
+    fields={fields}
+  />
+)
+
+export default FormExampleCheckbox

docs/src/examples/components/Form/Usage/FormExampleCheckbox.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Form, Button, Checkbox } from '@stardust-ui/react'
+
+const FormExampleCheckbox = () => (
+  <Form
+    onSubmit={() => {
+      alert('Form submitted')
+    }}
+  >
+    <Form.Field
+      label={'Email'}
+      name={'email'}
+      id={'email-inline-shorthand'}
+      key={'email'}
+      required={true}
+      inline={true}
+    />
+    <Form.Field
+      control={{
+        as: Checkbox,
+        label: 'Subscribe to newsletter',
+      }}
+      key="newsletter"
+      id="newsletter-inline-shorthand"
+    />
+    <Form.Field
+      control={{
+        as: Button,
+        content: 'Submit',
+      }}
+      key="submit"
+    />
+  </Form>
+)
+
+export default FormExampleCheckbox

docs/src/examples/components/Form/Usage/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="">
+    <ComponentExample
+      title="Checkbox"
+      description="A form can have a Checkbox as a field."
+      examplePath="components/Form/Usage/FormExampleCheckbox"
+    />
+    <ComponentExample
+      title="Dropdown"
+      description="A form can have a Dropdown as a field."
+      examplePath="components/Form/Usage/FormExampleDropdown"
+    />
+    <ComponentExample
+      title="Slider"
+      description="A form can have a Slider as a field."
+      examplePath="components/Form/Usage/FormExampleSlider"
+    />
+  </ExampleSection>
+)
+
+export default Usage