From 4cd21088ce300a784f30458db82a15136a544dd7 Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Wed, 9 Oct 2019 14:12:19 +0100
Subject: [PATCH] Add field groups to Size (storeys expanded)

---
 .../building/data-containers/size.tsx         | 142 +++++++++---------
 1 file changed, 75 insertions(+), 67 deletions(-)

diff --git a/app/src/frontend/building/data-containers/size.tsx b/app/src/frontend/building/data-containers/size.tsx
index c1688862..57262e1a 100644
--- a/app/src/frontend/building/data-containers/size.tsx
+++ b/app/src/frontend/building/data-containers/size.tsx
@@ -3,79 +3,87 @@ import React, { Fragment } from 'react';
 import withCopyEdit from '../data-container';
 import NumericDataEntry from '../data-components/numeric-data-entry';
 import SelectDataEntry from '../data-components/select-data-entry';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 /**
 * Size view/edit section
 */
 const SizeView = (props) => (
     <Fragment>
-        <NumericDataEntry
-            title="Core storeys"
-            slug="size_storeys_core"
-            value={props.building.size_storeys_core}
-            mode={props.mode}
-            copy={props.copy}
-            tooltip="How many storeys between the pavement and start of roof?"
-            onChange={props.onChange}
-            step={1}
-            />
-        <NumericDataEntry
-            title="Attic storeys"
-            slug="size_storeys_attic"
-            value={props.building.size_storeys_attic}
-            mode={props.mode}
-            copy={props.copy}
-            tooltip="How many storeys above start of roof?"
-            onChange={props.onChange}
-            step={1}
-            />
-        <NumericDataEntry
-            title="Basement storeys"
-            slug="size_storeys_basement"
-            value={props.building.size_storeys_basement}
-            mode={props.mode}
-            copy={props.copy}
-            tooltip="How many storeys below pavement level?"
-            onChange={props.onChange}
-            step={1}
-            />
-        <NumericDataEntry
-            title="Height to apex (m)"
-            slug="size_height_apex"
-            value={props.building.size_height_apex}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            />
-        <NumericDataEntry
-            title="Height to eaves (m)"
-            slug="size_height_eaves"
-            disabled={true}
-            value={props.building.size_height_eaves}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            />
-        <NumericDataEntry
-            title="Ground floor area (m²)"
-            slug="size_floor_area_ground"
-            value={props.building.size_floor_area_ground}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            />
-        <NumericDataEntry
-            title="Total floor area (m²)"
-            slug="size_floor_area_total"
-            value={props.building.size_floor_area_total}
-            mode={props.mode}
-            copy={props.copy}
-            onChange={props.onChange}
-            step={0.1}
-            />
+        <DataEntryGroup name="Storeys" collapsed={false}>
+
+            <NumericDataEntry
+                title="Core storeys"
+                slug="size_storeys_core"
+                value={props.building.size_storeys_core}
+                mode={props.mode}
+                copy={props.copy}
+                tooltip="How many storeys between the pavement and start of roof?"
+                onChange={props.onChange}
+                step={1}
+                />
+            <NumericDataEntry
+                title="Attic storeys"
+                slug="size_storeys_attic"
+                value={props.building.size_storeys_attic}
+                mode={props.mode}
+                copy={props.copy}
+                tooltip="How many storeys above start of roof?"
+                onChange={props.onChange}
+                step={1}
+                />
+            <NumericDataEntry
+                title="Basement storeys"
+                slug="size_storeys_basement"
+                value={props.building.size_storeys_basement}
+                mode={props.mode}
+                copy={props.copy}
+                tooltip="How many storeys below pavement level?"
+                onChange={props.onChange}
+                step={1}
+                />
+        </DataEntryGroup>
+        <DataEntryGroup name="Height">
+            <NumericDataEntry
+                title="Height to apex (m)"
+                slug="size_height_apex"
+                value={props.building.size_height_apex}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                step={0.1}
+                />
+            <NumericDataEntry
+                title="Height to eaves (m)"
+                slug="size_height_eaves"
+                disabled={true}
+                value={props.building.size_height_eaves}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                step={0.1}
+                />
+        </DataEntryGroup>
+        <DataEntryGroup name="Floor area">
+            <NumericDataEntry
+                title="Ground floor area (m²)"
+                slug="size_floor_area_ground"
+                value={props.building.size_floor_area_ground}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                step={0.1}
+                />
+            <NumericDataEntry
+                title="Total floor area (m²)"
+                slug="size_floor_area_total"
+                value={props.building.size_floor_area_total}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                step={0.1}
+                />
+        </DataEntryGroup>
         <NumericDataEntry
             title="Frontage Width (m)"
             slug="size_width_frontage"