fix(Button): Fix button align-prop not working

The align prop of Button did not work, because it gave the margin to
the buttonwrapper, which was itself wrapped with withRipple HOC. This
was fixed by handling the align prop in the rippleprovider. This has the
positive side effect of allowing alignment of any withRipple components.

src/components/Button.js

@@ -59,20 +59,12 @@ function getColor(props) {
   return colorGetter(props, 'primaryColor'); // default
 }
 
-function getAlignement(props) {
-  if (props.align === 'center') return '0px auto';
-  if (props.align === 'right') return '0px 0px 0px auto';
-  if (props.align === 'left') return '0px auto 0px 0px';
-  return '0px';
-}
-
 const ButtonWrapper = styled.button`
   outline: none;
   font-size: 1rem;
   padding: 8px 16px;
   font-weight: normal;
   width: ${props => props.w || 'auto'};
-  margin: ${props => getAlignement(props)};
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   border-style: solid;
   border-width: ${props => props.outline && !props.clear ? '1px' : '0px'};

src/components/withRipple.js

@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+function getAlignement(props) {
+  if (props.align === 'center') return '0px auto';
+  if (props.align === 'right') return '0px 0px 0px auto';
+  if (props.align === 'left') return '0px auto 0px 0px';
+  return '0px';
+}
+
 const RippleWrapper = styled.div`
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   display: inline-block;
   align-self: flex-start;
+  margin: ${props => getAlignement(props)};
 
   &:after {
     content: "";
@@ -32,12 +40,13 @@ const RippleWrapper = styled.div`
   }
 `;
 
+
 /* eslint-disable react/prefer-stateless-function */
 const withRipple = (Comp) => {
   return class RippleProvider extends Component {
     render() {
       return (
-        <RippleWrapper>
+        <RippleWrapper align={this.props.align}>
           <Comp {...this.props} />
         </RippleWrapper>
       );