Move wizard body to own component
[MAILPOET-2142]
This commit is contained in:
committed by
Jack Kitterhing
parent
1bdbc71f6d
commit
6246c3d48e
@ -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) => (
|
||||
<>
|
||||
<div className="mailpoet_welcome_wizard_header">
|
||||
<img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
|
||||
</div>
|
||||
<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
|
||||
illustrationUrl={props.illustrationUrl}
|
||||
step={props.step}
|
||||
stepsCount={props.stepsCount}
|
||||
>
|
||||
{props.children}
|
||||
</WelcomeWizardStepLayoutBody>
|
||||
</>
|
||||
);
|
||||
|
||||
|
31
assets/js/src/wizard/layout/step_layout_body.jsx
Normal file
31
assets/js/src/wizard/layout/step_layout_body.jsx
Normal 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;
|
Reference in New Issue
Block a user