Merge pull request #94 from TechnologyAdvice/feature/dynamic-input-wrapper

Fields component and Form examples

Author: levithomason

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -15,8 +15,8 @@ export default class ComponentProps extends Component {
   };
 
   nameRenderer(item) {
-    const required = item.required && <span className='ui mini red circular label'>required</span>;
-    return <div>{item.name} {required}</div>;
+    const required = item.required && <span className='ui empty mini red circular label' />;
+    return <code>{item.name} {required}</code>;
   }
 
   defaultValueRenderer(item) {
@@ -57,7 +57,7 @@ export default class ComponentProps extends Component {
     });
 
     return (
-      <Segment className='vertical'>
+      <Segment className='basic vertical'>
         <h2 className='ui header'>Props</h2>
         <Table data={content} className='very basic'>
           <TableColumn dataKey='name' cellRenderer={this.nameRenderer} />

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

@@ -0,0 +1,17 @@
+import React, {Component} 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>
+    );
+  }
+}

…ections/Form/content/FormFieldExample.js …ections/Form/Content/FormFieldExample.jsdocs/app/Examples/collections/Form/content/FormFieldExample.js renamed to docs/app/Examples/collections/Form/Content/FormFieldExample.js docs/app/Examples/collections/Form/content/FormFieldExample.js renamed to docs/app/Examples/collections/Form/Content/FormFieldExample.js

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

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

@@ -0,0 +1,17 @@
+import React, {Component} 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>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import FormContentExamples from './Content/FormContentExamples';
+import FormTypesExamples from './Types/FormTypesExamples';
+import FormFieldVariationsExamples from './FieldVariations/FormFieldVariationsExamples';
+import FormGroupVariationsExamples from './GroupVariations/FormGroupVariationsExamples';
+import FormFormVariationsExamples from './FormVariations/FormFormVariationsExamples';
+import FormStatesExamples from './States/FormStatesExamples';
+
+export default class FormExamples extends Component {
+  render() {
+    return (
+      <div>
+        <FormTypesExamples />
+        <FormContentExamples />
+        <FormStatesExamples />
+        <FormFormVariationsExamples />
+        <FormFieldVariationsExamples />
+        <FormGroupVariationsExamples />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+
+export default class FormFormVariationsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Form Variations'>
+        <ComponentExample
+          title='Size'
+          description='A form can also be small or large.'
+          examplePath='collections/Form/FormVariations/FormSizeSmallExample'
+        />
+        <ComponentExample
+          examplePath='collections/Form/FormVariations/FormSizeLargeExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/collections/Form/FormVariations/FormFormVariationsExamples.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {Button, Field, Fields, Form, Input} from 'stardust';
+
+export default class FormSizeLargeExample extends Component {
+  render() {
+    return (
+      <Form className='large'>
+        <Fields>
+          <Field label='First name'>
+            <Input placeholder='First name' />
+          </Field>
+          <Field label='Last name'>
+            <Input placeholder='Last name' />
+          </Field>
+        </Fields>
+        <Button type='submit'>Submit</Button>
+      </Form>
+    );
+  }
+}

docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {Button, Field, Fields, Form, Input} from 'stardust';
+
+export default class FormSizeSmallExample extends Component {
+  render() {
+    return (
+      <Form className='small'>
+        <Fields>
+          <Field label='First name'>
+            <Input placeholder='First name' />
+          </Field>
+          <Field label='Last name'>
+            <Input placeholder='Last name' />
+          </Field>
+        </Fields>
+        <Button type='submit'>Submit</Button>
+      </Form>
+    );
+  }
+}

docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js

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