Merge branch 'master' of github.com:COMPFEST/jasper into shafiya/visu…

…al-language
COMPFEST · Nov 26, 2020 · 197a5ef · 197a5ef
2 parents 2580178 + 48dbde6
commit 197a5ef
Show file tree

Hide file tree

Showing 16 changed files with 409 additions and 262 deletions.
diff --git a/docusaurus/docs/about.md b/docusaurus/docs/about.md
@@ -0,0 +1,18 @@
+---
+id: about
+title: About
+---
+
+Get to know more about the team maintaining Jasper.
+
+## Team
+
+Jasper is maintained by a [team of developers](https://github.com/orgs/COMPFEST/people) on Compfest. We have a growing team and if you are interested in re-building this front-end framework, we would love to hear from you.
+
+## Contributors
+
+We welcome community support with both feature and bug reporting. Please don't hesitate to jump in. Join our growing list of [contributors](https://github.com/COMPFEST/jasper/graphs/contributors).
+
+## Get Involved
+
+Get involved with Jasper [by opening an issue](https://github.com/react-bootstrap/react-bootstrap/issues/new) or submitting a pull request.
diff --git a/docusaurus/docs/form-fields.md b/docusaurus/docs/form-fields.md
@@ -0,0 +1,34 @@
+---
+id: form-fields
+title: Form Fields
+---
+
+Form fields are used in forms where input from user is required. They are part of the django form fields implemented on our web. Typically used for registration, login, and signup.
+
+## Dropdown
+
+import {Dropdown} from "jasper-ui"
+
+### Usage
+
+We implement dropdown input field to contain user input in a scenario where user is required to select one from multiple choices. Usually used for signup and registration.
+
+### Code
+
+```jsx
+<Input.Dropdown
+  placeholder="Finance"
+  choices={["Finance", "Academy", "Competition"]}
+  label="Departments"
+  name="DropdownInput"
+/>
+```
+
+### Result
+
+<Dropdown
+placeholder="Finance"
+choices={["Finance", "Academy", "Competition"]}
+label="Departments"
+name="DropdownInput"
+/>
diff --git a/docusaurus/docs/introduction.md b/docusaurus/docs/introduction.md
@@ -0,0 +1,22 @@
+---
+id: introduction
+title: Introduction
+---
+
+Learn how to include Jasper in your project
+
+## Installation
+
+The best way to consume Jasper is via the npm package which you can install with npm.
+
+```jsx
+npm install --save jasper-ui
+```
+
+## Importing Components
+
+You should import individual components rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
+
+```jsx
+import { Button } from "jasper-ui"
+```
diff --git a/docusaurus/docs/small-nav.md b/docusaurus/docs/small-nav.md
@@ -0,0 +1,69 @@
+---
+id: small-nav
+title: Small Nav
+---
+
+import { SmallNav, Card } from 'jasper-ui'
+
+Small Nav is a component for navigation. Small Nav act like Navbar but in the small version.
+
+### Usage
+
+Small Nav contain titles, each of them represent its own component that navigated by its own title.
+
+### Code
+
+```jsx
+const navItems = [
+  {
+    title: "navitem1",
+    component: <Card title="Component1" text="Hello world, this is component1." />
+  },
+  {
+    title: "navitem2",
+    component: <Card title="Component2" text="This is component2, just to make sure you actually changed the state." />
+  },
+  {
+    title: "navitem3",
+    component: <Card title="Component3" text="Ooh, look! Another change" />
+  },
+  {
+    title: "navitem4",
+    component: <Card title="Component4" text="Lorem ipsum dolor sit amet" />
+  },
+]
+
+<SmallNav navItems={navItems} />
+```
+
+### Result
+
+<SmallNav navItems={[
+{
+title: "navitem1",
+component: <Card title="Component1" text="Hello world, this is component1." />
+},
+{
+title: "navitem2",
+component: <Card title="Component2" text="This is component2, just to make sure you actually changed the state." />
+},
+{
+title: "navitem3",
+component: <Card title="Component3" text="Ooh, look! Another change" />
+},
+{
+title: "navitem4",
+component: <Card title="Component4" text="Lorem ipsum dolor sit amet" />
+},
+]} />
+
+## Props
+
+| Prop name | Type   | Mandatory/Optional | Description                                                       |
+| --------- | ------ | ------------------ | ----------------------------------------------------------------- |
+| navItems  | Object | Mandatory          | Array of objects, that each object consist of title and component |
+
+| Key       | Value Type | Description                                                                 |
+| --------- | ---------- | --------------------------------------------------------------------------- |
+| title     | String     | Text that act as navigation                                                 |
+| component | Object     | The object that will be displayed when the title representing it is clicked |
diff --git a/docusaurus/sidebars.js b/docusaurus/sidebars.js
@@ -3,6 +3,7 @@ module.exports = {
     "Getting Started": ["installation"],
     "Visual Language": ["color", "logo", "mascot"],
     Layout: ["doc3"],
-    Components: ["button", "card", "alert-box"]
-  }
+    Components: ['alert-box', 'button', 'card', 'form-fields', 'small-nav'],
+    Info: ['about']
+  },
 }
