Fields component and Form examples

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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

docs/app/Examples/collections/Form/GroupVariations/FormGroupEvenlyDividedExample.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>
+    );
+  }
+}

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>
+    );
+  }
+}

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 FormStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <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>
+    );
+  }
+}

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>
+    );
+  }
+}

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>
+    );
+  }
+}

karma.conf.js

@@ -13,7 +13,7 @@ export default config => {
   config.set({
     browsers: ['PhantomJS'],
     singleRun: !ENV.isDevelopment(),
-    reporters: ['mocha'],
+    reporters: [ENV.isDevelopment() ? 'mocha' : 'dots'],
     files: [
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './test/tests.bundle.js'

src/collections/Form/Fields.js

@@ -0,0 +1,45 @@
+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 Fields extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /**
+     * Dynamically adds className='<count> fields'.
+     */
+    evenlyDivided: PropTypes.bool,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Fields',
+    parent: 'Form',
+    type: META.type.collection,
+  };
+
+  render() {
+    let fieldCount = 0;
+    Children.forEach(this.props.children, child => {
+      _.get(child, 'type._meta.name') === 'Field' && fieldCount++;
+    });
+    fieldCount = numberToWord(fieldCount);
+
+    const classes = classNames(
+      'sd-fields',
+      this.props.evenlyDivided && fieldCount,
+      this.props.className,
+      'fields'
+    );
+    const props = getUnhandledProps(this);
+    return (
+      <div {...props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

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';
@@ -23,13 +22,10 @@ export default class Image extends Component {
       this.props.className,
       'image'
     );
-    const props = _.clone(this.props);
-    delete props.src;
-    delete props.alt;
 
     return (
-      <div {...props} className={classes}>
-        <img src={this.props.src} alt={this.props.alt} />
+      <div className={classes}>
+        <img {...this.props} />
       </div>
     );
   }

src/elements/Input/Input.js

@@ -2,13 +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 +62,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}

src/elements/List/List.js

@@ -4,6 +4,7 @@ import META from 'src/utils/Meta';
 
 export default class List extends Component {
   static propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
   };
 
@@ -16,7 +17,9 @@ export default class List extends Component {
   render() {
     const classes = classNames('sd-list', 'ui', this.props.className, 'list');
     return (
-      <div {...this.props} className={classes}></div>
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
     );
   }
 }

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,