feature(requests-table):Implement requests table [Finishes #171380698]

atlp-rwanda · Jun 3, 2020 · a4ea2ab · a4ea2ab
1 parent bcf9180
commit a4ea2ab
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -35,10 +35,14 @@
   "dependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@material-ui/core": "^4.10.1",
+    "@material-ui/icons": "^4.9.1",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
+    "@testing-library/react": "^10.0.6",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <title>Barefoot nomad</title>
 </head>
 <body>

diff --git a/src/__tests__/SectionHeader.test.js b/src/__tests__/SectionHeader.test.js
@@ -0,0 +1,13 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { cleanup } from '@testing-library/react';
+import SectionHeader from '../components/SectionHeader/SectionHeader';
+
+describe('<SectionHeader/>', () => {
+  afterEach(cleanup);
+  it('Should match the SectionHeader component snapshot', () => {
+    const tree = renderer.create(<SectionHeader />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/__snapshots__/SectionHeader.test.js.snap b/src/__tests__/__snapshots__/SectionHeader.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SectionHeader/> Should match the SectionHeader component snapshot 1`] = `
+<p
+  className="MuiTypography-root makeStyles-title-1 MuiTypography-body1"
+>
+  Trip requests
+</p>
+`;
diff --git a/src/components/SectionHeader/SectionHeader.js b/src/components/SectionHeader/SectionHeader.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+  title: {
+    borderWidth: 1,
+    borderColor: '#00A799',
+    color: '#484848',
+    backgroundColor: '#00a7990f',
+    padding: 24,
+    fontSize: 14,
+    fontFamily: 'Roboto',
+    fontWeight: 500,
+  },
+});
+
+const SectionHeader = () => {
+  const classes = useStyles();
+
+  return (
+    <Typography className={classes.title}>
+      Trip requests
+    </Typography>
+  );
+};
+
+export default SectionHeader;
diff --git a/src/entry/App.js b/src/entry/App.js
@@ -5,16 +5,18 @@ import {
 import './app.css';
 import HelloComponent from '../components/HelloComponent';
 import FrontPage from '../views/frontPage';
+import SectionHeader from '../components/SectionHeader/SectionHeader';
 
 const App = () => (
   <div>
     <Router>
       <ul>
-        <li><Link to="/login">Login</Link></li>
+        <li><Link to="/dashboard/requests">Login</Link></li>
       </ul>
       <Switch>
         <Route path="/" component={HelloComponent} exact />
         <Route path="/login" component={FrontPage} />
+        <Route path="/dashboard/requests" component={SectionHeader} />
       </Switch>
     </Router>
   </div>

diff --git a/src/styles/sass/index.scss b/src/styles/sass/index.scss
@@ -1,7 +1,7 @@
 $color: #00A799;
-$text: #FFFFFF;
+$text: #484848;
 
 body {
-  background-color: $color;
+  background-color: #ffffff;
   color: $text;
 }