Merge pull request #30 in FFE/ffe-buttons-react from ffe-152-icon-sup…

…port to master

* commit '46cc66d26dac98a5633796cdaa8705ff05d60849':
  FFE-152: Added support for left and right icon in Button * Added support for left icon in SecondaryButton and TertiaryButton * Updated changelog, readme and package.json

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v5.2.0
+* Added support for icons in `<Button>`, `<SecondaryButton>` and `<TertiaryButton>`.
+* Modified `ShortcutButton` to pass the `<ChevronIcon>` as a `rightIcon` prop to `<Button>`
+
 ## v5.1.2
 * Bugfix: ShortcutButton used wrong css-class on its icon.
 

README.md

@@ -43,7 +43,9 @@ isLoading: bool,
 isTabbable: bool,
 autoFocus: bool,
 label: string,
+leftIcon: node,
 onClick: func,
+rightIcon: node,
 simpleContent: bool, (default: false)
 style: object,
 type: 'button' | 'submit' | 'reset' (default: 'submit')
@@ -133,6 +135,28 @@ Optionally, pass `className` to set a custom class on the button.
 <Button className="testClass">...</Button>
 ```
 
+### Icons
+
+`<Button>` has support for icons, `leftIcon` and `rightIcon`
+`leftIcon` will be placed to the left of the label text, and `rightIcon` to the right of the label text.
+
+`<SecondaryButton>` and `<TertiaryButton>` support `leftIcon`
+
+
+```javascript
+<Button leftIcon={<MyLeftIcon />}>...</Button>
+```
+```javascript
+<Button rightIcon={<MyRightIcon />}>...</Button>
+```
+```javascript
+<SecondaryButton leftIcon={<MyLeftIcon />}>...</SecondaryButton>
+```
+```javascript
+<TertiaryButton leftIcon={<MyLeftIcon />}>...</TertiaryButton>
+```
+
+
 ### Type and onClick-handlers
 
 The default button type is `type="submit"`, as with regular HTML buttons. If

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-buttons-react",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "description": "React implementation of ffe-buttons",
   "main": "lib/index.js",
   "scripts": {

src/Button.js

@@ -1,17 +1,21 @@
-import React, { PropTypes } from 'react';
+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',
+        buttonType = 'primary',
         children,
         className = '',
         disableButton,
         isLoading,
         isTabbable,
         label,
+        leftIcon,
+        rightIcon,
         simpleContent = false,
-        buttonType = 'primary',
         ...rest
     } = props;
     const loadingClass = isLoading ? `ffe-${buttonType}-button--loading` : '';
@@ -33,7 +37,9 @@ export default function Button(props) {
                         className={`ffe-${buttonType}-button__label-text
                         ${isLoading ? `ffe-${buttonType}-button__label-text--loading` : ''}`}
                     >
+                        {leftIcon && decorate(leftIcon, buttonType)}
                         {label || children}
+                        {rightIcon && rightIcon}
                     </span>
                     <span
                         className={`ffe-${buttonType}-button__label-spinner`}
@@ -66,7 +72,9 @@ Button.propTypes = {
     isTabbable: PropTypes.bool,
     autoFocus: PropTypes.bool,
     label: PropTypes.string,
+    leftIcon: PropTypes.node,
     onClick: PropTypes.func,
+    rightIcon: PropTypes.node,
     simpleContent: PropTypes.bool,
     style: PropTypes.object,
     type: PropTypes.oneOf(['button', 'submit', 'reset']),

src/SecondaryButton.js

@@ -2,11 +2,20 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function SecondaryButton(props) {
-    return <Button {...props} buttonType="secondary">
-                {props.children}
-            </Button>;
-}
+    const {
+        children,
+        ...rest
+    } = props;
 
+    return (
+        <Button
+            {...rest}
+            buttonType="secondary"
+        >
+            {children}
+        </Button>
+    );
+}
 
 SecondaryButton.propTypes = {
     children: PropTypes.node

src/ShortcutButton.js

@@ -5,10 +5,16 @@ import Button from './Button';
 export default function ShortcutButton(props) {
     const children = props.label ? props.label : props.children;
 
-    return <Button {...props} label={null} buttonType="shortcut">
-                {children}
-                <ChevronIcon className="ffe-shortcut-button__icon-chevron" />
-            </Button>;
+    return (
+        <Button
+            {...props}
+            label={null}
+            buttonType="shortcut"
+            rightIcon={<ChevronIcon className="ffe-shortcut-button__icon-chevron" />}
+        >
+            {children}
+        </Button>
+    );
 }
 
 ShortcutButton.propTypes = {

src/TertiaryButton.js

@@ -2,9 +2,19 @@ import React, { PropTypes } from 'react';
 import Button from './Button';
 
 export default function TertiaryButton(props) {
-    return <Button {...props} buttonType="tertiary" simpleContent={true}>
-                {props.children}
-            </Button>;
+    const {
+        children,
+        ...rest
+    } = props;
+    return (
+        <Button
+            {...rest}
+            buttonType="tertiary"
+            simpleContent={true}
+        >
+            {children}
+        </Button>
+    );
 }
 
 TertiaryButton.propTypes = {