feat(Popup): added on prop for triggering the popup on click, hover or focus (#622)

* -added on prop in the Popup for allowing the user to change the trigger event of the popup on click or hover
-added usage examples

* -updated changelog

* -wip: adding focus, click, hover combinations for the on prop

* -fixed some issues
-copied handlers on the primitive content element

* -added escape key handler on the trigger
-hover should by default add the focus handler as well

* -fixed focus handlers
-fixed examples imports

* -fixed focus

* -added focus usage example

* -fixed on prop type
-hover on blur should close the popup
-rearranged the examples for the on prop

* -handle timeout for closing only if mouseLeaveDelay is greater then 0

* -adding comments on the handlers created
-refactoring on the blur conditions

* -rearranged usage example and added example using the trap focus behavior

* -improved typing for the on prop in the Popup

* -removed expressions for strings in the examples

* -replaced double quotes with single quotes

* -added aria-label on the popup examples

* -reverted condition for not adding timeout if the mouse delay is 0

* -removed alert in the Popup examples

* -refactoring the timeout handling and added clear logic

* -small refactorings

* docs: simplify popup usage examples

* -fix focus + click opening

* -fixed changelog after merging master

Author: mnajdova

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
+
 <!--------------------------------[ v0.16.0 ]------------------------------- -->
 ## [v0.16.0](https://github.com/stardust-ui/react/tree/v0.16.0) (2019-01-07)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.15.0...v0.16.0)

docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { Button, Popup } from '@stardust-ui/react'
+
+const PopupExampleOn = () => (
+  <div>
+    <Popup
+      trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+      content="Hello from popup on click!"
+      on="click"
+    />
+    <Popup
+      trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+      content="Hello from popup on hover!"
+      on="hover"
+    />
+    <Popup
+      trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+      content="Hello from popup on focus!"
+      on="focus"
+    />
+  </div>
+)
+
+export default PopupExampleOn

docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Button, Popup } from '@stardust-ui/react'
+
+const PopupExampleOnMultiple = () => (
+  <div>
+    <Popup
+      trigger={<Button icon="expand" content="Click + Focus" aria-label="Click or focus button" />}
+      content="Hello from popup on click!"
+      on={['click', 'focus']}
+    />
+    <Popup
+      trigger={<Button icon="expand" content="Hover + Focus" aria-label="Hover or focus button" />}
+      content="Hello from popup on hover!"
+      on={['hover', 'focus']}
+    />
+  </div>
+)
+
+export default PopupExampleOnMultiple

docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Button, Popup, popupFocusTrapBehavior } from '@stardust-ui/react'
+
+const contentWithButtons = {
+  content: (
+    <>
+      <Button>First</Button>
+      <Button primary>Second</Button>
+    </>
+  ),
+}
+
+const PopupExampleOnWithFocusTrap = () => (
+  <div>
+    <Popup
+      trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+      content={contentWithButtons}
+      accessibility={popupFocusTrapBehavior}
+      on="click"
+    />
+    <Popup
+      trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+      content={contentWithButtons}
+      accessibility={popupFocusTrapBehavior}
+      on="hover"
+    />
+    <Popup
+      trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+      content={contentWithButtons}
+      accessibility={popupFocusTrapBehavior}
+      on="focus"
+    />
+  </div>
+)
+
+export default PopupExampleOnWithFocusTrap

docs/src/examples/components/Popup/Usage/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Triggering popup on different actions"
+      description="A popup can be triggered on click, hover or focus."
+      examplePath="components/Popup/Usage/PopupExampleOn"
+    />
+    <ComponentExample
+      title="Using the focus trap behavior"
+      description="Combining the triggers with popup focus trap behavior, will focus the first focusable element inside the content of the popup."
+      examplePath="components/Popup/Usage/PopupExampleOnWithFocusTrap"
+    />
+    <ComponentExample
+      title="Combined triggering actions"
+      description="The triggering actions can be combined."
+      examplePath="components/Popup/Usage/PopupExampleOnMultiple"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Popup/index.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import Usage from './Usage'
 
 const PopupExamples = () => (
   <div>
     <Types />
     <Variations />
+    <Usage />
   </div>
 )