From 21120bf76028adce3a91c6b3428de19d5da2eebb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Tue, 24 Jul 2018 13:42:54 -0300
Subject: [PATCH] Placement and docs added

---
 .../client/ui/components/Popover/Popover.mdx  | 29 +++++++
 .../client/ui/components/Popover/Popover.tsx  | 85 +++++++++++++------
 2 files changed, 88 insertions(+), 26 deletions(-)
 create mode 100644 src/core/client/ui/components/Popover/Popover.mdx

diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
new file mode 100644
index 000000000..936cc615e
--- /dev/null
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -0,0 +1,29 @@
+---
+name: Popover
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Popover from './Popover'
+import Button from '../Button'
+
+# Popover
+
+`Popover` uses `react-popper`
+
+## Basic usage
+<Playground>
+  <Popover
+    // tslint:disable-next-line:jsx-no-lambda
+    placement="top"
+    body={({ toggleVisibility, forwardRef }) => (
+      <div>This is the body</div>
+    )}
+  >
+    {({ toggleVisibility, forwardRef }) => (
+      <Button onClick={toggleVisibility} forwardRef={forwardRef}>
+        Click me!
+      </Button>
+    )}
+  </Popover>
+</Playground>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 0873f42c1..3564aa7ee 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -4,10 +4,22 @@ import { Manager, Popper, Reference, RefHandler } from "react-popper";
 import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
-interface RenderProps {
-  toggleVisibility?: () => void;
-  forwardRef?: RefHandler;
-}
+type Placement =
+  | "auto-start"
+  | "auto"
+  | "auto-end"
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
 
 interface InnerProps {
   body: (props: RenderProps) => any;
@@ -17,6 +29,7 @@ interface InnerProps {
   id?: string;
   onClose?: () => void;
   className?: string;
+  placement?: Placement;
 }
 
 interface State {
@@ -28,6 +41,11 @@ interface Props {
   style: CSSProperties;
 }
 
+interface RenderProps {
+  toggleVisibility?: () => void;
+  forwardRef?: RefHandler;
+}
+
 class Popover extends React.Component<InnerProps> {
   public state: State = {
     visible: false,
@@ -40,43 +58,58 @@ class Popover extends React.Component<InnerProps> {
   };
 
   public render() {
-    const { id, body, children, description, className } = this.props;
+    const {
+      id,
+      body,
+      children,
+      description,
+      className,
+      placement,
+    } = this.props;
 
     const { visible } = this.state;
 
     return (
       <Manager>
         <Reference>
-          {(props: Props) => children({ forwardRef: props.ref })}
+          {(props: Props) =>
+            children({
+              forwardRef: props.ref,
+              toggleVisibility: this.toggleVisibility,
+            })
+          }
         </Reference>
         <Popper
+          placement={placement}
           modifiers={{ preventOverflow: { enabled: false } }}
           eventsEnabled
           positionFixed={false}
         >
-          {(props: Props) => (
-            <div
-              id={id}
-              role="popup"
-              aria-labelledby={`${id}-ariainfo`}
-              aria-hidden={!visible}
-            >
-              <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
-
-              {/* <ClickOutside onClickOutside={onClose}> */}
+          {(props: Props) =>
+            visible && (
               <div
-                style={props.style}
-                className={cn(styles.root, className)}
-                ref={props.ref}
+                id={id}
+                role="popup"
+                aria-labelledby={`${id}-ariainfo`}
+                aria-hidden={!visible}
               >
-                {body({
-                  toggleVisibility: this.toggleVisibility,
-                  forwardRef: props.ref,
-                })}
+                <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+
+                {/* <ClickOutside onClickOutside={onClose}> */}
+                <div
+                  style={props.style}
+                  className={cn(styles.root, className)}
+                  ref={props.ref}
+                >
+                  {body({
+                    toggleVisibility: this.toggleVisibility,
+                    forwardRef: props.ref,
+                  })}
+                </div>
+                {/* </ClickOutside> */}
               </div>
-              {/* </ClickOutside> */}
-            </div>
-          )}
+            )
+          }
         </Popper>
       </Manager>
     );