add Fields component and Form examples

levithomason · levithomason · commit 182cbc96e63f · 2015-10-26T17:49:37.000-07:00
diff --git a/docs/app/Examples/collections/Form/Content/FormContentExamples.js b/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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/Content/FormFieldExample.js b/docs/app/Examples/collections/Form/Content/FormFieldExample.js
diff --git a/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.js b/docs/app/Examples/collections/Form/FieldVariations/FormFieldInlineExample.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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/FieldVariations/FormFieldVariationsExamples.js b/docs/app/Examples/collections/Form/FieldVariations/FormFieldVariationsExamples.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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/FormExamples.js b/docs/app/Examples/collections/Form/FormExamples.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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/FormVariations/FormFormVariationsExamples.js b/docs/app/Examples/collections/Form/FormVariations/FormFormVariationsExamples.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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/FormVariations/FormSizeLargeExample.js b/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 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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.js b/docs/app/Examples/collections/Form/FormVariations/FormSizeSmallExample.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>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js b/docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.js
@@ -0,0 +1,16 @@
+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' className='inline'>
+            <Input placeholder='First name' />
+          </Field>
+        </Fields>
+      </Form>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/GroupVariations/FormGroupVariationsExamples.js b/docs/app/Examples/collections/Form/GroupVariations/FormGroupVariationsExamples.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 FormGroupVariationsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Group Variations'>
+        <ComponentExample
+          title='Evenly Divided'
+          description='Fields can have their widths divided evenly.'
+          examplePath='collections/Form/GroupVariations/FormGroupEvenlyDividedExample'
+        />
+      </ExampleSection>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js b/docs/app/Examples/collections/Form/States/FormFieldErrorExample.js
diff --git a/docs/app/Examples/collections/Form/States/FormStatesExamples.js b/docs/app/Examples/collections/Form/States/FormStatesExamples.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='Error'
+          description='If a form is in an error state, it will automatically show any error message blocks.'
+          examplePath='collections/Form/States/FormFieldErrorExample'
+        />
+      </ExampleSection>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/Types/FormFormExample.js b/docs/app/Examples/collections/Form/Types/FormFormExample.js
@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {Button, Checkbox, Field, Form, Input} from 'stardust';
+
+export default class FormFieldExample extends Component {
+  render() {
+    return (
+      <Form>
+        <Field label='First Name'>
+          <Input placeholder='First Name' />
+        </Field>
+        <Field label='Last Name'>
+          <Input placeholder='Last Name' />
+        </Field>
+        <Field label='First Name'>
+          <Checkbox label='I agree to the Terms and Conditions' />
+        </Field>
+        <Button type='submit'>Submit</Button>
+      </Form>
+    );
+  }
+}
diff --git a/docs/app/Examples/collections/Form/Types/FormTypesExamples.js b/docs/app/Examples/collections/Form/Types/FormTypesExamples.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='Types'>
+        <ComponentExample
+          title='Form'
+          description='A form.'
+          examplePath='collections/Form/Types/FormFormExample'
+        />
+      </ExampleSection>
+    );
+  }
+}
diff --git a/src/collections/Form/Fields.js b/src/collections/Form/Fields.js
@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import React, {Children, Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
+import numberToWord from 'src/utils/numberToWord';
+import META from 'src/utils/Meta.js';
+
+export default class Field extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    evenlyDivided: PropTypes.bool,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Fields',
+    parent: 'Form',
+    type: META.type.collection,
+  };
+
+  render() {
+    let fieldCount = 0;
+    Children.forEach(child => {
+      _.get(child, '_meta.name') === 'Field' && fieldCount++;
+    });
+    fieldCount = numberToWord(fieldCount);
+    const classes = classNames(
+      'sd-field',
+      {fieldCount: this.props.evenlyDivided},
+      this.props.className,
+      'fields'
+    );
+    const props = getUnhandledProps(this);
+    return (
+      <div {...props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
@@ -2,12 +2,12 @@ import _ from 'lodash';
 import classNames from 'classnames';
 import React, {Component, PropTypes, Children} from 'react';
 import META from 'src/utils/Meta';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
 
 export default class Input extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    dataContent: PropTypes.string,
     defaultValue: PropTypes.string,
     icon: PropTypes.string,
     ref: PropTypes.string,
@@ -63,14 +63,13 @@ export default class Input extends Component {
       this.props.className,
       'input'
     );
-    const inputProps = _.clone(this.props);
-    delete inputProps.className;
-    delete inputProps.children;
+    const props = getUnhandledProps(this);
+
     return (
       <div className={classes}>
         {isLeftLabeled && labelChildren}
         {isLeftAction && actionChildren}
-        <input {...inputProps} />
+        <input {...props} />
         {this.props.icon && icon}
         {isRightLabeled && labelChildren}
         {isRightAction && actionChildren}
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import Textarea from 'src/addons/Textarea/Textarea';
 // Collections
 import Column from 'src/collections/Grid/Column';
 import Field from 'src/collections/Form/Field';
+import Fields from 'src/collections/Form/Fields';
 import Form from 'src/collections/Form/Form';
 import Grid from 'src/collections/Grid/Grid';
 import Row from 'src/collections/Grid/Row';
@@ -43,6 +44,7 @@ export default {
   // Collections
   Column,
   Field,
+  Fields,
   Form,
   Grid,
   Row,
diff --git a/test/specs/collections/Form/Fields-test.js b/test/specs/collections/Form/Fields-test.js
@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import faker from 'faker';
+import React from 'react';
+
+import {Field, Fields} from 'stardust';
+
+describe('Fields', () => {
+  it('evenlyDivided adds the word class for the number of child fields', () => {
+    render(
+      <Fields evenlyDivided>
+        <Field />
+        <Field />
+      </Fields>
+    )
+      .findClass('two fields');
+  });
+  it('renders children', () => {
+    const child = faker.hackerPhrase();
+    render(<Fields>{child}</Fields>)
+      .findText(child);
+  });
+});
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Dropdown} from 'stardust';
 
-describe.only('Dropdown', () => {
+describe('Dropdown', () => {
   it('has a default value', () => {
     const options = [
       {value: '', text: 'Please select a role'},
