switched from dynamic fromprops to specific autocomplete

CHANGELOG.md

@@ -1,5 +1,5 @@
 ### 0.1.1 (November 21, 2017)
-- added possibility to add props to form element via [formProps](https://github.com/cat-react/form/blob/master/docs/api.md#formprops) prop
+- now it is possible to add an [autoComplete](https://github.com/cat-react/form/blob/master/docs/api.md#autocomplete) prop to the form element
 - the validation rule `isRequired` now checks for `undefined`, `null` or an empty string. everything else is valid
 
 ### 0.1.0 (October 3, 2017)

docs/api.md

@@ -11,7 +11,7 @@ Welcome to the `@cat-react/form` API documentation.
     - [onValid](#onvalidvalues)
     - [onInvalid](#oninvalidvalues-isvalidating)
     - [className](#classname)
-    - [formProps](#formprops)
+    - [autoComplete](#autocomplete)
 - [Input](#input) (HOC for building input fields)
     - Retrieves
         - [value](#value)
@@ -308,12 +308,12 @@ will result in:
 
 ---
 
-### formProps
-Props which will be passed directly to the <form> html element.
+### autoComplete
+AutoComplete prop which will be passed directly to the <form> html element.
 
 For example:
 ```jsx
-<Form formProps={{autocomplete: 'off'}} />
+<Form autoComplete="off" />
 ```
 
 will result in:

examples/Login/index.js

@@ -42,7 +42,8 @@ export default class extends React.Component {
             <Form onValid={this.onValid}
                   onInvalid={this.onInvalid}
                   onSubmit={this.onSubmit}
-                  onValidSubmit={this.onValidSubmit}>
+                  onValidSubmit={this.onValidSubmit}
+                  autoComplete="off">
                 <h1>Login</h1>
                 <BasicInput label="Email address"
                             name="email"

src/Form.js

@@ -205,10 +205,15 @@ export default class Form extends React.Component {
     }
 
     render() {
-        const {children, className, formProps} = this.props;
+        const {children, className, autoComplete} = this.props;
+
+        const formProps = {
+            className,
+            autoComplete
+        };
 
         return (
-            <form className={className} {...formProps} onSubmit={this.onSubmit}>
+            <form {...formProps} onSubmit={this.onSubmit}>
                 {children}
             </form>
         );

tests/Form.spec.js

@@ -43,12 +43,9 @@ describe('Form', () => {
         expect(onInvalid).not.toHaveBeenCalled();
     });
 
-    it('should pass all props', () => {
-        let wrapper = shallow(<Form className="myForm" formProps={{autocomplete: 'off', fantasy: true}}><span className="abc">abc</span></Form>);
-        const props = wrapper.props();
-        expect(props.autocomplete).toBe('off');
-        expect(props.className).toBe('myForm');
-        expect(props.fantasy).toBe(true);
+    it('should pass all props correctly', () => {
+        let wrapper = shallow(<Form className="myForm" autoComplete="off"><span className="abc">abc</span></Form>);
+        expect(wrapper.html()).toBe('<form class="myForm" autocomplete="off"><span class="abc">abc</span></form>');
     });
 
     it('should add the vaidationRule', () => {