import * as React from 'react'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; import { BREAKPOINTS } from 'ts/@next/components/layout'; import { colors } from 'ts/style/colors'; interface ButtonInterface { bgColor?: string; color?: string; children?: Node | string; isTransparent?: boolean; isNoBorder?: boolean; isCentered?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; isAccentColor?: boolean; hasIcon?: boolean | string; href?: string; onClick?: () => any; theme?: { textColor: string; }; } export const Button = styled.button` appearance: none; border: ${props => !props.isNoBorder && `1px solid transparent`}; display: inline-block; background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}; border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'}; color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; text-align: center; font-size: ${props => props.isWithArrow ? '20px' : '18px'}; text-decoration: none; cursor: pointer; transition: background-color 0.35s, border-color 0.35s; 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 && '#04BEA8'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'}; svg { transform: translate3d(2px, -2px, 0); } } `; export const Link = (props: ButtonInterface) => { const { children, href, isWithArrow, } = props; const Component = Button.withComponent(ReactRouterLink); return ( {children} { isWithArrow && } ); }; Link.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; } `;