WIP draft of info button tooltip for join flow

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

@@ -0,0 +1,18 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./info-button.scss');
+
+const InfoButton = ({
+    message
+}) => (
+    <div className="info-button">
+        ?
+    </div>
+);
+
+InfoButton.propTypes = {
+    message: PropTypes.string,
+};
+
+module.exports = InfoButton;

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

@@ -0,0 +1,13 @@
+@import "../../colors";
+@import "../../frameless";
+
+.info-button {
+    width: 1rem;
+    height: 1rem;
+    background-color: $ui-blue;
+
+    &:after {
+        color: $ui-white;
+        content: "?"
+    }
+}

src/components/join-flow/join-flow-step.jsx

@@ -5,6 +5,7 @@ const PropTypes = require('prop-types');
 const NextStepButton = require('./next-step-button.jsx');
 const ModalTitle = require('../modal/base/modal-title.jsx');
 const ModalInnerContent = require('../modal/base/modal-inner-content.jsx');
+const InfoButton = require('../info-button/info-button.jsx');
 
 require('./join-flow-step.scss');
 
@@ -13,6 +14,7 @@ const JoinFlowStep = ({
     className,
     description,
     headerImgSrc,
+    infoMessage,
     innerContentClassName,
     nextButton,
     onSubmit,
@@ -42,6 +44,9 @@ const JoinFlowStep = ({
                 {description && (
                     <div className="join-flow-description">
                         {description}
+                        {infoMessage && (
+                            <InfoButton message={infoMessage} />
+                        )}
                     </div>
                 )}
                 {children}
@@ -59,6 +64,7 @@ JoinFlowStep.propTypes = {
     className: PropTypes.string,
     description: PropTypes.string,
     headerImgSrc: PropTypes.string,
+    infoMessage: PropTypes.string,
     innerContentClassName: PropTypes.string,
     nextButton: PropTypes.node,
     onSubmit: PropTypes.func,