feat: fix links in navbar and dropdown

2018-12-17 14:37:34 -08:00
parent 9df0ae90bc
commit a77e5a1a12
4 changed files with 71 additions and 51 deletions
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
+import { NavLink as ReactRounterLink } from 'react-router-dom';
 import { Link as ScrollLink } from 'react-scroll';
 import * as validUrl from 'valid-url';

 import { LinkType } from '../types';
 import { constants } from '../utils/constants';

-interface BaseLinkProps {
+export interface BaseLinkProps {
    to: string;
    shouldOpenInNewTab?: boolean;
    className?: string;
@@ -18,11 +18,15 @@ interface BaseLinkProps {
    fontColor?: string;
 }

-interface ScrollLinkProps extends BaseLinkProps {
+export interface ScrollLinkProps extends BaseLinkProps {
    onActivityChanged?: (isActive: boolean) => void;
 }

-type LinkProps = BaseLinkProps & ScrollLinkProps;
+export interface ReactLinkProps extends BaseLinkProps {
+    activeStyle?: React.CSSProperties;
+}
+
+export type LinkProps = ReactLinkProps & ScrollLinkProps;

 export interface LinkState {}

@@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
                        onMouseOver={this.props.onMouseOver}
                        onMouseEnter={this.props.onMouseEnter}
                        onMouseLeave={this.props.onMouseLeave}
+                        activeStyle={this.props.activeStyle}
                    >
                        {this.props.children}
                    </ReactRounterLink>
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block';
 export { MarkdownCodeBlock } from './components/markdown_code_block';
 export { MarkdownSection } from './components/markdown_section';
 export { SectionHeader } from './components/section_header';
-export { Link } from './components/link';
+export { Link, LinkProps } from './components/link';

 export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';

--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,8 +1,8 @@
+import { Link } from '@0x/react-shared';
 import _ from 'lodash';
 import * as React from 'react';
 import MediaQuery from 'react-responsive';
-import { NavLink as ReactRouterLink } from 'react-router-dom';
-import styled, { withTheme } from 'styled-components';
+import styled, { css, withTheme } from 'styled-components';

 import Headroom from 'react-headroom';

@@ -29,6 +29,7 @@ interface NavItemProps {
    text?: string;
    dropdownWidth?: number;
    dropdownComponent?: React.ReactNode;
+    shouldOpenInNewTab?: boolean;
 }

 interface DropdownWrapInterface {
@@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [
    },
    {
        id: 'products',
-        url: '#',
        text: 'Products',
        dropdownComponent: DropdownProducts,
        dropdownWidth: 280,
    },
    {
        id: 'developers',
-        url: '#',
        text: 'Developers',
        dropdownComponent: DropdownDevelopers,
        dropdownWidth: 480,
@@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [
    },
    {
        id: 'blog',
-        url: 'https://blog.0x.org/latest',
+        url: 'https://blog.0xproject.com/latest',
+        shouldOpenInNewTab: true,
        text: 'Blog',
    },
 ];
@@ -72,7 +72,7 @@ class HeaderBase extends React.Component<HeaderProps> {
        if (this.props.isNavToggled) {
            this.props.toggleMobileNav();
        }
-    }
+    };

    public render(): React.ReactNode {
        const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -81,25 +81,16 @@ class HeaderBase extends React.Component<HeaderProps> {
            <Headroom onUnpin={this.onUnpin} downTolerance={4} upTolerance={10}>
                <StyledHeader isNavToggled={isNavToggled}>
                    <HeaderWrap>
-                        <ReactRouterLink to={WebsitePaths.Home}>
+                        <Link to={WebsitePaths.Home}>
                            <Logo />
-                        </ReactRouterLink>
+                        </Link>

                        <NavLinks>
-                            {_.map(navItems, (link, index) => (
-                                <NavItem
-                                    key={`navlink-${index}`}
-                                    link={link}
-                                />
-                            ))}
+                            {_.map(navItems, (link, index) => <NavItem key={`navlink-${index}`} link={link} />)}
                        </NavLinks>

                        <MediaQuery minWidth={990}>
-                            <TradeButton
-                                bgColor={theme.headerButtonBg}
-                                color="#ffffff"
-                                href="/portal"
-                            >
+                            <TradeButton bgColor={theme.headerButtonBg} color="#ffffff" href="/portal">
                                Trade on 0x
                            </TradeButton>
                        </MediaQuery>
@@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase);
 const NavItem = (props: { link: NavItemProps; key: string }) => {
    const { link } = props;
    const Subnav = link.dropdownComponent;
-
+    const linkElement = _.isUndefined(link.url) ? (
+        <StyledAnchor href="#">{link.text}</StyledAnchor>
+    ) : (
+        <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+            {link.text}
+        </StyledNavLink>
+    );
    return (
        <LinkWrap>
-            <StyledNavLink to={link.url}>
-                {link.text}
-            </StyledNavLink>
+            {linkElement}

-            {link.dropdownComponent &&
+            {link.dropdownComponent && (
                <DropdownWrap width={link.dropdownWidth}>
                    <Subnav />
                </DropdownWrap>
-            }
+            )}
        </LinkWrap>
    );
 };

-const StyledHeader = styled.header<HeaderProps>`
+const StyledHeader =
+    styled.header <
+    HeaderProps >
+    `
    padding: 30px;
    background-color: ${props => props.theme.bgColor};
 `;
@@ -157,9 +155,7 @@ const LinkWrap = styled.li`
    }
 `;

-const StyledNavLink = styled(ReactRouterLink).attrs({
-    activeStyle: { opacity: 1 },
-})`
+const linkStyles = css`
    color: ${props => props.theme.textColor};
    opacity: 0.5;
    transition: opacity 0.35s;
@@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({
    }
 `;

-const HeaderWrap = styled(FlexWrap)`
-  justify-content: space-between;
-  align-items: center;
+const StyledNavLink = styled(Link).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    ${linkStyles};
+`;

-  @media (max-width: 800px) {
-      padding-top: 0;
-      display: flex;
-      padding-bottom: 0;
-  }
+const StyledAnchor = styled.a`
+    ${linkStyles};
+`;
+
+const HeaderWrap = styled(FlexWrap)`
+    justify-content: space-between;
+    align-items: center;
+
+    @media (max-width: 800px) {
+        padding-top: 0;
+        display: flex;
+        padding-bottom: 0;
+    }
 `;

 const NavLinks = styled.ul`
@@ -192,7 +198,10 @@ const NavLinks = styled.ul`
    }
 `;

-const DropdownWrap = styled.div<DropdownWrapInterface>`
+const DropdownWrap =
+    styled.div <
+    DropdownWrapInterface >
+    `
    width: ${props => props.width || 280}px;
    padding: 15px 0;
    border: 1px solid transparent;
--- a/packages/website/ts/@next/components/link.tsx
+++ b/packages/website/ts/@next/components/link.tsx
@@ -1,5 +1,5 @@
+import { Link as SmartLink } from '@0x/react-shared';
 import * as React from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';

 interface LinkInterface {
@@ -16,16 +16,19 @@ interface LinkInterface {
 }

 export const Link = (props: LinkInterface) => {
-    const {
-        children,
-        isNoArrow,
-        href,
-    } = props;
+    const { children, isNoArrow, href } = props;

    return (
        <StyledLink to={href} {...props}>
            {children}
-            {!isNoArrow && <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z" fill="currentColor"/></svg>}
+            {!isNoArrow && (
+                <svg width="25" height="25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M8.484 5.246l.023 1.411 8.147.053L4.817 18.547l.996.996L17.65 7.706l.052 8.146 1.411.024-.068-10.561-10.561-.069z"
+                        fill="currentColor"
+                    />
+                </svg>
+            )}
        </StyledLink>
    );
 };
@@ -39,7 +42,10 @@ export const LinkWrap = styled.div`
    }
 `;

-const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+const StyledLink =
+    styled(SmartLink) <
+    LinkInterface >
+    `
    display: ${props => !props.isBlock && 'inline-flex'};
    color: ${props => props.color || props.theme.linkColor};
    text-align: center;