Added navlink to link component

src/components/Link/index.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import { FONT_SIZE, TRANSITION } from 'config/variables';
 import colors from 'config/colors';
+import { NavLink } from 'react-router-dom';
 
 const A = styled.a`
     text-decoration: none;
@@ -34,20 +35,44 @@ const A = styled.a`
     }
 `;
 
-const Link = ({
+const StyledNavLink = styled(NavLink)`
-    children, className, href, target, rel, onClick, isGreen = false, isGray = false,
+    ${props => props.isGreen && css`
-}) => (
+            color: ${colors.GREEN_PRIMARY};
+    `}
+
+    ${props => props.isGray && css`
+        color: ${colors.TEXT_SECONDARY};
+    `}
+`;
+
+class Link extends Component {
+    render() {
+        const shouldRenderRouterLink = !!this.this.to;
+        let LinkComponent;
+        if (shouldRenderRouterLink) {
+            LinkComponent = (
+                <StyledNavLink
+                    isGreen={this.props.isGreen}
+                    isGray={this.props.isGray}
+                    to={this.props.to}
+                />);
+        } else {
+            LinkComponent = (
                 <A
-        className={className}
+                    className={this.props.className}
-        href={href}
+                    href={this.props.href}
-        target={target}
+                    target="_blank"
-        rel={rel}
+                    rel="noreferrer noopener"
-        onClick={onClick}
+                    onClick={this.props.onClick}
-        isGreen={isGreen}
+                    isGreen={this.props.isGreen}
-        isGray={isGray}
+                    isGray={this.props.isGray}
-    >{children}
+                >{this.props.children}
                 </A>
             );
+        }
+        return (<LinkComponent />);
+    }
+}
 
 Link.propTypes = {
     children: PropTypes.oneOfType([
@@ -57,11 +82,15 @@ Link.propTypes = {
     ]).isRequired,
     className: PropTypes.string,
     href: PropTypes.string,
-    target: PropTypes.string,
+    to: PropTypes.string,
-    rel: PropTypes.string,
     onClick: PropTypes.func,
     isGreen: PropTypes.bool,
     isGray: PropTypes.bool,
 };
 
+Link.defaultProps = {
+    isGreen: false,
+    isGray: false,
+};
+
 export default Link;