feat: introduce link component (#53)

* feat(lsg): introduce link component

* feat(lsg): add props and create demo content for link component

* feat(lsg): add patterns to pattern.json

src/lsg/patterns/link/demo.tsx

@@ -0,0 +1,42 @@
+import { colors } from '../colors';
+import Link from './index';
+import * as React from 'react';
+import Space, { Size } from '../space';
+
+const clickHandler = (event: React.MouseEvent<HTMLElement>): void => console.log(event);
+const LinkDemo: React.StatelessComponent<void> = (): JSX.Element => (
+	<Space size={Size.L}>
+		<Space size={Size.L}>
+			<Link
+			>
+				Link
+			</Link>
+		</Space>
+		<Space size={Size.L}>
+			<Link
+				color={colors.blue}
+			>
+				Link with color
+			</Link>
+		</Space>
+		<Space size={Size.L}>
+			<Link
+				color={colors.blue}
+				onClick={clickHandler}
+			>
+				Link with clickHandler
+			</Link>
+		</Space>
+		<Space size={Size.L}>
+			<Link
+				color={colors.blue}
+				onClick={clickHandler}
+				uppercase={true}
+			>
+				Link with uppercase
+			</Link>
+		</Space>
+	</Space>
+);
+
+export default LinkDemo;

src/lsg/patterns/link/index.tsx

@@ -0,0 +1,42 @@
+import { Color } from '../colors';
+import { fonts } from '../fonts';
+import * as React from 'react';
+import styled, { StyledComponentClass } from 'styled-components';
+
+export interface LinkProps {
+	className?: string;
+	color?: Color;
+	disabled?: boolean;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	uppercase?: boolean;
+}
+
+const StyledLink: StyledComponentClass<LinkProps, {}> = styled.a`
+	font-family: ${fonts().NORMAL_FONT};
+	${(props: LinkProps) => props.color
+		? `color: ${props.color.toString()}`
+		: 'color: inherit'
+	};
+	${(props: LinkProps) => props.onClick
+		? 'cursor: pointer;'
+		: 'cursor: auto;'
+	}
+	${(props: LinkProps) => props.uppercase
+		? 'text-transform: uppercase;'
+		: ''
+	}
+`;
+
+const Link: React.StatelessComponent<LinkProps> = props => (
+	<StyledLink
+		className={props.className}
+		color={props.color}
+		disabled={props.disabled}
+		onClick={props.onClick}
+		uppercase={props.uppercase}
+	>
+		{props.children}
+	</StyledLink>
+);
+
+export default Link;

src/lsg/patterns/link/pattern.json

@@ -0,0 +1,12 @@
+{
+	"name": "link",
+	"displayName": "Link",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["link"],
+	"patterns": {
+		"colors": "colors",
+		"fonts": "fonts",
+		"space": "space"
+	}
+ }