feat: link component

src/components/buttons/multiButton/MultiButton.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-// import { action } from '@storybook/addon-actions';
 import { boolean, color } from '@storybook/addon-knobs';
 import { MultiButton, SingleButton } from './MultiButton';
 import { action } from '@storybook/addon-actions';

src/components/buttons/multiButton/MultiButton.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import {
-    colorButtonBorder,
     multiSelectColor,
+    colorButtonBorder,
     multiButtonColor,
-} from 'styles/Themes';
+} from '../../../styles/Themes';
 
 interface StyledSingleProps {
     selected?: boolean;
@@ -71,12 +71,8 @@ const MultiBackground = styled.div`
     padding: 4px;
     background: ${multiButtonColor};
     flex-wrap: wrap;
-    ${({ margin }: MultiBackProps) =>
-        margin &&
-        css`
-            margin: ${margin};
-        `}
-    }
+
+    ${({ margin }: MultiBackProps) => margin && `margin: ${margin}`}
 `;
 
 interface MultiButtonProps {

src/components/link/Link.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import { Link } from './Link';
+
+export default {
+    title: 'Link',
+};
+
+export const Default = () => {
+    const linkText = text('Link Text', 'This is a link');
+
+    return <Link to={'google.com'}>{linkText}</Link>;
+};

src/components/link/Link.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { textColor, linkHighlight } from '../../styles/Themes';
+
+const StyledLink = styled.a`
+    color: ${textColor};
+    cursor: pointer;
+    padding: 2px 2px 1px;
+    background: linear-gradient(
+        to bottom,
+        ${linkHighlight} 0%,
+        ${linkHighlight} 100%
+    );
+    background-position: 0 100%;
+    background-repeat: repeat-x;
+    background-size: 2px 2px;
+    text-decoration: none;
+    transition: background-size 0.5s;
+
+    :hover {
+        background-size: 4px 50px;
+    }
+`;
+
+interface LinkProps {
+    children: any;
+    to: string;
+}
+
+export const Link = ({ children, to }: LinkProps) => {
+    return <StyledLink href={to}>{children}</StyledLink>;
+};

src/styles/Themes.ts

@@ -35,6 +35,7 @@ export const fontColors = {
     grey8: '#4a5669',
     blue: '#ccd0e7',
     blue1: '#9197b9',
+    blue2: '#6284e4',
     blue3: '#5163ba',
     black: '#212735',
 };
@@ -67,6 +68,11 @@ export const burgerColor = theme('mode', {
     dark: themeColors.blue6,
 });
 
+export const linkHighlight = theme('mode', {
+    light: fontColors.blue2,
+    dark: fontColors.blue3,
+});
+
 // ---------------------------------------
 // HOMEPAGE COLORS
 // ---------------------------------------