From 579e56a1866682806a58330d93239e2d7e3d9dcf Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Fri, 6 Sep 2024 22:43:53 +0100
Subject: [PATCH] style: Layout for inactive list card with map (#3637)

---
 .../@planx/components/List/Public/index.tsx   | 80 ++++++++++++-------
 1 file changed, 53 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..8b581068bc 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,56 @@ const InactiveListCard: React.FC<{
   const { schema, formik, removeItem, editItem, isPageComponent } =
     useListContext();
 
+  const mapPreview = schema.fields.find((field) => field.type === "map");
+
   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.type !== "map" && (
+                  <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>