From 28cbb644733bbed3a7b6165101e375c53d8f0cea Mon Sep 17 00:00:00 2001
From: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com>
Date: Tue, 24 Nov 2020 22:45:53 +0900
Subject: [PATCH] feat: Add new props for Link component (#66)

---
 src/components/Link/index.stories.tsx    | 10 +++++++-
 src/components/Link/index.tsx            | 32 +++++++++++++++++++++---
 src/components/Text/index.tsx            |  8 +++---
 src/index.ts                             |  2 +-
 src/widgets/Footer/index.tsx             |  6 ++---
 src/widgets/WalletModal/AccountModal.tsx |  2 +-
 src/widgets/WalletModal/ConnectModal.tsx |  2 +-
 7 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/components/Link/index.stories.tsx b/src/components/Link/index.stories.tsx
index 2e7d91cdb..b29456d93 100644
--- a/src/components/Link/index.stories.tsx
+++ b/src/components/Link/index.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { PancakesIcon } from "../Svg";
-import Link from "./index";
+import { Link, LinkExternal } from "./index";
 
 export default {
   title: "Link",
@@ -25,12 +25,20 @@ export const Default: React.FC = () => {
       <div>
         <Link href="/">Default</Link>
       </div>
+      <div>
+        <Link external href="/">
+          External
+        </Link>
+      </div>
       <div>
         <Link href="/">
           With icon
           <PancakesIcon />
         </Link>
       </div>
+      <div>
+        <LinkExternal href="/">LinkExternal</LinkExternal>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
index 64f1a3d44..dc64f557b 100644
--- a/src/components/Link/index.tsx
+++ b/src/components/Link/index.tsx
@@ -1,8 +1,13 @@
+import React, { AnchorHTMLAttributes } from "react";
 import styled from "styled-components";
-import { AnchorHTMLAttributes } from "react";
-import Text from "../Text";
+import Text, { TextProps } from "../Text";
+import OpenNewIcon from "../Svg/Icons/OpenNew";
 
-const Link = styled(Text).attrs({ as: "a", bold: true })<AnchorHTMLAttributes<HTMLAnchorElement>>`
+interface LinkProps extends TextProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+  external?: boolean;
+}
+
+const StyledLink = styled(Text)<LinkProps>`
   display: flex;
   align-items: center;
   color: ${({ theme }) => theme.colors.primary};
@@ -12,4 +17,23 @@ const Link = styled(Text).attrs({ as: "a", bold: true })<AnchorHTMLAttributes<HT
   }
 `;
 
-export default Link;
+const Link: React.FC<LinkProps> = ({ external, ...props }) => {
+  const internalProps = external
+    ? {
+        target: "_blank",
+        rel: "noreferrer noopener",
+      }
+    : {};
+  return <StyledLink as="a" bold {...internalProps} {...props} />;
+};
+
+const LinkExternal: React.FC<LinkProps> = ({ children, ...props }) => {
+  return (
+    <Link external {...props}>
+      {children}
+      <OpenNewIcon color="primary" ml="4px" />
+    </Link>
+  );
+};
+
+export { Link, LinkExternal };
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
index 4d81a1b75..2e8735631 100644
--- a/src/components/Text/index.tsx
+++ b/src/components/Text/index.tsx
@@ -2,13 +2,13 @@ import styled, { DefaultTheme } from "styled-components";
 import { space, SpaceProps } from "styled-system";
 import getThemeValue from "../../util/getThemeValue";
 
-export interface Props extends SpaceProps {
+export interface TextProps extends SpaceProps {
   color?: string;
   fontSize?: string;
   bold?: boolean;
 }
 
-interface ThemedProps extends Props {
+interface ThemedProps extends TextProps {
   theme: DefaultTheme;
 }
 
@@ -16,11 +16,11 @@ const getColor = ({ color, theme }: ThemedProps) => {
   return getThemeValue(`colors.${color}`, color)(theme);
 };
 
-const getFontSize = ({ fontSize }: Props) => {
+const getFontSize = ({ fontSize }: TextProps) => {
   return fontSize || "16px";
 };
 
-const Text = styled.div<Props>`
+const Text = styled.div<TextProps>`
   color: ${getColor};
   font-size: ${getFontSize};
   font-weight: ${({ bold }) => (bold ? 600 : 400)};
diff --git a/src/index.ts b/src/index.ts
index 50b233c9b..a6ac77870 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,7 +11,7 @@ export * from "./components/Layouts";
 export * from "./components/Svg";
 export { default as Tag } from "./components/Tag";
 export { default as Text } from "./components/Text";
-export { default as Link } from "./components/Link";
+export * from "./components/Link";
 export { default as Toggle } from "./components/Toggle";
 export { default as Progress } from "./components/Progress";
 export { default as ResetCSS } from "./ResetCSS";
diff --git a/src/widgets/Footer/index.tsx b/src/widgets/Footer/index.tsx
index 4fb0fbdeb..501140dfa 100644
--- a/src/widgets/Footer/index.tsx
+++ b/src/widgets/Footer/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Link from "../../components/Link";
+import { Link } from "../../components/Link";
 import config from "./config";
 
 const StyledFooter = styled.footer`
@@ -8,11 +8,11 @@ const StyledFooter = styled.footer`
   justify-content: center;
   flex-direction: column;
   padding: 32px;
-  ${Link}:not(:last-child) {
+  a:not(:last-child) {
     margin-bottom: 16px;
   }
   ${({ theme }) => theme.mediaQueries.sm} {
-    ${Link}:not(:last-child) {
+    a:not(:last-child) {
       margin-bottom: 0;
       margin-right: 32px;
     }
diff --git a/src/widgets/WalletModal/AccountModal.tsx b/src/widgets/WalletModal/AccountModal.tsx
index 7ed290348..b87d2fe1c 100644
--- a/src/widgets/WalletModal/AccountModal.tsx
+++ b/src/widgets/WalletModal/AccountModal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "../../components/Button";
 import Text from "../../components/Text";
-import Link from "../../components/Link";
+import { Link } from "../../components/Link";
 import Flex from "../../components/Flex";
 import { OpenNewIcon } from "../../components/Svg";
 import { Modal } from "../Modal";
diff --git a/src/widgets/WalletModal/ConnectModal.tsx b/src/widgets/WalletModal/ConnectModal.tsx
index e91700626..d5dbf505f 100644
--- a/src/widgets/WalletModal/ConnectModal.tsx
+++ b/src/widgets/WalletModal/ConnectModal.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Link from "../../components/Link";
+import { Link } from "../../components/Link";
 import { HelpIcon } from "../../components/Svg";
 import { Modal } from "../Modal";
 import WalletCard from "./WalletCard";