Move wizard body to own component

[MAILPOET-2142]
This commit is contained in:
Pavel Dohnal
2019-09-17 10:47:45 +02:00
committed by Jack Kitterhing
parent 1bdbc71f6d
commit 6246c3d48e
2 changed files with 40 additions and 14 deletions

View File

@ -1,25 +1,20 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import SteppedProgressBar from '../../common/stepped_progess_bar.jsx';
import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
const WelcomeWizardStepLayout = (props) => ( const WelcomeWizardStepLayout = (props) => (
<> <>
<div className="mailpoet_welcome_wizard_header"> <div className="mailpoet_welcome_wizard_header">
<img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" /> <img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
</div> </div>
<div className="mailpoet_welcome_wizard_flex"> <WelcomeWizardStepLayoutBody
<div className="mailpoet_welcome_wizard_illustration"> illustrationUrl={props.illustrationUrl}
<img src={props.illustrationUrl} alt="" /> step={props.step}
</div> stepsCount={props.stepsCount}
<div className="mailpoet_welcome_wizard_step"> >
{ props.step <= props.stepsCount {props.children}
? ( </WelcomeWizardStepLayoutBody>
<SteppedProgressBar steps_count={props.stepsCount} step={props.step} />
) : null
}
{props.children}
</div>
</div>
</> </>
); );

View File

@ -0,0 +1,31 @@
import PropTypes from 'prop-types';
import React from 'react';
import SteppedProgressBar from '../../common/stepped_progess_bar.jsx';
const WelcomeWizardStepLayoutBody = (props) => (
<div className="mailpoet_welcome_wizard_flex">
<div className="mailpoet_welcome_wizard_illustration">
<img src={props.illustrationUrl} alt="" />
</div>
<div className="mailpoet_welcome_wizard_step">
{ props.step <= props.stepsCount
? (
<SteppedProgressBar steps_count={props.stepsCount} step={props.step} />
) : null
}
{props.children}
</div>
</div>
);
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;