From 797411240b7d714d03d046dc1d5ae5386ff3ce94 Mon Sep 17 00:00:00 2001
From: oxaudo <oksana@artsymail.com>
Date: Wed, 21 Nov 2018 16:18:55 -0500
Subject: [PATCH 1/2] add Link element

---
 docs/Link.mdx               | 22 ++++++++++++++++++++++
 src/elements/Link/Link.tsx  | 33 +++++++++++++++++++++++++++++++++
 src/elements/Link/index.tsx |  1 +
 src/elements/index.tsx      |  1 +
 4 files changed, 57 insertions(+)
 create mode 100644 docs/Link.mdx
 create mode 100644 src/elements/Link/Link.tsx
 create mode 100644 src/elements/Link/index.tsx

diff --git a/docs/Link.mdx b/docs/Link.mdx
new file mode 100644
index 000000000..bb6782702
--- /dev/null
+++ b/docs/Link.mdx
@@ -0,0 +1,22 @@
+---
+name: Link
+---
+
+import { Playground, PropsTable } from 'docz'
+import { Box, Link } from '../src'
+
+# Link
+
+<Playground>
+  <Box>
+    <Link>This is a default link</Link>
+  </Box>
+  <Box>
+    <Link noUnderline>This is a non-underlined link</Link>
+  </Box>
+  <Box>
+    <Link color="purple100">This is a non-standard color link</Link>
+  </Box>
+</Playground>
+
+<PropsTable of={Link} />
\ No newline at end of file
diff --git a/src/elements/Link/Link.tsx b/src/elements/Link/Link.tsx
new file mode 100644
index 000000000..de28bd444
--- /dev/null
+++ b/src/elements/Link/Link.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components"
+import {
+  color as styledColor,
+  ColorProps,
+  space,
+  SpaceProps,
+} from "styled-system"
+import { color } from "../../helpers"
+
+export interface LinkProps extends SpaceProps, ColorProps {
+  noUnderline?: boolean
+}
+
+/**
+ * Basic a tag
+ */
+export const Link = styled.a<LinkProps>`
+  ${space};
+  ${styledColor};
+  text-decoration: ${props =>
+    props.noUnderline || props.color ? "none" : "underline"};
+  cursor: pointer;
+  transition: color 0.25s;
+  :hover {
+    text-decoration: ${props => (props.color ? "none" : "underline")};
+    color: ${color("black100")};
+  }
+  :focus {
+    border: 1px solid ${color("purple100")};
+    color: ${props =>
+      props.color ? color(props.color as any) : color("black100")};
+  }
+`
diff --git a/src/elements/Link/index.tsx b/src/elements/Link/index.tsx
new file mode 100644
index 000000000..459c7bf47
--- /dev/null
+++ b/src/elements/Link/index.tsx
@@ -0,0 +1 @@
+export * from "./Link"
diff --git a/src/elements/index.tsx b/src/elements/index.tsx
index 5994a106b..ec2b1376b 100644
--- a/src/elements/index.tsx
+++ b/src/elements/index.tsx
@@ -10,6 +10,7 @@ export * from "./Flex"
 export * from "./Image"
 export * from "./Join"
 export * from "./Message"
+export * from "./Link"
 export * from "./Radio"
 export * from "./RadioGroup"
 export * from "./Select"

From 656ea6851316bd1a61ec4ab975ca3fb1951a9ded Mon Sep 17 00:00:00 2001
From: oxaudo <oksana@artsymail.com>
Date: Mon, 26 Nov 2018 11:11:29 -0500
Subject: [PATCH 2/2] add placeholder for ios link file

---
 src/elements/Link/Link.ios.tsx |  0
 src/elements/Link/Link.tsx     | 22 +++++++++-------------
 2 files changed, 9 insertions(+), 13 deletions(-)
 create mode 100644 src/elements/Link/Link.ios.tsx

diff --git a/src/elements/Link/Link.ios.tsx b/src/elements/Link/Link.ios.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/elements/Link/Link.tsx b/src/elements/Link/Link.tsx
index de28bd444..8887cbd76 100644
--- a/src/elements/Link/Link.tsx
+++ b/src/elements/Link/Link.tsx
@@ -1,14 +1,11 @@
 import styled from "styled-components"
-import {
-  color as styledColor,
-  ColorProps,
-  space,
-  SpaceProps,
-} from "styled-system"
+import { color as styledColor, space, SpaceProps } from "styled-system"
 import { color } from "../../helpers"
+import { Color } from "../../Theme"
 
-export interface LinkProps extends SpaceProps, ColorProps {
+export interface LinkProps extends SpaceProps {
   noUnderline?: boolean
+  color?: Color
 }
 
 /**
@@ -17,17 +14,16 @@ export interface LinkProps extends SpaceProps, ColorProps {
 export const Link = styled.a<LinkProps>`
   ${space};
   ${styledColor};
-  text-decoration: ${props =>
-    props.noUnderline || props.color ? "none" : "underline"};
   cursor: pointer;
   transition: color 0.25s;
-  :hover {
+  text-decoration: ${props =>
+    props.noUnderline || props.color ? "none" : "underline"};
+  &:hover {
     text-decoration: ${props => (props.color ? "none" : "underline")};
     color: ${color("black100")};
   }
-  :focus {
+  &:focus {
     border: 1px solid ${color("purple100")};
-    color: ${props =>
-      props.color ? color(props.color as any) : color("black100")};
+    color: ${props => (props.color ? color(props.color) : color("black100"))};
   }
 `