Merge pull request #3266 from benjiwheeler/join-flow-info-responsive

use media queries to make info message responsive

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

 const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
+const MediaQuery = require('react-responsive').default;
+
+const frameless = require('../../lib/frameless');
 
 require('./info-button.scss');
 
@@ -22,25 +25,38 @@ class InfoButton extends React.Component {
         this.setState({visible: true});
     }
     render () {
+        const messageJsx = this.state.visible && (
+            <div className="info-button-message">
+                {this.props.message}
+            </div>
+        );
         return (
+            <React.Fragment>
                 <div
                     className="info-button"
                     onClick={this.handleShowMessage}
                     onMouseOut={this.handleHideMessage}
                     onMouseOver={this.handleShowMessage}
                 >
-                {this.state.visible && (
-                    <div className="info-button-message">
-                        {this.props.message}
+                    <MediaQuery minWidth={frameless.desktop}>
+                        {messageJsx}
+                    </MediaQuery>
                 </div>
-                )}
+                {/* for small screens, add additional position: relative element,
+                    so info message can position itself relative to the width which
+                    encloses info-button -- rather than relative to info-button itself */}
+                <MediaQuery maxWidth={frameless.desktop - 1}>
+                    <div style={{position: 'relative'}}>
+                        {messageJsx}
                     </div>
+                </MediaQuery>
+            </React.Fragment>
         );
     }
 }
 
 InfoButton.propTypes = {
-    message: PropTypes.string
+    message: PropTypes.string.isRequired
 };
 
 module.exports = InfoButton;

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

@@ -65,11 +65,12 @@
 
 @media #{$intermediate-and-smaller} {
     .info-button-message {
-        position: relative;
+        position: absolute;
         transform: none;
-        margin: inherit;
-        width: 100%;
-        height: inherit;
+        /* since we're positioning message relative to info-button's parent,
+        we need to center this element within its width. */
+        margin: 0 calc((100% - 16.5rem) / 2);;
+        top: .125rem;
 
         &:before {
             display: none;

test/__mocks__/react-responsive.js

+// __mocks__/react-responsive.js
+
+const MediaQuery = ({children}) => children;
+
+export default MediaQuery;

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

@@ -11,6 +11,15 @@ describe('InfoButton', () => {
         );
         expect(component.find('div.info-button-message').exists()).toEqual(false);
     });
+    test('mouseOver on info button makes info message visible', () => {
+        const component = mountWithIntl(
+            <InfoButton
+                message="Here is some info about something!"
+            />
+        );
+        component.find('div.info-button').simulate('mouseOver');
+        expect(component.find('div.info-button-message').exists()).toEqual(true);
+    });
     test('clicking on info button makes info message visible', () => {
         const component = mountWithIntl(
             <InfoButton
@@ -26,7 +35,7 @@ describe('InfoButton', () => {
                 message="Here is some info about something!"
             />
         );
-        component.find('div.info-button').simulate('click');
+        component.find('div.info-button').simulate('mouseOver');
         expect(component.find('div.info-button-message').exists()).toEqual(true);
         component.find('div.info-button').simulate('mouseOut');
         expect(component.find('div.info-button-message').exists()).toEqual(false);