1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import { colors } from '@0x/react-shared';
import { darken, saturate } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
export interface ButtonProps {
className?: string;
fontSize?: string;
fontColor?: string;
fontFamily?: string;
backgroundColor?: string;
borderColor?: string;
borderRadius?: string;
width?: string;
padding?: string;
type?: string;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
textAlign?: string;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
<button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
{children}
</button>
);
export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
font-size: ${props => props.fontSize};
color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
border-radius: ${props => props.borderRadius};
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
text-align: ${props => props.textAlign};
background-color: ${props => props.backgroundColor};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important;
}
&:active {
background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
}
&:disabled {
opacity: 0.5;
}
&:focus {
background-color: ${props => saturate(0.2, props.backgroundColor)};
}
`;
Button.defaultProps = {
fontSize: '12px',
borderRadius: '6px',
backgroundColor: colors.white,
width: 'auto',
fontFamily: 'Roboto',
isDisabled: false,
padding: '0.8em 2.2em',
textAlign: 'center',
};
Button.displayName = 'Button';
type CallToActionType = 'light' | 'dark';
export interface CallToActionProps {
type?: CallToActionType;
fontSize?: string;
width?: string;
padding?: string;
}
export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
children,
type,
fontSize,
padding,
width,
}) => {
const isLight = type === 'light';
const backgroundColor = isLight ? colors.white : colors.mediumBlue;
const fontColor = isLight ? colors.heroGrey : colors.white;
return (
<Button
fontSize={fontSize}
padding={padding}
backgroundColor={backgroundColor}
fontColor={fontColor}
width={width}
>
{children}
</Button>
);
};
CallToAction.defaultProps = {
type: 'dark',
fontSize: '14px',
padding: '0.9em 1.6em',
};
|
