Merge d6d235c into 7f4d497

web/.eslintrc.json

@@ -11,6 +11,7 @@
     "jest"
   ],
   "rules": {
+    "no-param-reassign": 0,
     "import/prefer-default-export": 0,
     "prefer-template": 0,
     "react/jsx-filename-extension": 0,

web/components/app/App.js

@@ -10,9 +10,7 @@ import AdminPanel from '../admin';
 import NotFound from '../errors/NotFound';
 import Navbar from '../../containers/navbar';
 import DashBoard from '../dashboard';
-import FrontEndComponent from '../frontEndComponents';
-
-import './App.sass';
+import UIDemo from '../demo';
 
 import configureStore from '../../services/store';
 
@@ -32,7 +30,7 @@ const App = () => (
             <Route path="/logout" component={Logout} />
             <Route path="/dashboard" component={DashBoard} />
             <Route path="/admin" component={AdminPanel} />
-            <Route path="/front_end_components" component={FrontEndComponent} />
+            <Route path="/ui_demo" component={UIDemo} />
             <Route path="/page_not_found" component={NotFound} />
             <Route path="*" component={() => <Redirect to="/page_not_found" />} />
           </Switch>

web/components/demo/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { SecondaryButton, PrimaryButton, ProgressGroup } from '../input/buttons';
+
+const ButtonCallback = e => console.log(`${e.currentTarget.textContent} button clicked!`);
+
+const FrontEndComponents = () => (
+  <div>
+    <p>Buttons</p>
+    <br />
+    <div>
+      <PrimaryButton text="Primary" onClick={ButtonCallback} />
+      &nbsp;
+      <SecondaryButton text="Secondary" onClick={ButtonCallback} />
+    </div>
+    <br />
+    <div>
+      <PrimaryButton text="Primary" onClick={ButtonCallback} disabled />
+      &nbsp;
+      <SecondaryButton text="Secondary" onClick={ButtonCallback} disabled />
+    </div>
+    <br />
+    <div>
+      <ProgressGroup
+        activeIndex={1}
+        steps={[
+          { text: '1', onClick: ButtonCallback },
+          { text: '2', onClick: ButtonCallback },
+          { text: '3', onClick: ButtonCallback, disabled: true },
+          { text: '4', onClick: ButtonCallback, disabled: true },
+        ]} />
+    </div>
+  </div>
+);
+
+export default FrontEndComponents;

web/components/index.sass

@@ -0,0 +1,4 @@
+// Import all component styles here
+@import ./app/App
+@import ./navbar/Navbar
+@import ./input/buttons/index

web/components/input/buttons/PrimaryButton/PrimaryButton.sass

@@ -0,0 +1,14 @@
+button.primary
+  @include gradient-hover-animation($gradient-primary, $gradient-primary-highlight)
+  border: none
+  color: $white
+
+  border-radius: 4px
+  min-width: 80px
+  height: 40px
+
+  padding-left: 16px
+  padding-right: 16px
+
+  &.disabled
+    background: $gradient-primary-subdued

web/components/input/buttons/PrimaryButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PrimaryButton = ({ text, onClick, disabled }) => (
+  <button
+    onClick={onClick}
+    type="button"
+    className={`primary ${disabled ? 'disabled' : ''}`}>
+    { text }
+  </button>
+);
+
+PrimaryButton.propTypes = {
+  text: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default PrimaryButton;

web/components/input/buttons/ProgressGroup/ProgressGroup.sass

@@ -0,0 +1,15 @@
+button.progress-step
+    background: $gradient-secondary
+    border: 1px solid $secondary
+    color: $secondary
+
+    border-radius: 50%
+    width: 40px
+    height: 40px
+
+    margin-right: 10px
+
+    &.active
+        color: $white
+        @include gradient-hover-animation($gradient-primary-subdued, $gradient-primary-highlight)
+

web/components/input/buttons/ProgressGroup/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ProgressGroup = ({ activeIndex, steps }) => steps.map((s) => {
+  const active = (activeIndex === 0);
+  activeIndex -= 1;
+  return (
+    <span key={s.text}>
+      <button
+        onClick={s.onClick}
+        type="button"
+        className={`
+          progress-step ${active ? 'active' : ''} ${s.disabled ? 'disabled' : ''}
+        `}>
+        { s.text }
+      </button>
+    </span>
+  );
+});
+
+ProgressGroup.propTypes = {
+  activeIndex: PropTypes.number,
+  steps: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+    disabled: PropTypes.bool,
+  })),
+};
+
+export default ProgressGroup;

web/components/input/buttons/SecondaryButton/SecondaryButton.sass

@@ -0,0 +1,20 @@
+button.secondary
+  background: $gradient-secondary
+  border: 1px solid $secondary
+  color: $secondary
+
+  border-radius: 4px
+  min-width: 80px
+  height: 40px
+
+  padding-left: 16px
+  padding-right: 16px
+
+  &:hover
+    border: 1px solid $secondary-highlight
+    color: $secondary-highlight
+
+  &:focus
+    /* Link text/Hover */
+    border: 1px solid $secondary-highlight
+    color: $secondary-highlight

