Sections: shared component. Scroll implemented

app/layout/scenarios/edit/analysis/component.tsx

@@ -15,12 +15,29 @@ import Pill from 'layout/pill';
 import AdjustPanningUnits from 'layout/scenarios/edit/analysis/adjust-planning-units';
 import CostSurface from 'layout/scenarios/edit/analysis/cost-surface';
 import GapAnalysis from 'layout/scenarios/edit/analysis/gap-analysis';
-import Sections from 'layout/scenarios/edit/analysis/sections';
 import Run from 'layout/scenarios/edit/run';
+import Sections from 'layout/sections';
 
 import Button from 'components/button';
 import Modal from 'components/modal';
 
+const SECTIONS = [
+  {
+    id: 'gap-analysis',
+    name: 'Gap analysis',
+    description: 'A gap analysis calculates how much of each feature is under the existing protected area network and then summarises the representation as a percentage',
+  },
+  {
+    id: 'cost-surface',
+    name: 'Cost surface',
+    description: 'Costs reflect any variety of socioeconomic factors, which if minimized, might help the conservation plan be implemented more effectively and reduce conflicts with other uses.',
+  },
+  {
+    id: 'adjust-planning-units',
+    name: 'Adjust planning units (optional)',
+    description: 'The status of a planning unit determines whether it is included in every solution (i.e. locked in) or excluded (i.e. locked out). The default status is neither included or excluded but determined during the Marxan analysis.',
+  },
+];
 export interface ScenariosSidebarEditAnalysisProps {
 
 }
@@ -115,6 +132,7 @@ export const ScenariosSidebarEditAnalysis: React.FC<ScenariosSidebarEditAnalysis
               {!section && (
               <Sections
                 key="sections"
+                sections={SECTIONS}
                 onChangeSection={onChangeSection}
               />
               )}

app/layout/scenarios/edit/analysis/cost-surface/component.tsx

@@ -183,7 +183,9 @@ export const ScenariosCostSurface: React.FC<ScenariosCostSurfaceProps> = ({
       </header>
 
       <div className="relative flex flex-col flex-grow w-full min-h-0 mt-1 overflow-hidden text-sm">
-        <div className="pt-2">
+        <p className="pt-2">By default all projects have an equal area cost surface which means that planning units with the same area have the same cost</p>
+
+        <div className="pt-5">
           <h4 className="mb-2">1. Download the current cost surface</h4>
           <Button
             theme="primary-alt"

app/layout/scenarios/show/analysis/component.tsx

@@ -15,7 +15,25 @@ import Pill from 'layout/pill';
 import AdjustPanningUnitsShow from 'layout/scenarios/show/analysis/adjust-planning-units';
 import CostSurface from 'layout/scenarios/show/analysis/cost-surface';
 import GapAnalysis from 'layout/scenarios/show/analysis/gap-analysis';
-import Sections from 'layout/scenarios/show/analysis/sections';
+import Sections from 'layout/sections';
+
+const SECTIONS = [
+  {
+    id: 'gap-analysis',
+    name: 'Gap analysis',
+    description: 'A gap analysis calculates how much of each feature is under the existing protected area network and then summarises the representation as a percentage',
+  },
+  {
+    id: 'cost-surface',
+    name: 'Cost surface',
+    description: 'Costs reflect any variety of socioeconomic factors, which if minimized, might help the conservation plan be implemented more effectively and reduce conflicts with other uses.',
+  },
+  {
+    id: 'adjust-planning-units',
+    name: 'Adjust planning units (optional)',
+    description: 'The status of a planning unit determines whether it is included in every solution (i.e. locked in) or excluded (i.e. locked out). The default status is neither included or excluded but determined during the Marxan analysis.',
+  },
+];
 
 export interface ScenariosSidebarShowAnalysisProps {
 }
@@ -107,10 +125,11 @@ export const ScenariosSidebarShowAnalysis: React.FC<ScenariosSidebarShowAnalysis
               </header>
 
               {!section && (
-              <Sections
-                key="sections"
-                onChangeSection={onChangeSection}
-              />
+                <Sections
+                  key="sections"
+                  sections={SECTIONS}
+                  onChangeSection={onChangeSection}
+                />
               )}
 
               {section === 'gap-analysis' && (

app/layout/scenarios/show/analysis/cost-surface/component.tsx

@@ -108,7 +108,9 @@ export const ScenariosCostSurface: React.FC<ScenariosCostSurfaceProps> = ({
       </header>
 
       <div className="relative flex flex-col flex-grow w-full min-h-0 mt-1 overflow-hidden text-sm">
-        <div className="pt-2">
+        <p className="pt-2">By default all projects have an equal area cost surface which means that planning units with the same area have the same cost</p>
+
+        <div className="pt-5">
           <h4 className="mb-2">Download the current cost surface</h4>
           <Button
             theme="primary-alt"