Support for arbitrary props and change of onChange to return event in…

…stead of value.

.npmrc

@@ -1 +1,2 @@
 git-tag-version=false
+registry=***REMOVED***

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.0.0
+
+* Added support for arbitrary props on the input
+* Breaking: Removed 'isTabbable' prop - use 'tabIndex' instead!
+* Breaking: onChange now returns the event instead of just returning the value of the checkbox.
+
 ## 2.2.1
 
 * Added support for ffe-form version 3.x.x

README.md

@@ -23,7 +23,6 @@ import Checkbox from 'ffe-checkbox-react';
         name={ string }
         label={ string }
         noMargins={ boolean } // disables top- and bottom margins, useful for use in tables etc
-        isTabbable={ false } // Remove checkbox from tab order by setting it to false. Defaults to true.
 />
 ```
 

docs/example-component.js

@@ -3,18 +3,10 @@ import React from 'react';
 
 export const MainExample = (
     <Checkbox
-        onChange={ () => {} }
         checked={false}
         name="Yellow"
         label="Yellow"
     />
 );
 
-export default props => <Checkbox
-                            onChange={props.onChange}
-                            checked={props.checked}
-                            name={props.name}
-                            label={props.label}
-                            noMargins={props.noMargins}
-                            isTabbable={props.isTabbable}
-                        />;
+export default props => <Checkbox {...props} />;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-checkbox-react",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "main": "lib/checkbox.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",
@@ -27,6 +27,7 @@
     "babel-cli": "6.7.5",
     "babel-plugin-react-remove-prop-types": "^2.0.2",
     "babel-plugin-remove-proptypes": "^1.0.3",
+    "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.5.0",
     "babel-register": "^6.4.3",
@@ -61,7 +62,8 @@
       "react"
     ],
     "plugins": [
-      "react-remove-prop-types"
+      "react-remove-prop-types",
+      "transform-object-rest-spread"
     ]
   }
 }

src/checkbox.js

@@ -2,28 +2,37 @@ import React, { PropTypes } from 'react';
 import hash from 'nfe-hash';
 import classNames from 'classnames';
 
-export default function CheckBox({ name, label, onChange, checked, children, noMargins, isTabbable }) {
-    const id = `checkbox-${hash(name)}`;
-    const classes = classNames({
-        'ffe-checkbox': true,
-        'ffe-checkbox--inline': true,
-        'ffe-checkbox--no-margin': noMargins
-    });
+export default function CheckBox(props) {
+    const {
+        children,
+        label,
+        noMargins,
+        onChange,
+        ...rest,
+    } = props;
 
-    return  <span>
-                <input
-                    onChange={() => onChange(!checked) }
-                    className="ffe-hidden-checkbox"
-                    type="checkbox"
-                    checked={checked}
-                    name={name}
-                    id={id}
-                    {... isTabbable === false ? { tabIndex: '-1' } : {}}
-                />
-                <label className={ classes } htmlFor={id}>
-                    {label || children}
-                </label>
-            </span>;
+    const id = `checkbox-${hash(rest.name)}`;
+
+    return (
+        <span>
+            <input
+                onChange={onChange || (f => f)}
+                className="ffe-hidden-checkbox"
+                id={id}
+                type="checkbox"
+                {...rest}
+            />
+            <label
+                className={classNames({
+                    'ffe-checkbox': true,
+                    'ffe-checkbox--inline': true,
+                    'ffe-checkbox--no-margin': noMargins
+                })}
+                htmlFor={id}
+            >
+                {label || children}
+            </label>
+        </span>);
 }
 
 CheckBox.propTypes = {
@@ -33,9 +42,4 @@ CheckBox.propTypes = {
     checked: PropTypes.bool,
     noMargins: PropTypes.bool,
     children: PropTypes.array,
-    isTabbable: PropTypes.bool
-};
-
-CheckBox.defaultProps = {
-    isTabbable: true
 };

src/checkbox.test.js

@@ -19,19 +19,13 @@ describe('<Checkbox />', () => {
     });
 
     it('should call onChange with the correct parameter', () => {
-        let spy = sinon.spy();
-
-        let wrapper = shallow(CreateCheckbox({ onChange: spy }));
-
-        wrapper.find('input').simulate('change');
-        assert.equal(spy.args[0][0], true);
-
-        spy = sinon.spy();
-        wrapper = shallow(CreateCheckbox({ onChange: spy, checked: true }));
+        const mockEvent = { target: { value: true } };
+        const spy = sinon.spy();
 
-        wrapper.find('input').simulate('change');
-        assert.equal(spy.args[0][0], false);
+        const wrapper = shallow(CreateCheckbox({ onChange: spy }));
 
+        wrapper.find('input').simulate('change', mockEvent);
+        assert.equal(spy.firstCall.args[0], mockEvent);
     });
 
     it('should render a default value if passed', () => {
@@ -61,16 +55,18 @@ describe('<Checkbox />', () => {
             1);
     });
 
-    it('should not set tabindex by default', () => {
-        const wrapper = shallow(CreateCheckbox({}));
-        assert.equal(
-            wrapper.find('input').prop('tabIndex'), undefined);
-    });
-
-    it('should support removing input from taborder', () => {
-        const wrapper = shallow(CreateCheckbox({ isTabbable: false }));
-        assert.equal(
-            wrapper.find('input').prop('tabIndex'), -1);
+    it('should set arbitrary props (rest) on input', () => {
+        const wrapper = shallow(CreateCheckbox({
+            name: 'checkbox',
+            iDontReallyDoAnything: 'false',
+            tabIndex: -1,
+            'aria-invalid': true,
+        }));
+
+        assert.equal(wrapper.find('input').prop('name'), 'checkbox');
+        assert.equal(wrapper.find('input').prop('aria-invalid'), true);
+        assert.equal(wrapper.find('input').prop('iDontReallyDoAnything'), 'false');
+        assert.equal(wrapper.find('input').prop('tabIndex'), -1);
     });
 
 });