Merge cdf9fee into 754ba6a

package.json

@@ -26,10 +26,11 @@
   "scripts": {
     "test": "jest --coverage",
     "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls",
-    "heroku-postbuild": "npm run build",
-    "build": "webpack --env.mode production",
-    "start": "webpack-dev-server  --env.mode development --open",
-    "test:dev": "jest src --watch",
+    "heroku-postbuild": "npm run build:client",
+    "build:client": "webpack --env.mode production",
+    "start:client": "webpack-dev-server  --env.mode development --open",
+    "start":"node app.js",
+    "test:client": "jest src --watch",
     "styleguide": "styleguidist server",
     "styleguide:build": "styleguidist build"
   },

src/components/UI/atoms/Image/Image.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { borderRadius } from '<variables>/border';
+import { boxShadows } from '<variables>/shadows';
+
+/**
+ * @description - Image Component
+ *
+ * @prop {string} width - image width
+ * @prop {string} height - image height
+ * @prop {string} ImageUrl - image source
+ * @prop {string} altText - alt text
+ * @prop {string} shadowType - shadowType
+ * @prop {boolean} hasBorder - border
+ * @prop {string} borderRadiusType - borderRadiusType
+ * @return {component} Image
+ */
+
+const Image = (
+  {
+    ImageUrl, altText, width, height, shadowType, borderRadiusType, hasBorder,
+  },
+) => {
+  return <Image.Container
+    src={ImageUrl}
+    alt={altText}
+    width={width}
+    height={height}
+    shadowType={shadowType}
+    borderRadiusType={borderRadiusType}
+    hasBorder={hasBorder}/>;
+};
+
+Image.Container = styled.img`
+${({
+    width,
+    height,
+    shadowType,
+    borderRadiusType,
+    hasBorder,
+    theme,
+  }) => {
+    return `
+  width: ${width} || '100%';
+  min-height: ${height} || '100%';
+  box-shadow:${theme.boxShadows[shadowType]};
+  border: ${hasBorder === true ? ('1px solid #ddd') : 'none'};
+  border-radius:${theme.borderRadius[borderRadiusType]};
+  `;
+  }}`;
+
+Image.propTypes = {
+  ImageUrl: PropTypes.string.isRequired,
+  altText: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  shadowType: PropTypes.oneOf(Object.keys(boxShadows)),
+  hasBorder: PropTypes.bool,
+  borderRadiusType: PropTypes.oneOf(Object.keys(borderRadius)),
+};
+
+export default Image;

src/components/UI/atoms/Image/Image.md

@@ -0,0 +1,118 @@
+Image Default:
+
+```jsx
+<Image ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'/>
+```
+
+Image with sepcified width
+
+```jsx
+<Image ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png' width='50%'/>
+```
+
+Image with sepcified height
+
+```jsx
+<Image ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png' height='200px'/>
+```
+
+Image with All attributes
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='image'
+hasBorder='true'
+borderRadiusType='fullRadius'/>
+```
+
+Image with no border radius
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='image'
+hasBorder='true'
+borderRadiusType='noRadius'/>
+```
+
+Image with partial radius
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='image'
+hasBorder='true'
+borderRadiusType='partialRadius'/>
+```
+
+Image with edge radius
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='image'
+hasBorder='true'
+borderRadiusType='edgeRadius'/>
+```
+Image with full radius
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='200px'
+height='200px'
+shadowType='image'
+hasBorder='true'
+borderRadiusType='fullRadius'/>
+```
+
+Image with no box shadow
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='none'
+hasBorder='true'/>
+```
+
+Image with no border
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='none'/>
+```
+
+Image with icon box shadow
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='58px'
+height='58px'
+shadowType='icon'
+hasBorder='true'/>
+```
+Image with image box shadow
+```jsx
+<Image
+ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+shadowType='image'
+hasBorder='true'/>
+```

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

@@ -0,0 +1,60 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import Image from './Image';
+import 'jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+const defaultProps = {
+  ImageUrl: 'https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png',
+  width: '50%',
+  height: '50%',
+  altText: 'welcome',
+  shadowType: 'image',
+  hasBorder: true,
+  borderRadiusType: 'fullRadius',
+};
+
+
+describe('Image', () => {
+  it('should render the Image component with default prop', () => {
+    const { container } = render(<Image {...defaultProps}/>);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render the Image component', () => {
+    const { container } = render(
+      <Image
+        ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+        altText='welcome'
+        hasBorder={true}
+      />,
+    );
+
+    expect(container).toBeTruthy();
+  });
+
+  it('should render Image component and return alt Text', () => {
+    const { getByAltText } = render(
+      <Image
+        ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+        altText='welcome'
+        hasBorder={true}
+      />,
+    );
+
+    expect(getByAltText('welcome')).toBeTruthy();
+  });
+
+  it('should render Image component with no border', () => {
+    const { container } = render(
+      <Image
+        ImageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+        altText='welcome'
+      />,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

src/styles/variables/border.js

@@ -1,5 +1,8 @@
-const borderRadius = {
-  edgeRadius: '4rem',
+export const borderRadius = {
+  fullRadius: '100%',
+  partialRadius: '50%',
+  noRadius: '0%',
+  edgeRadius: '3%',
 };
 
 export default borderRadius;

src/styles/variables/mainTheme.js

@@ -1,8 +1,9 @@
 import spacing from './spacing';
 import { fontSizes, fontWeights } from './fonts';
 import { buttonColors, textColors, backgroundColors } from './colorPalette';
-import borderRadius from './border';
 import width from './width';
+import { borderRadius } from './border';
+import { boxShadows } from './shadows';
 
 export default {
   spacing,
@@ -13,4 +14,5 @@ export default {
   backgroundColors,
   borderRadius,
   width,
+  boxShadows,
 };

src/styles/variables/shadows.js

@@ -0,0 +1,7 @@
+export const boxShadows = {
+  icon: '0px 4px 1px rgba(0, 0, 0, 0.1)',
+  image: '0px 4px 10px rgba(0, 0, 0, 0.25)',
+  none: '',
+};
+
+export default boxShadows;

webpack/webpack.common.js

@@ -56,6 +56,7 @@ module.exports = {
       '<components>': path.resolve(__dirname, '../src/components'),
       '<core>': path.resolve(__dirname, '../src/core'),
       '<atoms>': path.resolve(__dirname, '../src/components/UI/atoms'),
+      '<image>':path.resolve(__dirname,'../src/img'),
     },
     extensions: [' ', '.js', '.jsx'],
   },