Merge branch 'PBI-7/edukasi_page' of...

Merge branch 'PBI-7/edukasi_page' of https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-d-blood/mantan-aab-d-blood into PBI-7/integrasi_edukasi

frontend/src/components/navbar.js

@@ -31,6 +31,7 @@ const Navbar = () => {
           <Nav className="mr-auto">
             <NavLink to="/">Home</NavLink>
             <NavLink to="/jadwal-donor">Jadwal Donor</NavLink>
+            <NavLink to="/edukasi">Edukasi</NavLink>
             <Button
               variant="red-transparent"
               onClick={

frontend/src/components/navbar.test.js

@@ -32,6 +32,7 @@ describe(`Navbar`, () => {
     const { container } = render(<Navbar />)
     expect(container).toHaveTextContent("Home")
     expect(container).toHaveTextContent("Jadwal Donor")
+    expect(container).toHaveTextContent("Edukasi")
   })
 })
 

frontend/src/pages/edukasi.css

+.column {
+  margin: 15px 15px 0;
+  padding: 0;
+}
+.column:last-child {
+  padding-bottom: 60px;
+}
+.column::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+.column div {
+  position: relative;
+  float: left;
+  width: 300px;
+  height: 200px;
+  margin: 0 0 0 25px;
+  padding: 0;
+}
+.column div:first-child {
+  margin-left: 0;
+}
+.column div span {
+  position: absolute;
+  bottom: -70px;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 300px;
+  margin: 0;
+  padding: 0;
+  color: #444;
+  font-size: 18px;
+  text-decoration: none;
+  text-align: center;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  opacity: 0;
+}
+figure {
+  width: 300px;
+  height: 200px;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  overflow: hidden;
+}
+figure:hover + span {
+  bottom: -55px;
+  opacity: 1;
+}

frontend/src/pages/edukasi.js

+import React from "react"
+import { Container, Col, Row } from "react-bootstrap"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import news_image_1 from "../images/education-1.png"
+import news_image_2 from "../images/education-2.jpg"
+import news_image_3 from "../images/education-3.jpg"
+import "./index.css"
+import "../styles/global.css"
+import "./edukasi.css"
+
+const Education = () => {
+  return (
+    <Layout navbar>
+      <SEO title="Edukasi - Ini yang perlu diketahui tentang Donor Darah" />
+      <Container>
+        <Row>
+          <Col sm={8}>
+            <Row>
+              <h3 id="title">
+                <b className="text-red">
+                  Ini yang perlu diketahui mengenai golongan darah
+                </b>
+              </h3>
+              <img
+                src={news_image_1}
+                className="img-fluid rounded mx-auto d-block"
+              ></img>
+            </Row>
+            <Row>
+              <Col className="bg-cream mx-3 py-5 my-5 text-justify">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </Col>
+            </Row>
+          </Col>
+          <Col sm={4}>
+            <Row className="my-5">
+              <div class="column">
+                <div>
+                  <figure>
+                    <img
+                      src={news_image_2}
+                      className="img-fluid rounded mx-auto d-block"
+                    />
+                  </figure>
+                  <span>
+                    Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia -
+                    Berat
+                  </span>
+                </div>
+              </div>
+            </Row>
+            <Row>
+              <div class="column">
+                <div>
+                  <figure>
+                    <img
+                      src={news_image_3}
+                      className="img-fluid rounded mx-auto d-block"
+                    />
+                  </figure>
+                  <span>Donor Darah di Depok</span>
+                </div>
+              </div>
+            </Row>
+          </Col>
+        </Row>
+      </Container>
+    </Layout>
+  )
+}
+
+export default Education

frontend/src/pages/edukasi.test.js

+import Education from "./edukasi"
+import "@testing-library/react"
+import { render } from "../utils/test-util"
+import React from "react"
+
+describe(`Education`, () => {
+  it(`shows the page`, () => {
+    const { container } = render(<Education />)
+    expect(container).toHaveTextContent(
+      "Ini yang perlu diketahui mengenai golongan darah"
+    )
+    expect(container).toHaveTextContent(
+      "Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia - Berat Badan"
+    )
+    expect(container).toHaveTextContent("Donor darah di Depok")
+  })
+})

frontend/src/styles/global.css

@@ -234,6 +234,17 @@ body {
   content: "⚠ ";
 }
 
+.thumbnail {
+  position: relative;
+}
+
+.caption {
+  position: absolute;
+  top: 75%;
+  left: 0;
+  width: 100%;
+}
+
 #title {
   text-align: center;
 }