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) => {