feat(icon atom): create icon atom

- create style component for icon field
- create icon field component
- implement test for feature

[Finishes #167142660]

package.json

@@ -8,7 +8,8 @@
       "^<src>/(.*)$": "<rootDir>/src/$1",
       "^<variables>/(.*)$": "<rootDir>/src/styles/variables/$1",
       "^<pages>/(.*)$": "<rootDir>/src/components/pages/$1",
-      "^<core>/(.*)$": "<rootDir>/src/core/$1"
+      "^<core>/(.*)$": "<rootDir>/src/core/$1",
+      "^<fixtures>/(.*)$": "<rootDir>/src/fixtures/$1"
     },
     "coverageReporters": [
       "json-summary",
@@ -98,6 +99,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "styled-icons": "^8.1.0"
   }
 }

src/components/UI/atoms/Icon/Icon.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import * as boxIconsRegular from 'styled-icons/boxicons-regular';
+import { iconSizes, icons } from '<variables>/icons';
+import { iconColors } from '<variables>/colorPalette';
+import spacing from '<variables>/spacing';
+
+
+/**
+ * @description - Icon Component
+ *
+ * @prop {string} color - color
+ * @prop {string} height - height
+ * @prop {string} width - width
+ * @prop {string} display - display
+ * @prop {string} margin - margin
+ * @prop {string} icon - icon
+ *
+ * @return {component} Icon
+ */
+const Icon = ({
+  id,
+  color,
+  height,
+  width,
+  display,
+  margin,
+  icon,
+}) => {
+  const IconType = boxIconsRegular[icons[icon]];
+  return (
+    <Icon.Container
+      data-testid={id}
+      color={color}
+      height={height}
+      width={width}
+      display={display}
+      margin={margin}
+      icon={icon}
+    >
+      <IconType />
+    </Icon.Container>);
+};
+
+Icon.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  color: PropTypes.oneOf(Object.keys(iconColors)),
+  icon: PropTypes.oneOf(Object.keys(icons)).isRequired,
+  height: PropTypes.oneOf(Object.keys(iconSizes)),
+  width: PropTypes.oneOf(Object.keys(iconSizes)),
+  display: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']),
+  margin: PropTypes.oneOf(Object.keys(spacing)),
+};
+
+Icon.defaultProps = {
+  id: 'mockIcon',
+  icon: 'search',
+  height: 'normal',
+  width: 'normal',
+  display: 'block',
+  margin: 'md',
+  color: 'primary',
+};
+
+Icon.Container = styled.svg`
+${({
+    color,
+    height,
+    width,
+    display,
+    margin,
+    theme,
+  }) => `
+color: ${theme.iconColors[color]};
+height: ${theme.iconSizes[height]};
+width: ${theme.iconSizes[width]};
+display: ${display};
+margin: ${theme.spacing[margin]};
+`}
+`;
+
+export default Icon;

src/components/UI/atoms/Icon/Icon.md

@@ -0,0 +1,39 @@
+Icon Default: 
+
+```jsx
+<Icon />
+```
+
+Icon with all attributes
+```jsx
+<Icon
+  height="normal"
+  width="normal"
+  color="primary"
+  display="block"
+  margin="md"
+  icon="star"
+  />
+```
+
+Icon with size
+```jsx
+<Icon
+  height="medium"
+  width="medium"
+  />
+```
+
+Icon with color
+```jsx
+<Icon
+  color="gold"
+  />
+```
+
+Icon with margin
+```jsx
+<Icon
+  margin="zero"
+  />
+```

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import mockIcon from '<fixtures>/icons/mockIcon';
+import Icon from './Icon.jsx';
+import 'jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+jest.mock('<fixtures>/icons/Star.svg', () => jest.fn(() => mockIcon));
+
+const defaultProps = {
+  icon: 'star',
+};
+
+const setup = (props) => {
+  const utils = render(<Icon {...defaultProps} {...props} />);
+
+  return {
+    ...utils,
+  };
+};
+
+
+describe('Icon', () => {
+  it('should render the Icon component with default prop', () => {
+    const { container } = setup();
+
+    expect(container).toBeTruthy();
+  });
+
+  it('should render the Icon with height', () => {
+    const { getByTestId } = setup({ height: 'medium' });
+
+    const icon = getByTestId('mockIcon');
+
+    expect(icon).toHaveStyle(`
+    height: medium
+    `);
+  });
+
+  it('should render the Icon with width', () => {
+    const { getByTestId } = setup({ width: 'medium' });
+
+    const icon = getByTestId('mockIcon');
+
+    expect(icon).toHaveStyle(`
+    width: medium
+    `);
+  });
+
+  it('should render the Icon with display', () => {
+    const { getByTestId } = setup({ display: 'inline' });
+
+    const icon = getByTestId('mockIcon');
+
+    expect(icon).toHaveStyle(`
+    display: inline
+    `);
+  });
+
+  it('should render the Icon with color', () => {
+    const { getByTestId } = setup({ color: 'primary' });
+
+    const icon = getByTestId('mockIcon');
+
+    expect(icon).toHaveStyle(`
+    color: primary
+    `);
+  });
+});

src/fixtures/icons/mockIcon.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const mockIcon = (
+  <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.06 8l4.47 4.47a.75.75 0 0 1-1.06 1.06l-5-5a.75.75
+      0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 1.06L6.06 8z"
+      fill="#000" fillRule="nonzero"/>
+  </svg>
+);
+
+export default mockIcon;

src/styles/variables/colorPalette.js

@@ -18,3 +18,8 @@ export const borderColors = {
   primary: '#B02091',
   black: '#191919',
 };
+
+export const iconColors = {
+  primary: '#B02091',
+  gold: '#FFCC4A',
+};

src/styles/variables/icons.js

@@ -0,0 +1,10 @@
+export const icons = {
+  search: 'Search',
+  star: 'Star',
+};
+
+export const iconSizes = {
+  normal: '3.0rem',
+  medium: '4.8rem',
+  big: '8.0rem',
+};

src/styles/variables/mainTheme.js

@@ -5,18 +5,22 @@ import {
   textColors,
   backgroundColors,
   borderColors,
+  iconColors,
 } from './colorPalette';
 import borderRadius from './border';
 import width from './width';
+import { iconSizes } from './icons';
 
 export default {
   spacing,
   fontSizes,
+  iconSizes,
   fontWeights,
   buttonColors,
   textColors,
   backgroundColors,
   borderRadius,
   width,
   borderColors,
+  iconColors,
 };