diff --git a/src/Footer/Input.stories.js b/src/Footer/Input.stories.js
diff --git a/src/Footer/SubscribeForm/index.js b/src/Footer/SubscribeForm/index.js
@@ -0,0 +1,28 @@
+import React, { useState } from "react"
+import { SubscribeFormContainer } from "./style"
+
+const SubscribeForm = () => {
+  const [email, setEmail] = useState("")
+  // const [isLoading, setLoading] = useState(false)
+  const isLoading = false
+
+  return (
+    <SubscribeFormContainer>
+      <input
+        type="email"
+        className="email-input"
+        placeholder="Input your e-mail here"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      { isLoading
+        ? <button className="subscribe-button disabled">Loading..</button>
+        : <button type="submit" className="subscribe-button">
+        Subscribe
+        </button>
+      }
+    </SubscribeFormContainer>
+  )
+}
+
+export default SubscribeForm
diff --git a/src/Footer/SubscribeForm/style.js b/src/Footer/SubscribeForm/style.js
@@ -0,0 +1,57 @@
+import styled from "styled-components"
+
+export const SubscribeFormContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  .email-input {
+    background-color: rgba(243, 243, 243, 0.4);
+    border-radius: 5px;
+    color: white;
+    padding: 0.5rem;
+    padding-right: 2.5rem;
+    border: 0;
+    margin-right: 1rem;
+  }
+
+  .email-input::placeholder {
+    color: rgba(243, 243, 243, 0.5);
+  }
+
+  .subscribe-button {
+    border-radius: 50px;
+    background-color: #fdd262;
+    color: #001c2c;
+    font-size: 1rem;
+    border: 0;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+
+  .disabled {
+    cursor: initial;
+    opacity: 0.8;
+  }
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+
+    .email-input {
+      width: 75%;
+      margin-bottom: 0.5rem;
+    }
+
+    .subscribe-button {
+      max-width: 50%;
+      margin-top: 0.7rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+`
diff --git a/src/Footer/footer.stories.js b/src/Footer/footer.stories.js
@@ -0,0 +1,12 @@
+import React from "react"
+import { storiesOf } from "@storybook/react"
+import Footer from "."
+import Facebook from "./Facebook.svg"
+import Instagram from "./Instagram.svg"
+import Line from "./Line.svg"
+import Twitter from "./twitter.svg"
+import Linkedin from "./LinkedIn.svg"
+import Youtube from "./youtube.svg"
+import Compfest from "./compfest-white.svg"
+
+storiesOf("Footer").add("Default", () => <Footer Facebook={Facebook} Instagram={Instagram} Line={Line} Twitter={Twitter} LinkedIn={Linkedin} Youtube={Youtube} Compfest={Compfest} />)
diff --git a/src/Footer/index.js b/src/Footer/index.js
@@ -1,79 +1,64 @@
 import React from "react"
+import SubscribeForm from "./SubscribeForm"
 import { FooterContainer } from "./style"
-import Instagram from "./Instagram.svg"
-import Facebook from "./Facebook.svg"
-import twitter from "./twitter.svg"
-import Line from "./Line.svg"
-import LinkedIn from "./LinkedIn.svg"
-import youtube from "./youtube.svg"
-import compfest from "./compfest-white.svg"
 
-const SSOButton = props => {
+export const Footer = (props) => {
   return (
-    <div
-      style={{ cursor: "pointer" }}
-      onClick={props.loginWithSSO}
-      className={props.className}
-      id={props.id}
-      role="button"
-      tabIndex={0}
-    >
-      <p style={{ fontFamily: "itc" }}>{props.text}</p>
-    </div>
-  )
-}
-
-export const Footer = () => (
-  <FooterContainer>
-    <div className="layout" id="footer-top">
-      <div id="left">
-        <div id="logo">
-          <img src={compfest} alt="COMPFEST" />
-        </div>
-        <div id="socmed">
-          <a id="fb" href="https://www.facebook.com/COMPFEST">
-            <img src={Facebook} alt="FACEBOOK-COMPFEST" />
-          </a>
-          <a id="tw" href="https://twitter.com/COMPFEST">
-            <img src={twitter} alt="TWITTER-COMPFEST" />
-          </a>
-          <a
-            id="yb"
-            href="https://www.youtube.com/channel/UC03QmhwvQEWVI608A-RCEpw"
-          >
-            <img src={youtube} alt="YOUTUBE-COMPFEST" />
-          </a>
-          <a id="ig" href="https://www.instagram.com/compfest">
-            <img src={Instagram} alt="INSTAGRAM-COMPFEST" />
-          </a>
-          <a id="ln" href="https://line.me/R/ti/p/%40compfest">
-            <img src={Line} alt="LINE-COMPFEST" />
-          </a>
-          <a id="in" href="https://www.linkedin.com/company/compfest">
-            <img src={LinkedIn} alt="LINKEDIN-COMPFEST" />
-          </a>
+    <FooterContainer>
+      <div className="row">
+        <div className="column" id="ft-left">
+          <div id="logo">
+            {/* <Link to="/"> */}
+            <img src={props.Compfest} alt="COMPFEST" />
+            {/* </Link> */}
+          </div>
+          <div>
+            <h4 className="slogan">Empower Breakthrough</h4>
+            <span className="deskripsi-singkat">
+              An annual one-stop IT event run by students of Faculty of
+              Computer Science, University of Indonesia
+            </span>
+          </div>
         </div>
-      </div>
-      <div id="right">
-        <div className="container-right">
-          <span id="top">COMPFEST 12 HRD Open Recruitment</span>
-          <div id="bottom">
-            <div className="link-container">
-              <p>Home</p>
-              <p>About HRD</p>
-            </div>
-            <div className="link-container">
-              <p>Departments</p>
-              <SSOButton text="Sign In" />
-            </div>
+        <div className="column" id="ft-right">
+          <span className="ft-section-title">Find Us on Social Media!</span>
+          <div id="socmed">
+            <a id="fb" href="https://www.facebook.com/COMPFEST">
+              <img src={props.Facebook} alt="FACEBOOK-COMPFEST" />
+            </a>
+            <a id="tw" href="https://twitter.com/COMPFEST">
+              <img src={props.Twitter} alt="TWITTER-COMPFEST" />
+            </a>
+            <a
+              id="yb"
+              href="https://www.youtube.com/channel/UC03QmhwvQEWVI608A-RCEpw"
+            >
+              <img src={props.Youtube} alt="YOUTUBE-COMPFEST" />
+            </a>
+            <a id="ig" href="https://www.instagram.com/compfest">
+              <img src={props.Instagram} alt="INSTAGRAM-COMPFEST" />
+            </a>
+            <a id="ln" href="https://line.me/R/ti/p/%40compfest">
+              <img src={props.Line} alt="LINE-COMPFEST" />
+            </a>
+            <a id="in" href="https://www.linkedin.com/company/compfest">
+              <img src={props.LinkedIn} alt="LINKEDIN-COMPFEST" />
+            </a>
           </div>
+          <span className="ft-section-title">Subscribe to COMPFEST</span>
+          <SubscribeForm />
         </div>
       </div>
-    </div>
-    <div id="footer-bottom">
-      <span>© 2020 COMPFEST</span>
-    </div>
-  </FooterContainer>
-)
+      <div className="separator" />
+      <div id="footer-bottom">
+        <span id="copyright">© 2020 COMPFEST</span>
+        {/* <div id="footer-link">
+          <a href="#">Download Guidebook</a>
+          <a href="#">Contact</a>
+        </div> */}
+      </div>
+    </FooterContainer>
+  )
+}
 
 export default Footer