Merge pull request #9 in FFE/ffe-button-react from feature/add-tertia…

…ry-button to master * commit '37f6c1adf5b540644761784fe968b378e73e3383': DIG-tertiary added tertiary button, since it seems like it belongs here
SpareBank1 · Jun 28, 2016 · 80c7681 · 80c7681
2 parents a262e18 + 28df957
commit 80c7681
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.2.0
+
+* Added tertiary button
+
 ## v2.1.0
 
 * Deprecated the 'FFE' prefix in all button names.

diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ You are free to pick between using the base `Button` component or any of the des
 * `PrimaryButton`
 * `SecondaryButton`
 * `ShortcutButton`
+* `TertiaryButton`
 
 If no type property is given to `Button` it defaults to `primary`.
 
@@ -39,6 +40,7 @@ There are components available for all the button types
 <PrimaryButton onClick={clickHandler}>...</PrimaryButton>
 <SecondaryButton onClick={clickHandler}>...</SecondaryButton>
 <ShortcutButton onClick={clickHandler}>...</ShortcutButton>
+<TertiaryButton onClick={clickHandler}>...</TertiaryButton>
 ```
 
 If you want, you can use Button directly, but you must provide the type property if you want anything other than `primary`:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-button-react",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React implementation of ffe-button",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/Button.js b/src/Button.js
@@ -11,8 +11,9 @@ export default function Button(props) {
         label,
         onClick,
         type = 'primary',
+        simpleContent = false,
         isTabbable,
-        } = props;
+    } = props;
     const tabIndex = isTabbable ? 0 : -1;
     return (
         <button
@@ -24,20 +25,23 @@ export default function Button(props) {
             aria-disabled={disableButton}
             tabIndex={tabIndex}
         >
-            <span className={`ffe-${type}-button__label`}>
-                <span
-                    className={`ffe-${type}-button__label-text
-                    ${isLoading ? `ffe-${type}-button__label-text--loading` : ''}`}
-                >
-                    {label || children}
+            {simpleContent ?
+                (label || children) :
+                <span className={`ffe-${type}-button__label`}>
+                    <span
+                        className={`ffe-${type}-button__label-text
+                        ${isLoading ? `ffe-${type}-button__label-text--loading` : ''}`}
+                    >
+                        {label || children}
+                    </span>
+                    <span
+                        className={`ffe-${type}-button__label-spinner`}
+                        aria-hidden={!isLoading}
+                    >
+                        {ariaLoadingMessage}
+                    </span>
                 </span>
-                <span
-                    className={`ffe-${type}-button__label-spinner`}
-                    aria-hidden={!isLoading}
-                >
-                    {ariaLoadingMessage}
-                </span>
-            </span>
+            }
         </button>
     );
 }
@@ -52,5 +56,6 @@ Button.propTypes = {
     label: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     type: PropTypes.string,
+    simpleContent: PropTypes.bool,
     isTabbable: PropTypes.bool,
 };
diff --git a/src/Button.test.js b/src/Button.test.js
@@ -8,6 +8,7 @@ import Button from './Button';
 import PrimaryButton from './PrimaryButton';
 import SecondaryButton from './SecondaryButton';
 import ShortcutButton from './ShortcutButton';
+import TertiaryButton from './TertiaryButton';
 
 describe('Button components:', () => {
     it('Button by default renders a primary button', () => {
@@ -60,6 +61,16 @@ describe('Button components:', () => {
         expect(wrapper.find('.ffe-shortcut-button__label-text').text()).to.equal('Hello');
     });
 
+    it('TertiaryButton renders a tertiary button', () => {
+        let wrapper = render(<TertiaryButton onClick={() => ({})}>Hello</TertiaryButton>);
+        expect(wrapper.find('.ffe-tertiary-button')).to.have.length(1);
+        expect(wrapper.find('.ffe-tertiary-button').text()).to.equal('Hello');
+
+        wrapper = render(<TertiaryButton onClick={() => ({})} label="Hello" />);
+        expect(wrapper.find('.ffe-tertiary-button')).to.have.length(1);
+        expect(wrapper.find('.ffe-tertiary-button').text()).to.equal('Hello');
+    });
+
     it('isLoading prop toggles aria-hidden and classes with --loading modifier', () => {
         let wrapper = render(<Button onClick={() => ({})}>Hello</Button>);
         expect(wrapper.find('.ffe-primary-button--loading')).to.have.length(0);
@@ -116,6 +127,13 @@ describe('Button components:', () => {
         expect(wrapper.find('Button').prop('disableButton')).to.be.equal(true);
     });
 
+    it('TertiaryButton passes disableButton on to Button', () => {
+        const wrapper = shallow(
+            <TertiaryButton disableButton onClick={() => ({})}>Hello</TertiaryButton>
+        );
+        expect(wrapper.find('Button').prop('disableButton')).to.be.equal(true);
+    });
+
     it('runs the function passed as onClick when clicked', () => {
         let onClick = spy();
         const wrapper = shallow(<Button onClick={onClick}>Hello</Button>);
@@ -155,7 +173,7 @@ describe('Button components:', () => {
         expect(wrapper.find('Button').prop('isTabbable')).to.be.equal(true);
     });
 
-    it('SecondaryButton passes tabability on to Button', () => {
+    it('SecondaryButton passes tabbability on to Button', () => {
         const wrapper = shallow(
             <SecondaryButton disableButton onClick={() => ({})} isTabbable>Hello</SecondaryButton>
         );
@@ -168,4 +186,11 @@ describe('Button components:', () => {
         );
         expect(wrapper.find('Button').prop('isTabbable')).to.be.equal(true);
     });
+
+    it('TertiaryButton passes tabbability on to Button', () => {
+        const wrapper = shallow(
+            <TertiaryButton disableButton onClick={() => ({})} isTabbable>Hello</TertiaryButton>
+        );
+        expect(wrapper.find('Button').prop('isTabbable')).to.be.equal(true);
+    });
 });
diff --git a/src/TertiaryButton.js b/src/TertiaryButton.js
@@ -0,0 +1,38 @@
+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>
+    );
+}
+
+TertiaryButton.propTypes = {
+    action: PropTypes.string,
+    children: PropTypes.node,
+    disableButton: PropTypes.bool,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    isTabbable: PropTypes.bool,
+};
diff --git a/src/index.js b/src/index.js
@@ -3,13 +3,15 @@ import Button from './Button';
 import PrimaryButton from './PrimaryButton';
 import SecondaryButton from './SecondaryButton';
 import ShortcutButton from './ShortcutButton';
+import TertiaryButton from './TertiaryButton';
 
 export {
     ActionButton,
     Button,
     PrimaryButton,
     SecondaryButton,
     ShortcutButton,
+    TertiaryButton,
 
     // DEPRECATED
     ActionButton as FFEActionButton,