web/components/frontEndComponents/button/SecondaryButton/index.js → web/components/input/buttons/SecondaryButton/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import './SecondaryButton.sass';
-
-const SecondaryButton = ({ text, onClick }) => (
-  <button onClick={onClick} type="button" className="secondary">
+const SecondaryButton = ({ text, onClick, disabled }) => (
+  <button
+    onClick={onClick}
+    type="button"
+    className={`secondary ${disabled ? 'disabled' : ''}`}>
     { text }
   </button>
 );
 
 SecondaryButton.propTypes = {
   text: PropTypes.string.isRequired,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default SecondaryButton;

web/components/input/buttons/index.js

@@ -0,0 +1,9 @@
+import PrimaryButton from './PrimaryButton';
+import SecondaryButton from './SecondaryButton';
+import ProgressGroup from './ProgressGroup';
+
+export {
+  PrimaryButton,
+  SecondaryButton,
+  ProgressGroup,
+};

web/components/input/buttons/index.sass

@@ -0,0 +1,31 @@
+@import ./PrimaryButton/PrimaryButton
+@import ./SecondaryButton/SecondaryButton
+@import ./ProgressGroup/ProgressGroup
+
+button
+  cursor: pointer
+  -webkit-transition: $transition-time
+
+  /* box */
+  box-sizing: border-box
+
+  /* content */
+  font-family: Apercu Pro
+  font-weight: bold
+  line-height: normal
+  font-size: 18px
+  text-align: center
+
+  /* positioning */
+  position: relative
+  display: inline-block
+
+  &.disabled
+    pointer-events: none
+    opacity: 0.4
+
+  &:hover
+    box-shadow: 0px 4px 6px $shadow
+
+  &:focus
+    outline: none

web/components/navbar/Navbar.sass

@@ -1,7 +1,7 @@
 nav
   display: flex
-  background: #FFFFFF
-  box-shadow: 0px 4px 6px rgba(0, 82, 174, 0.15)
+  background: $white
+  box-shadow: 0px 4px 6px $shadow
   height: 64px
 
   > div

web/components/navbar/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { DISPLAY_TYPE } from '../../containers/navbar/DisplayTypes';
 import { BUTTON_TYPE } from '../../containers/navbar/ButtonTypes';
-import { SecondaryButton } from '../frontEndComponents/button';
-import './Navbar.sass';
+import { SecondaryButton } from '../input/buttons';
 
 const getLogo = () => (
   <Link to="/"><img alt="" src="../../assets/logo.png" /></Link>

web/containers/index.sass

@@ -0,0 +1 @@
+// Import all container styles here

web/styles/animations.sass

@@ -0,0 +1,30 @@
+$transition-time: .2s
+
+// This is a hack to allow transitions of linear-gradient backgrounds.
+// https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
+// Use this by @include'ing it in your class with required arguments.
+// Arguments:
+//   $main        linear-gradient to use as normal background
+//   $hover       linear-gradient to transition to upon hover
+//   $transition  [optional] transition time, defaults to $transition-time
+@mixin gradient-hover-animation($main, $hover, $transition: $transition-time )
+  background-size: 100%
+  background-image: $main
+  position: relative
+  z-index: 100
+  &:before
+    border-radius: inherit
+    background-image: $hover
+    content: ''
+    display: block
+    height: 100%
+    position: absolute
+    top: 0
+    left: 0
+    opacity: 0
+    width: 100%
+    z-index: -100
+    -webkit-transition: $transition
+  &:hover
+     &:before
+       opacity: 1 

web/styles/colors.sass

@@ -0,0 +1,20 @@
+/* colors */
+$white: #FFFFFF
+$grey-dark: #363131
+$grey-light: #BDBDBD
+$grey-slate: #9195A5
+
+/* classes */
+$error:               #EB5757  // figma "red"
+$primary:             #21258A  // figma "body text"
+$secondary:           #00BCBC  // figma "link text"
+$secondary-highlight: #00D5D5  // figma "link text/hover"
+
+/* gradients */
+$gradient-primary:           linear-gradient(180deg, #4DE8C2 0%, #19CBCB 100%, #18CDCD 100%)
+$gradient-primary-highlight: linear-gradient(180deg, #92F1DA 0%, #43DEDE 100%)
+$gradient-primary-subdued:   linear-gradient(180deg, #4DE8C2 0%, #18CDCD 100%, #19CBCB 100%);
+$gradient-secondary:         linear-gradient(180deg, #FFFFFF 0%, #EDFFFC 100%)
+
+/* misc */
+$shadow: rgba(0, 82, 174, 0.15)

web/styles/index.sass

@@ -1,5 +1,13 @@
+/* core */
 @import ./colors
 @import ./typography
+@import ./animations
+
+/* components */
+@import ../components/index
+
+/* containers */
+@import ../containers/index
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,