Add support for disabled buttons

SpareBank1 · May 18, 2016 · 3cf206a · 3cf206a
1 parent b4a0c0c
commit 3cf206a
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 1 deletion.
diff --git a/CHANGELOG.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,