From 3032dc1c02fc2668e7e8b64d3672b2547d9d96e3 Mon Sep 17 00:00:00 2001
From: kingsley <ogbukingsley166@gmail.com>
Date: Tue, 28 Jul 2026 14:59:59 +0100
Subject: [PATCH] b#031: Add print stylesheet and SortMenu; Closes #708

---
 README.md                   |  6 +++++
 src/main.tsx                |  1 +
 src/pages/SortMenu.test.tsx | 21 +++++++++++++++
 src/pages/SortMenu.tsx      | 53 +++++++++++++++++++++++++++++++++++++
 src/styles/print.css        | 39 +++++++++++++++++++++++++++
 5 files changed, 120 insertions(+)
 create mode 100644 src/pages/SortMenu.test.tsx
 create mode 100644 src/pages/SortMenu.tsx
 create mode 100644 src/styles/print.css

diff --git a/README.md b/README.md
index b0ed583..695b8be 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,12 @@ Key principles:
 
 3. Open [http://localhost:5173](http://localhost:5173).
 
+## Print stylesheet
+
+Added `src/styles/print.css` to hide UI chrome and expand collapsible
+sections when printing the `SortMenu` page. This improves printed output
+by removing interactive controls and making content fully visible. (Closes #708)
+
 ## Scripts
 
 | Command          | Description                          |
diff --git a/src/main.tsx b/src/main.tsx
index c3c61c3..13f4e90 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 import "./index.css";
+import "./styles/print.css";
 import { ThemeProvider } from "./ThemeContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
diff --git a/src/pages/SortMenu.test.tsx b/src/pages/SortMenu.test.tsx
new file mode 100644
index 0000000..159b9d0
--- /dev/null
+++ b/src/pages/SortMenu.test.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import SortMenu from "./SortMenu";
+import fs from "fs";
+import path from "path";
+
+describe("SortMenu print behavior", () => {
+  test("renders collapsible sections", () => {
+    render(<SortMenu />);
+    expect(screen.getByText("Sort Options")).toBeInTheDocument();
+    expect(screen.getByText("Advanced Filters")).toBeInTheDocument();
+  });
+
+  test("print stylesheet exists and contains print rules", () => {
+    const cssPath = path.resolve(__dirname, "../styles/print.css");
+    const css = fs.readFileSync(cssPath, "utf8");
+    expect(css).toMatch(/@media print/);
+    expect(css).toMatch(/\.no-print/);
+    expect(css).toMatch(/details\s*>\s*\*/);
+  });
+});
diff --git a/src/pages/SortMenu.tsx b/src/pages/SortMenu.tsx
new file mode 100644
index 0000000..751b777
--- /dev/null
+++ b/src/pages/SortMenu.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+/**
+ * SortMenu page used for printing tests.
+ * - Contains small amount of UI "chrome" that should be hidden when printing
+ * - Contains collapsible sections which should be expanded when printing
+ */
+export default function SortMenu(): JSX.Element {
+  return (
+    <div className="sort-menu-page">
+      <header className="sort-menu-header no-print">
+        <h1>Sort & Filters</h1>
+        <div className="sort-menu-actions">
+          <button className="ghost-button">Close</button>
+          <button className="primary-button">Apply</button>
+        </div>
+      </header>
+
+      <section className="sort-menu-content">
+        <p className="no-print">This chrome is hidden on print (page header, buttons).</p>
+
+        <div className="sort-collapsible">
+          <details>
+            <summary>Sort Options</summary>
+            <div>
+              <label>
+                <input type="radio" name="sort" defaultChecked /> Relevance
+              </label>
+              <label>
+                <input type="radio" name="sort" /> Price: low → high
+              </label>
+              <label>
+                <input type="radio" name="sort" /> Popularity
+              </label>
+            </div>
+          </details>
+
+          <details>
+            <summary>Advanced Filters</summary>
+            <div>
+              <label>
+                <input type="checkbox" /> Include deprecated
+              </label>
+              <label>
+                <input type="checkbox" /> Show only free
+              </label>
+            </div>
+          </details>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/styles/print.css b/src/styles/print.css
new file mode 100644
index 0000000..e73bcc3
--- /dev/null
+++ b/src/styles/print.css
@@ -0,0 +1,39 @@
+/* Print stylesheet: hide UI chrome and expand collapsibles for printing SortMenu */
+
+@media print {
+  /* Hide application chrome */
+  .no-print,
+  .sort-menu-header,
+  .sort-menu-actions,
+  button.ghost-button,
+  button.primary-button {
+    display: none !important;
+  }
+
+  /* Ensure details-based collapsibles show their content when printing */
+  .sort-collapsible details > * {
+    display: block !important;
+    visibility: visible !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  /* Hide summary controls when printing to avoid duplicate controls */
+  .sort-collapsible summary {
+    display: none !important;
+  }
+
+  /* Make printed text clear and use light color scheme for consistent prints */
+  html, body {
+    background: #fff !important;
+    color: #000 !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Remove any unnecessary outlines/box-shadows that don't print well */
+  * {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+}