From c6f02631ee81ded14b32435000682a1d3d61f01d Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 6 Sep 2024 11:07:13 +0100
Subject: [PATCH 1/2] style: Layout for inactive list card with map

---
 .../@planx/components/List/Public/index.tsx   | 82 +++++++++++++------
 1 file changed, 55 insertions(+), 27 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
index 87dced62e0..495ca3821a 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -27,12 +27,12 @@ import { ListProvider, useListContext } from "./Context";
 export type Props = PublicProps<List>;
 
 const ListCard = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(2),
+  padding: theme.spacing(2.5),
   backgroundColor: theme.palette.background.paper,
-  border: "1px solid darkgray",
+  border: `1px solid ${theme.palette.border.main}`,
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing(2),
+  gap: theme.spacing(3),
   marginBottom: theme.spacing(2),
   "& label, & table": {
     maxWidth: theme.breakpoints.values.formWrap,
@@ -40,8 +40,17 @@ const ListCard = styled(Box)(({ theme }) => ({
 }));
 
 const CardButton = styled(Button)(({ theme }) => ({
-  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  gap: theme.spacing(1),
+  background: theme.palette.common.white,
+}));
+
+const InactiveListCardLayout = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
   gap: theme.spacing(2),
+  [theme.breakpoints.up("md")]: {
+    flexDirection: "row",
+  },
 }));
 
 const ActiveListCard: React.FC<{
@@ -96,12 +105,12 @@ const ActiveListCard: React.FC<{
             Save
           </Button>
           {!isPageComponent && !isInitialCard && (
-            <Button
+            <CardButton
               data-testid="cancel-edit-item-button"
               onClick={cancelEditItem}
             >
               Cancel
-            </Button>
+            </CardButton>
           )}
         </Box>
       </ListCard>
@@ -115,39 +124,58 @@ const InactiveListCard: React.FC<{
   const { schema, formik, removeItem, editItem, isPageComponent } =
     useListContext();
 
+  const mapPreview = schema.fields.find(
+    (field) => field.data.fn === "features",
+  );
+
   return (
     <ListCard data-testid={`list-card-${i}`}>
       <Typography component="h2" variant="h3">
         {schema.type}
         {!isPageComponent && ` ${i + 1}`}
       </Typography>
-      <Table>
-        <TableBody>
-          {schema.fields.map((field, j) => (
-            <TableRow key={`tableRow-${j}`} sx={{ verticalAlign: "top" }}>
-              <TableCell
-                sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD, maxWidth: "100px" }}
-              >
-                {field.data.title}
-              </TableCell>
-              <TableCell>
-                {formatSchemaDisplayValue(
-                  formik.values.schemaData[i][field.data.fn],
-                  schema.fields[j],
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <InactiveListCardLayout>
+        {mapPreview && (
+          <Box sx={{ flexBasis: "50%" }}>
+            {formatSchemaDisplayValue(
+              formik.values.schemaData[i][mapPreview.data.fn],
+              mapPreview,
+            )}
+          </Box>
+        )}
+        <Table>
+          <TableBody>
+            {schema.fields.map(
+              (field, j) =>
+                field.data.fn !== "features" && (
+                  <TableRow key={`tableRow-${j}`} sx={{ verticalAlign: "top" }}>
+                    <TableCell
+                      sx={{
+                        fontWeight: FONT_WEIGHT_SEMI_BOLD,
+                        maxWidth: "160px",
+                      }}
+                    >
+                      {field.data.title}
+                    </TableCell>
+                    <TableCell>
+                      {formatSchemaDisplayValue(
+                        formik.values.schemaData[i][field.data.fn],
+                        schema.fields[j],
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ),
+            )}
+          </TableBody>
+        </Table>
+      </InactiveListCardLayout>
       <Box display="flex" gap={2}>
         <CardButton onClick={() => removeItem(i)}>
           <DeleteIcon color="warning" fontSize="medium" />
           Remove
         </CardButton>
         <CardButton onClick={() => editItem(i)}>
-          {/* TODO: Is primary colour really right here? */}
-          <EditIcon color="primary" fontSize="medium" />
+          <EditIcon fontSize="medium" />
           Edit
         </CardButton>
       </Box>

From 34c3bf4ffc625e8c5d29a8ba257224554d94728d Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 6 Sep 2024 13:28:55 +0100
Subject: [PATCH 2/2] Use field type rather than function

---
 editor.planx.uk/src/@planx/components/List/Public/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 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
index 495ca3821a..8b581068bc 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -124,9 +124,7 @@ const InactiveListCard: React.FC<{
   const { schema, formik, removeItem, editItem, isPageComponent } =
     useListContext();
 
-  const mapPreview = schema.fields.find(
-    (field) => field.data.fn === "features",
-  );
+  const mapPreview = schema.fields.find((field) => field.type === "map");
 
   return (
     <ListCard data-testid={`list-card-${i}`}>
@@ -147,7 +145,7 @@ const InactiveListCard: React.FC<{
           <TableBody>
             {schema.fields.map(
               (field, j) =>
-                field.data.fn !== "features" && (
+                field.type !== "map" && (
                   <TableRow key={`tableRow-${j}`} sx={{ verticalAlign: "top" }}>
                     <TableCell
                       sx={{