Add sample step components for the remaining steps with accompaning text

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

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} />
+    )
+}