From 1a11b1faf2623b8d7c1c1e3830edb0b1fad5e193 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 29 Oct 2020 11:29:24 -0300
Subject: [PATCH 1/4] Fix: Change storybook location for color story

---
 src/colors.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/colors.stories.tsx b/src/colors.stories.tsx
index dfb97db6..7caa68ac 100644
--- a/src/colors.stories.tsx
+++ b/src/colors.stories.tsx
@@ -26,7 +26,7 @@ const ColorDisplay = styled.div<{ color: string }>`
 `;
 
 export default {
-  title: 'Colors',
+  title: 'Utils/Colors',
 };
 
 export const ColorsSample = (): React.ReactElement => {

From e59dc51c816e028d67b2a536f0a2ec9bf2fb695b Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 29 Oct 2020 11:29:32 -0300
Subject: [PATCH 2/4] Add Link element

---
 src/inputs/Link/index.stories.tsx | 35 +++++++++++++++++++++++++++++++
 src/inputs/Link/index.tsx         | 23 ++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/inputs/Link/index.stories.tsx
 create mode 100644 src/inputs/Link/index.tsx

diff --git a/src/inputs/Link/index.stories.tsx b/src/inputs/Link/index.stories.tsx
new file mode 100644
index 00000000..1cd600aa
--- /dev/null
+++ b/src/inputs/Link/index.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Link from './index';
+import { Icon } from '../../';
+
+export default {
+  title: 'inputs/Link',
+  component: Link,
+  parameters: {
+    componentSubtitle: 'Link component.',
+  },
+};
+
+export const Default = (): React.ReactElement => (
+  <Link href="#">Some text</Link>
+);
+
+export const withColor = (): React.ReactElement => (
+  <Link href="#" color="error">
+    Some text
+  </Link>
+);
+
+export const WithCustomSize = (): React.ReactElement => (
+  <Link href="#" size="lg">
+    Some text
+  </Link>
+);
+
+export const WithCustomChild = (): React.ReactElement => (
+  <Link href="#" size="lg">
+    <Icon type="alert" size="md"/>
+    Some text
+  </Link>
+);
diff --git a/src/inputs/Link/index.tsx b/src/inputs/Link/index.tsx
new file mode 100644
index 00000000..bd3bc333
--- /dev/null
+++ b/src/inputs/Link/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ThemeColors, ThemeTextSize } from '../../theme';
+
+export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  size?: ThemeTextSize;
+  color?: ThemeColors;
+}
+
+const StyledLink = styled.a<Props>`
+  text-decoration: underline;
+  cursor: pointer;
+  color: ${({ theme, color = 'primary' }) => theme['colors'][color]};
+  font-family: inherit;
+  font-size: ${({ size = 'md', theme }) => theme.text.size[size].fontSize};
+`;
+
+const Link: React.FC<Props> = ({ children, ...rest }): React.ReactElement => {
+  return <StyledLink {...rest}>{children}</StyledLink>;
+};
+
+export default Link;

From d7e2a0cb82fa78c51698e09ed45deefd83c82098 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 29 Oct 2020 11:53:06 -0300
Subject: [PATCH 3/4] fix prettier

---
 src/inputs/Link/index.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/inputs/Link/index.stories.tsx b/src/inputs/Link/index.stories.tsx
index 1cd600aa..e40ed9bd 100644
--- a/src/inputs/Link/index.stories.tsx
+++ b/src/inputs/Link/index.stories.tsx
@@ -29,7 +29,7 @@ export const WithCustomSize = (): React.ReactElement => (
 
 export const WithCustomChild = (): React.ReactElement => (
   <Link href="#" size="lg">
-    <Icon type="alert" size="md"/>
+    <Icon type="alert" size="md" />
     Some text
   </Link>
 );

From 9327c9b53b915c40edb0837beaefcd2ae1ae1102 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 29 Oct 2020 13:11:43 -0300
Subject: [PATCH 4/4] FIx storybook alignment

---
 src/inputs/Link/index.stories.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/inputs/Link/index.stories.tsx b/src/inputs/Link/index.stories.tsx
index e40ed9bd..0b892c35 100644
--- a/src/inputs/Link/index.stories.tsx
+++ b/src/inputs/Link/index.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import Link from './index';
 import { Icon } from '../../';
@@ -27,9 +28,16 @@ export const WithCustomSize = (): React.ReactElement => (
   </Link>
 );
 
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export const WithCustomChild = (): React.ReactElement => (
   <Link href="#" size="lg">
-    <Icon type="alert" size="md" />
-    Some text
+    <Wrapper>
+      <Icon type="alert" size="md" />
+      Some text
+    </Wrapper>
   </Link>
 );