Merge pull request #24 from Dhuha9/13-Sponsors_component

Build: Sponsors_component

package.json

@@ -24,7 +24,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "sass": "node-sass -w style/ -o dist/css/ --recursive",
+    "sass": "node-sass -w src/style/ -o dist/css/ --recursive",
     "lint": "eslint ./",
     "lint-fix": "eslint ./ --fix",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\""

src/App.js

@@ -2,9 +2,7 @@ import './App.css';
 import './App.scss';
 
 function App() {
-  return <div className="App">
-
-  </div>;
+  return <div className="App"></div>;
 }
 
 export default App;

src/components/Sponsors/Sponsor.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+function Sponsor({ websiteUrl, imageLogo, name }) {
+  return (
+    <Col>
+      <a href={websiteUrl}>
+        <img className="sponsor-image" src={imageLogo} alt={name}></img>
+      </a>
+    </Col>
+  );
+}
+
+export default Sponsor;
+Sponsor.propTypes = {
+  websiteUrl: PropTypes.string,
+  imageLogo: PropTypes.string,
+  name: PropTypes.string,
+};

src/components/Sponsors/Sponsors.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Container, Row } from 'react-bootstrap';
+import './Sponsors.scss';
+import Sponsor from './Sponsor';
+import data from './data.json';
+import recodedLogo from '../../dist/img/ReCodedLogo.jpg';
+
+const imgMap = { recodedLogo: recodedLogo };
+
+function Sponsors() {
+  return (
+    <>
+      <h1 className="heading text-center mb-4">Sponsors</h1>
+      <p className="subheading  text-center mb-4">
+        This project is generously sponsored by:
+      </p>
+      <Container>
+        <Row className="justify-content-center" noGutters={true}>
+          {data.map((sponsorsData, index) => (
+            <Sponsor
+              {...sponsorsData}
+              key={index}
+              imageLogo={imgMap[sponsorsData.imageLogo]}
+            />
+          ))}
+        </Row>
+      </Container>
+    </>
+  );
+}
+
+export default Sponsors;

src/components/Sponsors/Sponsors.scss

@@ -0,0 +1,30 @@
+.sponsor-image {
+  width: 140px;
+  height: 140px;
+}
+
+.heading {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 140.62%;
+  /* identical to box height, or 34px */
+  text-align: center;
+}
+
+.subheading {
+  left: 28.54%;
+  right: 28.47%;
+  top: 28.76%;
+  bottom: 63.59%;
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 28px;
+  /* identical to box height */
+
+  text-align: center;
+}

src/components/Sponsors/Sponsors.test.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Sponsors from './Sponsors';
+
+it('Sponsors snapshot', () => {
+  const tree = renderer.create(<Sponsors />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Sponsors/__snapshots__/Sponsors.test.jsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sponsors snapshot 1`] = `
+Array [
+  <h1
+    className="heading text-center mb-4"
+  >
+    Sponsors
+  </h1>,
+  <p
+    className="subheading  text-center mb-4"
+  >
+    This project is generously sponsored by:
+  </p>,
+  <div
+    className="container"
+  >
+    <div
+      className="justify-content-center row no-gutters"
+    >
+      <div
+        className="col"
+      >
+        <a
+          href="https://www.re-coded.com/"
+        >
+          <img
+            alt="Re:coded"
+            className="sponsor-image"
+            src="ReCodedLogo.jpg"
+          />
+        </a>
+      </div>
+      <div
+        className="col"
+      >
+        <a
+          href="https://www.re-coded.com/"
+        >
+          <img
+            alt="Re:coded"
+            className="sponsor-image"
+            src="ReCodedLogo.jpg"
+          />
+        </a>
+      </div>
+      <div
+        className="col"
+      >
+        <a
+          href="https://www.re-coded.com/"
+        >
+          <img
+            alt="Re:coded"
+            className="sponsor-image"
+            src="ReCodedLogo.jpg"
+          />
+        </a>
+      </div>
+      <div
+        className="col"
+      >
+        <a
+          href="https://www.re-coded.com/"
+        >
+          <img
+            alt="Re:coded"
+            className="sponsor-image"
+            src="ReCodedLogo.jpg"
+          />
+        </a>
+      </div>
+      <div
+        className="col"
+      >
+        <a
+          href="https://www.re-coded.com/"
+        >
+          <img
+            alt="Re:coded"
+            className="sponsor-image"
+            src="ReCodedLogo.jpg"
+          />
+        </a>
+      </div>
+    </div>
+  </div>,
+]
+`;

src/components/Sponsors/data.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  }
+]