From 892dcb5a0c3cc740ef4bc869603f322e318bb70a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcelo=20Forment=C3=A3o?= <marceloavf3@hotmail.com>
Date: Sat, 30 Jun 2018 11:37:41 -0300
Subject: [PATCH] fix(docz-example-vue): rework examples and remove imports

---
 examples/vue/src/components/Alert.mdx  | 15 +++--
 examples/vue/src/components/Alert.vue  | 26 +++++++-
 examples/vue/src/components/Button.mdx | 57 +++++++++++++++++
 examples/vue/src/components/Button.vue | 85 ++++++++++++++++++++++++++
 4 files changed, 172 insertions(+), 11 deletions(-)
 create mode 100644 examples/vue/src/components/Button.mdx
 create mode 100644 examples/vue/src/components/Button.vue

diff --git a/examples/vue/src/components/Alert.mdx b/examples/vue/src/components/Alert.mdx
index 1a7f9df..7284af1 100644
--- a/examples/vue/src/components/Alert.mdx
+++ b/examples/vue/src/components/Alert.mdx
@@ -9,22 +9,21 @@ import Alert from './Alert.vue'
 # Alert
 
 ## Properties
-
-<PropsTable of={Alert} />
+<PropsTable of={<VueWrapper component={Alert}>Some message</VueWrapper>} />
 
 ## Basic usage
 
 <Playground>
-  <Alert>Some message</Alert>
+  <VueWrapper component={Alert}>Some message</VueWrapper>
 </Playground>
 
 ## Using different kinds
 
 <Playground>
-  <Alert kind="info">Some message</Alert>
-  <Alert kind="positive">Some message</Alert>
-  <Alert kind="negative">Some message</Alert>
-  <Alert kind="warning">Some message</Alert>
+  <VueWrapper component={Alert} kind="info">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="positive">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="negative">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="warning">Some message</VueWrapper>
 </Playground>
 
 ## Use with children as a function
@@ -34,7 +33,7 @@ import Alert from './Alert.vue'
     const message = 'Hello world'
 
     return (
-      <Alert>{message}</Alert>
+      <VueWrapper component={Alert}>{message}</VueWrapper>
     )
   }}
 </Playground>
diff --git a/examples/vue/src/components/Alert.vue b/examples/vue/src/components/Alert.vue
index 786b9fe..308e957 100644
--- a/examples/vue/src/components/Alert.vue
+++ b/examples/vue/src/components/Alert.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="alert">
+  <div class="alert" :class="[ typeClass ]">
     <slot></slot>
-    {{ kind }}
   </div>
 </template>
 
@@ -11,14 +10,35 @@
     props: {
       kind: {
         type: String,
+        required: false,
         default: 'info'
       }
     },
+    computed: {
+      typeClass() {
+        return `alert--${ this.kind }`;
+      },
+    }
   }
 </script>
 
 <style scoped>
   .alert {
-    background-color: grey;
+    padding: 15px 20px;
+    background: white;
+    border-radius: 3px;
+    color: white;
+  }
+  .alert--info {
+    background: #5352ED;
+  }
+  .alert--positive {
+    background: #2ED573;
+  }
+  .alert--negative {
+    background: #FF4757;
+  }
+  .alert--warning {
+    background: #FFA502;
   }
 </style>
diff --git a/examples/vue/src/components/Button.mdx b/examples/vue/src/components/Button.mdx
new file mode 100644
index 0000000..a7df8c8
--- /dev/null
+++ b/examples/vue/src/components/Button.mdx
@@ -0,0 +1,57 @@
+---
+name: Button
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz'
+import Button from './Button.vue'
+
+# Button
+
+Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.
+
+### Best practices
+
+- Group buttons logically into sets based on usage and importance.
+- Ensure that button actions are clear and consistent.
+- The main action of a group set can be a primary button.
+- Select a single button variation and do not mix them.
+
+## Properties
+
+<PropsTable of={<VueWrapper component={Button}></VueWrapper>} />
+
+## Basic usage
+
+<Playground>
+  <VueWrapper component={Button}>Click me</VueWrapper>
+</Playground>
+
+## With different sizes
+
+<Playground>
+  <VueWrapper component={Button} scale="small">Click me</VueWrapper>
+  <VueWrapper component={Button} scale="normal">Click me</VueWrapper>
+  <VueWrapper component={Button} scale="big">Click me</VueWrapper>
+</Playground>
+
+## With different colors
+
+<Playground>
+  <VueWrapper component={Button} kind="primary">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="secondary">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="cancel">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="dark">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="gray">Click me</VueWrapper>
+</Playground>
+
+## Outlined
+
+<Playground>
+  <VueWrapper component={Button} kind="primary" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="secondary" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="cancel" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="dark" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="gray" outline>Click me</VueWrapper>
+</Playground>
+
diff --git a/examples/vue/src/components/Button.vue b/examples/vue/src/components/Button.vue
new file mode 100644
index 0000000..e98cbe4
--- /dev/null
+++ b/examples/vue/src/components/Button.vue
@@ -0,0 +1,85 @@
+<template>
+  <button
+    @mouseover="mouseOver"
+    @mouseout="mouseOver"
+    class="button"
+    :class="[ sizeClass ]"
+    :style ="[ buttonStyle ]">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  const TYPE_STYLE_MAP = {
+    'primary': '#1FB6FF',
+    'secondary': '#5352ED',
+    'cancel': '#FF4949',
+    'dark': '#273444',
+    'gray': '#8492A6'
+  }
+
+  export default {
+    name: 'Button',
+    data() {
+      return {
+        active: false
+      }
+    },
+    props: {
+      kind: {
+        type: String,
+        required: false,
+        default: 'primary'
+      },
+      scale: {
+        type: String,
+        required: false,
+        default: 'normal'
+      },
+      outline: Boolean,
+    },
+    methods: {
+      mouseOver() {
+        this.active = !this.active;
+      }
+    },
+    computed: {
+      sizeClass() {
+        return `button--${ this.scale }`;
+      },
+      buttonStyle() {
+        const boxShadowColor = this.outline && !this.active ? TYPE_STYLE_MAP[this.kind] : 'transparent'
+        const backgroundColor = this.outline && !this.active ? 'transparent' : TYPE_STYLE_MAP[this.kind]
+
+        return {
+          background: `${backgroundColor}`,
+          boxShadow: `inset 0 0 0 ${!this.active ? '1px' : '1000px'} ${boxShadowColor}`,
+          color: `${this.outline && !this.active ? TYPE_STYLE_MAP[this.kind] : 'white'}`
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .button {
+    cursor: pointer;
+    margin: 3px 5px;
+    border: none;
+    border-radius: 3px;
+    transition: all .3s;
+  }
+  /* Scale */
+  .button--small {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  .button--normal {
+    padding: 10px 20px;
+    font-size: 16px;
+  }
+  .button--big {
+    padding: 20px 30px;
+    font-size: 18px;
+  }
+</style>