fix: show help text if defined for Content components (#3012)

editor.planx.uk/src/@planx/components/Content/Public.test.tsx

@@ -18,6 +18,7 @@ test("const { user } = setups correctly", async () => {
     background: "#fff",
     color: "#0B0C0C",
   });
+  expect(screen.queryByTestId("more-info-button")).not.toBeInTheDocument();
 
   await user.click(screen.getByTestId("continue-button"));
 
@@ -37,3 +38,20 @@ it("should not have any accessibility violations", async () => {
   const results = await axe(container);
   expect(results).toHaveNoViolations();
 });
+
+test("should display and open more information link if help text is provided", async () => {
+  const handleSubmit = jest.fn();
+
+  const { user } = setup(
+    <Content
+      content="This is a warning about doors"
+      handleSubmit={handleSubmit}
+      info="The number of doors impact your project fee."
+    />,
+  );
+
+  expect(screen.getByTestId("more-info-button")).toBeInTheDocument();
+
+  await user.click(screen.getByTestId("more-info-button"));
+  expect(screen.findByText("Why does it matter?")).toBeTruthy();
+});

editor.planx.uk/src/@planx/components/Content/Public.tsx

@@ -1,13 +1,21 @@
 import { mostReadable } from "@ctrl/tinycolor";
+import HelpIcon from "@mui/icons-material/Help";
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import type { Content } from "@planx/components/Content/model";
 import Card from "@planx/components/shared/Preview/Card";
 import { PublicProps } from "@planx/components/ui";
+import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React from "react";
 import { getContrastTextColor } from "styleUtils";
+import { emptyContent } from "ui/editor/RichTextInput";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
+import MoreInfo from "../shared/Preview/MoreInfo";
+import MoreInfoSection from "../shared/Preview/MoreInfoSection";
+import { HelpButton, Image } from "../shared/Preview/QuestionHeader";
+
 export type Props = PublicProps<Content>;
 
 const Content = styled(Box, {
@@ -32,19 +40,81 @@ Content.defaultProps = {
 };
 
 const ContentComponent: React.FC<Props> = (props) => {
+  const {
+    handleSubmit,
+    color,
+    content,
+    info,
+    policyRef,
+    howMeasured,
+    definitionImg,
+  } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const { trackEvent } = useAnalyticsTracking();
+
+  const handleHelpClick = () => {
+    setOpen(true);
+    trackEvent({ event: "helpClick", metadata: {} }); // This returns a promise but we don't need to await for it
+  };
+
   return (
-    <Card handleSubmit={props.handleSubmit} isValid>
+    <Card handleSubmit={handleSubmit} isValid>
       <Content
-        color={props.color}
+        color={color}
         data-testid="content"
-        p={props.color === "#ffffff" || !props.color ? 0 : 2}
+        p={color === "#ffffff" || !color ? 0 : 2}
       >
         <ReactMarkdownOrHtml
-          source={props.content}
+          source={content}
           openLinksOnNewTab
           manuallyIncrementHeaders
         />
       </Content>
+      {!!(info || policyRef || howMeasured) && (
+        <Typography variant="subtitle1" component="div">
+          <HelpButton
+            variant="help"
+            title={`More information`}
+            aria-label={`See more information about this content`}
+            onClick={handleHelpClick}
+            aria-haspopup="dialog"
+            data-testid="more-info-button"
+          >
+            <HelpIcon /> More information
+          </HelpButton>
+        </Typography>
+      )}
+      <MoreInfo open={open} handleClose={() => setOpen(false)}>
+        {info && info !== emptyContent ? (
+          <MoreInfoSection title="Why does it matter?">
+            <ReactMarkdownOrHtml source={info} openLinksOnNewTab />
+          </MoreInfoSection>
+        ) : undefined}
+        {policyRef && policyRef !== emptyContent ? (
+          <MoreInfoSection title="Source">
+            <ReactMarkdownOrHtml source={policyRef} openLinksOnNewTab />
+          </MoreInfoSection>
+        ) : undefined}
+        {howMeasured && howMeasured !== emptyContent ? (
+          <MoreInfoSection title="How is it defined?">
+            <>
+              {definitionImg && (
+                <Image
+                  src={definitionImg}
+                  alt=""
+                  aria-describedby="howMeasured"
+                />
+              )}
+              <ReactMarkdownOrHtml
+                source={howMeasured}
+                openLinksOnNewTab
+                id="howMeasured"
+              />
+            </>
+          </MoreInfoSection>
+        ) : undefined}
+      </MoreInfo>
     </Card>
   );
 };