wip(curriculum): show 'in this module' above toc

mdn · Feb 2, 2024 · 0afaab0 · 0afaab0
1 parent d8388dd
commit 0afaab0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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) => {