Popover

src/Disclosure/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { wcBool } from '../utils';
+
+const Disclosure = ({ className, ariaControls, ariaExpanded, ...rest }) => {
+  return (
+    <hx-disclosure
+      class={className}
+      aria-controls={ariaControls}
+      aria-expanded={wcBool(ariaExpanded)}
+      {...rest}
+    />
+  );
+};
+
+Disclosure.propTypes = {
+  ariaControls: PropTypes.string.isRequired,
+  ariaExpanded: PropTypes.bool,
+  role: PropTypes.string,
+  tabindex: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+export default Disclosure;

src/HxDiv/index.js → src/Div/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const HxDiv = ({ className, ...rest }) => {
+const Div = ({ className, ...rest }) => {
   return <hx-div class={className} {...rest} />;
 };
 
-HxDiv.propTypes = {
+Div.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
   scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
 };
 
-export default HxDiv;
+export default Div;

src/Drawer/stories.js

@@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 
 import Drawer from './index';
 import Button from '../Button';
-import HxDiv from '../HxDiv';
+import Div from '../Div';
 import { getLongText } from '../storyUtils';
 
 const SIZES = {
@@ -38,7 +38,7 @@ storiesOf('Drawer', module).add('All Knobs', () => {
       onClose={action('onClose')}
     >
       {<header>{header || defaultHeader}</header>}
-      {<HxDiv className="hxMd">{body || defaultBody}</HxDiv>}
+      {<Div className="hxMd">{body || defaultBody}</Div>}
       {<footer>{footer || defaultFooter}</footer>}
     </Drawer>
   );

src/Modal/stories.js

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import Modal from './index';
-import HxDiv from '../HxDiv';
+import Div from '../Div';
 import Button from '../Button';
 import { getLongText } from '../storyUtils';
 
@@ -43,10 +43,10 @@ storiesOf('Modal', module).add('All Knobs', () => {
           <h3>{header}</h3>
         </header>
       )}
-      <HxDiv scroll={scroll && 'vertical'}>
+      <Div scroll={scroll && 'vertical'}>
         {smallText}
         {scroll ? longText : null}
-      </HxDiv>
+      </Div>
       {<footer>{footer || defaultFooter}</footer>}
     </Modal>
   );

src/Popover/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import useEventListener from '../hooks/useEventListener';
+import { POSITIONS } from '../constants';
+import { wcBool } from '../utils';
+
+const Popover = ({
+  onOpen,
+  onClose,
+  onReposition,
+  className,
+  open,
+  children,
+  relativeTo,
+  ...rest
+}) => {
+  const hxRef = useEventListener({ onOpen, onClose, onReposition });
+  return (
+    <hx-popover
+      class={classNames(className)}
+      ref={hxRef}
+      open={wcBool(open)}
+      relative-to={relativeTo}
+      {...rest}
+    >
+      {children}
+    </hx-popover>
+  );
+};
+
+Popover.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  position: PropTypes.oneOf(POSITIONS),
+  relativeTo: PropTypes.string,
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  onReposition: PropTypes.func,
+};
+
+export default Popover;

src/Popover/stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import centered from '@storybook/addon-centered/react';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
+import Popover from '.';
+import Div from '../Div';
+import Button from '../Button';
+import { getLongText } from '../storyUtils';
+import { POSITIONS } from '../constants';
+import Disclosure from '../Disclosure';
+
+storiesOf('Popover', module)
+  .addDecorator(centered)
+  .add('All Knobs', () => {
+    let header = text('header', 'Popover Header');
+    let footer = text('footer', '');
+    let position = select('positions', POSITIONS, 'bottom-right');
+    let scroll = boolean('scroll', false);
+
+    const smallText = 'This is the body of a demo popover\n';
+    const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
+    const defaultFooter = (
+      <>
+        <Button variant="primary">Ok</Button>
+        <Button variant="tertiary">Cancel</Button>
+      </>
+    );
+
+    return (
+      <>
+        <Disclosure ariaControls="demoPopover">
+          <Button>Open Popover</Button>
+        </Disclosure>
+        <Popover
+          id="demoPopover"
+          {...(position && { position })}
+          onOpen={action('onOpen')}
+          onClose={action('onClose')}
+          onPosition={action('onReposition')}
+        >
+          {header && <header>{header}</header>}
+          <Div scroll={scroll && 'vertical'}>
+            {smallText}
+            {scroll ? longText : null}
+          </Div>
+          {<footer>{footer || defaultFooter}</footer>}
+        </Popover>
+      </>
+    );
+  });

src/index.mjs

@@ -3,8 +3,9 @@ import Button from './Button';
 import Alert from './Alert';
 import Drawer from './Drawer';
 import Icon from './Icon';
-import Tooltip from './Tooltip';
 import Modal from './Modal';
+import Popover from './Popover';
+import Tooltip from './Tooltip';
 import Select from './Select';
 
 export default {
@@ -13,6 +14,7 @@ export default {
   Drawer,
   Icon,
   Modal,
+  Popover,
   Select,
-  Tooltip
+  Tooltip,
 };