diff options
Diffstat (limited to 'packages/instant/src/components/ui/button.tsx')
-rw-r--r-- | packages/instant/src/components/ui/button.tsx | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/packages/instant/src/components/ui/button.tsx b/packages/instant/src/components/ui/button.tsx deleted file mode 100644 index e77b1b5d1..000000000 --- a/packages/instant/src/components/ui/button.tsx +++ /dev/null @@ -1,87 +0,0 @@ -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.createOpenUrlInNewWindow(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: '16px', -}; - -Button.displayName = 'Button'; |