feature(article-card):article card component

To install prop-types To create an article card component [#167623915]
andela · Aug 1, 2019 · 672a766 · 672a766
1 parent 690e95d
commit 672a766
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 17 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -6,7 +6,7 @@ addons:
     packages:
       - libgconf-2-4
 install:
-  - npm install cypress
+  - npm install
 cache:
   # cache both npm modules and Cypress binary
   directories:
@@ -17,4 +17,4 @@ cache:
     - npm run cy:verify
 script:
   - npm run test:coverage
-  - $(npm bin)/cypress run 
+  - $(npm bin)/cypress run
diff --git a/jest.config.js b/jest.config.js
@@ -7,4 +7,4 @@ module.exports = {
   moduleNameMapper: {
     '\\.scss$': require.resolve('./src/testUtils/styleMocks.js')
   }
-};
+};
diff --git a/package.json b/package.json
@@ -35,19 +35,20 @@
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.6.1",
     "bootstrap": "^4.3.1",
-    "css-loader": "^3.1.0",
     "coveralls": "^3.0.5",
+    "css-loader": "^3.1.0",
     "express": "^4.17.1",
     "file-loader": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.4.1",
     "mini-css-extract-plugin": "^0.7.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "popper.js": "^1.15.0",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
     "react-redux": "^7.1.0",
+    "react-router-dom": "^5.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "style-loader": "^0.23.1",

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Author's Haven</title>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins|Roboto&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
 import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-import LandingPage from './views/LandingPage';
 import LoginPage from './views/LoginPage';
 import { Provider } from 'react-redux';
 import setupStore from '../src/store';
 import './styles/main.scss';
 
+import LandingPage from './views/LandingPage';
+
+
 const store = setupStore();
 class App extends Component {
   render() {

diff --git a/src/assets/images/profileImage.jpg b/src/assets/images/profileImage.jpg
diff --git a/src/assets/images/react.png b/src/assets/images/react.png
diff --git a/src/components/ArticleCard/ArticleCard.scss b/src/components/ArticleCard/ArticleCard.scss
@@ -0,0 +1,77 @@
+@import '../../styles/partials/variables.scss';
+
+.articleCard {
+  width: 322px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.3);
+
+  .card-img-top {
+    width: 320px;
+    height: 182px;
+    border-radius: 4px 4px 0px 0px;
+  }
+
+  .card-body {
+    padding: 10px 0px 0px 0px;
+    border-radius: 0px 0px 4px 4px;
+  }
+
+  .card-body h5 {
+    font-size: 18px;
+    text-align: left;
+    margin-bottom: 15px;
+    margin-left: 7px;
+    line-height: 112.4%;
+  }
+
+  .avatar {
+    width: 76%;
+  }
+  .avatarImage {
+    width: 36px;
+    height: 36px;
+    margin: 0px 5px;
+    border-radius: 50%;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.42);
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar p {
+    font-size: 10px;
+    margin-top: 7px;
+    line-height: 12px;
+  }
+
+  .avatar p small {
+    font-weight: 300;
+    font-size: 6px;
+    line-height: 7px;
+  }
+
+  .mins-read small {
+    padding: 7px;
+    font-family: $secondary-font;
+    font-size: 7px;
+    line-height: 8px;
+    margin-top: 4px;
+  }
+}
+
+.dark-theme {
+  color: white;
+  background: rgba(22, 22, 22, 0.89);
+}
+
+.light-theme {
+  color: #000000;
+  .avatar img {
+    box-shadow: inset 0 0 0 3px rgba(212, 210, 210, 0.1);
+  }
+  .avatar small {
+    color: rgba(68, 68, 70, 0.81);
+  }
+}
diff --git a/src/components/ArticleCard/index.js b/src/components/ArticleCard/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ArticleCard.scss';
+
+// how to make use of the image tag
+{
+  /* <img src={'../../src/assets/images/react.png'} className="float-left avatarImage" alt="author" /> */
+}
+
+const articleCard = props => {
+  console.log(12, props);
+  let cardBodyClass = ['card-body', 'dark-theme'];
+
+  if (props.light) {
+    cardBodyClass.pop();
+    cardBodyClass.push('light-theme');
+  }
+  return (
+    <div className="card articleCard">
+      <img className="card-img-top" src={props.articleImage} alt="article" />
+      <div className={cardBodyClass.join(' ')}>
+        <h5 className="card-title">{props.articleTitle}</h5>
+        <p className="card-text flex">
+          <div className="avatar">
+            <img
+              src={props.authorImage}
+              className="float-left avatarImage"
+              alt="author"
+            />
+
+            <p>
+              {props.author}
+              <br />
+              <small>{props.email}</small>
+            </p>
+          </div>
+
+          <div className="flex mins-read">
+            <small>{props.readTime} read</small>
+            <small>ade</small>
+          </div>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+articleCard.propTypes = {
+  articleImage: PropTypes.any,
+  light: PropTypes.bool,
+  articleTitle: PropTypes.any,
+  authorImage: PropTypes.any,
+  author: PropTypes.string,
+  email: PropTypes.any,
+  readTime: PropTypes.any
+};
+
+export default articleCard;
diff --git a/src/components/ArticleCard/index.spec.js b/src/components/ArticleCard/index.spec.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import ArticleCard from './index';
+
+
+configure({ adapter: new Adapter() });
+
+describe('<ArticleCard />', () => {
+  const props = {
+    light: true
+  };
+
+  const prop = {
+    light: false,
+  };
+  it('should render light theme ArticleCard', () => {
+    shallow(<ArticleCard {...props} />);
+  });
+
+  it('should render dark theme ArticleCard', () => {
+    shallow(<ArticleCard {...prop} />);
+  });
+});
diff --git a/src/styles/partials/base.scss b/src/styles/partials/base.scss
@@ -1,4 +1,6 @@
-.cardDetails {
-  background-color: pink;
-  width: 100px;
+@import '../partials/variables.scss';
+h1, h2, h3, h4, h5 {
+  font-family: $primary-font;
+  font-style: normal;
+  font-weight: normal;
 }
diff --git a/src/styles/partials/variables.scss b/src/styles/partials/variables.scss
@@ -1,2 +1,5 @@
 $color-sassy: #cc4397;
 $color-blue: #0059ff;
+
+$primary-font: 'Poppins', sans-serif;
+$secondary-font: 'Roboto', sans-serif;
diff --git a/src/views/LandingPage/index.js b/src/views/LandingPage/index.js
@@ -1,13 +1,27 @@
 import React from 'react';
 
-const landingPage = () => (
-  <div>
-    <div className="App">
-      <h1>Team Persephone - Author's Haven</h1>
-      <div className="perse-phone">Team Perse-phone is the Best!!!</div>
+import ArticleCard from '../../components/ArticleCard';
+
+const landingPage = () => {
+  const articleDetails = {
+    articleImage: '../../src/assets/images/profileImage.jpg',
+    light: false,
+    articleTitle: 'Understanding React and redux',
+    authorImage: '../../src/assets/images/react.png',
+    author: 'Damilola Adekoya',
+    email: 'damilola.adekoya@andela.com',
+    readTime: '6 mins'
+  };
+  return (
+    <div>
+      <div className="App">
+        <h1>Team Persephone - Author's Haven</h1>
+        <div className="perse-phone">Team Perse-phone is the Best!!!</div>
+      </div>
+      <h1>This is a demo Landing tunde page</h1>
+      <ArticleCard {...articleDetails} />
     </div>
-    <h1>This is a demo Landing tunde page</h1>
-  </div>
-);
+  );
+};
 
 export default landingPage;