diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:40:39 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:45:30 +0800 |
commit | 2103d5c3edddc319fe2404df636db75e771d1474 (patch) | |
tree | 36030faf4c8d767acdf947cb2083f074d809b221 /packages/website/ts/@next/components/button.tsx | |
parent | a21bca7cf4771d04879036f3406f38276af93e3a (diff) | |
download | dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar.gz dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar.bz2 dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar.lz dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar.xz dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.tar.zst dexon-0x-contracts-2103d5c3edddc319fe2404df636db75e771d1474.zip |
Cleans up Button
Diffstat (limited to 'packages/website/ts/@next/components/button.tsx')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 66 |
1 files changed, 14 insertions, 52 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 390136347..41ac49d07 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,66 +3,28 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; + interface ButtonInterface { - transparent?: boolean; - inline?: boolean; - href?: string; + children: Node | string; + transparent?: any; + inline?: any; + href?: string, onClick?: () => void; } +export const Button: React.StatelessComponent<ButtonInterface> = props => { + const { onClick } = props; + const Component = onClick ? StyledButton : StyledButton.withComponent('a'); + return <Component {...props}>{ props.children }</Component>; +}; + const StyledButton = styled.button<ButtonInterface>` appearance: none; border: 0; - background-color: ${colors.brandLight}; - border: 1px solid ${colors.brandLight}; + display: ${props => props.inline && 'inline-block'}; + background-color: ${props => !props.transparent && colors.brandLight}; + border: ${props => props.transparent && '1px solid #6a6a6a'}; color: ${colors.white}; text-align: center; padding: 13px 22px 14px; - text-decoration: none; - - ${props => props.transparent && ` - background-color: transparent; - border-color: #6A6A6A; - `} - - ${props => props.inline && ` - display: inline-block; - & + & { - margin-left: 10px; - } - `} `; - -// A button that may exist as a button or a link -// a button only makes sense with an onClick handler -// a link with an href so we base the type of component we return -// based on those props - -export const Button: React.StatelessComponent<ButtonInterface> = props => { - const { onClick, href } = props; - const Component = onClick ? StyledButton : StyledButton.withComponent('a'); - - return <Component {...props}>{props.children}</Component>; -}; - -// usage -// <Button href="#">Text</Button> ===> <a href="">Text</a> -// <Button onClick={() => func}>I'm a button</Button> ====> <button></button> - -// export const Button: React.StatelessComponent<ButtonInterface> = ({ ...props }) => ( -// <StyledButton {...props}> -// <Text>{props.text}</Text> -// </StyledButton> -// ); - -// also feel like a transparent prop would suffice instead of having a separate button -// so we have the logic with the Link/button--- and props = styling. in this case: -// background-color: ${props => !props.transparent && 'somecolor'}.. -export const ButtonTransparent: React.StatelessComponent<ButtonInterface> = ({ ...props }) => ( - <Button transparent={true} {...props}>{props.children}</Button> -); - -Button.defaultProps = { - transparent: false, - inline: false, -}; |