From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/components/button.tsx | 102 ++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 packages/website/ts/components/button.tsx (limited to 'packages/website/ts/components/button.tsx') diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx new file mode 100644 index 000000000..348f1b7b4 --- /dev/null +++ b/packages/website/ts/components/button.tsx @@ -0,0 +1,102 @@ +import * as React from 'react'; +import { Link as ReactRouterLink } from 'react-router-dom'; +import styled from 'styled-components'; + +import { ThemeInterface } from 'ts/@next/components/siteWrap'; + +import { colors } from 'ts/style/colors'; + +interface ButtonInterface { + bgColor?: string; + color?: string; + children?: React.ReactNode | string; + isTransparent?: boolean; + isNoBorder?: boolean; + isNoPadding?: boolean; + isWithArrow?: boolean; + isAccentColor?: boolean; + hasIcon?: boolean | string; + isInline?: boolean; + href?: string; + type?: string; + target?: string; + to?: string; + onClick?: () => any; + theme?: ThemeInterface; + shouldUseAnchorTag?: boolean; +} + +export const Button = (props: ButtonInterface) => { + const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; + let linkElem; + + if (href || shouldUseAnchorTag) { + linkElem = 'a'; + } + if (to) { + linkElem = ReactRouterLink; + } + + const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + const targetProp = href && target ? { target } : {}; + + return ( + + {children} + + {isWithArrow && ( + + + + )} + + ); +}; + +const ButtonBase = + styled.button < + ButtonInterface > + ` + appearance: none; + border: 1px solid transparent; + display: inline-block; + background-color: ${props => props.bgColor || colors.brandLight}; + background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}; + border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'}; + color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; + padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'}; + white-space: ${props => props.isWithArrow && 'nowrap'}; + text-align: center; + font-size: ${props => (props.isWithArrow ? '20px' : '18px')}; + text-decoration: none; + cursor: pointer; + outline: none; + transition: background-color 0.35s, border-color 0.35s; + + // @todo Refactor to use theme props + ${props => + props.bgColor === 'dark' && + ` + background-color: ${colors.brandDark}; + color: ${colors.white}; + `} + + svg { + margin-left: 9px; + transition: transform 0.5s; + transform: translate3d(-2px, 2px, 0); + } + + path { + fill: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; + } + + &:hover { + background-color: ${props => !props.isTransparent && !props.isWithArrow && '#04BEA8'}; + border-color: ${props => props.isTransparent && !props.isNoBorder && !props.isWithArrow && '#00AE99'}; + + svg { + transform: translate3d(2px, -2px, 0); + } + } +`; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/components/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/button.tsx') diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index 348f1b7b4..c9785e48c 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; -import { ThemeInterface } from 'ts/@next/components/siteWrap'; +import { ThemeInterface } from 'ts/components/siteWrap'; import { colors } from 'ts/style/colors'; -- cgit v1.2.3 From 59ec243c2678cca2d2170e49a235f00102b14f96 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Sun, 6 Jan 2019 21:35:05 -0800 Subject: feat(website): add contact us hero action to market maker page --- packages/website/ts/components/button.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components/button.tsx') diff --git a/packages/website/ts/components/button.tsx b/packages/website/ts/components/button.tsx index c9785e48c..569038ae0 100644 --- a/packages/website/ts/components/button.tsx +++ b/packages/website/ts/components/button.tsx @@ -8,6 +8,7 @@ import { colors } from 'ts/style/colors'; interface ButtonInterface { bgColor?: string; + borderColor?: string; color?: string; children?: React.ReactNode | string; isTransparent?: boolean; @@ -26,7 +27,7 @@ interface ButtonInterface { shouldUseAnchorTag?: boolean; } -export const Button = (props: ButtonInterface) => { +export const Button: React.StatelessComponent = (props: ButtonInterface) => { const { children, href, isWithArrow, to, shouldUseAnchorTag, target } = props; let linkElem; @@ -53,6 +54,10 @@ export const Button = (props: ButtonInterface) => { ); }; +Button.defaultProps = { + borderColor: 'rgba(255, 255, 255, .4)', +}; + const ButtonBase = styled.button < ButtonInterface > @@ -62,7 +67,7 @@ const ButtonBase = display: inline-block; background-color: ${props => props.bgColor || colors.brandLight}; background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}; - border-color: ${props => props.isTransparent && !props.isWithArrow && 'rgba(255, 255, 255, .4)'}; + border-color: ${props => props.isTransparent && !props.isWithArrow && props.borderColor}; color: ${props => (props.isAccentColor ? props.theme.linkColor : props.color || props.theme.textColor)}; padding: ${props => !props.isNoPadding && !props.isWithArrow && '18px 30px'}; white-space: ${props => props.isWithArrow && 'nowrap'}; -- cgit v1.2.3