Refactors Button component

1 files changed, 31 insertions, 17 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 92c2dac28..2f96759ce 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
@@ -9,14 +10,39 @@ interface ButtonInterface {
     hasIcon?: boolean | string;
     isInline?: boolean;
     href?: string;
+    history?: {
+        push: () => void;
+    };
     onClick?: () => void;
 }
 
-export const Button: React.StatelessComponent<ButtonInterface> = props => {
-    const { onClick } = props;
-    const Component = onClick ? StyledButton : StyledButton.withComponent('a');
-    return <Component {...props}>{props.children}</Component>;
-};
+export const Button = styled.button<ButtonInterface>`
+    appearance: none;
+    border: 1px solid transparent;
+    display: ${props => props.isInline && 'inline-block'};
+    background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
+    border-color: ${props => props.isTransparent && '#6a6a6a'};
+    color: ${props => props.color || props.theme.textColor};
+    text-align: center;
+    padding: 14px 22px;
+    font-size: 18px;
+    text-decoration: none;
+`;
+
+export const Link = withRouter((props: ButtonInterface) => {
+    const {
+        history,
+        href,
+        children,
+    } = props;
+    const Component = StyledButton.withComponent('a');
+
+    return (
+        <Component onClick={history.push(href)}>
+            {children}
+        </Component>
+    );
+});
 
 // Added this, & + & doesnt really work since we switch with element types...
 export const ButtonWrap = styled.div`
@@ -27,15 +53,3 @@ export const ButtonWrap = styled.div`
         margin-left: 10px;
     }
 `;
-
-const StyledButton = styled.button<ButtonInterface>`
-    appearance: none;
-    border: 1px solid transparent;
-    display: ${props => props.isInline && 'inline-block'};
-    background-color: ${props => !props.isTransparent && colors.brandLight};
-    border-color: ${props => props.isTransparent && '#6a6a6a'};
-    color: ${props => props.color || props.theme.textColor};
-    text-align: center;
-    padding: 14px 22px;
-    text-decoration: none;
-`;