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
|
import { darken, saturate } from 'polished';
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
import { util } from '../../util/util';
export type ButtonOnClickHandler = (event: React.MouseEvent<HTMLElement>) => void;
export interface ButtonProps {
backgroundColor?: ColorOption;
borderColor?: ColorOption;
fontColor?: ColorOption;
fontSize?: string;
width?: string;
padding?: string;
type?: string;
isDisabled?: boolean;
href?: string;
onClick?: ButtonOnClickHandler;
className?: string;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({
children,
isDisabled,
onClick,
href,
type,
className,
}) => {
const computedOnClick = isDisabled ? undefined : href ? util.createHrefOnClick(href) : onClick;
return (
<button type={type} className={className} onClick={computedOnClick} disabled={isDisabled}>
{children}
</button>
);
};
const darkenOnHoverAmount = 0.1;
const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)`
&& {
all: initial;
box-sizing: border-box;
font-size: ${props => props.fontSize};
font-family: 'Inter UI', sans-serif;
font-weight: 500;
color: ${props => props.fontColor && props.theme[props.fontColor]};
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
border-radius: 3px;
text-align: center;
outline: none;
width: ${props => props.width};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.theme[props.borderColor]}` : 'none')};
&:hover {
background-color: ${props =>
!props.isDisabled
? darken(darkenOnHoverAmount, props.theme[props.backgroundColor || 'white'])
: ''} !important;
}
&:active {
background-color: ${props =>
!props.isDisabled ? darken(darkenOnActiveAmount, props.theme[props.backgroundColor || 'white']) : ''};
}
&:disabled {
opacity: 0.5;
}
&:focus {
background-color: ${props =>
saturate(saturateOnFocusAmount, props.theme[props.backgroundColor || 'white'])};
}
}
`;
Button.defaultProps = {
backgroundColor: ColorOption.primaryColor,
width: 'auto',
isDisabled: false,
padding: '.82em 1.2em',
fontSize: '15px',
};
Button.displayName = 'Button';
|
