feat: Add new props for Link component (#66)

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

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

src/components/Text/index.tsx

@@ -2,25 +2,25 @@ 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;
 }
 
 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)};

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

src/widgets/Footer/index.tsx

@@ -1,18 +1,18 @@
 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`
   display: flex;
   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;
     }

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

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