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

Removes <Link> component, clean up Button.tsx

Browse Source
This commit is contained in:
Ezekiel Aquino 2018-12-13 16:39:03 +01:00
parent f846e2f6e0
commit 81690d1ce5
11 changed files with 127 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/website/ts/@next/components/aboutPageLayout.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link } from 'ts/@next/components/button';
import { Button } from 'ts/@next/components/button';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Column, Section } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
@ -37,7 +37,10 @@ export const AboutPageLayout = (props: Props) => (
</AnimatedParagraph>
{(props.linkLabel && props.linkUrl) &&
<AnimatedLink href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
<AnimatedLink
to={props.linkUrl}
isWithArrow={true}
>
{props.linkLabel}
</AnimatedLink>
}
@ -57,6 +60,6 @@ const AnimatedParagraph = styled(Paragraph)`
${addFadeInAnimation('0.5s', '0.15s')}
`;
const AnimatedLink = styled(Link)`
const AnimatedLink = styled(Button)`
${addFadeInAnimation('0.6s', '0.3s')}
`;

16
packages/website/ts/@next/components/banner.tsx
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import {colors} from 'ts/style/colors';
import {Button, Link} from 'ts/@next/components/button';
import {Button} from 'ts/@next/components/button';
import {Wrap, WrapCentered} from 'ts/@next/components/layout';
import {ThemeInterface} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
@ -56,11 +56,21 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
<Column colWidth="1/2" isPadLarge={true}>
<ButtonWrap>
{mainCta &&
<Link isTransparent={false} href={mainCta.href}>{mainCta.text}</Link>
<Button
isTransparent={false}
href={mainCta.href}
>
{mainCta.text}
</Button>
}
{secondaryCta &&
<Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button>
<Button
href={secondaryCta.href}
isTransparent={true}
>
{secondaryCta.text}
</Button>
}
</ButtonWrap>
</Column>

23
packages/website/ts/@next/components/blockIconLink.tsx
View File

@ -1,15 +1,15 @@
import * as React from 'react';
import styled from 'styled-components';
import {Button, Link} from 'ts/@next/components/button';
import {Button} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/icon';
interface Props {
icon: string;
title: string;
linkLabel: string;
linkUrl?: string;
onClick?: () => void;
linkUrl: string;
linkAction: () => void;
}
export const BlockIconLink = (props: Props) => (
@ -25,29 +25,14 @@ export const BlockIconLink = (props: Props) => (
{props.title}
</Title>
{props.linkUrl &&
<Link
isWithArrow={true}
isTransparent={true}
isNoBorder={true}
href={props.linkUrl}
onClick={props.onClick}
>
{props.linkLabel}
</Link>
}
{props.onClick &&
<Button
isWithArrow={true}
isTransparent={true}
isNoBorder={true}
href={props.linkUrl}
onClick={props.onClick}
onClick={props.linkAction}
>
{props.linkLabel}
</Button>
}
</div>
</Wrap>
);

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

@ -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;
}
`;

8
packages/website/ts/@next/components/definition.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
import {Link} from 'ts/@next/components/button';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { Paragraph } from 'ts/@next/components/text';
@ -42,15 +42,13 @@ export const Definition = (props: Props) => (
{props.actions &&
<LinkWrap>
{props.actions.map((item, index) => (
<Link
<Button
href={item.url}
isWithArrow={true}
isTransparent={true}
isNoBorder={true}
isAccentColor={true}
>
{item.label}
</Link>
</Button>
))}
</LinkWrap>
}

4
packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
View File

@ -3,7 +3,7 @@ import * as React from 'react';
import {Link as RouterLink} from 'react-router-dom';
import styled, {withTheme} from 'styled-components';
import {Link} from 'ts/@next/components/button';
import {Button} from 'ts/@next/components/button';
import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
import {Heading} from 'ts/@next/components/text';
import {GlobalStyle} from 'ts/@next/constants/globalStyle';
@ -172,7 +172,7 @@ const StyledWrap = styled(Wrap)`
}
`;
const StyledLink = styled(Link)`
const StyledLink = styled(Button)`
width: 100%;
position: absolute;
bottom: 0;

135
packages/website/ts/@next/components/header.tsx
View File

@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
import { Button, Link, NavLink } from 'ts/@next/components/button';
import { Button } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@ -85,29 +85,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
});
}
public getNavItem = (link: NavItem, index: number): React.ReactNode => {
const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
const Subnav = link.dropdownComponent;
return (
<Wrapper key={`nav-${index}`}>
<StyledNavLink
href={link.url}
isTransparent={true}
isNoBorder={true}
>
{link.text}
</StyledNavLink>
{link.dropdownComponent &&
<DropdownWrap width={link.dropdownWidth}>
<Subnav />
</DropdownWrap>
}
</Wrapper>
);
}
public render(): React.ReactNode {
const { isOpen } = this.state;
const { isNavToggled, toggleMobileNav, theme } = this.props;
@ -121,7 +98,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<StyledButtonWrap>
{_.map(navItems, (link, index) => (
this.getNavItem(link, index)
<NavItem link={link} index={index} />
))}
</StyledButtonWrap>
@ -143,6 +120,30 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
export const Header = withTheme(HeaderBase);
const NavItem = (props): React.ReactNode => {
const { link, index } = props;
const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
const Subnav = link.dropdownComponent;
return (
<Wrapper key={`nav-${index}`}>
<StyledNavLink
to={link.url}
isTransparent={true}
isNoBorder={true}
>
{link.text}
</StyledNavLink>
{link.dropdownComponent &&
<DropdownWrap width={link.dropdownWidth}>
<Subnav />
</DropdownWrap>
}
</Wrapper>
);
};
const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
@media (max-width: 800px) {
min-height: ${props => props.isOpen ? '385px' : '70px'};
@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
}
`;
const StyledNavLink = styled(NavLink).attrs({
const LinkWrap = styled.div`
position: relative;
a {
display: block;
}
@media (min-width: 800px) {
&:hover > div {
display: block;
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 0.35s, transform 0.35s, visibility 0s;
}
}
`;
const StyledNavLink = styled(ReactRouterLink).attrs({
activeStyle: { opacity: 1 },
})`
color: ${props => props.theme.textColor};
opacity: 0.5;
transition: opacity 0.35s;
padding: 15px 0;
margin: 0 30px;
&:hover {
opacity: 1;
@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div`
@media (max-width: 800px) {
display: none;
}
/*
@media (max-width: 800px) {
background-color: #022924;
display: flex;
flex-wrap: wrap;
padding: 20px 20px;
a {
text-align: left;
padding-left: 0;
}
a + a {
margin-left: 0;
}
} */
`;
const MobileProductLinksWrap = styled(StyledButtonWrap)`
display: none;
@media (max-width: 800px) {
display: block;
background-color: transparent;
flex-direction: column;
a {
display: block;
width: 100%;
}
}
`;
const LinkWrap = styled.div`
position: relative;
a {
display: block;
}
@media (min-width: 800px) {
&:hover > div {
display: block;
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 0.35s, transform 0.35s, visibility 0s;
}
}
`;
const DropdownWrap = styled.div<DropdownWrapInterface>`
@ -282,17 +254,6 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
}
`;
const Nav = styled.div`
@media (max-width: 800px) {
background-color: ${props => props.theme.bgColor};
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 65px;
}
`;
const TradeButton = styled(Button)`
padding: 14px 22px;

4
packages/website/ts/@next/components/sections/landing/cta.tsx
View File

@ -24,13 +24,13 @@ export const SectionLandingCta = (props: Props) => (
icon="getStarted"
title="Ready to build on 0x?"
linkLabel="Get Started"
linkUrl="#"
linkUrl="https://0xproject.com/docs"
/>
<BlockIconLink
icon="getInTouch"
title="Want help from the 0x team?"
linkLabel="Get in Touch"
onClick={props.onContactClick}
linkAction={props.onContactClick}
/>
</Section>
);

2
packages/website/ts/@next/components/sections/landing/hero.tsx
View File

@ -21,7 +21,7 @@ const HeroActions = () => (
Get Started
</Button>
<Button href="/why" isTransparent={true} isInline={true}>
<Button to="/next/why" isTransparent={true} isInline={true}>
Learn More
</Button>
</>

4
packages/website/ts/@next/pages/about/press.tsx
View File

@ -3,7 +3,7 @@ import * as React from 'react';
import styled from 'styled-components';
import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
import { Link } from 'ts/@next/components/button';
import { Button } from 'ts/@next/components/button';
import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
import { Separator } from 'ts/@next/components/separator';
import { Heading, Paragraph } from 'ts/@next/components/text';
@ -61,7 +61,7 @@ const Highlight = ({ highlight }) => (
<Column width="60%" maxWidth="560px">
<Paragraph isMuted={false}>{highlight.text}</Paragraph>
<Link href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Link>
<Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
</Column>
</HighlightWrap>
);

7
packages/website/ts/@next/pages/why.tsx
View File

@ -8,7 +8,7 @@ import { colors } from 'ts/style/colors';
import {Hero} from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Link } from 'ts/@next/components/button';
import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
@ -84,14 +84,13 @@ export class NextWhy extends React.PureComponent {
title="The exchange layer for the crypto economy"
description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens."
actions={
<Link
<Button
href="/docs"
isCentered={true}
isWithArrow={true}
isAccentColor={true}
>
Build on 0x
</Link>
</Button>
}
/>