aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 22:17:33 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 22:17:33 +0800
commiteec40080a06bf5dbc0661a5929e5cbb8d1b88911 (patch)
tree4bd1fbd18961b5bcb4639ce8dc1b38194f2a854a
parent4da419cf7591a8beb32fb5e41e31b129c5fbb99f (diff)
downloaddexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar.gz
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar.bz2
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar.lz
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar.xz
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.tar.zst
dexon-sol-tools-eec40080a06bf5dbc0661a5929e5cbb8d1b88911.zip
Refactors Button component
-rw-r--r--packages/website/ts/@next/components/button.tsx48
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;
-`;