Add horizontal table of contents for The Filter in the revamped immersive layout

dotcom-rendering/src/components/ArticleBody.tsx

@@ -20,6 +20,10 @@ import { palette as themePalette } from '../palette';
 import type { Block } from '../types/blocks';
 import type { Switches } from '../types/config';
 import type { TagType } from '../types/tag';
+import {
+	HORIZONTAL_TABLE_OF_CONTENTS_SCROLL_MARGIN,
+	HorizontalTableOfContents,
+} from './HorizontalTableOfContents.island';
 import { Island } from './Island';
 import { LiveBlogRenderer } from './LiveBlogRenderer';
 import { TableOfContents } from './TableOfContents.island';
@@ -50,6 +54,7 @@ type Props = {
 	onFirstPage?: boolean;
 	keyEvents?: Block[];
 	tableOfContents?: TableOfContentsItem[];
+	tableOfContentsStyle?: 'default' | 'horizontal';
 	lang?: string;
 	isRightToLeftLang?: boolean;
 	shouldHideAds: boolean;
@@ -58,6 +63,16 @@ type Props = {
 	isInDeprecatedInteractiveLayout?: boolean;
 };
 
+/**
+ * Stops section headings landing underneath the sticky horizontal table of
+ * contents when a reader follows one of its links.
+ */
+const horizontalTableOfContentsHeadingOffset = css`
+	h2[id] {
+		scroll-margin-top: ${HORIZONTAL_TABLE_OF_CONTENTS_SCROLL_MARGIN}px;
+	}
+`;
+
 const globalOlStyles = () => css`
 	ol:not([data-ignore='global-ol-styling']) {
 		counter-reset: li;
@@ -148,6 +163,7 @@ export const ArticleBody = ({
 	keyEvents = [],
 	keywordIds,
 	tableOfContents,
+	tableOfContentsStyle = 'default',
 	lang,
 	isRightToLeftLang = false,
 	editionId,
@@ -235,10 +251,16 @@ export const ArticleBody = ({
 		<>
 			{tableOfContents && tableOfContents.length > 0 && (
 				<Island priority="critical" defer={{ until: 'visible' }}>
-					<TableOfContents
-						tableOfContents={tableOfContents}
-						format={format}
-					></TableOfContents>
+					{tableOfContentsStyle === 'horizontal' ? (
+						<HorizontalTableOfContents
+							tableOfContents={tableOfContents}
+						/>
+					) : (
+						<TableOfContents
+							tableOfContents={tableOfContents}
+							format={format}
+						></TableOfContents>
+					)}
 				</Island>
 			)}
 			<div
@@ -251,6 +273,8 @@ export const ArticleBody = ({
 					globalStrongStyles,
 					globalLinkStyles(),
 					isHostedContent && [hostedContentH2Styles],
+					tableOfContentsStyle === 'horizontal' &&
+						horizontalTableOfContentsHeadingOffset,
 				]}
 				lang={language}
 				dir={languageDirection}

dotcom-rendering/src/components/HorizontalTableOfContents.island.test.tsx

@@ -0,0 +1,54 @@
+import { getCurrentSectionId } from './HorizontalTableOfContents.island';
+
+describe('getCurrentSectionId', () => {
+	const line = 60;
+
+	it('returns undefined above the first heading', () => {
+		expect(
+			getCurrentSectionId(
+				[
+					{ id: 'a', top: 200 },
+					{ id: 'b', top: 900 },
+				],
+				line,
+			),
+		).toBeUndefined();
+	});
+
+	it('returns the last heading scrolled past the line', () => {
+		expect(
+			getCurrentSectionId(
+				[
+					{ id: 'a', top: -800 },
+					{ id: 'b', top: -100 },
+					{ id: 'c', top: 400 },
+				],
+				line,
+			),
+		).toBe('b');
+	});
+
+	it('selects a heading scrolled exactly to its scroll margin', () => {
+		expect(
+			getCurrentSectionId(
+				[
+					{ id: 'a', top: -500 },
+					{ id: 'b', top: 60.5 },
+				],
+				line,
+			),
+		).toBe('b');
+	});
+
+	it('goes back to the earlier section when scrolling up past a heading', () => {
+		expect(
+			getCurrentSectionId(
+				[
+					{ id: 'a', top: -500 },
+					{ id: 'b', top: 120 },
+				],
+				line,
+			),
+		).toBe('a');
+	});
+});