feat(atom): setup link atom

- setup link atom
- setup styleguidist for the link
- write tests for the link atom

[Finishes #167191395]

src/components/UI/atoms/Link/Link.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { fontSizes } from '<variables>/fonts';
+
+/**
+ * @description - Link Component
+ *
+ * @prop {boolean} isTag
+ * @prop {string} fontSize
+ * @prop {string} href
+ * @prop {children} children - children
+ *
+ * @return {component} Link
+ */
+const Link = ({
+  href,
+  isTag,
+  fontSize,
+  onClick,
+  children,
+}) => (
+  <Link.Container
+    href={href || '#'}
+    isTag={isTag}
+    fontSize={fontSize}
+    onClick={onClick}
+  >
+    {children}
+  </Link.Container>
+);
+
+Link.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.element,
+  ]).isRequired,
+  href: PropTypes.string,
+  isTag: PropTypes.bool,
+  fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
+  onClick: PropTypes.func,
+};
+
+Link.defaultProps = {
+  display: 'inline-block',
+  fontSize: 'normal',
+};
+
+Link.Container = styled.a`
+  ${({
+    theme,
+    isTag,
+    fontSize,
+  }) => `
+    padding: 0;
+    display: inline-block;
+    text-decoration: none;
+    text-align: center;
+    transition: .5s border ease-in-out;
+    border: solid 1px transparent;
+    font-size: ${theme.fontSizes[fontSize]};
+    font-family: 'Roboto';
+    color: ${theme.textColors.primary};
+    &:visited {
+      color: ${theme.textColors.primary};
+    }
+    background: ${isTag === true && '#F4EDED'};
+    padding: ${isTag === true && '0.8rem'};
+    color: ${isTag === true && theme.textColors.primary};
+    box-shadow: ${isTag === true && '16px 16px 32px rgba(0, 0, 0, 0.05)'};
+    width: ${isTag === true && '25.8rem'};
+    &:hover {
+      border: ${isTag === true && `solid 1px ${theme.textColors.primary}`};
+    }
+`}
+`;
+export default Link;

src/components/UI/atoms/Link/Link.md

@@ -0,0 +1,31 @@
+Link Default:
+
+```jsx
+<Link>Default Link</Link>
+```
+
+Link with the tag attributes
+```jsx
+<Link
+  href="http://google.com"
+  isTag={true}
+  fontSize='normal'
+>
+  Google Link
+</Link>
+```
+
+Link with onClick attribute
+```jsx
+  const onClick = (e) => {
+    e.preventDefault();
+    alert('Hello World');
+  }
+
+<Link
+  isTag
+  onClick={onClick}
+>
+  Say Hello!
+</Link>
+```

src/components/UI/atoms/Link/Link.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import Link from './Link';
+import Title from '../Title/Title';
+import 'jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+describe('Link', () => {
+  it('should render the Link component', () => {
+    const { getByText } = render(<Link>Authors Haven</Link>);
+
+    expect(getByText('Authors Haven')).toBeTruthy();
+  });
+
+  it('should apply default style', () => {
+    const { getByText } = render(<Link>Authors Haven</Link>);
+
+    expect(getByText('Authors Haven')).toHaveStyle(`
+      font-size: '1.6'
+      display: inline-block;
+      text-decoration: none;
+    `);
+  });
+
+  it('should render a tag styled component', () => {
+    const { container } = render(
+      <Link href='http://google.com' isTag={true}>
+        <Title>Welcome</Title>
+      </Link>,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should render react component as children', () => {
+    const { container } = render(
+      <Link href='http://google.com'>
+        <Title>Welcome</Title>
+      </Link>,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+});