From 7600c40c9c7b07bca52a1077f749ace5425f6290 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 29 Nov 2024 17:13:33 +0100
Subject: [PATCH] wip

---
 .../FlowEditor/ToggleHelpTextButton.tsx       | 35 +++++++++++++++++++
 .../src/pages/FlowEditor/index.tsx            |  2 ++
 .../src/pages/FlowEditor/lib/store/editor.ts  |  6 ++++
 3 files changed, 43 insertions(+)
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
new file mode 100644
index 0000000000..b2ac9159ae
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
@@ -0,0 +1,35 @@
+import HelpTextIcon from "@mui/icons-material/SpeakerNotes";
+import HelpTextOffIcon from "@mui/icons-material/SpeakerNotesOff";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const ToggleHelpTextButton: React.FC = () => {
+  const [showHelpText, toggleShowHelpText] = useStore((state) => [
+    state.showHelpText,
+    state.toggleShowHelpText,
+  ]);
+
+  return (
+    <Tooltip title="Toggle help text" placement="right">
+      <IconButton
+        aria-label="Toggle help text"
+        onClick={toggleShowHelpText}
+        size="large"
+        sx={(theme) => ({
+          background: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          color: showHelpText
+            ? theme.palette.text.primary
+            : theme.palette.text.disabled,
+          "&:hover": {
+            background: theme.palette.common.white,
+          },
+        })}
+      >
+        {showHelpText ? <HelpTextIcon /> : <HelpTextOffIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 90c32cae45..ed6a7e445f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -9,6 +9,7 @@ import { rootFlowPath } from "routes/utils";
 
 import Flow from "./components/Flow";
 import { ToggleDataFieldsButton } from "./components/FlowEditor/ToggleDataFieldsButton";
+import { ToggleHelpTextButton } from "./components/FlowEditor/ToggleHelpTextButton";
 import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
 import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
 import Sidebar from "./components/Sidebar";
@@ -71,6 +72,7 @@ const FlowEditor = () => {
           >
             <ToggleImagesButton />
             <ToggleDataFieldsButton />
+            <ToggleHelpTextButton />
             <ToggleTagsButton />
           </EditorVisualControls>
         </Box>
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index a404f6156e..a3f76792ef 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -56,6 +56,8 @@ export interface EditorUIStore {
   toggleShowImages: () => void;
   showDataFields: boolean;
   toggleShowDataFields: () => void;
+  showHelpText: boolean;
+  toggleShowHelpText: () => void;
   previousURL?: string;
   currentURL: string;
   initURLTracking: () => void;
@@ -92,6 +94,10 @@ export const editorUIStore: StateCreator<
 
     toggleShowDataFields: () => set({ showDataFields: !get().showDataFields }),
 
+    showHelpText: false,
+
+    toggleShowHelpText: () => set({ showHelpText: !get().showHelpText }),
+
     previousURL: undefined,
 
     currentURL: window.location.pathname,