feature: Add Link Component

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 => {

src/inputs/Link/index.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+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>
+);
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const WithCustomChild = (): React.ReactElement => (
+  <Link href="#" size="lg">
+    <Wrapper>
+      <Icon type="alert" size="md" />
+      Some text
+    </Wrapper>
+  </Link>
+);

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;