Add template Step component with configurable background image and content

This commit is contained in:
Dana Lambert 2021-10-18 12:01:39 +13:00
parent aa95005fd2
commit d7a97dfb1d
7 changed files with 87 additions and 46 deletions

View file

@ -1,5 +1,8 @@
.top-header { .top-header {
padding-bottom: 3.2vw; padding-left: 3vw;
padding-right: 3vw;
padding-top: 1.8vw;
padding-bottom: 1.8vw;
} }
.header-logo { .header-logo {

View file

@ -1,13 +1,10 @@
@import "./theme.scss"; @import "./theme.scss";
@import "./header.scss"; @import "./header.scss";
// Core styles here... // Global styles here...
.App { html, body, #root, .App {
height: 100%;
font-family: $primary-font; font-family: $primary-font;
color: $text-color-primary; color: $text-color-primary;
background-color: $background-color-primary; background-color: $background-color-primary;
padding-top: 3.2vw;
padding-left: 3vw;
padding-right: 3vw;
padding-bottom: 3.2vw;
} }

View file

@ -0,0 +1,35 @@
import SampleBackground from '../assets/img/sample-bg.jpg';
export default function Step(props) {
const overlayStyle = {
backgroundColor: "#3b3b3b74",
paddingRight: '3vw',
paddingLeft: '3vw'
};
const StepBackgroundImage = props.backgroundImage || SampleBackground
const stepStyle = {
backgroundImage: `url(${StepBackgroundImage})`
};
return (
<div style={stepStyle}>
<div className='step-container mt-4 py-4' style={overlayStyle}>
{props.contentComponent ? (
<div>
{props.contentComponent}
</div>
) : (
<div className='d-flex justify-content-between'>
<div>
{props.informationComponent}
</div>
<div>
{props.selectionComponent}
</div>
</div>
)}
</div>
</div>
);
}

View file

@ -37,7 +37,7 @@ export default function StepperWizard(props) {
return ( return (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<Stepper activeStep={activeStep}> <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}>
{steps.map((step, index) => { {steps.map((step, index) => {
return ( return (
<Step key={step.label}> <Step key={step.label}>
@ -49,7 +49,7 @@ export default function StepperWizard(props) {
{activeStep === steps.length ? ( {activeStep === steps.length ? (
<React.Fragment> <React.Fragment>
<ResultsStep {...props} /> <ResultsStep {...props} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Box sx={{ flex: '1 1 auto' }} /> <Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button> <Button onClick={handleReset}>Reset</Button>
</Box> </Box>
@ -57,7 +57,7 @@ export default function StepperWizard(props) {
) : ( ) : (
<React.Fragment> <React.Fragment>
<CurrentStep {...props} /> <CurrentStep {...props} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Button <Button
color="inherit" color="inherit"
disabled={activeStep === 0} disabled={activeStep === 0}

View file

@ -1,13 +1,15 @@
import React from 'react' import Step from '../Step';
import { Container } from 'reactstrap';
export default function LocationStep() {
const locationInfoPanel = (
<h1>Location Information</h1>
)
const locationSelectionPanel = (
<h1>Location Selection</h1>
)
export default class Step1 extends React.Component {
render() {
return ( return (
<div className="pt-4"> <Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
<p>Please choose your location...</p>
</div>
) )
} }
}

View file

@ -1,18 +1,20 @@
import React from 'react' // import React from 'react'
import { Container, ListGroup, ListGroupItem } from 'reactstrap'; import Step from '../Step';
import { ListGroup, ListGroupItem } from 'reactstrap';
export default function Results(props) {
export default class Step3 extends React.Component { const stepContent = (
render() { <div>
return (
<Container className="p-2">
<h5 className="pt-4">Plant List</h5> <h5 className="pt-4">Plant List</h5>
<ListGroup> <ListGroup>
{this.props.plants.map(function (plant, i) { {props.plants.map(function (plant, i) {
return <ListGroupItem key={i} >{plant.name}</ListGroupItem>; return <ListGroupItem key={i} >{plant.name}</ListGroupItem>;
})} })}
</ListGroup> </ListGroup>
</Container> </div>
)
return (
<Step contentComponent={stepContent} />
) )
} }
}

View file

@ -1,13 +1,15 @@
import React from 'react' import Step from '../Step';
import { Container } from 'reactstrap';
export default function SoilVariantStep() {
const soilVarientInfoPanel = (
<h1>Soil Information</h1>
)
const soilVarientSelectionPanel = (
<h1>Soil Selection</h1>
)
export default class Step2 extends React.Component {
render() {
return ( return (
<Container className="pt-4"> <Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
<p >Sample step</p>
</Container>
) )
} }
}