From 015fc97a4b290f5cd98447a9f1b6229c15778cc3 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 10 Oct 2024 11:44:39 +0100
Subject: [PATCH 1/3] refactor: Result component multiline inputs

---
 .../src/@planx/components/Result/Editor.tsx   | 62 ++++++++-----------
 1 file changed, 26 insertions(+), 36 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Result/Editor.tsx b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
index 2caa01f7d0..c8c2e32030 100644
--- a/editor.planx.uk/src/@planx/components/Result/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
@@ -1,11 +1,10 @@
 import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
 import Typography from "@mui/material/Typography";
 import { Flag, flatFlags } from "@opensystemslab/planx-core/types";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import groupBy from "lodash/groupBy";
-import React, { useState } from "react";
+import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input";
@@ -28,46 +27,37 @@ const FlagEditor: React.FC<{
 }> = (props) => {
   const { flag, existingOverrides } = props;
 
-  const [expanded, setExpanded] = useState(false);
-
   const showEditedIndicator = Boolean(existingOverrides);
 
   return (
-    <Box
-      sx={{ cursor: "pointer" }}
-      padding={1}
-      bgcolor={flag.bgColor}
-      color={flag.color}
-      mt={1}
-    >
-      <Box onClick={() => setExpanded((x) => !x)}>
+    <Box padding={1} bgcolor={flag.bgColor} color={flag.color} mt={1}>
+      <Box>
         <Typography variant="body2">
           {flag.text}
           {showEditedIndicator && "*"}
         </Typography>
       </Box>
-      <Collapse in={expanded}>
-        <Box display="flex" mt={1}>
-          <Input
-            value={existingOverrides?.heading ?? ""}
-            placeholder={"Heading"}
-            onChange={(ev) =>
-              props.onChange({ ...existingOverrides, heading: ev.target.value })
-            }
-          />
-          <Box width={10} />
-          <Input
-            value={existingOverrides?.description ?? ""}
-            placeholder={"Description"}
-            onChange={(ev) =>
-              props.onChange({
-                ...existingOverrides,
-                description: ev.target.value,
-              })
-            }
-          />
-        </Box>
-      </Collapse>
+
+      <Box display="flex" flexDirection="column" gap={0.5} mt={1.5}>
+        <Input
+          value={existingOverrides?.heading ?? ""}
+          placeholder="Heading"
+          onChange={(ev) =>
+            props.onChange({ ...existingOverrides, heading: ev.target.value })
+          }
+        />
+        <Input
+          multiline
+          value={existingOverrides?.description ?? ""}
+          placeholder={"Description"}
+          onChange={(ev) =>
+            props.onChange({
+              ...existingOverrides,
+              description: ev.target.value,
+            })
+          }
+        />
+      </Box>
     </Box>
   );
 };
@@ -85,7 +75,7 @@ const ResultComponent: React.FC<Props> = (props) => {
         props.handleSubmit({ type: TYPES.Result, data: newValues });
       }
     },
-    validate: () => { },
+    validate: () => {},
   });
 
   const allFlagsForSet = flags[formik.values.flagSet];
@@ -149,4 +139,4 @@ const ResultComponent: React.FC<Props> = (props) => {
   );
 };
 
-export default ResultComponent;
\ No newline at end of file
+export default ResultComponent;

From 9dd46a859b285410c54d67dec5eb9c1125871397 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 10 Oct 2024 12:01:59 +0100
Subject: [PATCH 2/3] add input labels

---
 .../src/@planx/components/Result/Editor.tsx   | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Result/Editor.tsx b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
index c8c2e32030..b53b379d0a 100644
--- a/editor.planx.uk/src/@planx/components/Result/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
@@ -7,6 +7,7 @@ import groupBy from "lodash/groupBy";
 import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
+import InputLabel from "ui/public/InputLabel";
 import Input from "ui/shared/Input";
 import InputRow from "ui/shared/InputRow";
 
@@ -30,33 +31,35 @@ const FlagEditor: React.FC<{
   const showEditedIndicator = Boolean(existingOverrides);
 
   return (
-    <Box padding={1} bgcolor={flag.bgColor} color={flag.color} mt={1}>
+    <Box px={1.5} py={2} bgcolor={flag.bgColor} color={flag.color} mt={1}>
       <Box>
-        <Typography variant="body2">
+        <Typography variant="h4">
           {flag.text}
           {showEditedIndicator && "*"}
         </Typography>
       </Box>
 
-      <Box display="flex" flexDirection="column" gap={0.5} mt={1.5}>
-        <Input
-          value={existingOverrides?.heading ?? ""}
-          placeholder="Heading"
-          onChange={(ev) =>
-            props.onChange({ ...existingOverrides, heading: ev.target.value })
-          }
-        />
-        <Input
-          multiline
-          value={existingOverrides?.description ?? ""}
-          placeholder={"Description"}
-          onChange={(ev) =>
-            props.onChange({
-              ...existingOverrides,
-              description: ev.target.value,
-            })
-          }
-        />
+      <Box display="flex" flexDirection="column" gap={2} mt={2}>
+        <InputLabel label="Heading">
+          <Input
+            value={existingOverrides?.heading ?? ""}
+            onChange={(ev) =>
+              props.onChange({ ...existingOverrides, heading: ev.target.value })
+            }
+          />
+        </InputLabel>
+        <InputLabel label="Description">
+          <Input
+            multiline
+            value={existingOverrides?.description ?? ""}
+            onChange={(ev) =>
+              props.onChange({
+                ...existingOverrides,
+                description: ev.target.value,
+              })
+            }
+          />
+        </InputLabel>
       </Box>
     </Box>
   );

From 403f8f5ff5865adea03d9909b7afcd2623891b35 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 11 Oct 2024 10:52:45 +0100
Subject: [PATCH 3/3] remove asterix functionality

---
 editor.planx.uk/src/@planx/components/Result/Editor.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Result/Editor.tsx b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
index b53b379d0a..b6a88e4471 100644
--- a/editor.planx.uk/src/@planx/components/Result/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/Result/Editor.tsx
@@ -28,15 +28,10 @@ const FlagEditor: React.FC<{
 }> = (props) => {
   const { flag, existingOverrides } = props;
 
-  const showEditedIndicator = Boolean(existingOverrides);
-
   return (
     <Box px={1.5} py={2} bgcolor={flag.bgColor} color={flag.color} mt={1}>
       <Box>
-        <Typography variant="h4">
-          {flag.text}
-          {showEditedIndicator && "*"}
-        </Typography>
+        <Typography variant="h4">{flag.text}</Typography>
       </Box>
 
       <Box display="flex" flexDirection="column" gap={2} mt={2}>