improvement: Add onClick to Popover

The popover is also used to open on click in projects, but now the
target has a role button with a button inside. An onClick property
should be provided to be able to take full control of the popover.

Added onClick property to Popover.

src/core/Popover/Popover.stories.tsx

@@ -80,45 +80,28 @@ storiesOf('core/Popover', module)
 
     return (
       <Card>
-        Status: {isOpen ? 'opened' : 'closed'}
         <Popover
           isOpen={isOpen}
           target="Open"
-          tag="div"
-          className="text-center"
+          tag="button"
+          className="btn btn-primary"
+          onClick={() => setIsOpen(!isOpen)}
+          onClickOutside={(_, event) => {
+            const target = event.target as HTMLElement;
+            if (target.textContent !== 'Show popover') {
+              setIsOpen(false);
+            }
+          }}
         >
           <TinyCrud />
         </Popover>
-        <Button onClick={() => setIsOpen(!isOpen)}>Show / hide</Button>
-        <p className="mt-4 mb-0">
-          Note: you can take complete control over the Popover by using the{' '}
-          <code>isOpen</code> prop. Once you make it <code>true</code> or{' '}
-          <code>false</code> the hover behavior will be disabled.
-        </p>
-      </Card>
-    );
-  })
-
-  .add('on click outside', () => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-      <Card>
-        Status: {isOpen ? 'opened' : 'closed'}
-        <Popover
-          isOpen={isOpen}
-          onClickOutside={() => setIsOpen(false)}
-          target="Open"
-          tag="div"
-          className="text-center"
-        >
-          <NiceCard />
-        </Popover>
-        <Button onClick={() => setIsOpen(true)}>Show</Button>
+        <p className="mt-3">Status: {isOpen ? 'opened' : 'closed'}</p>
+        <Button onClick={() => setIsOpen(true)}>Show popover</Button>
         <p className="mt-4">
           Note: you can take complete control over the Popover by using the{' '}
-          <code>isOpen</code> prop. Once you make it <code>true</code> or{' '}
-          <code>false</code> the hover behavior will be disabled.
+          <code>isOpen</code> and <code>onClick</code> props. Once you change{' '}
+          <code>isOpen</code> to <code>true</code> or <code>false</code>, the
+          hover behavior will be disabled.
         </p>
         <p>
           In combination with <code>onClickOutside</code> you can close the

src/core/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import Tippy from '@tippyjs/react';
+import Tippy, { TippyProps } from '@tippyjs/react';
 import { TippyPlacement } from '../types';
 
 type Props = {
@@ -17,11 +17,17 @@ type Props = {
    */
   openOnClick?: boolean;
 
+  /**
+   * Optional callback that gets triggered when the target is clicked.
+   * Is useful for when wanting to take complete control over the popover.
+   */
+  onClick?: () => void;
+
   /**
    * Optionally callback that gets triggered when clicked outside the popover.
    * Is useful for when wanting to take complete control over the popover.
    */
-  onClickOutside?: () => void;
+  onClickOutside?: TippyProps['onClickOutside'];
 
   /**
    * Content shown inside the popover.
@@ -88,6 +94,7 @@ export function Popover({
   tag = 'span',
   className,
   isOpen,
+  onClick,
   openOnClick,
   onClickOutside,
   style,
@@ -108,7 +115,13 @@ export function Popover({
       maxWidth={maxWidth}
       trigger={openOnClick ? 'click' : 'mouseenter focus'}
     >
-      <Tag className={className} style={style} tabIndex={0} role="button">
+      <Tag
+        className={className}
+        style={style}
+        tabIndex={0}
+        role="button"
+        onClick={onClick}
+      >
         {target}
       </Tag>
     </Tippy>