From 024e503657dd4ce7f678a850c834cec464e6a8b2 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 17 Dec 2018 13:37:05 -0800 Subject: Prettify button.tsx --- packages/website/ts/@next/components/button.tsx | 42 ++++++++++++------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'packages/website/ts/@next/components/button.tsx') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index ab804b758..39c080f0b 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -25,16 +25,15 @@ interface ButtonInterface { } export const Button = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - to, - } = props; + const { children, href, isWithArrow, to } = props; let linkElem; - if (href) { linkElem = 'a'; } - if (to) { linkElem = ReactRouterLink; } + if (href) { + linkElem = 'a'; + } + if (to) { + linkElem = ReactRouterLink; + } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; @@ -42,29 +41,30 @@ export const Button = (props: ButtonInterface) => { {children} - { isWithArrow && + {isWithArrow && ( - + - } + )} ); }; -const ButtonBase = styled.button` +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'}; + 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'}; + font-size: ${props => (props.isWithArrow ? '20px' : '18px')}; text-decoration: none; cursor: pointer; outline: none; @@ -77,12 +77,12 @@ const ButtonBase = styled.button` } path { - fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; + 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'}; + 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 039b95c8c1423bb165cb18b48a6ee3671603fb1a Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 17 Dec 2018 13:43:37 -0800 Subject: Janky but didn't want to mess anything else up, send in useAnchorTag boolean to force using anchortag --- packages/website/ts/@next/components/button.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/button.tsx') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 39c080f0b..4c8c0361e 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -22,13 +22,14 @@ interface ButtonInterface { to?: string; onClick?: () => any; theme?: ThemeInterface; + useAnchorTag?: boolean; } export const Button = (props: ButtonInterface) => { - const { children, href, isWithArrow, to } = props; + const { children, href, isWithArrow, to, useAnchorTag } = props; let linkElem; - if (href) { + if (href || useAnchorTag) { linkElem = 'a'; } if (to) { -- cgit v1.2.3 From 6e0d622a1559937d8867216d571156564c666c77 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 17 Dec 2018 14:17:36 -0800 Subject: Open all new instant links in new window --- packages/website/ts/@next/components/button.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/button.tsx') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 4c8c0361e..b686b27a2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -19,6 +19,7 @@ interface ButtonInterface { isInline?: boolean; href?: string; type?: string; + target?: string; to?: string; onClick?: () => any; theme?: ThemeInterface; @@ -26,7 +27,7 @@ interface ButtonInterface { } export const Button = (props: ButtonInterface) => { - const { children, href, isWithArrow, to, useAnchorTag } = props; + const { children, href, isWithArrow, to, useAnchorTag, target } = props; let linkElem; if (href || useAnchorTag) { @@ -37,9 +38,10 @@ export const Button = (props: ButtonInterface) => { } const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + const targetProp = href && target ? { target } : {}; return ( - + {children} {isWithArrow && ( -- cgit v1.2.3