feat(atoms): create image atoms

- Create image component
- Add prop types
- Implement prop validation

[Finishes #167189243]

.travis.yml

@@ -11,7 +11,7 @@ install:
 - npm install -q --no-color --no-progress
 script:
 - npm test -- -u --coverage
-- npm run build
+- npm run build:client
 before_script:
 - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
 - chmod +x ./cc-test-reporter

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,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { borderRadius } from '<variables>/border';
+import { boxShadows } from '<variables>/shadows';
+import { borderColors } from '<variables>/colorPalette';
+
+/**
+ * @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} boxShadow - shadowType
+ * @prop {boolean} borderColor- borderColor
+ * @prop {string} borderRadiusType - borderRadiusType
+ * @return {component} Image
+ */
+
+const Image = (
+  {
+    id,
+    imageUrl,
+    altText,
+    width,
+    height,
+    boxShadow,
+    borderRadiusType,
+    borderColor,
+  },
+) => {
+  return <Image.Container
+    src={imageUrl}
+    data-testid={id}
+    alt={altText}
+    width={width}
+    height={height}
+    boxShadow={boxShadow}
+    borderRadiusType={borderRadiusType}
+    borderColor={borderColor}
+  />;
+};
+
+
+Image.Container = styled.img`
+${({
+    width,
+    height,
+    boxShadow,
+    borderRadiusType,
+    borderColor,
+    theme,
+  }) => {
+    return `
+  width: ${width};
+  min-height: ${height};
+  box-shadow:${theme.boxShadows[boxShadow]};
+  border: ${`1px solid ${theme.borderColors[borderColor]}`};
+  border-radius:${theme.borderRadius[borderRadiusType]};
+  `;
+  }}`;
+
+Image.propTypes = {
+  id: PropTypes.string,
+  imageUrl: PropTypes.string,
+  altText: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
+  borderColor: PropTypes.oneOf(Object.keys(borderColors)),
+  borderRadiusType: PropTypes.oneOf(Object.keys(borderRadius)),
+};
+
+Image.defaultProps = {
+  id: 'mockImage',
+  width: '100%',
+  height: '100%',
+  imageUrl: 'https://via.placeholder.com/150',
+  altText: 'place holder image',
+};
+
+export default Image;

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

@@ -0,0 +1,151 @@
+Image Default:
+
+```jsx
+<Image/>
+```
+
+Image with sepcified image url
+
+```jsx
+<Image imageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'/>
+```
+
+
+Image with sepcified width
+
+```jsx
+<Image  width='50%'/>
+```
+
+Image with sepcified height
+
+```jsx
+<Image  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%'
+boxShadow='image'
+borderColor='lightGrey'
+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%'
+boxShadow='image'
+borderColor='lightGrey'
+/>
+```
+
+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%'
+boxShadow='image'
+borderColor='lightGrey'
+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%'
+boxShadow='image'
+borderColor='lightGrey'
+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'
+boxShadow='image'
+borderColor='lightGrey'
+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%'/>
+```
+
+Image with primary border
+```jsx
+<Image
+imageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+borderColor='primary'
+/>
+```
+
+Image with grey border
+```jsx
+<Image
+imageUrl='https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png'
+altText='welcome'
+width='50%'
+height='50%'
+borderColor='lightGrey'
+/>
+```
+
+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%'
+/>
+```
+
+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'
+boxShadow='icon'
+borderColor='primary'
+/>
+```
+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%'
+boxShadow='image'
+borderColor='lightGrey'
+/>
+```

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

@@ -0,0 +1,58 @@
+/* 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: '',
+  altText: '',
+  id: 'mockImage',
+};
+
+const setUp = (props) => {
+  const utils = render(<Image {...defaultProps} {...props} />);
+  return utils;
+};
+
+describe('Image', () => {
+  it('should render the Image component with default prop', () => {
+    const { container } = setUp();
+    expect(container).toBeTruthy();
+  });
+
+  it('should render with the Image url props supplied', () => {
+    const { queryByTestId } = setUp({ imageUrl: 'https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png' });
+
+
+    const image = queryByTestId('mockImage');
+
+    expect(image.getAttribute('src')).toBe('https://assets-ouch.icons8.com/preview/501/57c82ec0-5e6d-423e-b594-5d93a5f5f44b.png');
+  });
+
+  it('should render the Image component default borderColor', () => {
+    const { queryByTestId } = setUp({ borderColor: 'primary' });
+    const image = queryByTestId('mockImage');
+
+    expect(image).toHaveStyle(`
+    border: 1px solid #B02091;
+  `);
+  });
+
+  it('should render Image component and return alt Text', () => {
+    const { getByAltText } = setUp({ altText: 'pizza' });
+
+    expect(getByAltText('pizza')).toBeTruthy();
+  });
+
+  it('should render Image component with image box shadow', () => {
+    const { queryByTestId } = setUp({ boxShadow: 'image' });
+
+    const image = queryByTestId('mockImage');
+    expect(image).toHaveStyle(`
+    box-shadow: 0px 4px 10px #CCCCCC;
+  `);
+  });
+});

src/styles/variables/border.js

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

src/styles/variables/colorPalette.js

@@ -17,4 +17,5 @@ export const backgroundColors = {
 export const borderColors = {
   primary: '#B02091',
   black: '#191919',
+  lightGrey: '#DDDDDD',
 };

src/styles/variables/mainTheme.js

@@ -8,6 +8,7 @@ import {
 } from './colorPalette';
 import borderRadius from './border';
 import width from './width';
+import { boxShadows } from './shadows';
 
 export default {
   spacing,
@@ -18,5 +19,6 @@ export default {
   backgroundColors,
   borderRadius,
   width,
+  boxShadows,
   borderColors,
 };

src/styles/variables/shadows.js

@@ -0,0 +1,6 @@
+export const boxShadows = {
+  icon: '0px 4px 1px #C0C0C0',
+  image: '0px 4px 10px #CCCCCC',
+};
+
+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,'../public/assets/images'),
     },
     extensions: [' ', '.js', '.jsx'],
   },