lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Add tooltips to Stepper component

Browse source
This commit is contained in:
Matthew Northcott 2022-08-05 13:37:22 +12:00
parent d016182c39
commit b3aebebe88
1 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/Stepper.js
View file

@ -4,6 +4,7 @@ import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step'; import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel'; import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import LocationStep from './steps/location/LocationStep' import LocationStep from './steps/location/LocationStep'
import SoilStep from './steps/soilvariant/SoilStep' import SoilStep from './steps/soilvariant/SoilStep'
@ -13,12 +14,12 @@ import SummaryStep from './steps/summary/SummaryStep';
import ResultsStep from './steps/results/ResultsStep' import ResultsStep from './steps/results/ResultsStep'
const steps = [ const steps = [
{ 'label': 'Select location', 'component': LocationStep }, { 'label': 'Select location', 'component': LocationStep, 'tooltip': "Click on a location on the map" },
{ 'label': 'Choose soil', 'component': SoilStep }, { 'label': 'Choose soil', 'component': SoilStep, 'tooltip': "Describe the moisture content of your soil" },
{ 'label': 'Choose habitat', 'component': HabitatStep }, { 'label': 'Choose habitat', 'component': HabitatStep, 'tooltip': "Specify type of landscape to be planted" },
{ 'label': 'Select zone', 'component': ZoneStep }, { 'label': 'Select zone', 'component': ZoneStep, 'tooltip': "Specify geographical detail" },
{ 'label': 'Summary', 'component': SummaryStep }, { 'label': 'Summary', 'component': SummaryStep, 'tooltip': "Check your inputs" },
{ 'label': 'Results', 'component': ResultsStep } { 'label': 'Results', 'component': ResultsStep, 'tooltip': "List of plant species and user guide" }
]; ];
export default function StepperWizard(props) { export default function StepperWizard(props) {
@ -58,9 +59,11 @@ export default function StepperWizard(props) {
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}> <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
{steps.map((step) => { {steps.map((step) => {
return ( return (
<Tooltip title={step.tooltip}>
<Step key={step.label}> <Step key={step.label}>
<StepLabel>{step.label}</StepLabel> <StepLabel>{step.label}</StepLabel>
</Step> </Step>
</Tooltip>
); );
})} })}
</Stepper> </Stepper>