From 544ea31ec423a26ddaf073ee48ae0d712eded0da Mon Sep 17 00:00:00 2001
From: JB <jb@visualjerk.de>
Date: Sun, 16 Aug 2020 20:34:46 +0200
Subject: [PATCH] docs: add popover docs

---
 README.md             | 116 +++++++++++++++++++++++-------------------
 examples/package.json |   2 +-
 src/Popover/README.md | 114 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 179 insertions(+), 53 deletions(-)
 create mode 100644 src/Popover/README.md

diff --git a/README.md b/README.md
index 75b8611..fd972af 100644
--- a/README.md
+++ b/README.md
@@ -23,85 +23,97 @@ yarn add vue-ari
 
 ```vue
 <template>
-  <Button v-bind="$props">
-    <slot />
-  </Button>
+  <PopoverDisclosure v-bind="popover">
+    Open Popover
+  </PopoverDisclosure>
+  <Popover v-bind="popover">
+    Popover Content
+  </Popover>
 </template>
 
 <script>
-import { Button, buttonProps } from 'vue-ari'
+import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
   name: 'AppButton',
   components: {
-    Button,
+    Popover,
+    PopoverDisclosure,
+  },
+  setup() {
+    const popover = usePopoverState()
+    return {
+      popover,
+    }
   },
-  props: buttonProps,
 }
 </script>
 ```
 
 ## Styling
 
-Ari components are unstyled by default. That means you got some work to do.
+Ari components don't include styling by default. This gives you the ability to add styles however you like.
 
-It also means you are not bound to some opinionated styling.
-
-You have complete freedom in creating your own visual appearance from ari base components.
+### Example Using Tailwind
 
 ```vue
 <template>
-  <Button v-bind="$props" class="app-button">
-    <slot />
-  </Button>
+  <PopoverDisclosure
+    v-bind="popover"
+    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+  >
+    Open Popover
+  </PopoverDisclosure>
+  <Popover
+    v-bind="popover"
+    class="rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
+  >
+    Popover Content
+  </Popover>
 </template>
 
 <script>
-import { Button, buttonProps } from 'vue-ari'
+import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
 
 export default {
-  name: 'AppButton',
+  name: 'App',
   components: {
-    Button,
+    Popover,
+    PopoverDisclosure,
+  },
+  setup() {
+    const popover = usePopoverState()
+    return {
+      popover,
+    }
   },
-  props: buttonProps,
 }
 </script>
+```
 
-<style lang="scss" scoped>
-.app-button {
-  outline: 0;
-  color: #ffffff;
-  background: #006dff;
-  padding: 0.375em 0.75em;
-  line-height: 1.5;
-  border: transparent;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 16px;
-
-  &:focus {
-    box-shadow: 0 0 0 0.2em rgba(0, 109, 255, 0.4);
-  }
-
-  &[disabled],
-  &[aria-disabled='true'] {
-    cursor: auto;
-    opacity: 0.5;
-  }
-
-  &:not([disabled]),
-  &:not([aria-disabled='true']) {
-    &:hover {
-      color: #ffffff;
-      background-color: #0062e6;
-    }
-    &:active,
-    &[data-active='true'] {
-      color: #ffffff;
-      background-color: #004eb8;
-    }
-  }
+## Reusable Components
+
+It would get pretty verbose to add the same styling classes wherever you like to use a `Popover`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.
+
+```vue
+<template>
+  <PopoverDisclosure
+    v-bind="$props"
+    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+  >
+    <slot />
+  </PopoverDisclosure>
+</template>
+
+<script>
+import { PopoverDisclosure, popoverDisclosureProps } from 'vue-ari'
+
+export default {
+  name: 'AppPopoverDisclosure',
+  props: popoverDisclosureProps,
+  components: {
+    PopoverDisclosure,
+  },
 }
-</style>
+</script>
 ```
diff --git a/examples/package.json b/examples/package.json
index 6e76a6e..cea9b49 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -8,7 +8,7 @@
   "dependencies": {
     "tailwindcss": "^1.5.2",
     "vue": "^3.0.0-rc.1",
-    "vue-ari": "^0.0.0"
+    "vue-ari": "^0.0.0-alpha.6"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.0-rc.1",
diff --git a/src/Popover/README.md b/src/Popover/README.md
new file mode 100644
index 0000000..3873b44
--- /dev/null
+++ b/src/Popover/README.md
@@ -0,0 +1,114 @@
+# Popover
+
+`Popover` is a non-modal dialog that is positioned near its disclosure. It is commonly used for displaying additional related content.
+
+## Installation
+
+```bash
+npm i vue-ari
+```
+
+or
+
+```bash
+yarn add vue-ari
+```
+
+## Usage
+
+```vue
+<template>
+  <PopoverDisclosure v-bind="popover">
+    Open Popover
+  </PopoverDisclosure>
+  <Popover v-bind="popover">
+    Popover Content
+  </Popover>
+</template>
+
+<script>
+import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
+
+export default {
+  name: 'AppButton',
+  components: {
+    Popover,
+    PopoverDisclosure,
+  },
+  setup() {
+    const popover = usePopoverState()
+    return {
+      popover,
+    }
+  },
+}
+</script>
+```
+
+## Styling
+
+Ari components don't include styling by default. This gives you the ability to add styles however you like.
+
+### Example Using Tailwind
+
+```vue
+<template>
+  <PopoverDisclosure
+    v-bind="popover"
+    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+  >
+    Open Popover
+  </PopoverDisclosure>
+  <Popover
+    v-bind="popover"
+    class="rounded shadow-lg border border-solid border-gray-300 py-3 px-5 bg-white"
+  >
+    Popover Content
+  </Popover>
+</template>
+
+<script>
+import { Popover, PopoverDisclosure, usePopoverState } from 'vue-ari'
+
+export default {
+  name: 'App',
+  components: {
+    Popover,
+    PopoverDisclosure,
+  },
+  setup() {
+    const popover = usePopoverState()
+    return {
+      popover,
+    }
+  },
+}
+</script>
+```
+
+## Reusable Components
+
+It would get pretty verbose to add the same styling classes wherever you like to use a `Popover`. So the recommended way is wrapping Ari components inside your own base components and use them inside your app.
+
+```vue
+<template>
+  <PopoverDisclosure
+    v-bind="$props"
+    class="text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+  >
+    <slot />
+  </PopoverDisclosure>
+</template>
+
+<script>
+import { PopoverDisclosure, popoverDisclosureProps } from 'vue-ari'
+
+export default {
+  name: 'AppPopoverDisclosure',
+  props: popoverDisclosureProps,
+  components: {
+    PopoverDisclosure,
+  },
+}
+</script>
+```