From 12070309d6bd5db9fdf5e26e702c4fb90327b559 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 1 Feb 2017 12:11:15 -0300
Subject: [PATCH] Wizard Nav

---
 .../containers/Install/InstallContainer.js    |  29 +++--
 .../components/Steps/AddOrganizationName.js   |  13 ++-
 .../Install/components/Steps/InitialStep.js   |  13 +--
 .../Install/components/Steps/style.css        |  30 +++++
 .../src/containers/Install/style.css          |  12 ++
 client/coral-admin/src/reducers/install.js    |   1 -
 client/coral-ui/components/Wizard.js          |   4 +-
 client/coral-ui/components/WizardNav.css      | 109 ++++++++++++++++++
 client/coral-ui/components/WizardNav.js       |  29 +++++
 client/coral-ui/index.js                      |   1 +
 10 files changed, 215 insertions(+), 26 deletions(-)
 create mode 100644 client/coral-admin/src/containers/Install/components/Steps/style.css
 create mode 100644 client/coral-ui/components/WizardNav.css
 create mode 100644 client/coral-ui/components/WizardNav.js

diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js
index bda32bde2..8ed0bbf69 100644
--- a/client/coral-admin/src/containers/Install/InstallContainer.js
+++ b/client/coral-admin/src/containers/Install/InstallContainer.js
@@ -2,24 +2,18 @@ import React from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
 import {nextStep, previousStep, goToStep} from '../../actions/install';
-import {Button, Wizard} from 'coral-ui';
+import {Wizard, WizardNav} from 'coral-ui';
 
-import InitialStep from './components/Steps/InitialStep'
-import AddOrganizationName from './components/Steps/AddOrganizationName'
+import InitialStep from './components/Steps/InitialStep';
+import AddOrganizationName from './components/Steps/AddOrganizationName';
 
 const InstallContainer = props => {
   const {nextStep, previousStep, goToStep, install} = props;
 
   return (
     <div className={styles.Install}>
-      <h1>{install.step}</h1>
-      <nav>
-        <ul>
-          <li onClick={() => goToStep(0)}>Add Organization Name</li>
-          <li onClick={() => goToStep(1)}>Create your account</li>
-          <li onClick={() => goToStep(2)}>Invite team members</li>
-        </ul>
-      </nav>
+      <h2>Welcome to the Coral Project</h2>
+      { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step}/> : null }
       <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
         <InitialStep/>
         <AddOrganizationName/>
@@ -28,6 +22,19 @@ const InstallContainer = props => {
   );
 };
 
+const wizardNavitems = [{
+  text: '1. Add Organization Name',
+  step: 1
+},
+{
+  text: '2. Create your account',
+  step: 2
+},
+{
+  text: '3. Invite team members',
+  step: 3
+}];
+
 const mapStateToProps = state => ({
   install: state.install.toJS()
 });
diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
index 1af4b9839..74f2c3016 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
@@ -1,17 +1,20 @@
 import React from 'react';
