feat(atom): setup button atom

- create button atom
- write tests for the button atom
- create .md for style guide

[Finishes #167132104]

.eslintrc

@@ -35,6 +35,7 @@
     "no-underscore-dangle": "error",
     "one-var": "off",
     "require-jsdoc": 0,
+    "no-alert": 0,
     "one-var-declaration-per-line": "off",
     "prefer-const": "warn",
     "consistent-return": 0,

package.json

@@ -89,7 +89,7 @@
     "husky": "^3.0.0",
     "jest": "^24.8.0",
     "lint-staged": "^9.0.0",
-    "mini-css-extract-plugin": "^0.7.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "react-styleguidist": "^9.1.11",
     "style-loader": "^0.23.1",
     "uglifyjs-webpack-plugin": "^2.1.2",

src/components/UI/atoms/Button/Button.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+/**
+ * @description - Button Component
+ *
+ * @prop {string} display - display
+ * @prop {string} buttonType - buttonType
+ * @prop {function} onClick - onClick
+ * @prop {children} children - children
+ *
+ * @return {component} Button
+ */
+const Button = ({
+  buttonType,
+  onClick,
+  children,
+  display,
+}) => (
+  <Button.Container
+    buttonType={buttonType}
+    display={display}
+    onClick={onClick}
+  >
+    {children}
+  </Button.Container>
+);
+
+Button.propTypes = {
+  display: PropTypes.oneOf(['block', 'inline', 'inline-block']),
+  buttonType: PropTypes.oneOf(['default', 'getStarted', 'submit']),
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.string.isRequired,
+};
+
+Button.defaultProps = {
+  display: 'block',
+  buttonType: 'default',
+};
+
+const buttonRadius = {
+  default: 'none',
+  getStarted: 'none',
+  submit: '0.4rem',
+};
+
+const buttonBorderColor = {
+  default: '#666666',
+  getStarted: '#B02091',
+  submit: '#666666',
+};
+
+const buttonBackground = {
+  default: '#B02091',
+  getStarted: 'transparent',
+  submit: '#690375',
+};
+
+const buttonWidth = {
+  default: '12rem',
+  getStarted: '12rem',
+  submit: '30.2rem',
+};
+
+Button.Container = styled.button`
+  ${({
+    buttonType,
+    display,
+    theme,
+  }) => `
+  width: ${buttonWidth[buttonType]};
+  height: ${theme.height.defaultButtonHeight};
+  display: ${display};
+  font-size: ${theme.fontSizes.normal};
+  background: ${buttonBackground[buttonType]};
+  color: ${theme.buttonColors[buttonType]};
+  border-radius: ${buttonRadius[buttonType]};
+  border: 1px solid ${buttonBorderColor[buttonType]};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${theme.buttonHover[buttonType]};
+    color: ${theme.buttonColors.white001};
+    border: 1px solid ${theme.buttonColors.light};
+  }
+
+  &:active {
+    border: 1px solid ${theme.buttonColors.grey};
+    box-shadow: inset 1px 0px 5px ${theme.buttonColors.grey};
+  }
+  
+  &:focus {
+    outline: 0;
+  }
+`}
+`;
+
+export default Button;

src/components/UI/atoms/Button/Button.md

@@ -0,0 +1,37 @@
+Default Button:
+
+```jsx
+<Button onClick={() => alert('hello')}>Default</Button>
+```
+
+Submit Button:
+
+```jsx
+<Button
+  buttonType="submit"
+  onClick={() => alert('hello')}
+>
+  Submit
+</Button>
+```
+
+Get Started Button:
+
+```jsx
+<Button
+  buttonType="getStarted"
+  onClick={() => alert('hello')}
+>
+  Get Started
+</Button>
+```
+
+Publish Button:
+
+```jsx
+<Button
+  onClick={() => alert('hello')}
+>
+  Publish
+</Button>
+```

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import Button from './Button';
+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+describe('Button', () => {
+  it('should render the Button component', () => {
+    const { getByText } = render(
+      <Button onClick={() => alert('hello')}>Submit</Button>,
+    );
+    expect(getByText('Submit')).toBeTruthy();
+  });
+
+  it('should apply default style', () => {
+    const { getByText } = render(
+      <Button onClick={() => alert('hello')}>Submit</Button>,
+    );
+    expect(getByText('Submit')).toHaveStyle(`
+      color: #FFFFFF;
+      display: block;
+      font-size: "1.6rem";
+      height: "3.8";
+      width: "12rem";
+    `);
+  });
+
+  it('should render button text', () => {
+    const { getByText } = render(
+      <Button onClick={() => alert('hello')}>Submit</Button>,
+    );
+
+    expect(getByText('Submit')).toHaveTextContent('Submit');
+  });
+
+  it('should render submit buttonType', () => {
+    const { getByText } = render(
+      <Button buttonType="submit" onClick={() => alert('hello')}>
+        Submit
+      </Button>,
+    );
+
+    expect(getByText('Submit')).toHaveStyle(`
+      width: 30.2rem;
+      height: 3.8rem;
+      display: block;
+      font-size: 1.6rem;
+      background: #690375;
+      color: #FFFFFF;
+      border-radius: 0.4rem;
+      border: 1px solid #666666;
+      cursor: pointer;
+    `);
+  });
+
+  it('should render getStarted buttonType', () => {
+    const { getByText } = render(
+      <Button buttonType="getStarted" onClick={() => alert('hello')}>
+        Get Started
+      </Button>,
+    );
+
+    expect(getByText('Get Started')).toHaveStyle(`
+    width: 12rem;
+    height: 3.8rem;
+    display: block;
+    font-size: 1.6rem;
+    background: transparent;
+    color: #B02091;
+    border-radius: none;
+    border: 1px solid #B02091;
+    cursor: pointer;
+    `);
+  });
+});

src/styles/variables/colorPalette.js

@@ -2,9 +2,21 @@ export const buttonColors = {
   white001: '#FFFFFF',
   black: '#191919',
   primary: '#690375',
-  Hover: '#9304A4',
+  grey: '#666666',
+  light: '#B02091',
+  default: '#FFFFFF',
+  getStarted: '#B02091',
+  submit: '#FFFFFF',
+  transparent: 'transparent',
 };
 
+export const buttonHover = {
+  default: '#d82bb3',
+  getStarted: '#d82bb3',
+  submit: '#9304A4',
+};
+
+
 export const textColors = {
   primary: '#B02091',
   grey: '#7A757E',

src/styles/variables/height.js

@@ -0,0 +1,5 @@
+const heigths = {
+  defaultButtonHeight: '3.8rem',
+};
+
+export default heigths;

src/styles/variables/mainTheme.js

@@ -6,14 +6,17 @@ import {
   backgroundColors,
   borderColors,
   iconColors,
+  buttonHover,
 } from './colorPalette';
 import borderRadius from './border';
 import width from './width';
+import height from './height';
 import { boxShadows } from './shadows';
 import { iconSizes } from './icons';
 
 export default {
   spacing,
+  buttonHover,
   fontSizes,
   iconSizes,
   fontWeights,
@@ -22,6 +25,7 @@ export default {
   backgroundColors,
   borderRadius,
   width,
+  height,
   boxShadows,
   borderColors,
   iconColors,

src/styles/variables/width.js

@@ -1,4 +1,4 @@
-const width = {
+export const width = {
   fullWidth: '100%',
   searchBarWidth: '50%',
 };