From 257673a588361f3ca78eb00f6b33230e4cbd5f36 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 10 Sep 2024 19:32:49 -0400
Subject: [PATCH] =?UTF-8?q?feat(toc):=20=E2=9C=A8=20allow=20ToC=20to=20be?=
 =?UTF-8?q?=20collapsible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using the same implementation as Vector 2022

Closes: #556
---
 .../components/TableOfContents.less           | 58 +++++++++++++++++++
 templates/TableOfContents__line.mustache      |  6 ++
 2 files changed, 64 insertions(+)

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
index fc62bccb..0135a5e3 100644
--- a/resources/skins.citizen.styles/components/TableOfContents.less
+++ b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -1,4 +1,5 @@
 .citizen-toc {
+	--citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )';
 	font-size: var( --font-size-small );
 	line-height: var( --line-height-xs );
 
@@ -36,6 +37,11 @@
 			transition-property: opacity, height, padding !important;
 		}
 
+		&:has( + .citizen-toc-toggle ) {
+			/* Make space for toggle */
+			padding-right: ~'calc( var( --space-xs ) + var( --citizen-toc-toggle-size ) )';
+		}
+
 		&:hover {
 			background-color: var( --background-color-button-quiet--hover );
 		}
@@ -50,6 +56,17 @@
 		}
 	}
 
+	&-toggle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: none;
+		width: var( --citizen-toc-toggle-size );
+		height: var( --citizen-toc-toggle-size );
+		padding: 0;
+		background: transparent;
+	}
+
 	&-indicator {
 		position: absolute;
 		top: 0;
@@ -73,6 +90,8 @@
 	}
 
 	&-list-item {
+		position: relative;
+
 		&--active {
 			> .citizen-toc-link {
 				color: var( --color-progressive );
@@ -85,6 +104,45 @@
 	}
 }
 
+// Collapse ToC sections by default, excluding no-js
+.client-js .citizen-toc {
+	.citizen-toc-level-1 .citizen-toc-list-item {
+		display: none;
+	}
+
+	.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item {
+		display: block;
+	}
+
+	.citizen-toc-toggle {
+		--size-icon: var( --font-size-small );
+		display: grid;
+		place-content: center;
+		cursor: pointer;
+		border-radius: var( --border-radius--small );
+
+		.citizen-ui-icon {
+			&::before {
+				transition: var( --transition-hover );
+				transition-property: transform;
+				transform: rotate3d( 1, 0, 0, 180deg );
+			}
+		}
+
+		&:hover {
+			background-color: var( --background-color-button-quiet--hover );
+		}
+
+		&:active {
+			background-color: var( --background-color-button-quiet--active );
+		}
+	}
+
+	.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before {
+		transform: none;
+	}
+}
+
 // Sticky header styles
 .citizen-page-header--sticky {
 	.citizen-toc-top.citizen-toc-link {
diff --git a/templates/TableOfContents__line.mustache b/templates/TableOfContents__line.mustache
index 8db94b3a..993a5205 100644
--- a/templates/TableOfContents__line.mustache
+++ b/templates/TableOfContents__line.mustache
@@ -13,6 +13,12 @@
 	{{#html-summary}}
 	{{{.}}}
 	{{/html-summary}}
+	{{#is-top-level-section}}{{#is-parent-section}}
+		<button aria-controls="toc-{{anchor}}-sublist" class="citizen-toc-toggle">
+			<span class="citizen-ui-icon mw-ui-icon-wikimedia-collapse"></span>
+			<span>{{{citizen-button-label}}}</span>
+		</button>
+	{{/is-parent-section}}{{/is-top-level-section}}
 	<ul id="toc-{{anchor}}-sublist" class="citizen-toc-list">
 		{{#array-sections}}
 		{{>TableOfContents__line}}