Popup story added to storybook

storybook/stories/Popup/Popup.js

@@ -0,0 +1,46 @@
+const React = require('react');
+const classnames = require('classnames');
+const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const { Button, Popup, useBinaryState } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('Popup', module).add('Popup', () => {
+    const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
+    const popupLabelOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.togglePopupPrevented) {
+            toggleMenu();
+        }
+    }, [toggleMenu]);
+    const popupMenuOnClick = React.useCallback((event) => {
+        event.nativeEvent.togglePopupPrevented = true;
+    }, []);
+    const popupMenuOnKeyDown = React.useCallback((event) => {
+        event.nativeEvent.buttonClickPrevented = true;
+    }, []);
+    const onCloseRequest = React.useCallback((event) => {
+        action('onCloseRequest')(event);
+        closeMenu();
+    }, []);
+    return (
+        <Popup
+            open={menuOpen}
+            direction={'bottom'}
+            renderLabel={({ ref, className, children }) => (
+                <Button ref={ref} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
+                    POPUP LABEL
+                    {children}
+                </Button>
+            )}
+            renderMenu={() => (
+                <div className={styles['menu-container']} onKeyDown={popupMenuOnKeyDown} onClick={popupMenuOnClick}>
+                    {Array(10).fill(null).map((_, index) => (
+                        <Button key={index} className={styles['random-button']} onClick={action('Click Me')}>Click Me</Button>
+                    ))}
+                </div>
+            )}
+            dataset={{ prop: 'value' }}
+            onCloseRequest={onCloseRequest}
+        />
+    );
+});

storybook/stories/Popup/index.js

@@ -0,0 +1 @@
+require('./Popup');

storybook/stories/Popup/styles.less

@@ -0,0 +1,40 @@
+:import('~stremio/common/Popup/styles.less') {
+    popup-menu-container: menu-container;
+}
+
+.popup-label-container {
+    flex: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 10rem;
+    height: 3rem;
+    margin: 2rem;
+    padding: 0 1.2rem;
+    color: var(--color-surfacelighter);
+    background: var(--color-backgroundlight);
+
+    .popup-menu-container {
+        right: initial;
+        left: 0;
+
+        .menu-container {
+            width: 20rem;
+            height: 20rem;
+            padding: 2rem;
+            background: var(--color-surface);
+            overflow-y: auto;
+
+            .random-button {
+                padding: 0.8rem;
+                background: var(--color-primary);
+                text-align: center;
+
+                &:hover, &:focus {
+                    background: var(--color-primarylight);
+                }
+            }
+        }
+    }
+}

storybook/stories/index.js

@@ -4,4 +4,5 @@ require('./MetaItem');
 require('./ModalDialog');
 require('./Multiselect');
 require('./Notification');
+require('./Popup');
 require('./SharePrompt');