-// import styles from './style.css';
+import styles from './style.css';
 import {Button} from 'coral-ui';
 
 const InitialStep = props => {
-  const {nextStep, previousStep} = props;
+  const {nextStep} = props;
   return (
-    <div>
-      <h2>Welcome to the Coral Project</h2>
+    <div className={styles.step}>
       <p>
         Please tell us the name of your organization. This will appear in emails when
         inviting new team members
       </p>
-      <Button onClick={previousStep}>Go back</Button>
+      <form>
+        <label htmlFor='organizationName'>Organization name:</label>
+        <input type='text' name='organizationName' id='organizationName'/>
+        <Button cStyle='black' onClick={nextStep} full>Save</Button>
+      </form>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index 9efdf4ad0..95043b515 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -1,18 +1,17 @@
 import React from 'react';
-// import styles from './style.css';
+import styles from './style.css';
 import {Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
   return (
-    <div>
-      <h2>Welcome to the Coral Project</h2>
+    <div className={styles.step}>
       <p>
-      The remainder of the Talk installation will take about ten minutes.
-      Once you complete the following three steps, you will have a free
-      installation and provision of Mongo and Redis.
+        The remainder of the Talk installation will take about ten minutes.
+        Once you complete the following three steps, you will have a free
+        installation and provision of Mongo and Redis.
       </p>
-      <Button onClick={nextStep}>Get Started</Button>
+      <Button cStyle='green' onClick={nextStep}>Get Started</Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
new file mode 100644
index 000000000..5284b3470
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -0,0 +1,30 @@
+.step {
+
+  p {
+    max-width: 450px;
+    margin: 10px auto 30px;
+  }
+
+  > button {
+    min-width: 140px;
+  }
+
+  form {
+    max-width: 300px;
+    margin: 30px auto;
+
+    label {
+      text-align: left;
+      display: block;
+    }
+
+    input {
+      border: solid 1px rgba(0, 0, 0, 0.23);
+      padding: 10px 2px;
+      border-radius: 3px;
+      width: 100%;
+      box-sizing: border-box;
+      margin: 10px 0;
+    }
+  }
+}
diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css
index e69de29bb..90c62c20e 100644
--- a/client/coral-admin/src/containers/Install/style.css
+++ b/client/coral-admin/src/containers/Install/style.css
@@ -0,0 +1,12 @@
+.Install {
+  max-width: 900px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 40px 0;
+
+  h2 {
+    font-size: 2em;
+    font-weight: 500;
+    margin: 0;
+  }
+}
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 95febb887..d97c7f236 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -9,7 +9,6 @@ const initialState = Map({
 export default function auth (state = initialState, action) {
   switch (action.type) {
   case actions.NEXT_STEP:
-    console.log(state)
     return state
       .set('step', state.get('step') + 1);
   case actions.PREVIOUS_STEP:
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index 1ba6e56a6..e598b3c30 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/client/coral-ui/components/Wizard.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react';
 const Wizard = (props) => {
   const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
   return (
-    <div>
+    <section>
       {React.Children.toArray(children)
         .filter((child, i) => i === currentStep)
         .map((child, i) =>
@@ -15,7 +15,7 @@ const Wizard = (props) => {
               goToStep
             })
       )}
-    </div>
+    </section>
   );
 };
 
diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css
new file mode 100644
index 000000000..12b9b3841
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.css
@@ -0,0 +1,109 @@
+.WizardNav {
+  ul {
+    list-style: none;
+  }
+
+  li {
+    border: solid 1px #DFDFDF;
+    background-color: #F0F0F0;
+    display: inline-block;
+    padding: 10px;
+    margin-right: 10px;
+    color: #A7A7A7;
+    position: relative;
+    padding-left: 40px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.active {
+      background-color: #FFFFFF;
+      color: #636363;
+      font-weight: 500;
+
+      span {
+        &::after {
+          border-color: transparent transparent transparent #FFFFFF;
+        }
+      }
+    }
+
+    span {
+      padding: 10px 20px;
+      margin-right: 10px;
+      position: absolute;
+      top: -1px;
+      right: -51px;
+      z-index: 10;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        border: 23px solid #DFDFDF;
+        border-color: transparent transparent transparent #DFDFDF;
+        top: 0;
+        left: 0;
+      }
+
+      &::after {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        border: 23px solid white;
+        border-color: transparent transparent transparent #f0f0f0;
+        top: 0;
+        left: -1px;
+      }
+    }
+
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      border: 23px solid #DFDFDF;
+      border-color: transparent transparent transparent #DFDFDF;
+      top: 0;
+      left: 0;
+    }
+
+    &::after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      border: 23px solid white;
+      border-color: transparent transparent transparent #fafafa;
+      top: 0;
+      left: -1px;
+    }
+/*
+    &::before {
+      position: absolute;
+      top: 0;
+      left: -1px;
+      display: block;
+      border-left: 23px solid white;
+      border-top: 23px solid transparent;
+      border-bottom: 23px solid transparent;
+      width: 0;
+      height: 0;
+      content: " ";
+    }
+
+    &::after{
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      right: -23px;
+      display: block;
+      border-left: 23px solid #f0f0f0;
+      border-top: 23px solid transparent;
+      border-bottom: 23px solid transparent;
+      width: 0;
+      height: 0;
+      content: " ";
+    }*/
+
+  }
+}
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
new file mode 100644
index 000000000..200adb216
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.js
@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react';
+import styles from './WizardNav.css';
+
+const WizardNav = props => {
+  const {goToStep, currentStep, items} = props;
+  return (
+    <nav className={styles.WizardNav}>
+      <ul>
+        {
+          items.map((item, i) => (
+            <li
+              key={i}
+              className={currentStep === item.step ? styles.active : ''}
+              onClick={() => goToStep(item.step)}>
+              {item.text}<span/>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  );
+};
+
+WizardNav.propTypes = {
+  goToStep: PropTypes.func.isRequired,
+  currentStep: PropTypes.number.isRequired
+};
+
+export default WizardNav;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index b58c2a74a..69f63e397 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -15,3 +15,4 @@ export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
 export {default as Wizard} from './components/Wizard';
+export {default as WizardNav} from './components/WizardNav';