Merge 9d95fa3 into a5315ee

src/components/UI/atoms/StyledLink/StyledLink.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { fontSizes } from '<variables>/fonts';
+import { backgroundColors } from '<variables>/colorPalette';
+import spacing from '<variables>/spacing';
+
+/**
+ * @description - StyledLink Component
+ *
+ * @prop {string} to
+ * @prop {boolean} tag
+ * @prop {boolean} isExternal
+ * @prop {string} fontSize
+ * @prop {string} margin
+ * @prop {function} onClick
+ * @prop {children} children
+ *
+ * @return {component} StyledLink
+ */
+
+const StyledLink = ({
+  to,
+  tag,
+  isExternal,
+  fontSize,
+  margin,
+  onClick,
+  children,
+}) => {
+  return isExternal
+    ? (<StyledLink.External
+      target='_blank'
+      href={to}
+      tag={tag}
+      fontSize={fontSize}
+      margin={margin}
+      onClick={onClick}
+    >
+      {children}
+    </StyledLink.External>)
+    : (
+      <StyledLink.Internal
+        to={to}
+        tag={tag}
+        fontSize={fontSize}
+        margin={margin}
+        onClick={onClick}
+      >
+        {children}
+      </StyledLink.Internal>
+    );
+};
+
+StyledLink.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.element,
+  ]).isRequired,
+  to: PropTypes.string.isRequired,
+  tag: PropTypes.bool,
+  isExternal: PropTypes.bool,
+  fontSize: PropTypes.oneOf(Object.keys(fontSizes)),
+  onClick: PropTypes.func,
+  margin: PropTypes.oneOf(Object.keys(spacing)),
+};
+
+StyledLink.defaultProps = {
+  fontSize: 'normal',
+  margin: 'zero',
+  to: '#',
+  isExternal: false,
+  backgroundColor: 'transparent',
+};
+
+const linkStyle = ({
+  margin, fontSize, theme, tag,
+}) => `
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    transition: .5s border ease-in-out;
+    border: solid 1px transparent;
+    font-family: 'Roboto';
+    margin: ${spacing[margin]};
+    font-size: ${theme.fontSizes[fontSize]};
+    color: ${theme.textColors.primary};
+    background: ${(tag && backgroundColors.lightPink) || 'transparent'};
+    padding: ${(tag && theme.spacing.xs) || '0'};
+    box-shadow: ${(tag && theme.boxShadows.articleCard) || 'none'};
+    width: ${(tag && theme.spacing.smd) || 'auto'};
+    &:visited {
+      color: ${theme.textColors.primary};
+    }
+    &:hover {
+      border: ${tag && `solid 1px ${theme.textColors.primary}`};
+    };
+`;
+
+StyledLink.Internal = styled(Link)`${linkStyle}`;
+
+StyledLink.External = styled.a`${linkStyle}`;
+
+export default StyledLink;

src/components/UI/atoms/StyledLink/StyledLink.md

@@ -0,0 +1,26 @@
+StyledLink Default:
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+<Router>
+  <StyledLink>Google Link</StyledLink>
+</Router>
+```
+
+StyledLink With All Props:
+
+```jsx
+import { BrowserRouter as Router } from 'react-router-dom';
+<Router>
+  <StyledLink
+    to="http://google.com"
+    isExternal
+    tag
+    isdisabled="false"
+    fontSize="normal"
+    margin="xs"
+  >
+    Google Link
+  </StyledLink>
+</Router>
+```

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import StyledLink from './StyledLink';
+import Title from '../Title/Title';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+describe('StyledLink', () => {
+  it('should render the Link component', () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <StyledLink url='#'>Authors Haven</StyledLink>
+      </MemoryRouter>,
+    );
+
+    expect(getByText('Authors Haven')).toBeTruthy();
+  });
+
+  it('should apply default style', () => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <StyledLink url='#'>Authors Haven</StyledLink>
+      </MemoryRouter>,
+    );
+
+    expect(getByText('Authors Haven')).toHaveStyle(`
+      font-size: '1.6'
+      display: inline-block;
+      text-decoration: none;
+    `);
+  });
+
+  it('should render an external tag styled link', () => {
+    const { container, getByText } = render(
+      <MemoryRouter>
+        <StyledLink
+          url='http://google.com'
+          isExternal
+        >
+          <Title>Welcome</Title>
+        </StyledLink>
+      </MemoryRouter>,
+    );
+    fireEvent.click(getByText('Welcome'));
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should render a tag styled component', () => {
+    const { container, getByText } = render(
+      <MemoryRouter>
+        <StyledLink
+          url='http://google.com'
+          tag
+          isExternal
+        >
+          <Title>Welcome</Title>
+        </StyledLink>
+      </MemoryRouter>,
+    );
+    fireEvent.click(getByText('Welcome'));
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should render react component as children', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <StyledLink
+          url='https://www.google.com'
+          tag
+          isExternal
+        >
+          Google Link
+        </StyledLink>
+      </MemoryRouter>,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('should render react component as children', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <StyledLink
+          url='https://www.google.com'
+          tag
+          isExternal
+        >
+          Google Link
+        </StyledLink>
+      </MemoryRouter>,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+});

src/styles/variables/spacing.js

@@ -2,6 +2,7 @@ const spacing = {
   zero: '0rem',
   xs: '0.9rem',
   sm: '1.6rem',
+  smd: '25.8rem',
   md: '3.2rem',
   xxl: '8.2rem',
 };