diff --git a/assets/js/src/wizard/layout/step_layout.jsx b/assets/js/src/wizard/layout/step_layout.jsx index 0d6e1a781e..574326cc2e 100644 --- a/assets/js/src/wizard/layout/step_layout.jsx +++ b/assets/js/src/wizard/layout/step_layout.jsx @@ -1,25 +1,20 @@ import PropTypes from 'prop-types'; import React from 'react'; -import SteppedProgressBar from '../../common/stepped_progess_bar.jsx'; + +import WelcomeWizardStepLayoutBody from './step_layout_body.jsx'; const WelcomeWizardStepLayout = (props) => ( <>
MailPoet logo
-
-
- -
-
- { props.step <= props.stepsCount - ? ( - - ) : null - } - {props.children} -
-
+ + {props.children} + ); diff --git a/assets/js/src/wizard/layout/step_layout_body.jsx b/assets/js/src/wizard/layout/step_layout_body.jsx new file mode 100644 index 0000000000..f97ec520e3 --- /dev/null +++ b/assets/js/src/wizard/layout/step_layout_body.jsx @@ -0,0 +1,31 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import SteppedProgressBar from '../../common/stepped_progess_bar.jsx'; + +const WelcomeWizardStepLayoutBody = (props) => ( +
+
+ +
+
+ { props.step <= props.stepsCount + ? ( + + ) : null + } + {props.children} +
+
+); + +WelcomeWizardStepLayoutBody.propTypes = { + illustrationUrl: PropTypes.string.isRequired, + step: PropTypes.number.isRequired, + stepsCount: PropTypes.number.isRequired, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]).isRequired, +}; + +export default WelcomeWizardStepLayoutBody;