diff options
author | Andrew Maurer <git@maurer.me> | 2018-10-13 23:09:50 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-13 23:09:50 +0800 |
commit | 69e9dbd68323439ac817e71c610dfae3716bee26 (patch) | |
tree | 6b2791f09132524963ae5e0bb58afffcb3720736 /packages/dev-tools-pages/ts/components/ui/button.tsx | |
parent | dc56ce454967d2bf0d5e8c93389c0fa71a9d1cc5 (diff) | |
parent | a424c2adfabbbd9313b4f5ddeeeaebd0811fd1cd (diff) | |
download | dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar.gz dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar.bz2 dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar.lz dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar.xz dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.tar.zst dexon-sol-tools-69e9dbd68323439ac817e71c610dfae3716bee26.zip |
Merge branch 'development' into development
Diffstat (limited to 'packages/dev-tools-pages/ts/components/ui/button.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ui/button.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx new file mode 100644 index 000000000..754eca40e --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -0,0 +1,59 @@ +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<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'; |