v2.3.0

SpareBank1 · Jul 11, 2016 · 51f135d · 51f135d
1 parent 80c7681
commit 51f135d
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 175 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,8 +2,11 @@
   "extends": "airbnb",
   "rules": {
     "indent": [2, 4, { "SwitchCase": 1 }],
-    "react/jsx-indent": [2, 4],
-    "react/jsx-indent-props": [2, 4]
+    "react/jsx-indent": 0,
+    "react/jsx-indent-props": [2, 4],
+    "react/wrap-multilines": 0,
+    "eol-last": 0,
+    "comma-dangle": 0
   },
   "env": {
     "mocha": true

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.3.0
+
+* Buttons now accepts inline styles as a `style` prop
+
 ## v2.2.0
 
 * Added tertiary button

diff --git a/README.md b/README.md
@@ -92,3 +92,11 @@ to disable a button, you can do this as well by setting the `disableButton` prop
 ```
 
 This works for all button types, but make sure you have a really good reason for using it!
+
+### Styling
+
+Any style attributes given to a button component will be passed on to the underlying html button element.
+
+```javascript
+<Button style={{transform: 'rotate(30deg)'}}>...</Button>
+```
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "ffe-button-react",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React implementation of ffe-button",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/.",
     "lint": "eslint src/.",
     "test:nsp": "nsp check",
-    "test:spec": "mocha --require babel-register --reporter mocha-tap13 src/**/*.test.js",
+    "test:spec": "mocha --require babel-register src/**/*.test.js",
+    "tdd": "mocha --require babel-register src/**/*.test.js -w",
     "test": "npm run test:spec && npm run test:nsp",
     "prepublish": "npm run build",
     "has-published": "npm show . versions -s | grep -q ${npm_package_version}"

diff --git a/src/ActionButton.js b/src/ActionButton.js
@@ -2,43 +2,12 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function ActionButton(props) {
-    const {
-        action,
-        ariaLoadingMessage,
-        children,
-        disableButton,
-        id,
-        isLoading,
-        label,
-        onClick,
-        isTabbable,
-    } = props;
-
-    return (
-        <Button
-            action={action}
-            ariaLoadingMessage={ariaLoadingMessage}
-            disableButton={disableButton}
-            id={id}
-            isLoading={isLoading}
-            label={label}
-            onClick={onClick}
-            type="action"
-            isTabbable={isTabbable}
-        >
-            {children}
-        </Button>
-    );
+    return <Button {...props} type="action">
+                {props.children}
+            </Button>;
 }
 
+
 ActionButton.propTypes = {
-    action: PropTypes.string,
-    ariaLoadingMessage: PropTypes.string,
-    children: PropTypes.node,
-    disableButton: PropTypes.bool,
-    id: PropTypes.string,
-    isLoading: PropTypes.bool,
-    label: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    isTabbable: PropTypes.bool,
-};
+    children: PropTypes.node
+};
diff --git a/src/Button.js b/src/Button.js
@@ -12,9 +12,11 @@ export default function Button(props) {
         onClick,
         type = 'primary',
         simpleContent = false,
+        style = {},
         isTabbable,
     } = props;
     const tabIndex = isTabbable ? 0 : -1;
+
     return (
         <button
             onClick={onClick}
@@ -24,6 +26,7 @@ export default function Button(props) {
             disabled={disableButton}
             aria-disabled={disableButton}
             tabIndex={tabIndex}
+            style={style}
         >
             {simpleContent ?
                 (label || children) :
@@ -58,4 +61,5 @@ Button.propTypes = {
     type: PropTypes.string,
     simpleContent: PropTypes.bool,
     isTabbable: PropTypes.bool,
+    style: PropTypes.object
 };
diff --git a/src/PrimaryButton.js b/src/PrimaryButton.js
@@ -2,43 +2,11 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function PrimaryButton(props) {
-    const {
-        action,
-        ariaLoadingMessage,
-        children,
-        disableButton,
-        id,
-        isLoading,
-        label,
-        onClick,
-        isTabbable,
-    } = props;
-
-    return (
-        <Button
-            action={action}
-            ariaLoadingMessage={ariaLoadingMessage}
-            disableButton={disableButton}
-            id={id}
-            isLoading={isLoading}
-            label={label}
-            onClick={onClick}
-            type="primary"
-            isTabbable={isTabbable}
-        >
-            {children}
-        </Button>
-    );
+    return <Button {...props} type="primary">
+                {props.children}
+            </Button>;
 }
 
 PrimaryButton.propTypes = {
-    action: PropTypes.string,
-    ariaLoadingMessage: PropTypes.string,
-    children: PropTypes.node,
-    disableButton: PropTypes.bool,
-    id: PropTypes.string,
-    isLoading: PropTypes.bool,
-    label: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    isTabbable: PropTypes.bool,
-};
+    children: PropTypes.node
+};
diff --git a/src/SecondaryButton.js b/src/SecondaryButton.js
@@ -2,43 +2,12 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function SecondaryButton(props) {
-    const {
-        action,
-        ariaLoadingMessage,
-        children,
-        disableButton,
-        id,
-        isLoading,
-        label,
-        onClick,
-        isTabbable,
-    } = props;
-
-    return (
-        <Button
-            action={action}
-            ariaLoadingMessage={ariaLoadingMessage}
-            disableButton={disableButton}
-            id={id}
-            isLoading={isLoading}
-            label={label}
-            onClick={onClick}
-            type="secondary"
-            isTabbable={isTabbable}
-        >
-            {children}
-        </Button>
-    );
+    return <Button {...props} type="secondary">
+                {props.children}
+            </Button>;
 }
 
+
 SecondaryButton.propTypes = {
-    action: PropTypes.string,
-    ariaLoadingMessage: PropTypes.string,
-    children: PropTypes.node,
-    disableButton: PropTypes.bool,
-    id: PropTypes.string,
-    isLoading: PropTypes.bool,
-    label: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    isTabbable: PropTypes.bool,
-};
+    children: PropTypes.node
+};
diff --git a/src/ShortcutButton.js b/src/ShortcutButton.js
@@ -2,43 +2,11 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function ShortcutButton(props) {
-    const {
-        action,
-        ariaLoadingMessage,
-        children,
-        disableButton,
-        id,
-        isLoading,
-        label,
-        onClick,
-        isTabbable,
-    } = props;
-
-    return (
-        <Button
-            action={action}
-            ariaLoadingMessage={ariaLoadingMessage}
-            disableButton={disableButton}
-            id={id}
-            isLoading={isLoading}
-            label={label}
-            onClick={onClick}
-            type="shortcut"
-            isTabbable={isTabbable}
-        >
-            {children}
-        </Button>
-    );
+    return <Button {...props} type="shortcut">
+                {props.children}
+            </Button>;
 }
 
 ShortcutButton.propTypes = {
-    action: PropTypes.string,
-    ariaLoadingMessage: PropTypes.string,
-    children: PropTypes.node,
-    disableButton: PropTypes.bool,
-    id: PropTypes.string,
-    isLoading: PropTypes.bool,
-    label: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    isTabbable: PropTypes.bool,
-};
+    children: PropTypes.node
+};
diff --git a/src/TertiaryButton.js b/src/TertiaryButton.js
@@ -2,29 +2,9 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function TertiaryButton(props) {
-    const {
-        action,
-        children,
-        disableButton,
-        id,
-        label,
-        onClick,
-        isTabbable = true,
-    } = props;
-    return (
-        <Button
-            action={action}
-            disableButton={disableButton}
-            id={id}
-            label={label}
-            onClick={onClick}
-            type="tertiary"
-            simpleContent
-            isTabbable={isTabbable}
-        >
-            {children}
-        </Button>
-    );
+    return <Button {...props} type="tertiary" simpleContent>
+                {props.children}
+            </Button>;
 }
 
 TertiaryButton.propTypes = {