v1.4.0 - support for noMargins-flag, disabling top and bottom margins

SpareBank1 · Jun 6, 2016 · aa66418 · aa66418
1 parent 659bdce
commit aa66418
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git 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`:
 
 ```
-<Checkbox
-        onChange={ function }
-        checked={ boolean }
-        name={ string } >
+<Checkbox>
     <Icon />
     Some text
     <AnotherIcon />

diff --git 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 => <Checkbox
                             checked={props.checked}
                             name={props.name}
                             label={props.label}
+                            noMargins={props.noMargins}
                         />;
diff --git 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
@@ -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  <span>
                 <input 
@@ -13,7 +19,7 @@ export default function CheckBox({ name, label, onChange, checked, children }) {
                     name={name}
                     id={id}
                 />
-                <label className="ffe-checkbox ffe-checkbox--inline" htmlFor={id}>
+                <label className={ classes } htmlFor={id}>
                     {label || children}
                 </label>
             </span>;
@@ -24,5 +30,6 @@ CheckBox.propTypes = {
     label: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     checked: PropTypes.bool,
+    noMargins: PropTypes.bool,
     children: PropTypes.array
 };
diff --git a/src/checkbox.test.js b/src/checkbox.test.js
@@ -50,5 +50,15 @@ describe('<Checkbox />', () => {
             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);
+    });
 
 });