From db37669ac68b4071f21b74466decafa610bb2123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 26 Oct 2016 11:55:08 +0100
Subject: [PATCH] initial button implementation

---
 ui/src/components/button/index.js  | 12 +++++++++++-
 ui/src/components/button/readme.md | 28 ++++++++++++++++++++++++++--
 ui/src/components/button/style.css | 27 ++++++++++++++++++++++++---
 3 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index f00df8e0..31c33597 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -1,15 +1,24 @@
+const classNames = require('classnames');
 const React = require('react');
 const styles = require('./style.css');
 
 const Button = ({
   disabled = false,
+  secundary = false,
   className,
   style,
   children
 }) => {
+  const cn = classNames(
+    className,
+    styles.button,
+    secundary ? styles.secundary : styles.primary,
+    disabled ? styles.inactive : '',
+  );
+
   return (
     <button
-      className={styles.button}
+      className={cn}
       disabled={disabled}
       style={style}
     >
@@ -22,6 +31,7 @@ Button.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  secundary: React.PropTypes.bool,
   style: React.PropTypes.object
 };
 
diff --git a/ui/src/components/button/readme.md b/ui/src/components/button/readme.md
index 5cd85730..5a7d6610 100644
--- a/ui/src/components/button/readme.md
+++ b/ui/src/components/button/readme.md
@@ -5,11 +5,35 @@
 ```embed
 const React = require('react');
 const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
 const Button = require('./index.js');
 const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
-  <Button>Hello World</Button>
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Button>
+            Create an Instance
+          </Button>
+        </Column>
+        <Column>
+          <Button secundary>
+            Cancel
+          </Button>
+        </Column>
+        <Column>
+          <Button disabled>
+            Inactive Button
+          </Button>
+        </Column>
+      </Row>
+    </Container>
+  </Base>
 );
 ```
 
@@ -21,7 +45,7 @@ const Button = require('ui/button');
 
 module.exports = () => {
   return (
-    <Button disabled={false}>
+    <Button>
       Hello World
     </Button>
   );
diff --git a/ui/src/components/button/style.css b/ui/src/components/button/style.css
index 2e38a505..1ccdca91 100644
--- a/ui/src/components/button/style.css
+++ b/ui/src/components/button/style.css
@@ -1,4 +1,25 @@
 .button {
-  background-color: #e500ee;
-  margin: none;
-}
\ No newline at end of file
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.05);
+
+
+  &.primary {
+    background: #3B47CC;
+    border: 1px solid #2532BB;
+    color: #FFFFFF;
+  }
+
+  &.secundary {
+    background: #FFFFFF;
+    border: 1px solid #D8D8D8;
+    color: #646464;
+  }
+
+  &.inactive {
+    background: #F9F9F9;
+    border: 1px solid #D8D8D8;
+    color: #737373;
+  }
+}