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