Ádding Select, Options to Coral Ui and steps with formField

client/coral-ui/components/Option.css

@@ -0,0 +1,3 @@
+.Option {
+  
+}

client/coral-ui/components/Option.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Option as OptionMDL} from 'react-mdl-selectfield';
+import styles from './Option.css';
+
+const Option = props => {
+  const {children, ...attrs} = props;
+  return (
+    <OptionMDL className={styles.Option} {...attrs}>
+      {children}
+    </OptionMDL>
+  );
+};
+
+export default Option;

client/coral-ui/components/Select.css

@@ -0,0 +1,33 @@
+.Select {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+
+}

client/coral-ui/components/Select.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {SelectField} from 'react-mdl-selectfield';
+import styles from './Select.css';
+
+const Select = props => {
+  const {children, ...attrs} = props;
+  return (
+    <SelectField className={styles.Select} {...attrs}>
+      {children}
+    </SelectField>
+  );
+};
+
+export default Select;

client/coral-ui/components/WizardNav.css

@@ -13,7 +13,7 @@
     position: relative;
     padding-left: 40px;
     border-radius: 1px;
-    
+
     &:hover {
       cursor: pointer;
     }
@@ -27,6 +27,10 @@
           border-color: transparent transparent transparent #00796B;
         }
       }
+
+      i {
+        opacity: 1;
+      }
     }
 
     &.active {
@@ -41,6 +45,15 @@
       }
     }
 
+    i {
+      transition: opacity 0.2s ease;
+      opacity: 0;
+      vertical-align: middle;
+      font-size: 16px;
+      margin-top: -5px;
+      margin-left: 8px;
+    }
+
     span {
       padding: 10px 20px;
       margin-right: 10px;

client/coral-ui/components/WizardNav.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import styles from './WizardNav.css';
+import Icon from './Icon';
 
 const WizardNav = props => {
-  const {goToStep, currentStep, items} = props;
+  const {goToStep, currentStep, items, icon} = props;
   return (
     <nav className={styles.WizardNav}>
       <ul>
@@ -12,7 +13,9 @@ const WizardNav = props => {
               key={i}
               className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
               onClick={() => goToStep(item.step)}>
-              {item.text}<span/>
+              {item.text}
+              {icon && <Icon name={icon} />}
+              <span/>
             </li>
           ))
         }