diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 21:33:27 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 21:33:27 +0800 |
commit | ec099dd009b746cef015dec1290efb0fb72b3037 (patch) | |
tree | a187c6519f33b8e84e3887e8d018d089226f1c24 /packages/website | |
parent | 0577a0dbc5fa78e2bb6289d1ff475f10e27f7a79 (diff) | |
download | dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar.gz dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar.bz2 dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar.lz dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar.xz dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.tar.zst dexon-0x-contracts-ec099dd009b746cef015dec1290efb0fb72b3037.zip |
Adds notes to button
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 37 |
1 files changed, 32 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 55534b66a..b4280a9ed 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,13 +3,14 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -interface Props { + +interface ButtonInterface { text: string; transparent?: boolean; inline?: boolean; } -const StyledButton = styled.button<Props>` +const StyledButton = styled.button<ButtonInterface>` appearance: none; border: 0; background-color: ${colors.brandLight}; @@ -36,14 +37,40 @@ const Text = styled.span` line-height: 1.375rem; `; -export const Button: React.StatelessComponent<Props> = ({ ...props }) => ( + + +// 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; + + // This button is as link + if (props.href) return StyledButton.withComponent('a'); + else return StyledButton; +}; + + +// 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> ); -export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => ( - <Button transparent={true} {...props}> +// 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 }) => ( + <StyledButton transparent={true} {...props}> <Text>{props.text}</Text> </Button> ); |