crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettify button.tsx

Browse Source
This commit is contained in:
Steve Klebanoff
2018-12-17 13:37:05 -08:00
parent 37e5a8a8b7
commit 024e503657
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/website/ts/@next/components/button.tsx
View File

@@ -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) => {
<Component {...props}>
{children}
{ isWithArrow &&
{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"
/>
<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>`
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<ButtonInterface>`
}
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);