Convert remaining Links to new UI component

3 files changed, 31 insertions, 4 deletions

diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 9bd742749..c16499158 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 import { WebsitePaths } from 'ts/types';
 
 export interface DocsLogoProps {
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 7ed9c6e4e..42aa37bc7 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -1,7 +1,7 @@
 import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { Deco, Key, TutorialInfo } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
@@ -26,6 +26,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
         return (
             <Link
                 to={this.props.tutorialInfo.link.to}
+                shouldOpenInNewTab={this.props.tutorialInfo.link.shouldOpenInNewTab}
                 onMouseEnter={this._onHover.bind(this)}
                 onMouseOver={this._onHover.bind(this)}
                 onMouseLeave={this._onHoverOff.bind(this)}
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
index ae62aad0c..30c76e3c9 100644
--- a/packages/website/ts/components/ui/link.tsx
+++ b/packages/website/ts/components/ui/link.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ReactRounterLink } from 'react-router-dom';
 import { LinkType } from 'ts/types';
@@ -8,6 +9,9 @@ export interface LinkProps {
     shouldOpenInNewTab?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 /**
@@ -22,6 +26,9 @@ export const Link: React.StatelessComponent<LinkProps> = ({
     to,
     shouldOpenInNewTab,
     children,
+    onMouseOver,
+    onMouseLeave,
+    onMouseEnter,
 }) => {
     const styleWithDefault = {
         textDecoration: 'none',
@@ -31,13 +38,29 @@ export const Link: React.StatelessComponent<LinkProps> = ({
     switch (type) {
         case LinkType.External:
             return (
-                <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}>
+                <a
+                    target={shouldOpenInNewTab && '_blank'}
+                    className={className}
+                    style={styleWithDefault}
+                    href={to}
+                    onMouseOver={onMouseOver}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                >
                     {children}
                 </a>
             );
         case LinkType.ReactRoute:
             return (
-                <ReactRounterLink to={to} className={className} style={styleWithDefault}>
+                <ReactRounterLink
+                    to={to}
+                    className={className}
+                    style={styleWithDefault}
+                    target={shouldOpenInNewTab && '_blank'}
+                    onMouseOver={onMouseOver}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                >
                     {children}
                 </ReactRounterLink>
             );
@@ -53,6 +76,9 @@ Link.defaultProps = {
     shouldOpenInNewTab: true,
     style: {},
     className: '',
+    onMouseOver: _.noop.bind(_),
+    onMouseLeave: _.noop.bind(_),
+    onMouseEnter: _.noop.bind(_),
 };
 
 Link.displayName = 'Link';