diff --git a/README.md b/README.md index af2fc8e97a..669f02f449 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # ffe-checkbox-react -React implementation of the checkbox found in FFE. +React implementation of the checkbox found in FFE ## Install @@ -20,17 +20,15 @@ import Checkbox from 'ffe-checkbox-react'; onChange={ function } checked={ boolean } name={ string } - label={ string } + label={ string } + noMargins={ boolean} // disables top- and bottom margins, useful for use in tables etc /> ``` -If you need a description thats more complex than just a string, use `children`: +If you need a more complex description, use `children`: ``` - + Some text diff --git a/docs/example-component.js b/docs/example-component.js index 80ead6a2e0..610b8fa643 100644 --- a/docs/example-component.js +++ b/docs/example-component.js @@ -1,4 +1,4 @@ -import Checkbox from '../lib/checkbox'; +import Checkbox from '../src/checkbox'; import React from 'react'; export const MainExample = ( @@ -15,4 +15,5 @@ export default props => ; \ No newline at end of file diff --git a/package.json b/package.json index 4072553d8a..bfb9eb82cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffe-checkbox-react", - "version": "1.3.0", + "version": "1.4.0", "main": "lib/checkbox.js", "scripts": { "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example", @@ -18,6 +18,7 @@ "ffe-core": "^6.0.0" }, "dependencies": { + "classnames": "2.2.5", "nfe-hash": "^1.1.0" }, "devDependencies": { diff --git a/src/checkbox.js b/src/checkbox.js index 78bb90aa0a..c1fa34aa49 100644 --- a/src/checkbox.js +++ b/src/checkbox.js @@ -1,8 +1,14 @@ import React, { PropTypes } from 'react'; import hash from 'nfe-hash'; +import classNames from 'classnames'; -export default function CheckBox({ name, label, onChange, checked, children }) { +export default function CheckBox({ name, label, onChange, checked, children, noMargins }) { const id = `checkbox-${hash(name)}`; + const classes = classNames({ + 'ffe-checkbox': true, + 'ffe-checkbox--inline': true, + 'ffe-checkbox--no-margins': noMargins + }); return - ; @@ -24,5 +30,6 @@ CheckBox.propTypes = { label: PropTypes.string.isRequired, onChange: PropTypes.func, checked: PropTypes.bool, + noMargins: PropTypes.bool, children: PropTypes.array }; \ No newline at end of file diff --git a/src/checkbox.test.js b/src/checkbox.test.js index f0575811a4..05c3af2ed2 100644 --- a/src/checkbox.test.js +++ b/src/checkbox.test.js @@ -50,5 +50,15 @@ describe('', () => { wrapper.find('input').prop('id') ); }); + + it('should support noMargins', () => { + assert.equal( + shallow(CreateCheckbox({ noMargins: false })).find('.ffe-checkbox--no-margins').length, + 0); + + assert.equal( + shallow(CreateCheckbox({ noMargins: true })).find('.ffe-checkbox--no-margins').length, + 1); + }); });