diff options
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, 0 insertions, 59 deletions
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx deleted file mode 100644 index 754eca40e..000000000 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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'; |