Add table of contents support to timelines

Author: simonbyford

dotcom-rendering/src/components/Timeline.tsx

@@ -14,6 +14,7 @@ import {
 } from '@guardian/source/foundations';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { NestedArticleElement } from '../lib/renderElement';
+import { slugify } from '../model/enhance-H2s';
 import { palette } from '../palette';
 import type {
 	DCRSectionedTimelineBlockElement,
@@ -294,7 +295,11 @@ export const Timeline = ({
 				<>
 					{timeline.sections.map((section) => (
 						<section key={section.title}>
-							<Subheading format={format} topPadding={false}>
+							<Subheading
+								format={format}
+								topPadding={false}
+								id={slugify(section.title)}
+							>
 								{section.title}
 							</Subheading>
 							{section.events.map((event) => (

dotcom-rendering/src/model/enhanceTableOfContents.ts

@@ -88,6 +88,16 @@ export const enhanceTableOfContents = (
 						title: multiByline.title,
 					});
 				}
+			} else if (
+				element._type ===
+				'model.dotcomrendering.pageElements.DCRSectionedTimelineBlockElement'
+			) {
+				for (const section of element.sections) {
+					tocItems.push({
+						id: slugify(section.title),
+						title: section.title,
+					});
+				}
 			} else if (
 				element._type ===
 					'model.dotcomrendering.pageElements.SubheadingBlockElement' ||