Add sample step components for the remaining steps with accompaning text

- rename step subfolders from <name>step to <name>

frontend/src/assets/data/staticText.json

@@ -11,20 +11,24 @@
             "optionsHelperText": "Please select your soil variant from the options above."
         },
         "habitat": {
-            "title": "",
+            "title": "Habitat Selection",
-            "description": ""
+            "description": "We now need to specify the type of environment that characterizes your site. Please select one of the options to the right."
         },
         "zone": {
-            "title": "",
+            "title": "Zone Selection",
-            "description": ""
+            "description": "Please click on the subregion within the images that most accurately defines your planting project."
         },
         "projectSpecifics": {
-            "title": "",
+            "title": "Project Specifics",
-            "description": ""
+            "description": "If you have specific requirements for your site, please state them using the options listed on the right:"
         },
         "summary": {
-            "title": "",
+            "title": "Summary",
-            "description": ""
+            "description": "You have specified the following inputs – if these are correct go to the next step, otherwise go back and refine your input on the previous pages."
+        },
+        "results": {
+            "title": "Your Results",
+            "description": "Please review the plant species list – it can be saved as a CSV file or appended to a planting plan guidebook. Additional information on each species can be obtained by entering the plant species name into the search box at  https://inaturalist.nz or in the “search flora” box at https://www.nzpcn.org.nz/. Click below to create a planting plan guidebook specific to your project site.."
         }
     }
 }

frontend/src/components/Stepper.js

@@ -5,17 +5,21 @@ import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Button from '@mui/material/Button';
 
-import LocationStep from './steps/locationstep/LocationStep'
+import LocationStep from './steps/location/LocationStep'
-import SoilStep from './steps/soilvariantstep/SoilStep'
+import SoilStep from './steps/soilvariant/SoilStep'
+import HabitatStep from './steps/habitat/HabitatStep';
+import ZoneStep from './steps/zone/ZoneStep';
+import ProjectSpecificsStep from './steps/specifics/ProjectSpecificsStep';
+import SummaryStep from './steps/summary/ZoneStep';
 import ResultsStep from './steps/Results'
 
 const steps = [
     {'label': 'Select location', 'component': LocationStep },
     {'label': 'Choose soil', 'component': SoilStep },
-    {'label': 'Choose habitat', 'component': SoilStep },
+    {'label': 'Choose habitat', 'component': HabitatStep },
-    {'label': 'Select zone', 'component': SoilStep },
+    {'label': 'Select zone', 'component': ZoneStep },
-    {'label': 'Project specifics', 'component': SoilStep },
+    {'label': 'Project specifics', 'component': ProjectSpecificsStep },
-    {'label': 'Summary', 'component': SoilStep }
+    {'label': 'Summary', 'component': SummaryStep }
 ];
 
 export default function StepperWizard(props) {

frontend/src/components/steps/habitat/HabitatSelector.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function HabitatSelector(props) {
+    
+    useEffect(() => {
+        props.setNextDisabled(false);
+    });
+    
+    return (
+        <h2>Habitat Selector</h2>
+    )
+}

frontend/src/components/steps/habitat/HabitatStep.js

@@ -0,0 +1,21 @@
+import Step from '../Step';
+import HabitatSelector from './HabitatSelector' 
+import StepInformation from '../StepInformation';
+import staticText from '../../../assets/data/staticText.json'
+
+export default function HabitatStep(props) {
+    const habitatInfoPanel = (
+        <StepInformation
+            title={staticText.steps.habitat.title}
+            description={<p>{staticText.steps.habitat.description}</p>}
+        />
+    )
+
+    const habitatSelectionPanel = (
+        <HabitatSelector {...props} />
+    )
+
+    return (
+        <Step informationComponent={habitatInfoPanel} selectionComponent={habitatSelectionPanel} />
+    )
+}

frontend/src/components/steps/soilvariant/SoilStep.js

@@ -12,7 +12,7 @@ export default function SoilVariantStep(props) {
 
     const soilVarientInfoPanel = (
         <StepInformation
-            title={staticText.steps.location.title}
+            title={staticText.steps.soil.title}
             description={SOIL_DESCRIPTION}
         />
     )

frontend/src/components/steps/specifics/ProjectSpecificsSelector.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function ProjectSpecificsSelector(props) {
+    
+    useEffect(() => {
+        props.setNextDisabled(false);
+    });
+
+    return (
+        <h2>Project Specifics Selector</h2>
+    )
+}

frontend/src/components/steps/specifics/ProjectSpecificsStep.js

@@ -0,0 +1,21 @@
+import Step from '../Step';
+import ProjectSpecificsSelector from './ProjectSpecificsSelector' 
+import StepInformation from '../StepInformation';
+import staticText from '../../../assets/data/staticText.json'
+
+export default function ProjectSpecificsStep(props) {
+    const projectSpecificsInfoPanel = (
+        <StepInformation
+            title={staticText.steps.projectSpecifics.title}
+            description={<p>{staticText.steps.projectSpecifics.description}</p>}
+        />
+    )
+
+    const projectSpecificsSelectionPanel = (
+        <ProjectSpecificsSelector {...props} />
+    )
+
+    return (
+        <Step informationComponent={projectSpecificsInfoPanel} selectionComponent={projectSpecificsSelectionPanel} />
+    )
+}

frontend/src/components/steps/summary/SummaryContent.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function SummaryContent(props) {
+    
+    useEffect(() => {
+        props.setNextDisabled(false);
+    });
+
+    return (
+        <h2>Summary Content</h2>
+    )
+}

frontend/src/components/steps/summary/ZoneStep.js

@@ -0,0 +1,21 @@
+import Step from '../Step';
+import SummaryContent from './SummaryContent' 
+import StepInformation from '../StepInformation';
+import staticText from '../../../assets/data/staticText.json'
+
+export default function SummaryStep(props) {
+    const summaryInfoPanel = (
+        <StepInformation
+            title={staticText.steps.summary.title}
+            description={<p>{staticText.steps.summary.description}</p>}
+        />
+    )
+
+    const summaryContent = (
+        <SummaryContent {...props} />
+    )
+
+    return (
+        <Step informationComponent={summaryInfoPanel} selectionComponent={summaryContent} />
+    )
+}

frontend/src/components/steps/zone/ZoneSelector.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function ZoneSelector(props) {
+    
+    useEffect(() => {
+        props.setNextDisabled(false);
+    });
+
+    return (
+        <h2>Zone Selector</h2>
+    )
+}

frontend/src/components/steps/zone/ZoneStep.js

@@ -0,0 +1,21 @@
+import Step from '../Step';
+import ZoneSelector from './ZoneSelector' 
+import StepInformation from '../StepInformation';
+import staticText from '../../../assets/data/staticText.json'
+
+export default function ZoneStep(props) {
+    const zoneInfoPanel = (
+        <StepInformation
+            title={staticText.steps.zone.title}
+            description={<p>{staticText.steps.zone.description}</p>}
+        />
+    )
+
+    const zoneSelectionPanel = (
+        <ZoneSelector {...props} />
+    )
+
+    return (
+        <Step informationComponent={zoneInfoPanel} selectionComponent={zoneSelectionPanel} />
+    )
+}