feat: add export/print button to Upload+Label and Review components (#…

…3771)

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

@@ -1,8 +1,7 @@
 import { act, screen, waitFor, within } from "@testing-library/react";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
 import axios from "axios";
-import { useStore } from "pages/FlowEditor/lib/store";
-import { FullStore } from "pages/FlowEditor/lib/store";
+import { FullStore, useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 import { setup } from "testUtils";
 import { Breadcrumbs } from "types";
@@ -60,6 +59,18 @@ describe("Basic state and setup", () => {
     expect(results).toHaveNoViolations();
   });
 
+  it("does not show a print button if hideDropZone is false", async () => {
+    const { queryByText } = setup(
+      <FileUploadAndLabelComponent
+        title="Test title"
+        fileTypes={[mockFileTypes.AlwaysRequired, mockFileTypes.NotRequired]}
+        // hideDropZone is false by default
+      />,
+    );
+    const printButton = queryByText("Print this page");
+    expect(printButton).toBeNull();
+  });
+
   test("shows help buttons for header and applicable file", async () => {
     const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent
@@ -141,6 +152,17 @@ describe("Info-only mode with hidden drop zone", () => {
     expect(results).toHaveNoViolations();
   });
 
+  it("shows a print button", async () => {
+    const { getByText } = setup(
+      <FileUploadAndLabelComponent
+        title="Test title"
+        fileTypes={[mockFileTypes.AlwaysRequired, mockFileTypes.NotRequired]}
+        hideDropZone={true}
+      />,
+    );
+    expect(getByText("Print this page")).toBeVisible();
+  });
+
   test("shows help buttons for header and applicable file", async () => {
     const { getAllByTestId } = setup(
       <FileUploadAndLabelComponent

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

@@ -7,6 +7,7 @@ import ListSubheader from "@mui/material/ListSubheader";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { PublicProps } from "@planx/components/ui";
+import { PrintButton } from "components/PrintButton";
 import capitalize from "lodash/capitalize";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import { HelpClickMetadata } from "pages/FlowEditor/lib/analytics/types";
@@ -271,6 +272,7 @@ function Component(props: Props) {
           </Box>
         </ErrorWrapper>
       </FullWidthWrapper>
+      {props.hideDropZone && <PrintButton />}
     </Card>
   );
 }

editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx

@@ -2,6 +2,7 @@ import { NodeId } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import SummaryListsBySections from "@planx/components/shared/Preview/SummaryList";
+import { PrintButton } from "components/PrintButton";
 import { Store } from "pages/FlowEditor/lib/store";
 import { sortBreadcrumbs } from "pages/FlowEditor/lib/store/preview";
 import type { HandleSubmit } from "pages/Preview/Node";
@@ -38,6 +39,7 @@ function Component(props: Props) {
         showChangeButton={props.showChangeButton}
         sectionComponent="h2"
       />
+      <PrintButton />
     </Card>
   );
 }

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

@@ -38,7 +38,7 @@ describe("Simple flow", () => {
     const handleSubmit = vi.fn();
     const changeAnswer = vi.fn();
 
-    const { user } = setup(
+    const { user, getByText } = setup(
       <Review
         title="Review"
         description="Check your answers before submitting"
@@ -52,6 +52,7 @@ describe("Simple flow", () => {
     );
 
     expect(screen.getByRole("heading")).toHaveTextContent("Review");
+    expect(getByText("Print this page")).toBeVisible();
 
     await user.click(screen.getByTestId("continue-button"));
 

editor.planx.uk/src/components/PrintButton.tsx

@@ -0,0 +1,17 @@
+import PrintIcon from "@mui/icons-material/Print";
+import Button from "@mui/material/Button";
+import React from "react";
+
+export const PrintButton = () => {
+  return (
+    <Button
+      variant="contained"
+      color="secondary"
+      startIcon={<PrintIcon />}
+      size="large"
+      onClick={() => window.print()}
+    >
+      Print this page
+    </Button>
+  );
+};