ap - add errors to bound form

src/components/BoundForm.js

@@ -4,14 +4,15 @@ import noop from 'lodash/noop';
 import set from 'lodash/set';
 
 class BoundForm extends React.Component {
-
   static propTypes = {
     children: React.PropTypes.node,
+    errors: React.PropTypes.object,
     object: React.PropTypes.object.isRequired,
     onSubmit: React.PropTypes.func
   };
 
   static defaultProps = {
+    errors: {},
     onSubmit: noop
   };
 
@@ -36,8 +37,15 @@ class BoundForm extends React.Component {
   render() {
     const children = React.Children.map(this.props.children, child => {
       const value = this.state.formData[child.props.name] || '';
-
-      return React.cloneElement(child, { value, onChange: this.handleChange(child.props.name) });
+      const feedback = this.props.errors[child.props.name];
+      const color = feedback ? 'danger' : null;
+
+      return React.cloneElement(child, {
+        feedback,
+        color,
+        value,
+        onChange: this.handleChange(child.props.name)
+      });
     });
 
     return (

stories/Forms.js

@@ -5,9 +5,8 @@ import { storiesOf, action } from '@kadira/storybook';
 import { BoundForm, FormRow, FormChoice, CurrencyInput, Address } from '../src';
 import { text, boolean, number, object, select } from '@kadira/storybook-addon-knobs';
 
-let formData = {
+const formData = {
   firstName: 'Obi-Wan',
-  lastName: 'Kenobi',
   movie: 'The Force Awakens',
   ship: 'Millennium Falcon',
   characters: ['Luke Skywalker', 'awesome'],
@@ -81,9 +80,12 @@ storiesOf('Forms', module)
     </form>
   ))
   .addWithInfo('Forms with Objects', () => (
-    <BoundForm object={formData} onSubmit={action('submit')}>
-      <FormRow label="First Name" name="firstName" required />
-      <FormRow label="Last Name" name="lastName" />
+    <BoundForm
+      object={formData}
+      errors={object('errors', { lastName: "can't be blank" })}
+      onSubmit={action('submit')}>
+      <FormRow label="First Name" name="firstName" />
+      <FormRow label="Last Name" name="lastName" required />
       <FormRow type={CurrencyInput} label="How much would you pay to meet the cast?" name="amount" />
       <FormRow type="select" label="Select Movie" name="movie">
         <FormChoice>A New Hope</FormChoice>

test/components/BoundForm.spec.js

@@ -11,25 +11,29 @@ import FormRow from '../../src/components/FormRow';
 import FormChoice from '../../src/components/FormChoice';
 
 describe('<BoundForm />', () => {
-  let data = {
+  const data = {
     firstName: 'Glenn',
     address: {
       address1: '123 awesome',
       city: 'A city'
     }
   };
 
+  const errors = {
+    firstName: "Can't be Glenn"
+  }
+
   const submitFunc = sinon.stub();
 
-  const Composite = (props) => (
+  const Composite = props => (
     <div>
       <Input name="address1" value={props.address1} />
       <Input name="city" value={props.city} />
     </div>
   );
 
   const component = shallow(
-    <BoundForm object={data} onSubmit={submitFunc}>
+    <BoundForm object={data} errors={errors} onSubmit={submitFunc}>
       <FormRow label="First Name" name="firstName" />
       <FormRow label="Last Name" name="lastName" />
       <FormRow type="checkbox" label="Foobar" name="checkboxes">
@@ -82,4 +86,16 @@ describe('<BoundForm />', () => {
     assert.equal(preventDefault.calledOnce, true);
     assert.equal(submitFunc.calledWith({ preventDefault }, component.state('formData')), true);
   });
+
+  it('should append errors', () => {
+    const row = component.find('[name="firstName"]');
+    assert.equal(row.prop('feedback'), errors.firstName);
+    assert.equal(row.prop('color'), 'danger');
+  });
+
+  it('should not have color for valid rows', () => {
+    const row = component.find('[name="address"]');
+    assert.equal(row.prop('feedback'), '');
+    assert.equal(row.prop('color'), null);
+  });
 });