chore(layout) Add footer layout

- ensure there is a mobile resposive footer layout
- ensure there is a desktop footer layout

[Finishes #167697967]

.codeclimate.yml

@@ -17,6 +17,7 @@ ratings:
 exclude_paths:
   - "**/*_test.go"
   - "**/*spec.js"
+  - "**/src/assets/**"
   - "*_test.go"
   - "vendor/"
 

jest.config.js

@@ -3,9 +3,15 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/'],
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
       '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    '^@config(.*)$': '<rootDir>/src/config$1',
+    '^@components(.*)$': '<rootDir>/src/components$1',
+    '^@containers(.*)$': '<rootDir>/src/containers$1',
+    '^@actions(.*)$': '<rootDir>/src/actions$1',
+    '^@pages(.*)$': '<rootDir>/src/pages$1',
+    '@/(.*)$': '<rootDir>/src$1'
   },
   collectCoverageFrom: [
     '**/*.{js,jsx}',
@@ -23,6 +29,19 @@ module.exports = {
     '!webpack.common.js',
     '!webpack.config.js',
     '!**/coverage/**',
-    '!**/tests/**'
+    '!**/tests/**',
+    '!src/actions/**',
+    '!src/assets/**',
+    '!src/reducers/**',
+    '!src/store/**',
+    '!src/index.js',
+    '!src/config/**',
+    '!src/containers/**',
+    '!index.js',
+    '!src/pages/home.js',
+    '!postcss.config.js',
+    '!src/utils/**',
+    '!**/cypress/**',
+    '!**/*.css'
   ]
 };

package.json

@@ -98,6 +98,8 @@
     "style-loader": "^0.23.1",
     "tailwindcss": "^1.0.6",
     "terser-webpack-plugin": "^1.3.0",
+    "react-svg-loader": "^3.0.3",
+    "@svgr/webpack": "^4.3.2",
     "webpack": "^4.38.0",
     "webpack-cli": "^3.3.6",
     "webpack-merge": "^4.2.1"

src/assets/icons/index.js

@@ -0,0 +1,7 @@
+import YoutubeIcon from './youtube.svg';
+import FacebookIcon from './facebook.svg';
+import LinkedInIcon from './linkedin.svg';
+import InstagramIcon from './instagram.svg';
+import TwitterIcon from './twitter.svg';
+
+export { YoutubeIcon, FacebookIcon, LinkedInIcon, InstagramIcon, TwitterIcon };

src/components/App.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Routes from '../routes/AppRouter';
+import Footer from './Footer/Footer';
 
 const App = () => {
   return (
     <Router>
       <Routes />
+      <Footer />
     </Router>
   );
 };

src/components/Footer/Footer.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Roboto&display=swap');
+
+
+  .footer {
+    font-family: 'Poppins', sans-serif;
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+  }

src/components/Footer/Footer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import './Footer.css';
+
+import {
+  YoutubeIcon,
+  FacebookIcon,
+  LinkedInIcon,
+  InstagramIcon,
+  TwitterIcon
+} from '../../assets/icons';
+
+const Footer = () => {
+  return (
+    <footer className="footer flex flex-wrap w-full justify-center px-5">
+      <div className="sm:w-1/2 h-8">
+        <p className=" flex justify-start">Designed by Kifaru Team</p>
+      </div>
+      <div className="sm:w-1/2 h-8">
+        <ul className="flex justify-end items-center">
+          <li className="mx-1 px-2 py-1 cursor-pointer">
+            <TwitterIcon />
+          </li>
+          <li className="mx-1 px-2 py-1 cursor-pointer">
+            <FacebookIcon />
+          </li>
+          <li className="mx-1 px-2 py-1 cursor-pointer">
+            <InstagramIcon />
+          </li>
+          <li className="mx-1 px-2 py-1 cursor-pointer">
+            <YoutubeIcon />
+          </li>
+          <li className="mx-1 px-2 py-1 cursor-pointer">
+            <LinkedInIcon />
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/hompage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/images/logo.png';
+import Footer from '../components/Footer/Footer';
 
 const Homepage = () => {
   return (
@@ -17,6 +18,7 @@ const Homepage = () => {
           Login
         </button>
       </Link>
+      <Footer />
     </div>
   );
 };

tests/Footer.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import { shallow } from './enzyme';
+import Footer from '../src/components/Footer/Footer';
+
+describe('Footer layout', () => {
+  it('should render without crashing', () => {
+    const wrapper = shallow(<Footer />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

tests/__snapshots__/App.spec.js.snap

@@ -23,12 +23,14 @@ exports[`Application test should work fine Home Page 1`] = `
       Login
     </button>
   </Link>
+  <Footer />
 </div>
 `;
 
 exports[`Application test should work fine on App 1`] = `
 <BrowserRouter>
   <Routes />
+  <Footer />
 </BrowserRouter>
 `;
 

tests/__snapshots__/Footer.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer layout should render without crashing 1`] = `
+<footer
+  className="footer flex flex-wrap w-full justify-center px-5"
+>
+  <div
+    className="sm:w-1/2 h-8"
+  >
+    <p
+      className=" flex justify-start"
+    >
+      Designed by Kifaru Team
+    </p>
+  </div>
+  <div
+    className="sm:w-1/2 h-8"
+  >
+    <ul
+      className="flex justify-end items-center"
+    >
+      <li
+        className="mx-1 px-2 py-1 cursor-pointer"
+      >
+        <[object Object] />
+      </li>
+      <li
+        className="mx-1 px-2 py-1 cursor-pointer"
+      >
+        <[object Object] />
+      </li>
+      <li
+        className="mx-1 px-2 py-1 cursor-pointer"
+      >
+        <[object Object] />
+      </li>
+      <li
+        className="mx-1 px-2 py-1 cursor-pointer"
+      >
+        <[object Object] />
+      </li>
+      <li
+        className="mx-1 px-2 py-1 cursor-pointer"
+      >
+        <[object Object] />
+      </li>
+    </ul>
+  </div>
+</footer>
+`;

webpack.common.js

@@ -28,7 +28,22 @@ module.exports = {
         }
       },
       {
-        test: /\.(svg|png|jpeg|jpg)$/,
+        test: /\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              svgoConfig: {
+                plugins: {
+                  removeViewBox: false
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpeg|jpg)$/,
         use: {
           loader: 'file-loader',
           options: {

webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.common');