Add "help" to the modal for device connection flow

src/components/connection-modal/connection-modal.jsx

@@ -27,6 +27,7 @@ const ConnectionModalComponent = props => (
         contentLabel={props.name}
         headerClassName={styles.header}
         headerImage={props.smallDeviceImage}
+        onHelp={props.onHelp}
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
@@ -43,6 +44,7 @@ ConnectionModalComponent.propTypes = {
     connectingMessage: PropTypes.node,
     name: PropTypes.node,
     onCancel: PropTypes.func.isRequired,
+    onHelp: PropTypes.func.isRequired,
     phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
     smallDeviceImage: PropTypes.string,
     title: PropTypes.string.isRequired

src/components/modal/modal.css

@@ -122,3 +122,14 @@ $sides: 20rem;
     font-weight: normal;
     padding-left: 0;
 }
+
+.header-item-help {
+    padding: 0;
+    margin-right: -4.75rem;
+}
+
+.help-button {
+    font-weight: normal;
+    padding-right: 0;
+    font-size: 0.75rem;
+}

src/components/modal/modal.jsx

@@ -9,6 +9,7 @@ import Button from '../button/button.jsx';
 import CloseButton from '../close-button/close-button.jsx';
 
 import backIcon from '../../lib/assets/icon--back.svg';
+import helpIcon from '../../lib/assets/icon--help.svg';
 
 import styles from './modal.css';
 
@@ -27,6 +28,26 @@ const ModalComponent = props => (
             grow={1}
         >
             <div className={classNames(styles.header, props.headerClassName)}>
+                {props.onHelp ? (
+                    <div
+                        className={classNames(
+                            styles.headerItem,
+                            styles.headerItemHelp
+                        )}
+                    >
+                        <Button
+                            className={styles.helpButton}
+                            iconSrc={helpIcon}
+                            onClick={props.onHelp}
+                        >
+                            <FormattedMessage
+                                defaultMessage="Help"
+                                description="Help button in modal"
+                                id="gui.modal.help"
+                            />
+                        </Button>
+                    </div>
+                ) : null}
                 <div
                     className={classNames(
                         styles.headerItem,
@@ -82,6 +103,7 @@ ModalComponent.propTypes = {
     fullScreen: PropTypes.bool,
     headerClassName: PropTypes.string,
     headerImage: PropTypes.string,
+    onHelp: PropTypes.func,
     onRequestClose: PropTypes.func
 };