From 0a67ea30380b7e46115513a3e55c119ddad03a3d Mon Sep 17 00:00:00 2001
From: Vasek Mlejnsky <vasek.mlejnsky@gmail.com>
Date: Mon, 3 Sep 2018 10:50:23 +0200
Subject: [PATCH] Add an option to position button's icon left or right

---
 src/components/buttons/Button/index.js | 28 ++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/buttons/Button/index.js b/src/components/buttons/Button/index.js
index 1aab4c5d..49ec94af 100644
--- a/src/components/buttons/Button/index.js
+++ b/src/components/buttons/Button/index.js
@@ -23,7 +23,7 @@ const Wrapper = styled.button`
         background: ${colors.GREEN_TERTIARY};
     }
 
-    ${props => props.disabled && css`
+    ${props => props.isDisabled && css`
         pointer-events: none;
         color: ${colors.TEXT_SECONDARY};
         background: ${colors.GRAY_LIGHT};
@@ -108,33 +108,46 @@ const Wrapper = styled.button`
 `;
 
 const IconWrapper = styled.span`
-    ${props => (props.hasChildren ? 'margin: 0 8px 0 -4px;' : '')};
+    ${props => ((props.hasChildren && !props.isRight) ? 'margin: 0 8px 0 -4px;' : '')};
+    ${props => ((props.hasChildren && props.isRight) ? 'margin: 0 -4px 0 8px;' : '')};
 `;
 
 const Button = ({
-    children, className, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
+    children,
+    className,
+    icon,
+    onClick = () => { },
+    isDisabled = false,
+    isWhite = false,
+    isWebUsb = false,
+    isTransparent = false,
+    hasIconRight = false,
 }) => (
     <Wrapper
         className={className}
         icon={icon}
         onClick={onClick}
-        disabled={disabled}
+        isDisabled={isDisabled}
         isWhite={isWhite}
         isWebUsb={isWebUsb}
         isTransparent={isTransparent}
     >
+        {hasIconRight && children}
         {icon && (
             <IconWrapper
                 hasChildren={!!children}
+                isRight={hasIconRight}
             >
                 <Icon
                     icon={icon.type}
                     color={icon.color}
                     size={icon.size}
+                    isActive={icon.isActive}
+                    canAnimate={icon.canAnimate}
                 />
             </IconWrapper>
         )}
-        {children}
+        {!hasIconRight && children}
     </Wrapper>
 );
 
@@ -142,7 +155,7 @@ Button.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
     onClick: PropTypes.func,
-    disabled: PropTypes.bool,
+    isDisabled: PropTypes.bool,
     isWhite: PropTypes.bool,
     isWebUsb: PropTypes.bool,
     isTransparent: PropTypes.bool,
@@ -150,7 +163,10 @@ Button.propTypes = {
         type: PropTypes.arrayOf(PropTypes.string).isRequired,
         color: PropTypes.string,
         size: PropTypes.number,
+        isActive: PropTypes.bool,
+        canAnimate: PropTypes.bool,
     }),
+    hasIconRight: PropTypes.bool,
 };
 
 export default Button;
\ No newline at end of file