diff options
Diffstat (limited to 'packages/website/ts/@next/components/button.tsx')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 115 |
1 files changed, 35 insertions, 80 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 377d1d820..cbe90c7c2 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom'; import styled from 'styled-components'; -import { BREAKPOINTS } from 'ts/@next/components/layout'; import { colors } from 'ts/style/colors'; interface ButtonInterface { @@ -11,7 +10,6 @@ interface ButtonInterface { children?: Node | string; isTransparent?: boolean; isNoBorder?: boolean; - isCentered?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; isAccentColor?: boolean; @@ -25,11 +23,41 @@ interface ButtonInterface { }; } -export const Button = styled.button<ButtonInterface>` +export const Button = (props: ButtonInterface) => { + const { + children, + href, + isWithArrow, + to, + } = props; + let linkElem; + + if (props.href) { linkElem = 'a'; } + if (props.to) { linkElem = ReactRouterLink; } + + const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase; + + return ( + <Component {...props}> + {props.children} + + { isWithArrow && + <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" + /> + </svg> + } + </Component> + ); +}; + +const ButtonBase = styled.button<ButtonInterface>` appearance: none; - border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`}; + border: 1px solid transparent; display: inline-block; - background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}; + 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'}; @@ -38,6 +66,7 @@ export const Button = styled.button<ButtonInterface>` line-height: normal; text-decoration: none; cursor: pointer; + outline: none; transition: background-color 0.35s, border-color 0.35s; svg { @@ -51,7 +80,7 @@ export const Button = styled.button<ButtonInterface>` } &:hover { - background-color: ${props => !props.isTransparent && '#04BEA8'}; + background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; svg { @@ -59,77 +88,3 @@ export const Button = styled.button<ButtonInterface>` } } `; - -export const Link: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterLink); - - return ( - <Component to={href} {...props}> - {children} - - { isWithArrow && - <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" - /> - </svg> - } - </Component> - ); -}; - -Link.defaultProps = { - isTransparent: true, -}; - -export const NavLink: React.ReactNode = (props: ButtonInterface) => { - const { - children, - href, - isWithArrow, - } = props; - const Component = Button.withComponent(ReactRouterNavLink); - - return ( - <Component to={href} {...props}> - {children} - - { isWithArrow && - <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path - d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" - /> - </svg> - } - </Component> - ); -}; - -NavLink.defaultProps = { - isTransparent: true, -}; - -// Added this, & + & doesnt really work since we switch with element types... -export const ButtonWrap = styled.div` - button + button, - a + a, - a + button, - button + a { - @media (min-width: ${BREAKPOINTS.mobile}) { - margin-left: 10px; - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - margin: 0 10px; - } - } - - @media (max-width: ${BREAKPOINTS.mobile}) { - white-space: nowrap; - } -`; |