import { darken, saturate } from 'polished'; import * as React from 'react'; import styled from 'styled-components'; /** * 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) => void; className?: string; } const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( ); 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';