show icon if help text defined

theopensystemslab · Dec 1, 2024 · 6a757e3 · 6a757e3
1 parent 7600c40
commit 6a757e3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Checklist.tsx
@@ -1,3 +1,4 @@
+import Help from "@mui/icons-material/Help";
 import Box from "@mui/material/Box";
 import {
   ComponentType as TYPES,
@@ -25,10 +26,11 @@ type Props = {
 } & NodeTags;
 
 const Checklist: React.FC<Props> = React.memo((props) => {
-  const [isClone, childNodes, copyNode] = useStore((state) => [
+  const [isClone, childNodes, copyNode, showHelpText] = useStore((state) => [
     state.isClone,
     state.childNodesOf(props.id),
     state.copyNode,
+    state.showHelpText,
   ]);
 
   const parent = getParentId(props.parent);
@@ -76,6 +78,9 @@ const Checklist: React.FC<Props> = React.memo((props) => {
 
   const Icon = ICONS[props.type];
 
+  const hasHelpText =
+    props.data.policyRef || props.data.info || props.data.howMeasured;
+
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
@@ -109,6 +114,9 @@ const Checklist: React.FC<Props> = React.memo((props) => {
               )}
               <Box sx={{ display: "flex", flexDirection: "row" }}>
                 {Icon && <Icon />}
+                {showHelpText && hasHelpText && (
+                  <Help fontSize="small" color="primary" />
+                )}
                 <span>{props.text}</span>
               </Box>
             </Box>

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -1,4 +1,5 @@
 import ErrorIcon from "@mui/icons-material/Error";
+import Help from "@mui/icons-material/Help";
 import Box from "@mui/material/Box";
 import {
   ComponentType as TYPES,
@@ -25,10 +26,11 @@ type Props = {
 } & NodeTags;
 
 const Question: React.FC<Props> = React.memo((props) => {
-  const [isClone, childNodes, copyNode] = useStore((state) => [
+  const [isClone, childNodes, copyNode, showHelpText] = useStore((state) => [
     state.isClone,
     state.childNodesOf(props.id),
     state.copyNode,
+    state.showHelpText,
   ]);
 
   const parent = getParentId(props.parent);
@@ -60,6 +62,9 @@ const Question: React.FC<Props> = React.memo((props) => {
   // If there is an error, the icon has a semantic meaning and needs a title
   const iconTitleAccess = props.type === "Error" ? "Error" : undefined;
 
+  const hasHelpText =
+    props.data.policyRef || props.data.info || props.data.howMeasured;
+
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
@@ -91,6 +96,9 @@ const Question: React.FC<Props> = React.memo((props) => {
               />
             )}
             {Icon && <Icon titleAccess={iconTitleAccess} />}
+            {showHelpText && hasHelpText && (
+              <Help fontSize="small" color="primary" />
+            )}
             <span>{props.text}</span>
           </Link>
           {props.type !== TYPES.SetValue && props.data?.fn && (

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
@@ -1,5 +1,5 @@
-import HelpTextIcon from "@mui/icons-material/SpeakerNotes";
-import HelpTextOffIcon from "@mui/icons-material/SpeakerNotesOff";
+import HelpTextOffIcon from "@mui/icons-material/DoNotDisturbOff";
+import HelpTextIcon from "@mui/icons-material/Help";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { useStore } from "pages/FlowEditor/lib/store";