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
|
import { darken, saturate } from 'polished';
import * as React from 'react';
import styled from 'styled-components';
import { Container } from './container';
/**
* AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
* SEE: https://www.styled-components.com/docs/basics#coming-from-css
*/
export interface ButtonProps {
backgroundColor?: string;
borderColor?: string;
width?: string;
padding?: string;
type?: string;
isDisabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
className?: string;
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
<button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
{children}
</button>
);
const darkenOnHoverAmount = 0.1;
const darkenOnActiveAmount = 0.2;
const saturateOnFocusAmount = 0.2;
export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
border-radius: 3px;
outline: none;
width: ${props => props.width};
background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
&:hover {
background-color: ${props =>
!props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
}
&:active {
background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
}
&:disabled {
opacity: 0.5;
}
&:focus {
background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
}
`;
Button.defaultProps = {
backgroundColor: 'red',
width: 'auto',
isDisabled: false,
padding: '1em 2.2em',
};
Button.displayName = 'Button';
|
