first take on toggleable open close state for info messages

make info button have large, invisible boundary

fix info button ref setting

WIP: experiment with more sophisticated mouseout handling

add lodash debounce

use lodash debounce to reduce info message flickering

tweak info message position per added padding

remove leftover function

update info button tests, add a bunch more

package.json

@@ -99,6 +99,7 @@
     "keymirror": "0.1.1",
     "lodash.bindall": "4.4.0",
     "lodash.clone": "3.0.3",
+    "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "3.10.0",
     "lodash.isarray": "3.0.4",
     "lodash.merge": "3.3.2",

src/components/info-button/info-button.jsx

@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
 const MediaQuery = require('react-responsive').default;
+const debounce = require('lodash.debounce');
 
 const frameless = require('../../lib/frameless');
 
@@ -11,18 +12,48 @@ class InfoButton extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleHideMessage',
+            'handleClick',
-            'handleShowMessage'
+            'handleMouseOut',
+            'handleShowMessage',
+            'setButtonRef'
         ]);
         this.state = {
+            requireClickToClose: false, // default to closing on mouseout
             visible: false
         };
+        this.setVisibleWithDebounce = debounce(this.setVisible, 100);
     }
-    handleHideMessage () {
+    componentWillMount () {
-        this.setState({visible: false});
+        window.addEventListener('mousedown', this.handleClick, false);
+    }
+    componentWillUnmount () {
+        window.removeEventListener('mousedown', this.handleClick, false);
+    }
+    handleClick (e) {
+        if (this.buttonRef) { // only handle click if we can tell whether it happened in this component
+            let newVisibleState = false; // for most clicks, hide the info message
+            if (this.buttonRef.contains(e.target)) { // if the click was inside the info icon...
+                newVisibleState = !this.state.requireClickToClose; // toggle it
+            }
+            this.setState({
+                requireClickToClose: newVisibleState,
+                visible: newVisibleState
+            });
+        }
+    }
+    handleMouseOut () {
+        if (this.state.visible && !this.state.requireClickToClose) {
+            this.setVisibleWithDebounce(false);
+        }
     }
     handleShowMessage () {
-        this.setState({visible: true});
+        this.setVisibleWithDebounce(true);
+    }
+    setButtonRef (element) {
+        this.buttonRef = element;
+    }
+    setVisible (newVisibleState) {
+        this.setState({visible: newVisibleState});
     }
     render () {
         const messageJsx = this.state.visible && (
@@ -34,8 +65,8 @@ class InfoButton extends React.Component {
             <React.Fragment>
                 <div
                     className="info-button"
-                    onClick={this.handleShowMessage}
+                    ref={this.setButtonRef}
-                    onMouseOut={this.handleHideMessage}
+                    onMouseOut={this.handleMouseOut}
                     onMouseOver={this.handleShowMessage}
                 >
                     <MediaQuery minWidth={frameless.desktop}>

src/components/info-button/info-button.scss

@@ -4,23 +4,21 @@
 .info-button {
     position: relative;
     display: inline-block;
-    width: 1rem;
+    width: 2rem;
-    height: 1rem;
+    height: 2rem;
-    margin-left: .375rem;
+    margin-left: -.125rem;
-    margin-top: -.25rem;
+    margin-top: -.75rem;
-    border-radius: 50%;
-    background-color: $type-gray-60percent;
     background-image: url("/svgs/info-button/info-button.svg");
     background-size: cover;
-    top: .1875rem;
+    top: .6875rem;
 }
 
 .info-button-message {
     $arrow-border-width: 1rem;
     display: block;
     position: absolute;
-    top: 0;
+    top: .375rem;
-    left: 0;
+    left: .5rem;
     transform: translate(1rem, -1rem);
     width: 16.5rem;
     min-height: 1rem;
@@ -66,6 +64,7 @@
         we need to center this element within its width. */
         margin: 0 calc((100% - 16.5rem) / 2);;
         top: .125rem;
+        left: 0;
 
         &:before {
             display: none;

src/components/join-flow/join-flow-steps.scss

@@ -127,10 +127,11 @@
 }
 
 .join-flow-privacy-message {
-    margin: 1rem auto;
+    margin: .5rem auto 1rem;
     font-size: .75rem;
     font-weight: 500;
     color: $type-gray-60percent;
+    text-align: center;
 }
 
 .join-flow-inner-username-step {

static/svgs/info-button/info-button.svg

@@ -1 +1 @@
-<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><g fill-rule="evenodd"><path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0" fill="#9a9eac"/><path d="M10 13.39a1.33 1.33 0 1 1-1.33 1.33A1.33 1.33 0 0 1 10 13.39zm2.68-8.77a3 3 0 0 1 1.42 2.31 3.15 3.15 0 0 1-.95 2.56 8.37 8.37 0 0 1-1.59 1.1c-.7.39-.7.41-.7.77 0 .55 0 1-1 1s-1-.45-1-1a2.65 2.65 0 0 1 1.72-2.52A6.61 6.61 0 0 0 11.79 8a1.22 1.22 0 0 0 .3-.91 1 1 0 0 0-.5-.79 2.8 2.8 0 0 0-2.87.2c-.98.64-.81 1.55-1.72 1.3s-.92-1-.53-1.7a3.94 3.94 0 0 1 1.9-1.66 4.67 4.67 0 0 1 4.3.18z" fill="#fff"/></g></svg>
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40"><g fill-rule="evenodd"><path d="M20 10a10 10 0 1 0 10 10 10 10 0 0 0-10-10" fill="#9a9eac"/><path d="M20 23.39a1.33 1.33 0 1 1-1.33 1.33A1.34 1.34 0 0 1 20 23.39zm2.68-8.77a3 3 0 0 1 1.42 2.31 3.14 3.14 0 0 1-1 2.56 8.2 8.2 0 0 1-1.59 1.1c-.7.39-.7.41-.7.77 0 .55 0 1-1 1s-1-.45-1-1a2.64 2.64 0 0 1 1.72-2.52 6.71 6.71 0 0 0 1.26-.84 1.22 1.22 0 0 0 .3-.91 1 1 0 0 0-.5-.79 2.8 2.8 0 0 0-2.87.2c-1 .64-.81 1.55-1.72 1.3s-.92-1-.53-1.7a3.9 3.9 0 0 1 1.9-1.66 4.67 4.67 0 0 1 4.3.18z" fill="#fff"/></g></svg>

test/unit/components/info-button.test.jsx

@@ -3,6 +3,15 @@ import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
 import InfoButton from '../../../src/components/info-button/info-button';
 
 describe('InfoButton', () => {
+    // mock window.addEventListener
+    // for more on this technique, see discussion at https://github.com/airbnb/enzyme/issues/426#issuecomment-253515886
+    const mockedAddEventListener = {};
+    /* eslint-disable no-undef */
+    window.addEventListener = jest.fn((event, cb) => {
+        mockedAddEventListener[event] = cb;
+    });
+    /* eslint-enable no-undef */
+
     test('Info button defaults to not visible', () => {
         const component = mountWithIntl(
             <InfoButton
@@ -11,33 +20,124 @@ describe('InfoButton', () => {
         );
         expect(component.find('div.info-button-message').exists()).toEqual(false);
     });
-    test('mouseOver on info button makes info message visible', () => {
+
+    test('mouseOver on info button makes info message visible', done => {
         const component = mountWithIntl(
             <InfoButton
                 message="Here is some info about something!"
             />
         );
+
+        // mouseOver info button
         component.find('div.info-button').simulate('mouseOver');
-        expect(component.find('div.info-button-message').exists()).toEqual(true);
+        setTimeout(function () { // necessary because mouseover uses debounce
+            // crucial: if we don't call update(), then find() below looks through an OLD
+            // version of the DOM! see https://github.com/airbnb/enzyme/issues/1233#issuecomment-358915200
+            component.update();
+            expect(component.find('div.info-button-message').exists()).toEqual(true);
+            done();
+        }, 500);
     });
+
     test('clicking on info button makes info message visible', () => {
         const component = mountWithIntl(
             <InfoButton
                 message="Here is some info about something!"
             />
         );
-        component.find('div.info-button').simulate('click');
+        const buttonRef = component.instance().buttonRef;
+
+        // click on info button
+        mockedAddEventListener.mousedown({target: buttonRef});
+        component.update();
+        expect(component.find('div.info-button').exists()).toEqual(true);
         expect(component.find('div.info-button-message').exists()).toEqual(true);
     });
-    test('after message is visible, mouseOut makes it vanish', () => {
+
+    test('clicking on info button, then mousing out makes info message still appear', done => {
         const component = mountWithIntl(
             <InfoButton
                 message="Here is some info about something!"
             />
         );
-        component.find('div.info-button').simulate('mouseOver');
+        const buttonRef = component.instance().buttonRef;
+
+        // click on info button
+        mockedAddEventListener.mousedown({target: buttonRef});
+        component.update();
+        expect(component.find('div.info-button').exists()).toEqual(true);
         expect(component.find('div.info-button-message').exists()).toEqual(true);
+
+        // mouseOut from info button
         component.find('div.info-button').simulate('mouseOut');
+        setTimeout(function () { // necessary because mouseover uses debounce
+            component.update();
+            expect(component.find('div.info-button-message').exists()).toEqual(true);
+            done();
+        }, 500);
+    });
+
+    test('clicking on info button, then clicking on it again makes info message go away', () => {
+        const component = mountWithIntl(
+            <InfoButton
+                message="Here is some info about something!"
+            />
+        );
+        const buttonRef = component.instance().buttonRef;
+
+        // click on info button
+        mockedAddEventListener.mousedown({target: buttonRef});
+        component.update();
+        expect(component.find('div.info-button').exists()).toEqual(true);
+        expect(component.find('div.info-button-message').exists()).toEqual(true);
+
+        // click on info button again
+        mockedAddEventListener.mousedown({target: buttonRef});
+        component.update();
         expect(component.find('div.info-button-message').exists()).toEqual(false);
     });
+
+    test('clicking on info button, then clicking somewhere else', () => {
+        const component = mountWithIntl(
+            <InfoButton
+                message="Here is some info about something!"
+            />
+        );
+        const buttonRef = component.instance().buttonRef;
+
+        // click on info button
+        mockedAddEventListener.mousedown({target: buttonRef});
+        component.update();
+        expect(component.find('div.info-button').exists()).toEqual(true);
+        expect(component.find('div.info-button-message').exists()).toEqual(true);
+
+        // click on some other target
+        mockedAddEventListener.mousedown({target: null});
+        component.update();
+        expect(component.find('div.info-button-message').exists()).toEqual(false);
+    });
+
+    test('after message is visible, mouseOut makes it vanish', done => {
+        const component = mountWithIntl(
+            <InfoButton
+                message="Here is some info about something!"
+            />
+        );
+
+        // mouseOver info button
+        component.find('div.info-button').simulate('mouseOver');
+        setTimeout(function () { // necessary because mouseover uses debounce
+            component.update();
+            expect(component.find('div.info-button-message').exists()).toEqual(true);
+
+            // mouseOut away from info button
+            component.find('div.info-button').simulate('mouseOut');
+            setTimeout(function () { // necessary because mouseover uses debounce
+                component.update();
+                expect(component.find('div.info-button-message').exists()).toEqual(false);
+                done();
+            }, 500);
+
+        }, 500);
+    });
 });