FFE-198: Add condensed view for button

SpareBank1 · May 18, 2017 · 7e94c86 · 7e94c86
1 parent 7d66387
commit 7e94c86
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/examples/buttons.js b/examples/buttons.js
@@ -22,18 +22,33 @@ function ButtonsExample() {
       <div className="ffe-content-container">
         <ActionButton>I'm an action button</ActionButton>
       </div>
+      <div className="ffe-content-container">
+        <ActionButton condensed>Condensed action button</ActionButton>
+      </div>
       <div className="ffe-content-container">
         <PrimaryButton>I'm a primary button</PrimaryButton>
       </div>
+      <div className="ffe-content-container">
+        <PrimaryButton condensed>Condensed primary button</PrimaryButton>
+      </div>
       <div className="ffe-content-container">
         <SecondaryButton>I'm a secondary button</SecondaryButton>
       </div>
+      <div className="ffe-content-container">
+        <SecondaryButton condensed>Condensed secondary button</SecondaryButton>
+      </div>
       <div className="ffe-content-container">
         <ShortcutButton>I'm a shortcut button</ShortcutButton>
       </div>
+      <div className="ffe-content-container">
+        <ShortcutButton condensed>Condensed shortcut button</ShortcutButton>
+      </div>
       <div className="ffe-content-container">
         <TertiaryButton>I'm a tertiary button</TertiaryButton>
       </div>
+      <div className="ffe-content-container">
+        <TertiaryButton condensed>Condensed tertiary button</TertiaryButton>
+      </div>
       <div className="ffe-content-container">
         <BackButton>I'm a back button</BackButton>
       </div>

diff --git a/src/Button.js b/src/Button.js
@@ -2,7 +2,6 @@ import React, { cloneElement, PropTypes } from 'react';
 
 export default function Button(props) {
     const decorate = (icon, buttonType) => cloneElement(icon, { className: `ffe-${buttonType}-button__label-icon` });
-
     const {
         action,
         ariaLoadingMessage = 'Vennligst vent',
@@ -15,16 +14,19 @@ export default function Button(props) {
         label,
         leftIcon,
         rightIcon,
+        condensed,
         simpleContent = false,
         ...rest
     } = props;
+
     const loadingClass = isLoading ? `ffe-${buttonType}-button--loading` : '';
+    const condensedClass = condensed ? `ffe-${buttonType}-button--condensed` : '';
 
     return (
         <button
             aria-disabled={disableButton}
             aria-busy={isLoading}
-            className={`ffe-${buttonType}-button ${loadingClass} ${className}`}
+            className={`ffe-${buttonType}-button ${loadingClass} ${condensedClass} ${className}`}
             data-action={action}
             disabled={disableButton || isLoading}
             {... isTabbable === false ? { tabIndex: -1 } : {}}
@@ -58,6 +60,7 @@ Button.propTypes = {
     ariaLoadingMessage: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
+    condensed: PropTypes.bool,
     disableButton: PropTypes.bool,
     buttonType: PropTypes.oneOf([
         'action',

diff --git a/src/Button.test.js b/src/Button.test.js
@@ -147,5 +147,12 @@ describe('Button', () => {
                 expect(wrapper.find('button').prop('autoFocus')).to.be.true;
             });
         });
+
+        describe('condensed', () => {
+            it('has condensed class', () => {
+                const button = shallow(<Button condensed={true} />);
+                expect(button).to.have.className('ffe-primary-button--condensed');
+            });
+        });
     });
 });