feat: Full width map for list component (#3632)

theopensystemslab · Sep 6, 2024 · 550760c · 550760c
1 parent 1e9757b
commit 550760c
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 72 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -15,6 +15,7 @@ import { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useRef } from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import Card from "../../shared/Preview/Card";
@@ -33,6 +34,9 @@ const ListCard = styled(Box)(({ theme }) => ({
   flexDirection: "column",
   gap: theme.spacing(2),
   marginBottom: theme.spacing(2),
+  "& label, & table": {
+    maxWidth: theme.breakpoints.values.formWrap,
+  },
 }));
 
 const CardButton = styled(Button)(({ theme }) => ({
@@ -201,6 +205,40 @@ const Root = () => {
     );
   }
 
+  const listContent = (
+    <ErrorWrapper error={rootError}>
+      <>
+        {formik.values.schemaData.map((_, i) =>
+          i === activeIndex ? (
+            <ActiveListCard key={`card-${i}`} index={i} />
+          ) : (
+            <InactiveListCard key={`card-${i}`} index={i} />
+          ),
+        )}
+        {shouldShowAddAnotherButton && (
+          <ErrorWrapper
+            error={
+              errors.addItem
+                ? `Please save all responses before adding another ${schema.type.toLowerCase()}`
+                : ""
+            }
+          >
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={addNewItem}
+              sx={{ "@media (min-width: 768px)": { width: "100%" } }}
+              size="large"
+              data-testid="list-add-button"
+            >
+              + Add another {schema.type.toLowerCase()}
+            </Button>
+          </ErrorWrapper>
+        )}
+      </>
+    </ErrorWrapper>
+  );
+
   return (
     <Card handleSubmit={validateAndSubmitForm} isValid>
       <CardHeader
@@ -210,36 +248,11 @@ const Root = () => {
         policyRef={policyRef}
         howMeasured={howMeasured}
       />
-      <ErrorWrapper error={rootError}>
-        <>
-          {formik.values.schemaData.map((_, i) =>
-            i === activeIndex ? (
-              <ActiveListCard key={`card-${i}`} index={i} />
-            ) : (
-              <InactiveListCard key={`card-${i}`} index={i} />
-            ),
-          )}
-          {shouldShowAddAnotherButton && (
-            <ErrorWrapper
-              error={
-                errors.addItem
-                  ? `Please save all responses before adding another ${schema.type.toLowerCase()}`
-                  : ""
-              }
-            >
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={addNewItem}
-                sx={{ width: "100%" }}
-                data-testid="list-add-button"
-              >
-                + Add another {schema.type.toLowerCase()}
-              </Button>
-            </ErrorWrapper>
-          )}
-        </>
-      </ErrorWrapper>
+      {hasMapField ? (
+        <FullWidthWrapper>{listContent}</FullWidthWrapper>
+      ) : (
+        listContent
+      )}
     </Card>
   );
 };

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import { MapContainer } from "@planx/components/shared/Preview/MapContainer";
 import type { MapField } from "@planx/components/shared/Schema/model";
 import { Feature } from "geojson";
@@ -47,47 +48,52 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
   }, [setFeatures]);
 
   return (
-    <InputLabel label={title} id={`map-label-${id}`} htmlFor={id}>
-      {description && <FieldInputDescription description={description} />}
-      <ErrorWrapper error={errorMessage} id={id}>
-        <MapContainer environment="standalone">
-          {/* @ts-ignore */}
-          <my-map
-            id={id}
-            // TODO
-            // ariaLabelOlFixedOverlay={`An interactive map for plotting and describing ${schema.type.toLocaleLowerCase()}`}
-            height={400}
-            basemap={mapOptions?.basemap}
-            drawMode
-            drawGeojsonData={
-              features &&
-              JSON.stringify({ type: "FeatureCollection", features: features })
-            }
-            drawMany={mapOptions?.drawMany}
-            drawColor={mapOptions?.drawColor}
-            drawType={mapOptions?.drawType}
-            drawPointer="crosshair"
-            zoom={20}
-            maxZoom={23}
-            latitude={Number(passport?.data?._address?.latitude)}
-            longitude={Number(passport?.data?._address?.longitude)}
-            osProxyEndpoint={`${
-              import.meta.env.VITE_APP_API_URL
-            }/proxy/ordnance-survey`}
-            osCopyright={
-              mapOptions?.basemap === "OSVectorTile"
-                ? `Basemap subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
-                : ``
-            }
-            clipGeojsonData={
-              teamSettings?.boundaryBBox &&
-              JSON.stringify(teamSettings?.boundaryBBox)
-            }
-            mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
-            collapseAttributions
-          />
-        </MapContainer>
-      </ErrorWrapper>
-    </InputLabel>
+    <Box sx={{ "& > label": { maxWidth: "100% !important" } }}>
+      <InputLabel label={title} id={`map-label-${id}`} htmlFor={id}>
+        {description && <FieldInputDescription description={description} />}
+        <ErrorWrapper error={errorMessage} id={id}>
+          <MapContainer environment="standalone">
+            {/* @ts-ignore */}
+            <my-map
+              id={id}
+              // TODO
+              // ariaLabelOlFixedOverlay={`An interactive map for plotting and describing ${schema.type.toLocaleLowerCase()}`}
+              height={400}
+              basemap={mapOptions?.basemap}
+              drawMode
+              drawGeojsonData={
+                features &&
+                JSON.stringify({
+                  type: "FeatureCollection",
+                  features: features,
+                })
+              }
+              drawMany={mapOptions?.drawMany}
+              drawColor={mapOptions?.drawColor}
+              drawType={mapOptions?.drawType}
+              drawPointer="crosshair"
+              zoom={20}
+              maxZoom={23}
+              latitude={Number(passport?.data?._address?.latitude)}
+              longitude={Number(passport?.data?._address?.longitude)}
+              osProxyEndpoint={`${
+                import.meta.env.VITE_APP_API_URL
+              }/proxy/ordnance-survey`}
+              osCopyright={
+                mapOptions?.basemap === "OSVectorTile"
+                  ? `Basemap subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                  : ``
+              }
+              clipGeojsonData={
+                teamSettings?.boundaryBBox &&
+                JSON.stringify(teamSettings?.boundaryBBox)
+              }
+              mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
+              collapseAttributions
+            />
+          </MapContainer>
+        </ErrorWrapper>
+      </InputLabel>
+    </Box>
   );
 };