Removes <Link> component, clean up Button.tsx

packages/website/ts/@next/components/aboutPageLayout.tsx

@@ -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,9 +37,12 @@ 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>
+                        </AnimatedLink>
                    }
                </Column>
            </Column>
@@ -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')}
 `;

packages/website/ts/@next/components/banner.tsx

@@ -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>

packages/website/ts/@next/components/blockIconLink.tsx

@@ -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;
+    linkUrl: string;
-    onClick?: () => void;
+    linkAction: () => void;
 }
 
 export const BlockIconLink = (props: Props) => (
@@ -25,29 +25,14 @@ export const BlockIconLink = (props: Props) => (
                 {props.title}
             </Title>
 
-            {props.linkUrl &&
+            <Button
-                <Link
+                isWithArrow={true}
-                    isWithArrow={true}
+                isTransparent={true}
-                    isTransparent={true}
+                href={props.linkUrl}
-                    isNoBorder={true}
+                onClick={props.linkAction}
-                    href={props.linkUrl}
+            >
-                    onClick={props.onClick}
+                {props.linkLabel}
-                >
+            </Button>
-                    {props.linkLabel}
-                </Link>
-            }
-
-            {props.onClick &&
-                <Button
-                    isWithArrow={true}
-                    isTransparent={true}
-                    isNoBorder={true}
-                    href={props.linkUrl}
-                    onClick={props.onClick}
-                >
-                    {props.linkLabel}
-                </Button>
-            }
         </div>
     </Wrap>
 );

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

packages/website/ts/@next/components/definition.tsx

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

packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx

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

packages/website/ts/@next/components/header.tsx

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

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

@@ -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>
 );

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

@@ -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>
     </>

packages/website/ts/@next/pages/about/press.tsx

@@ -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>
 );

packages/website/ts/@next/pages/why.tsx

@@ -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>
                     }
                 />