From c4df45cc7082fda3aa1246799d7e6fbdbe4d2d93 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sat, 12 May 2018 01:07:23 -0300
Subject: [PATCH] chore(docz-example-basic): improve button component

---
 examples/basic/src/components/Button.jsx | 45 +++++++++++++++++-------
 examples/basic/src/components/Button.mdx | 17 +++++++++
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/examples/basic/src/components/Button.jsx b/examples/basic/src/components/Button.jsx
index 93482a3..4e6b98f 100644
--- a/examples/basic/src/components/Button.jsx
+++ b/examples/basic/src/components/Button.jsx
@@ -17,24 +17,43 @@ const scales = {
   `,
 }
 
-const kinds = {
-  primary: `
-    background: #1FB6FF;
-    color: white;
-  `,
-  secondary: `
-    background: #592DEA;
-    color: white;
-  `,
+const kind = outline => (bg, color) => {
+  const boxShadowColor = outline ? bg : 'transparent'
+  const backgroundColor = outline ? 'transparent' : bg
+
+  return `
+    background: ${backgroundColor};
+    box-shadow: inset 0 0 0 1px ${boxShadowColor};
+    color: ${outline ? bg : color};
+    transition: all .3s;
+
+    &:hover {
+      box-shadow: inset 0 0 0 1000px ${boxShadowColor};
+      color: white;
+    }
+  `
 }
 
+const kinds = outline => {
+  const get = kind(outline)
+
+  return {
+    primary: get('#1FB6FF', 'white'),
+    secondary: get('#592DEA', 'white'),
+    cancel: get('#FF4949', 'white'),
+  }
+}
+
+const getScale = ({ scale = 'normal' }) => scales[scale]
+const getKind = ({ kind = 'primary', outline = false }) => kinds(outline)[kind]
+
 const ButtonStyled = styled('button')`
+  ${getKind};
+  ${getScale};
   cursor: pointer;
   margin: 3px 5px;
   border: none;
   border-radius: 3px;
-  ${({ scale = 'normal' }) => scales[scale]};
-  ${({ kind = 'info' }) => kinds[kind]};
 `
 
 const Button = ({ children, ...props }) => (
@@ -43,12 +62,14 @@ const Button = ({ children, ...props }) => (
 
 Button.propTypes = {
   scales: t.oneOf(['small', 'normal', 'big']),
-  kind: t.oneOf(['primary', 'secondary']),
+  kind: t.oneOf(['primary', 'secondary', 'cancel']),
+  outline: t.bool,
 }
 
 Button.defaultProps = {
   scales: 'normal',
   kind: 'primary',
+  outline: false,
 }
 
 export default Button
diff --git a/examples/basic/src/components/Button.mdx b/examples/basic/src/components/Button.mdx
index 2af3829..04c66a8 100644
--- a/examples/basic/src/components/Button.mdx
+++ b/examples/basic/src/components/Button.mdx
@@ -30,3 +30,20 @@ Buttons make common actions more obvious and help users more easily perform them
   <Button scale="normal">Click me</Button>
   <Button scale="big">Click me</Button>
 </Playground>
+
+## With different colors
+
+<Playground>
+  <Button kind="primary">Click me</Button>
+  <Button kind="secondary">Click me</Button>
+  <Button kind="cancel">Click me</Button>
+</Playground>
+
+## Outlined
+
+<Playground>
+  <Button kind="primary" outline>Click me</Button>
+  <Button kind="secondary" outline>Click me</Button>
+  <Button kind="cancel" outline>Click me</Button>
+</Playground>
+