Merge pull request #3075 from benjiwheeler/join-steps-stub

added formik dependency, join flow steps using it

package.json

@@ -66,6 +66,7 @@
     "exenv": "1.2.0",
     "fastly": "1.2.1",
     "file-loader": "0.8.4",
+    "formik": "1.5.4",
     "formsy-react": "1.1.4",
     "formsy-react-components": "1.0.0",
     "git-bundle-sha": "0.0.2",

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

@@ -1,19 +1,35 @@
+const bindAll = require('lodash.bindall');
+const defaults = require('lodash.defaultsdeep');
 const PropTypes = require('prop-types');
 const React = require('react');
 
 const injectIntl = require('../../lib/intl.jsx').injectIntl;
 const intlShape = require('../../lib/intl.jsx').intlShape;
 
+const JoinFlowSteps = require('../registration/join-flow-steps.jsx');
+
 /*
 eslint-disable react/prefer-stateless-function, react/no-unused-prop-types, no-useless-constructor
 */
 class JoinFlow extends React.Component {
     constructor (props) {
         super(props);
+        bindAll(this, [
+            'handleAdvanceStep'
+        ]);
+    }
+    handleAdvanceStep (formData) {
+        formData = formData || {};
+        this.setState({
+            step: this.state.step + 1,
+            formData: defaults({}, formData, this.state.formData)
+        });
     }
     render () {
         return (
-            <React.Fragment />
+            <React.Fragment>
+                <JoinFlowSteps.ExampleStep />
+            </React.Fragment>
         );
     }
 }

src/components/registration/join-flow-steps.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-multi-comp */
+const React = require('react');
+const injectIntl = require('react-intl').injectIntl;
+import {Formik, Form} from 'formik';
+
+/*
+ * Username step
+ */
+/* eslint-disable react/prefer-stateless-function, no-useless-constructor */
+class UsernameStep extends React.Component {
+    constructor (props) {
+        super(props);
+    }
+
+    render () {
+        return (
+            <Formik
+                initialValues={{
+                }}
+                validateOnBlur={false}
+                validateOnChange={false}
+            >
+                <Form className="join-modal-form" />
+            </Formik>
+        );
+    }
+}
+/* eslint-enable */
+
+UsernameStep.propTypes = {
+};
+
+UsernameStep.defaultProps = {
+};
+
+const IntlUsernameStep = injectIntl(UsernameStep);
+
+module.exports.UsernameStep = IntlUsernameStep;