From 3cf206a16ba112fd42b3bfc5dc07615213223ada Mon Sep 17 00:00:00 2001
From: Henrik Hedlund <henrik.hedlund@sparebank1.no>
Date: Tue, 10 May 2016 10:19:45 +0200
Subject: [PATCH] Add support for disabled buttons

---
 CHANGELOG.md              |  9 +++++++++
 README.md                 | 16 +++++++++++++++
 package.json              |  2 +-
 src/FFEActionButton.js    |  3 +++
 src/FFEButton.js          |  4 ++++
 src/FFEButton.test.js     | 42 +++++++++++++++++++++++++++++++++++++++
 src/FFEPrimaryButton.js   |  3 +++
 src/FFESecondaryButton.js |  3 +++
 src/FFEShortcutButton.js  |  3 +++
 9 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000..52644009d3
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+
+## v1.1.0
+
+* Add `disableButton` support.
+
+## v1.0.0
+
+* First version.
diff --git a/README.md b/README.md
index da09cccfa9..73f29ddae1 100644
--- a/README.md
+++ b/README.md
@@ -74,3 +74,19 @@ If you need to change this text, override it with the `ariaLoadingMessage` prope
     ...
 </FFEPrimaryButton>
 ```
+
+
+### Disabled state
+
+Disabled buttons are not allowed in accordance to the FFE guidelines. However, in case you need
+to disable a button, you can do this as well by setting the `disableButton` property:
+
+```javascript
+<FFEPrimaryButton disableButton onClick={clickHandler}>...</FFEPrimaryButton>
+
+<FFEButton disableButton label="Hello" onClick={clickHandler} />
+
+<FFESecondaryButton disableButton onClick={clickHandler}>...</FFESecondaryButton>
+```
+
+This works for all button types, but make sure you have a really good reason for using it!
diff --git a/package.json b/package.json
index e8fa2f8d9f..06e2d16a99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-button-react",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React implementation of ffe-button",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/FFEActionButton.js b/src/FFEActionButton.js
index 5699e5749f..8656d17e1b 100644
--- a/src/FFEActionButton.js
+++ b/src/FFEActionButton.js
@@ -6,6 +6,7 @@ export default function FFEActionButton(props) {
         action,
         ariaLoadingMessage,
         children,
+        disableButton,
         id,
         isLoading,
         label,
@@ -16,6 +17,7 @@ export default function FFEActionButton(props) {
         <FFEButton
             action={action}
             ariaLoadingMessage={ariaLoadingMessage}
+            disableButton={disableButton}
             id={id}
             isLoading={isLoading}
             label={label}
@@ -31,6 +33,7 @@ FFEActionButton.propTypes = {
     action: PropTypes.string,
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
+    disableButton: PropTypes.bool,
     id: PropTypes.string,
     isLoading: PropTypes.bool,
     label: PropTypes.string,
diff --git a/src/FFEButton.js b/src/FFEButton.js
index 21bfb12043..6cab837f97 100644
--- a/src/FFEButton.js
+++ b/src/FFEButton.js
@@ -5,6 +5,7 @@ export default function FFEButton(props) {
         action,
         ariaLoadingMessage = 'Vennligst vent',
         children,
+        disableButton,
         id,
         isLoading,
         label,
@@ -18,6 +19,8 @@ export default function FFEButton(props) {
             className={`ffe-${type}-button ${isLoading ? `ffe-${type}-button--loading` : ''}`}
             data-action={action}
             id={id}
+            disabled={disableButton}
+            aria-disabled={disableButton}
         >
             <span className={`ffe-${type}-button__label`}>
                 <span
@@ -41,6 +44,7 @@ FFEButton.propTypes = {
     action: PropTypes.string,
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
+    disableButton: PropTypes.bool,
     id: PropTypes.string,
     isLoading: PropTypes.bool,
     label: PropTypes.string,
diff --git a/src/FFEButton.test.js b/src/FFEButton.test.js
index fca1317a08..d2e802ba5e 100644
--- a/src/FFEButton.test.js
+++ b/src/FFEButton.test.js
@@ -74,6 +74,48 @@ describe('Button components:', () => {
             .to.equal('false');
     });
 
+    it('buttons should not be disabled by default', () => {
+        const wrapper = shallow(<FFEButton onClick={() => ({})}>Hello</FFEButton>);
+        const button = wrapper.find('button');
+        expect(button.prop('disabled')).to.be.equal(undefined);
+        expect(button.prop('aria-disabled')).to.be.equal(undefined);
+    });
+
+    it('disableButton prop disables the button', () => {
+        const wrapper = shallow(<FFEButton disableButton onClick={() => ({})}>Hello</FFEButton>);
+        const button = wrapper.find('button');
+        expect(button.prop('disabled')).to.be.equal(true);
+        expect(button.prop('aria-disabled')).to.be.equal(true);
+    });
+
+    it('FFEActionButton passes disableButton on to FFEButton', () => {
+        const wrapper = shallow(
+            <FFEActionButton disableButton onClick={() => ({})}>Hello</FFEActionButton>
+        );
+        expect(wrapper.find('FFEButton').prop('disableButton')).to.be.equal(true);
+    });
+
+    it('FFEPrimaryButton passes disableButton on to FFEButton', () => {
+        const wrapper = shallow(
+            <FFEPrimaryButton disableButton onClick={() => ({})}>Hello</FFEPrimaryButton>
+        );
+        expect(wrapper.find('FFEButton').prop('disableButton')).to.be.equal(true);
+    });
+
+    it('FFESecondaryButton passes disableButton on to FFEButton', () => {
+        const wrapper = shallow(
+            <FFESecondaryButton disableButton onClick={() => ({})}>Hello</FFESecondaryButton>
+        );
+        expect(wrapper.find('FFEButton').prop('disableButton')).to.be.equal(true);
+    });
+
+    it('FFEShortcutButton passes disableButton on to FFEButton', () => {
+        const wrapper = shallow(
+            <FFEShortcutButton disableButton onClick={() => ({})}>Hello</FFEShortcutButton>
+        );
+        expect(wrapper.find('FFEButton').prop('disableButton')).to.be.equal(true);
+    });
+
     it('runs the function passed as onClick when clicked', () => {
         let onClick = spy();
         const wrapper = shallow(<FFEButton onClick={onClick}>Hello</FFEButton>);
diff --git a/src/FFEPrimaryButton.js b/src/FFEPrimaryButton.js
index 37eb982664..1730726808 100644
--- a/src/FFEPrimaryButton.js
+++ b/src/FFEPrimaryButton.js
@@ -6,6 +6,7 @@ export default function FFEPrimaryButton(props) {
         action,
         ariaLoadingMessage,
         children,
+        disableButton,
         id,
         isLoading,
         label,
@@ -16,6 +17,7 @@ export default function FFEPrimaryButton(props) {
         <FFEButton
             action={action}
             ariaLoadingMessage={ariaLoadingMessage}
+            disableButton={disableButton}
             id={id}
             isLoading={isLoading}
             label={label}
@@ -31,6 +33,7 @@ FFEPrimaryButton.propTypes = {
     action: PropTypes.string,
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
+    disableButton: PropTypes.bool,
     id: PropTypes.string,
     isLoading: PropTypes.bool,
     label: PropTypes.string,
diff --git a/src/FFESecondaryButton.js b/src/FFESecondaryButton.js
index 83bc2cff9b..983bd99517 100644
--- a/src/FFESecondaryButton.js
+++ b/src/FFESecondaryButton.js
@@ -6,6 +6,7 @@ export default function FFESecondaryButton(props) {
         action,
         ariaLoadingMessage,
         children,
+        disableButton,
         id,
         isLoading,
         label,
@@ -16,6 +17,7 @@ export default function FFESecondaryButton(props) {
         <FFEButton
             action={action}
             ariaLoadingMessage={ariaLoadingMessage}
+            disableButton={disableButton}
             id={id}
             isLoading={isLoading}
             label={label}
@@ -31,6 +33,7 @@ FFESecondaryButton.propTypes = {
     action: PropTypes.string,
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
+    disableButton: PropTypes.bool,
     id: PropTypes.string,
     isLoading: PropTypes.bool,
     label: PropTypes.string,
diff --git a/src/FFEShortcutButton.js b/src/FFEShortcutButton.js
index 92d3246345..1eef041a35 100644
--- a/src/FFEShortcutButton.js
+++ b/src/FFEShortcutButton.js
@@ -6,6 +6,7 @@ export default function FFEShortcutButton(props) {
         action,
         ariaLoadingMessage,
         children,
+        disableButton,
         id,
         isLoading,
         label,
@@ -16,6 +17,7 @@ export default function FFEShortcutButton(props) {
         <FFEButton
             action={action}
             ariaLoadingMessage={ariaLoadingMessage}
+            disableButton={disableButton}
             id={id}
             isLoading={isLoading}
             label={label}
@@ -31,6 +33,7 @@ FFEShortcutButton.propTypes = {
     action: PropTypes.string,
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
+    disableButton: PropTypes.bool,
     id: PropTypes.string,
     isLoading: PropTypes.bool,
     label: PropTypes.string,