From 0afaab03059335a39c044c10f69ce1ff85177cf8 Mon Sep 17 00:00:00 2001
From: Leo McArdle <lmcardle@mozilla.com>
Date: Fri, 2 Feb 2024 17:03:01 +0000
Subject: [PATCH] wip(curriculum): show 'in this module' above toc

---
 client/src/curriculum/module.tsx            | 4 +++-
 client/src/document/organisms/toc/index.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/curriculum/module.tsx b/client/src/curriculum/module.tsx
index ae08c0b182e8..531d3d40562b 100644
--- a/client/src/curriculum/module.tsx
+++ b/client/src/curriculum/module.tsx
@@ -63,7 +63,9 @@ export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
               <div className="toc-container">
                 <aside className="toc">
                   <nav>
-                    {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
+                    {doc.toc && !!doc.toc.length && (
+                      <TOC toc={doc.toc} title="In this module" />
+                    )}
                   </nav>
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
diff --git a/client/src/document/organisms/toc/index.tsx b/client/src/document/organisms/toc/index.tsx
index 26f3ca38eb5f..dd2f7bb1dec2 100644
--- a/client/src/document/organisms/toc/index.tsx
+++ b/client/src/document/organisms/toc/index.tsx
@@ -6,7 +6,7 @@ import { useFirstVisibleElement } from "../../hooks";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { TOC_CLICK } from "../../../telemetry/constants";
 
-export function TOC({ toc }: { toc: Toc[] }) {
+export function TOC({ toc, title }: { toc: Toc[]; title?: string }) {
   const [currentViewedTocItem, setCurrentViewedTocItem] = useState("");
 
   const observedElements = React.useCallback(() => {
@@ -44,7 +44,9 @@ export function TOC({ toc }: { toc: Toc[] }) {
       <div className="document-toc-container">
         <section className="document-toc">
           <header>
-            <h2 className="document-toc-heading">In this article</h2>
+            <h2 className="document-toc-heading">
+              {title || "In this article"}
+            </h2>
           </header>
           <ul className="document-toc-list">
             {toc.map((item) => {