From a5e3c34830dba2a7e56ea71995ddabd668b65a53 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Tue, 24 Dec 2024 12:21:44 +0000
Subject: [PATCH 01/11] Migrate fabric-expandable template to Svelte

---
 src/templates/csr/fabric-expandable/ad.json   |   3 +
 .../csr/fabric-expandable/index.html          |   1 +
 .../csr/fabric-expandable/index.svelte        | 206 ++++++++++++++++++
 src/templates/csr/fabric-expandable/test.json |  65 ++++++
 4 files changed, 275 insertions(+)
 create mode 100644 src/templates/csr/fabric-expandable/ad.json
 create mode 100644 src/templates/csr/fabric-expandable/index.html
 create mode 100644 src/templates/csr/fabric-expandable/index.svelte
 create mode 100644 src/templates/csr/fabric-expandable/test.json

diff --git a/src/templates/csr/fabric-expandable/ad.json b/src/templates/csr/fabric-expandable/ad.json
new file mode 100644
index 00000000..1d13a211
--- /dev/null
+++ b/src/templates/csr/fabric-expandable/ad.json
@@ -0,0 +1,3 @@
+{
+	"nativeStyleId": "79031"
+}
diff --git a/src/templates/csr/fabric-expandable/index.html b/src/templates/csr/fabric-expandable/index.html
new file mode 100644
index 00000000..efa6e13b
--- /dev/null
+++ b/src/templates/csr/fabric-expandable/index.html
@@ -0,0 +1 @@
+[%thirdPartyJSTracking%]
diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
new file mode 100644
index 00000000..eaec8ee6
--- /dev/null
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+	import type { GAMVariable } from '$lib/gam';
+	import Fabric from '$templates/components/Fabric.svelte';
+	import SetHeightResizer from '$templates/components/SetHeightResizer.svelte';
+
+	export let Trackingpixel: GAMVariable;
+	export let Researchpixel: GAMVariable;
+	export let Viewabilitypixel: GAMVariable;
+
+	export let ScrollType: GAMVariable<'parallax' | 'none' | 'fixed'>;
+
+	export let Slide1BackgroundColour: GAMVariable;
+	export let Slide1BackgroundImage: GAMVariable;
+	export let Slide1BackgroundRepeat: GAMVariable;
+	export let Slide1BackgroundPosition: GAMVariable;
+	export let Slide1MobileBackgroundImage: GAMVariable;
+	export let Slide1MobileBackgroundRepeat: GAMVariable;
+	export let Slide1MobileBackgroundPosition: GAMVariable;
+	export let Slide1Layer1BackgroundImage: GAMVariable;
+	export let Slide1Layer1BackgroundPosition: GAMVariable;
+	export let Slide1Layer1MobileBackgroundImage: GAMVariable;
+	export let Slide1Layer1MobileBackgroundPosition: GAMVariable;
+	export let Slide1Layer2BackgroundImage: GAMVariable;
+	export let Slide1Layer2BackgroundPosition: GAMVariable;
+	export let Slide1Layer2MobileBackgroundImage: GAMVariable;
+	export let Slide1Layer2MobileBackgroundPosition: GAMVariable;
+	export let Slide1Layer3BackgroundImage: GAMVariable;
+	export let Slide1Layer3BackgroundPosition: GAMVariable;
+	export let Slide1Layer3MobileBackgroundImage: GAMVariable;
+	export let Slide1Layer3MobileBackgroundPosition: GAMVariable;
+
+	export let Slide2BackgroundColour: GAMVariable;
+	export let Slide2BackgroundImage: GAMVariable;
+	export let Slide2BackgroundRepeat: GAMVariable;
+	export let Slide2BackgroundPosition: GAMVariable;
+	export let Slide2MobileBackgroundImage: GAMVariable;
+	export let Slide2MobileBackgroundRepeat: GAMVariable;
+	export let Slide2MobileBackgroundPosition: GAMVariable;
+	export let Slide2Layer1BackgroundImage: GAMVariable;
+	export let Slide2Layer1BackgroundPosition: GAMVariable;
+	export let Slide2Layer1MobileBackgroundImage: GAMVariable;
+	export let Slide2Layer1MobileBackgroundPosition: GAMVariable;
+	export let Slide2Layer2BackgroundImage: GAMVariable;
+	export let Slide2Layer2BackgroundPosition: GAMVariable;
+	export let Slide2Layer2MobileBackgroundImage: GAMVariable;
+	export let Slide2Layer2MobileBackgroundPosition: GAMVariable;
+	export let Slide2Layer3BackgroundImage: GAMVariable;
+	export let Slide2Layer3BackgroundPosition: GAMVariable;
+	export let Slide2Layer3MobileBackgroundImage: GAMVariable;
+	export let Slide2Layer3MobileBackgroundPosition: GAMVariable;
+
+	let expanded = false;
+
+	function toggleExpanded() {
+		expanded = !expanded;
+	}
+
+	let height: number = 250;
+</script>
+
+<aside bind:clientHeight={height} class={expanded ? 'expanded' : ''}>
+	<Fabric
+		TrackingPixel={Trackingpixel}
+		ResearchPixel={Researchpixel}
+		ViewabilityPixel={Viewabilitypixel}
+		BackgroundScrollType={ScrollType}
+		BackgroundColour={Slide1BackgroundColour}
+		BackgroundImage={Slide1BackgroundImage}
+		BackgroundImagePosition={Slide1BackgroundPosition}
+		BackgroundImageRepeat={Slide1BackgroundRepeat}
+		MobileBackgroundImage={Slide1MobileBackgroundImage}
+		MobileBackgroundImagePosition={Slide1MobileBackgroundPosition}
+		MobileBackgroundImageRepeat={Slide1MobileBackgroundRepeat}
+		Layer1BackgroundImage={Slide1Layer1BackgroundImage}
+		Layer1BackgroundPosition={Slide1Layer1BackgroundPosition}
+		Layer2BackgroundImage={Slide1Layer2BackgroundImage}
+		Layer2BackgroundPosition={Slide1Layer2BackgroundPosition}
+		Layer3BackgroundImage={Slide1Layer3BackgroundImage}
+		Layer3BackgroundPosition={Slide1Layer3BackgroundPosition}
+		MobileLayer1BackgroundImage={Slide1Layer1MobileBackgroundImage}
+		MobileLayer1BackgroundPosition={Slide1Layer1MobileBackgroundPosition}
+		MobileLayer2BackgroundImage={Slide1Layer2MobileBackgroundImage}
+		MobileLayer2BackgroundPosition={Slide1Layer2MobileBackgroundPosition}
+		MobileLayer3BackgroundImage={Slide1Layer3MobileBackgroundImage}
+		MobileLayer3BackgroundPosition={Slide1Layer3MobileBackgroundPosition}
+	/>
+
+	<div class="expanded-slide" aria-expanded={expanded ? 'true' : 'false'}>
+		<Fabric
+			TrackingPixel={Trackingpixel}
+			ResearchPixel={Researchpixel}
+			ViewabilityPixel={Viewabilitypixel}
+			BackgroundScrollType={ScrollType}
+			BackgroundColour={Slide2BackgroundColour}
+			BackgroundImage={Slide2BackgroundImage}
+			BackgroundImagePosition={Slide2BackgroundPosition}
+			BackgroundImageRepeat={Slide2BackgroundRepeat}
+			MobileBackgroundImage={Slide2MobileBackgroundImage}
+			MobileBackgroundImagePosition={Slide2MobileBackgroundPosition}
+			MobileBackgroundImageRepeat={Slide2MobileBackgroundRepeat}
+			Layer1BackgroundImage={Slide2Layer1BackgroundImage}
+			Layer1BackgroundPosition={Slide2Layer1BackgroundPosition}
+			Layer2BackgroundImage={Slide2Layer2BackgroundImage}
+			Layer2BackgroundPosition={Slide2Layer2BackgroundPosition}
+			Layer3BackgroundImage={Slide2Layer3BackgroundImage}
+			Layer3BackgroundPosition={Slide2Layer3BackgroundPosition}
+			MobileLayer1BackgroundImage={Slide2Layer1MobileBackgroundImage}
+			MobileLayer1BackgroundPosition={Slide2Layer1MobileBackgroundPosition}
+			MobileLayer2BackgroundImage={Slide2Layer2MobileBackgroundImage}
+			MobileLayer2BackgroundPosition={Slide2Layer2MobileBackgroundPosition}
+			MobileLayer3BackgroundImage={Slide2Layer3MobileBackgroundImage}
+			MobileLayer3BackgroundPosition={Slide2Layer3MobileBackgroundPosition}
+		/>
+	</div>
+
+	<button
+		on:click={toggleExpanded}
+		class="toggle-cross"
+		aria-expanded={expanded ? 'true' : 'false'}
+	>
+		<svg class="cross-icon" width="30" height="30">
+			<path
+				d="M21 9.8l-.8-.8-5.2 4.8-5.2-4.8-.8.8 4.8 5.2-4.8 5.2.8.8 5.2-4.8 5.2 4.8.8-.8-4.8-5.2 4.8-5.2"
+			></path>
+		</svg>
+	</button>
+
+	<button
+		on:click={toggleExpanded}
+		class="toggle-arrow"
+		aria-expanded={expanded ? 'true' : 'false'}
+	>
+		<svg class="arrow-icon" viewBox="-0.525 -4 24 18">
+			<path d="M23.2.7L12.7 9.1l-1.1.9-1.1-.898L0 .7.5 0l11.1 6.3L22.7 0l.5.7z"
+			></path>
+		</svg>
+	</button>
+</aside>
+<SetHeightResizer {height} />
+
+<style lang="scss">
+	aside {
+		height: 250px;
+		transition: height 1s;
+
+		&.expanded {
+			height: 500px;
+		}
+	}
+
+	button {
+		touch-action: manipulation;
+		cursor: pointer;
+		box-sizing: border-box;
+		position: absolute;
+		z-index: 100;
+		padding: 0;
+		background: #000;
+		fill: #fff;
+		box-shadow:
+			0 0 1px 0 #fff inset,
+			0 0 1px 0 #fff;
+		border-color: #fff;
+		border-style: solid;
+	}
+
+	.toggle-cross {
+		top: 10px;
+		right: 10px;
+		border-radius: 100%;
+		border-width: 1px;
+		transition: transform 1s;
+		transform: rotate(45deg);
+	}
+
+	.toggle-cross[aria-expanded='true'] {
+		transform: rotate(0);
+	}
+
+	.toggle-arrow {
+		bottom: 0;
+		left: 50%;
+		width: 60px;
+		height: 30px;
+		margin-left: -30px;
+		background-color: #333;
+		border-radius: 20px 20px 0 0;
+		border-width: 1px 1px 0;
+		opacity: 0.75;
+	}
+
+	.toggle-arrow[aria-expanded='true'] > .arrow-icon {
+		transform: rotate(180deg);
+	}
+
+	svg {
+		display: inline-block;
+		vertical-align: middle;
+		overflow: hidden;
+	}
+
+	.arrow-icon {
+		width: 24px;
+		transition: transform 0.5s;
+	}
+</style>
diff --git a/src/templates/csr/fabric-expandable/test.json b/src/templates/csr/fabric-expandable/test.json
new file mode 100644
index 00000000..da0f2759
--- /dev/null
+++ b/src/templates/csr/fabric-expandable/test.json
@@ -0,0 +1,65 @@
+{
+	"ClickthroughUrl": "",
+	"ScrollType": "none",
+	"ShowMoreType": "",
+	"BackgroundColour": "",
+	"BackgroundImage": "",
+	"BackgroundImagePosition": "",
+	"BackgroundImageRepeat": "",
+	"MobileBackgroundImage": "",
+	"MobileBackgroundImagePosition": "",
+	"MobileBackgroundImageRepeat": "",
+	"Slide1BackgroundColour": "",
+	"Slide1BackgroundImage": "",
+	"Slide1BackgroundRepeat": "",
+	"Slide1BackgroundPosition": "",
+	"Slide1MobileBackgroundImage": "",
+	"Slide1MobileBackgroundRepeat": "",
+	"Slide1MobileBackgroundPosition": "",
+	"Slide1Layer1BackgroundImage": "https://tpc.googlesyndication.com/simgad/17554758987417110030?",
+	"Slide1Layer1BackgroundRepeat": "no-repeat",
+	"Slide1Layer1BackgroundPosition": "center center",
+	"Slide1Layer1MobileBackgroundImage": "https://tpc.googlesyndication.com/simgad/12472120302988849309?",
+	"Slide1Layer1MobileBackgroundRepeat": "no-repeat",
+	"Slide1Layer1MobileBackgroundPosition": "center center",
+	"Slide1Layer2BackgroundImage": "https://tpc.googlesyndication.com/simgad/17554758987417110030?",
+	"Slide1Layer2BackgroundRepeat": "no-repeat",
+	"Slide1Layer2BackgroundPosition": "center center",
+	"Slide1Layer2MobileBackgroundImage": "",
+	"Slide1Layer2MobileBackgroundRepeat": "",
+	"Slide1Layer2MobileBackgroundPosition": "",
+	"Slide1Layer3BackgroundImage": "",
+	"Slide1Layer3BackgroundRepeat": "",
+	"Slide1Layer3BackgroundPosition": "",
+	"Slide1Layer3MobileBackgroundImage": "",
+	"Slide1Layer3MobileBackgroundRepeat": "",
+	"Slide1Layer3MobileBackgroundPosition": "",
+	"Slide2BackgroundColour": "",
+	"Slide2BackgroundImage": "",
+	"Slide2BackgroundRepeat": "",
+	"Slide2BackgroundPosition": "",
+	"Slide2MobileBackgroundImage": "",
+	"Slide2MobileBackgroundRepeat": "",
+	"Slide2MobileBackgroundPosition": "",
+	"Slide2Layer1BackgroundImage": "https://tpc.googlesyndication.com/simgad/4655436357172306837?",
+	"Slide2Layer1BackgroundRepeat": "no-repeat",
+	"Slide2Layer1BackgroundPosition": "center center",
+	"Slide2Layer1MobileBackgroundImage": "https://tpc.googlesyndication.com/simgad/2232758949767305138?",
+	"Slide2Layer1MobileBackgroundRepeat": "no-repeat",
+	"Slide2Layer1MobileBackgroundPosition": "center center",
+	"Slide2Layer2BackgroundImage": "https://tpc.googlesyndication.com/simgad/7054833562526198004?",
+	"Slide2Layer2BackgroundRepeat": "no-repeat",
+	"Slide2Layer2BackgroundPosition": "bottom left",
+	"Slide2Layer2MobileBackgroundImage": "https://tpc.googlesyndication.com/simgad/7268971793572049255?",
+	"Slide2Layer2MobileBackgroundRepeat": "no-repeat",
+	"Slide2Layer2MobileBackgroundPosition": "bottom left",
+	"Slide2Layer3BackgroundImage": "",
+	"Slide2Layer3BackgroundRepeat": "",
+	"Slide2Layer3BackgroundPosition": "",
+	"Slide2Layer3MobileBackgroundImage": "",
+	"Slide2Layer3MobileBackgroundRepeat": "",
+	"Slide2Layer3MobileBackgroundPosition": "",
+	"Trackingpixel": "",
+	"Researchpixel": "",
+	"Viewabilitypixel": ""
+}

From 00647aad560af7054c9483e094ed5e5d015243d8 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Tue, 24 Dec 2024 12:33:40 +0000
Subject: [PATCH 02/11] Use imported icon for arrow

---
 .../csr/fabric-expandable/index.svelte        | 21 +++----------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index eaec8ee6..f55c619b 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { GAMVariable } from '$lib/gam';
 	import Fabric from '$templates/components/Fabric.svelte';
+	import ArrowDown from '$templates/components/icons/ArrowDown.svelte';
 	import SetHeightResizer from '$templates/components/SetHeightResizer.svelte';
 
 	export let Trackingpixel: GAMVariable;
@@ -125,15 +126,8 @@
 		</svg>
 	</button>
 
-	<button
-		on:click={toggleExpanded}
-		class="toggle-arrow"
-		aria-expanded={expanded ? 'true' : 'false'}
-	>
-		<svg class="arrow-icon" viewBox="-0.525 -4 24 18">
-			<path d="M23.2.7L12.7 9.1l-1.1.9-1.1-.898L0 .7.5 0l11.1 6.3L22.7 0l.5.7z"
-			></path>
-		</svg>
+	<button on:click={() => (expanded = !expanded)} class="toggle-arrow">
+		<ArrowDown width={24} flip={expanded} />
 	</button>
 </aside>
 <SetHeightResizer {height} />
@@ -189,18 +183,9 @@
 		opacity: 0.75;
 	}
 
-	.toggle-arrow[aria-expanded='true'] > .arrow-icon {
-		transform: rotate(180deg);
-	}
-
 	svg {
 		display: inline-block;
 		vertical-align: middle;
 		overflow: hidden;
 	}
-
-	.arrow-icon {
-		width: 24px;
-		transition: transform 0.5s;
-	}
 </style>

From 79b7c1c3817eca6a3d25353f6fb164505bb2ad9c Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Tue, 24 Dec 2024 12:47:14 +0000
Subject: [PATCH 03/11] Create shared component for cross icon and use it

---
 .../components/icons/CrossIcon.svelte         | 23 +++++++++++++
 .../csr/fabric-expandable/index.svelte        | 32 ++++---------------
 2 files changed, 29 insertions(+), 26 deletions(-)
 create mode 100644 src/templates/components/icons/CrossIcon.svelte

diff --git a/src/templates/components/icons/CrossIcon.svelte b/src/templates/components/icons/CrossIcon.svelte
new file mode 100644
index 00000000..6f9aa53a
--- /dev/null
+++ b/src/templates/components/icons/CrossIcon.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let width = 30;
+	const height = width;
+
+	export let plus = false;
+</script>
+
+<svg {width} {height} class:plus
+	><path
+		d="M21 9.8l-.8-.8-5.2 4.8-5.2-4.8-.8.8 4.8 5.2-4.8 5.2.8.8 5.2-4.8 5.2 4.8.8-.8-4.8-5.2 4.8-5.2"
+	/></svg
+>
+
+<style>
+	svg {
+		vertical-align: middle;
+		overflow: hidden;
+	}
+
+	.plus {
+		transform: rotate(45deg);
+	}
+</style>
diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index f55c619b..0e857998 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -2,6 +2,7 @@
 	import type { GAMVariable } from '$lib/gam';
 	import Fabric from '$templates/components/Fabric.svelte';
 	import ArrowDown from '$templates/components/icons/ArrowDown.svelte';
+	import CrossIcon from '$templates/components/icons/CrossIcon.svelte';
 	import SetHeightResizer from '$templates/components/SetHeightResizer.svelte';
 
 	export let Trackingpixel: GAMVariable;
@@ -52,10 +53,6 @@
 
 	let expanded = false;
 
-	function toggleExpanded() {
-		expanded = !expanded;
-	}
-
 	let height: number = 250;
 </script>
 
@@ -86,7 +83,7 @@
 		MobileLayer3BackgroundPosition={Slide1Layer3MobileBackgroundPosition}
 	/>
 
-	<div class="expanded-slide" aria-expanded={expanded ? 'true' : 'false'}>
+	<div class="expanded-slide">
 		<Fabric
 			TrackingPixel={Trackingpixel}
 			ResearchPixel={Researchpixel}
@@ -114,20 +111,12 @@
 		/>
 	</div>
 
-	<button
-		on:click={toggleExpanded}
-		class="toggle-cross"
-		aria-expanded={expanded ? 'true' : 'false'}
-	>
-		<svg class="cross-icon" width="30" height="30">
-			<path
-				d="M21 9.8l-.8-.8-5.2 4.8-5.2-4.8-.8.8 4.8 5.2-4.8 5.2.8.8 5.2-4.8 5.2 4.8.8-.8-4.8-5.2 4.8-5.2"
-			></path>
-		</svg>
+	<button on:click={() => (expanded = !expanded)} class="toggle-cross">
+		<CrossIcon plus={expanded} />
 	</button>
 
 	<button on:click={() => (expanded = !expanded)} class="toggle-arrow">
-		<ArrowDown width={24} flip={expanded} />
+		<ArrowDown flip={expanded} />
 	</button>
 </aside>
 <SetHeightResizer {height} />
@@ -165,10 +154,7 @@
 		border-width: 1px;
 		transition: transform 1s;
 		transform: rotate(45deg);
-	}
-
-	.toggle-cross[aria-expanded='true'] {
-		transform: rotate(0);
+		overflow: hidden;
 	}
 
 	.toggle-arrow {
@@ -182,10 +168,4 @@
 		border-width: 1px 1px 0;
 		opacity: 0.75;
 	}
-
-	svg {
-		display: inline-block;
-		vertical-align: middle;
-		overflow: hidden;
-	}
 </style>

From 457d2a609f6833ea670c0c9d9c929b4caf4f8b51 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Thu, 2 Jan 2025 12:44:29 +0000
Subject: [PATCH 04/11] Fabric expandable doesn't have thirdPartyJSTracking

---
 src/templates/csr/fabric-expandable/index.html | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/templates/csr/fabric-expandable/index.html

diff --git a/src/templates/csr/fabric-expandable/index.html b/src/templates/csr/fabric-expandable/index.html
deleted file mode 100644
index efa6e13b..00000000
--- a/src/templates/csr/fabric-expandable/index.html
+++ /dev/null
@@ -1 +0,0 @@
-[%thirdPartyJSTracking%]

From e05a22283045f9f4d50f1ef7ac720b80685ba44e Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Thu, 2 Jan 2025 12:45:31 +0000
Subject: [PATCH 05/11] Delete legacy template

---
 legacy/src/fabric-expandable/test.json      | 65 --------------
 legacy/src/fabric-expandable/web/ad.json    |  3 -
 legacy/src/fabric-expandable/web/index.html | 76 -----------------
 legacy/src/fabric-expandable/web/index.js   | 52 ------------
 legacy/src/fabric-expandable/web/index.scss | 94 ---------------------
 5 files changed, 290 deletions(-)
 delete mode 100644 legacy/src/fabric-expandable/test.json
 delete mode 100644 legacy/src/fabric-expandable/web/ad.json
 delete mode 100644 legacy/src/fabric-expandable/web/index.html
 delete mode 100644 legacy/src/fabric-expandable/web/index.js
 delete mode 100644 legacy/src/fabric-expandable/web/index.scss

diff --git a/legacy/src/fabric-expandable/test.json b/legacy/src/fabric-expandable/test.json
deleted file mode 100644
index 71e3a654..00000000
--- a/legacy/src/fabric-expandable/test.json
+++ /dev/null
@@ -1,65 +0,0 @@
-{
-    "ClickthroughUrl": "http://theirworld.org/campaigns/rewritingthecode",
-    "ScrollType": "parallax",
-    "ShowMoreType": "",
-    "BackgroundColour": "",
-    "BackgroundImage": "",
-    "BackgroundImagePosition": "",
-    "BackgroundImageRepeat": "",
-    "MobileBackgroundImage": "",
-    "MobileBackgroundImagePosition": "",
-    "MobileBackgroundImageRepeat": "",
-    "Slide1BackgroundColour": "",
-    "Slide1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv6KntgEQARgBMghEj7RYY2FDiA",
-    "Slide1BackgroundRepeat": "",
-    "Slide1BackgroundPosition": "",
-    "Slide1MobileBackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv-LlCRABGAEyCI7-kaw083xi",
-    "Slide1MobileBackgroundRepeat": "",
-    "Slide1MobileBackgroundPosition": "",
-    "Slide1Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv5KxsAEQARgBMgir0sVRcAVsXg",
-    "Slide1Layer1BackgroundRepeat": "",
-    "Slide1Layer1BackgroundPosition": "",
-    "Slide1Layer1MobileBackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv6KHdhABGAEyCJT6FEHBdjsh",
-    "Slide1Layer1MobileBackgroundRepeat": "",
-    "Slide1Layer1MobileBackgroundPosition": "",
-    "Slide1Layer2BackgroundImage": "",
-    "Slide1Layer2BackgroundRepeat": "",
-    "Slide1Layer2BackgroundPosition": "",
-    "Slide1Layer2MobileBackgroundImage": "",
-    "Slide1Layer2MobileBackgroundRepeat": "",
-    "Slide1Layer2MobileBackgroundPosition": "",
-    "Slide1Layer3BackgroundImage": "",
-    "Slide1Layer3BackgroundRepeat": "",
-    "Slide1Layer3BackgroundPosition": "",
-    "Slide1Layer3MobileBackgroundImage": "",
-    "Slide1Layer3MobileBackgroundRepeat": "",
-    "Slide1Layer3MobileBackgroundPosition": "",
-    "Slide2BackgroundColour": "",
-    "Slide2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv6KXxAEQARgBMghJ4R6VaJj-hA",
-    "Slide2BackgroundRepeat": "",
-    "Slide2BackgroundPosition": "",
-    "Slide2MobileBackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv-KlGhABGAEyCDl6UjkFnK8-",
-    "Slide2MobileBackgroundRepeat": "",
-    "Slide2MobileBackgroundPosition": "",
-    "Slide2Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv5LJFxABGAEyCHlADYzIiIuN",
-    "Slide2Layer1BackgroundRepeat": "",
-    "Slide2Layer1BackgroundPosition": "",
-    "Slide2Layer1MobileBackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCLv-L1LBABGAEyCJVHPIG4Ajxb",
-    "Slide2Layer1MobileBackgroundRepeat": "",
-    "Slide2Layer1MobileBackgroundPosition": "",
-    "Slide2Layer2BackgroundImage": "",
-    "Slide2Layer2BackgroundRepeat": "",
-    "Slide2Layer2BackgroundPosition": "",
-    "Slide2Layer2MobileBackgroundImage": "",
-    "Slide2Layer2MobileBackgroundRepeat": "",
-    "Slide2Layer2MobileBackgroundPosition": "",
-    "Slide2Layer3BackgroundImage": "",
-    "Slide2Layer3BackgroundRepeat": "",
-    "Slide2Layer3BackgroundPosition": "",
-    "Slide2Layer3MobileBackgroundImage": "",
-    "Slide2Layer3MobileBackgroundRepeat": "",
-    "Slide2Layer3MobileBackgroundPosition": "",
-    "Trackingpixel": "",
-    "Researchpixel": "",
-    "Viewabilitypixel": ""
-}
diff --git a/legacy/src/fabric-expandable/web/ad.json b/legacy/src/fabric-expandable/web/ad.json
deleted file mode 100644
index 1d13a211..00000000
--- a/legacy/src/fabric-expandable/web/ad.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"nativeStyleId": "79031"
-}
diff --git a/legacy/src/fabric-expandable/web/index.html b/legacy/src/fabric-expandable/web/index.html
deleted file mode 100644
index 041415ba..00000000
--- a/legacy/src/fabric-expandable/web/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<div id="creative" class="creative creative--fabric-expandable">
-    <div class="js-container gs-container hide-until-tablet show-more--[%ShowMoreType%]">
-        <button class="toggle toggle--arrow js-toggle" aria-controls="linkDesktop" aria-expanded="false">{{#svg}}arrow-down{{/svg}}</button>
-        <button class="toggle toggle--cross js-toggle" aria-controls="linkDesktop" aria-expanded="false">{{#svg}}cross{{/svg}}</button>
-        <a id="linkDesktop" class="blink creative__link" href="%%CLICK_URL_UNESC%%%%DEST_URL%%">
-            <div class="creative__slide creative__slide1 u-root"
-                style="background: [%Slide1BackgroundColour%] url('[%Slide1BackgroundImage%]') [%Slide1BackgroundRepeat%] [%Slide1BackgroundPosition%]">
-                <div class="creative__layer creative__layer1"
-                    style="background-image: url('[%Slide1Layer1BackgroundImage%]');
-                        background-repeat: [%Slide1Layer1BackgroundRepeat%];
-                        background-position: [%Slide1Layer1BackgroundPosition%]"></div>
-                <div class="creative__layer creative__layer2"
-                    style="background-image: url('[%Slide1Layer2BackgroundImage%]');
-                        background-repeat: [%Slide1Layer2BackgroundRepeat%];
-                        background-position: [%Slide1Layer2BackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer3"
-                    style="background-image: url('[%Slide1Layer3BackgroundImage%]');
-                        background-repeat: [%Slide1Layer3BackgroundRepeat%];
-                        background-position: [%Slide1Layer3BackgroundPosition%];"></div>
-            </div>
-            <div class="creative__slide creative__slide2 u-root"
-                style="background: [%Slide2BackgroundColour%] url('[%Slide2BackgroundImage%]') [%Slide2BackgroundPosition%] [%Slide2BackgroundRepeat%];">
-                <div class="creative__layer creative__layer1"
-                    style="background-image: url('[%Slide2Layer1BackgroundImage%]');
-                        background-repeat: [%Slide2Layer1BackgroundRepeat%];
-                        background-position: [%Slide2Layer1BackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer2"
-                    style="background-image: url('[%Slide2Layer2BackgroundImage%]');
-                        background-repeat: [%Slide2Layer2BackgroundRepeat%];
-                        background-position: [%Slide2Layer2BackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer3"
-                    style="background-image: url('[%Slide2Layer3BackgroundImage%]');
-                        background-repeat: [%Slide2Layer3BackgroundRepeat%];
-                        background-position: [%Slide2Layer3BackgroundPosition%];"></div>
-            </div>
-        </a>
-    </div>
-    <div class="js-container gs-container mobile-only show-more--[%ShowMoreType%]">
-        <button class="toggle toggle--arrow js-toggle" aria-controls="linkMobile" aria-expanded="false">{{#svg}}arrow-down{{/svg}}</button>
-        <button class="toggle toggle--cross js-toggle" aria-controls="linkMobile" aria-expanded="false">{{#svg}}cross{{/svg}}</button>
-        <a id="linkMobile" class="blink creative__link" href="%%CLICK_URL_UNESC%%%%DEST_URL%%">
-            <div class="creative__slide creative__slide1 u-root"
-                style="background: [%Slide1BackgroundColour%] url('[%Slide1MobileBackgroundImage%]') [%Slide1MobileBackgroundRepeat%] [%Slide1MobileBackgroundPosition%];">
-                <div class="creative__layer creative__layer1"
-                    style="background-image: url('[%Slide1Layer1MobileBackgroundImage%]');
-                        background-repeat: [%Slide1Layer1MobileBackgroundRepeat%];
-                        background-position: [%Slide1Layer1MobileBackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer2"
-                    style="background-image: url('[%Slide1Layer2MobileBackgroundImage%]');
-                        background-repeat: [%Slide1Layer2MobileBackgroundRepeat%];
-                        background-position: [%Slide1Layer2MobileBackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer3"
-                    style="background-image: url('[%Slide1Layer3MobileBackgroundImage%]');
-                        background-repeat: [%Slide1Layer3MobileBackgroundRepeat%];
-                        background-position: [%Slide1Layer3MobileBackgroundPosition%];"></div>
-            </div>
-            <div class="creative__slide creative__slide2 u-root"
-                style="background: [%Slide2BackgroundColour%] url('[%Slide2MobileBackgroundImage%]') [%Slide2MobileBackgroundPosition%] [%Slide2MobileBackgroundRepeat%];">
-                <div class="creative__layer creative__layer1"
-                    style="background-image: url('[%Slide2Layer1MobileBackgroundImage%]');
-                        background-repeat: [%Slide2Layer1MobileBackgroundRepeat%];
-                        background-position: [%Slide2Layer1MobileBackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer2"
-                    style="background-image: url('[%Slide2Layer2MobileBackgroundImage%]');
-                        background-repeat: [%Slide2Layer2MobileBackgroundRepeat%];
-                        background-position: [%Slide2Layer2MobileBackgroundPosition%];"></div>
-                <div class="creative__layer creative__layer3"
-                    style="background-image: url('[%Slide2Layer3MobileBackgroundImage%]');
-                        background-repeat: [%Slide2Layer3MobileBackgroundRepeat%];
-                        background-position: [%Slide2Layer3MobileBackgroundPosition%];"></div>
-            </div>
-        </a>
-    </div>
-
-    <img src="[%Trackingpixel%]" class="creative__pixel">
-</div>
diff --git a/legacy/src/fabric-expandable/web/index.js b/legacy/src/fabric-expandable/web/index.js
deleted file mode 100644
index 1b0f116f..00000000
--- a/legacy/src/fabric-expandable/web/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { getIframeId, sendMessage, resizeIframeHeight, reportClicks } from '../../_shared/js/messages';
-import { enableToggles } from '../../_shared/js/ui';
-import { write, div } from '../../_shared/js/dom';
-
-getIframeId()
-.then(() => {
-    reportClicks();
-    handleBackground();
-    handleToggle();
-});
-
-function handleBackground() {
-    let isMobile = window.matchMedia('(max-width: 739px)').matches;
-    let isTablet = window.matchMedia('(min-width: 740px) and (max-width: 979px)').matches;
-    let scrollType = '[%ScrollType%]';
-    let backgroundColour = '[%BackgroundColour%]';
-    let [ backgroundImage, backgroundPosition, backgroundRepeat, creativeLink ] = isMobile ?
-        ['[%MobileBackgroundImage%]', '[%MobileBackgroundImagePosition%]', '[%MobileBackgroundImageRepeat%]', document.getElementById('linkMobile')] :
-        ['[%BackgroundImage%]', '[%BackgroundImagePosition%]', '[%BackgroundImageRepeat%]', document.getElementById('linkDesktop')];
-
-    if (backgroundColour) {
-        document.documentElement.style.backgroundColor = backgroundColour;
-    }
-
-    if( !backgroundImage ) return;
-
-    if( scrollType === 'none' ) {
-        write(() => {
-            Object.assign(creativeLink.style, {
-                backgroundImage: `url('${backgroundImage}')`,
-                backgroundPosition,
-                backgroundRepeat
-            });
-        });
-    } else {
-        sendMessage('background', {
-            scrollType: scrollType === 'parallax' && (isMobile || isTablet) ? 'fixed' : scrollType,
-            backgroundColour,
-            backgroundImage: `url('${backgroundImage}')`,
-            backgroundRepeat,
-            backgroundPosition
-        });
-    }
-}
-
-function handleToggle() {
-    Array.from(document.getElementsByClassName('js-container')).forEach(root => enableToggles(root, true, onToggle));
-}
-
-function onToggle(isOpen) {
-    resizeIframeHeight(isOpen ? 500 : 250);
-}
diff --git a/legacy/src/fabric-expandable/web/index.scss b/legacy/src/fabric-expandable/web/index.scss
deleted file mode 100644
index bafa09fd..00000000
--- a/legacy/src/fabric-expandable/web/index.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@import '_core';
-
-.creative--fabric-expandable {
-    .creative__slide {
-        height: 250px;
-    }
-
-    .creative__link {
-        height: 250px;
-        transition: height 1s;
-
-        &[aria-expanded='true'] {
-            height: 500px;
-        }
-    }
-
-    .creative__layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-    }
-
-    .toggle {
-        box-sizing: border-box;
-        padding: 0;
-        position: absolute;
-        z-index: 100;
-
-        background: #000000;
-        fill: #ffffff;
-        border-color: #ffffff;
-        border-style: solid;
-        box-shadow: 0 0 1px 0 #ffffff inset, 0 0 1px 0 #ffffff;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    .toggle--arrow {
-        bottom: 0;
-        left: 50%;
-        width: 60px;
-        height: 30px;
-        margin-left: -30px;
-
-        background-color: #333333;
-        border-radius: 20px 20px 0 0;
-        border-width: 1px 1px 0;
-        opacity: .75;
-    }
-
-    .icon--arrow-down {
-        width: 24px;
-    }
-
-    .toggle--cross {
-        top: 10px;
-        right: 10px;
-
-        border-radius: 100%;
-        border-width: 1px;
-
-        transition: transform 1s;
-        transform: rotate(45deg);
-
-        &[aria-expanded='true'] {
-            transform: rotate(0);
-        }
-
-        @include mq(tablet) {
-            right: calc(50% - #{(gs-span(9) + $gs-gutter) / 2});
-        }
-
-        @include mq(desktop) {
-            right: calc(50% - #{(gs-span(12) + $gs-gutter) / 2});
-        }
-
-        @include mq(leftCol) {
-            right: calc(50% - #{(gs-span(14) + $gs-gutter) / 2});
-        }
-
-        @include mq(wide) {
-            right: calc(50% - #{(gs-span($gs-max-columns) + $gs-gutter) / 2});
-        }
-    }
-
-    .show-more--arrow .toggle--cross,
-    .show-more--cross .toggle--arrow {
-        display: none;
-    }
-}

From bbd7a54c9da7e2a8a93903d32385f00f0f3a7fa5 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Thu, 2 Jan 2025 15:59:37 +0000
Subject: [PATCH 06/11] Use Resizer

---
 src/templates/csr/fabric-expandable/index.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index 0e857998..5603f54b 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -3,7 +3,7 @@
 	import Fabric from '$templates/components/Fabric.svelte';
 	import ArrowDown from '$templates/components/icons/ArrowDown.svelte';
 	import CrossIcon from '$templates/components/icons/CrossIcon.svelte';
-	import SetHeightResizer from '$templates/components/SetHeightResizer.svelte';
+	import Resizer from '$templates/components/Resizer.svelte';
 
 	export let Trackingpixel: GAMVariable;
 	export let Researchpixel: GAMVariable;
@@ -53,7 +53,7 @@
 
 	let expanded = false;
 
-	let height: number = 250;
+	let height: number = -1;
 </script>
 
 <aside bind:clientHeight={height} class={expanded ? 'expanded' : ''}>
@@ -119,7 +119,7 @@
 		<ArrowDown flip={expanded} />
 	</button>
 </aside>
-<SetHeightResizer {height} />
+<Resizer {height} />
 
 <style lang="scss">
 	aside {

From a3d99d76420c95ca685c756a6ab104e3c38b06d8 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Thu, 2 Jan 2025 16:40:53 +0000
Subject: [PATCH 07/11] Don't use Resizer

---
 src/templates/csr/fabric-expandable/index.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index 5603f54b..c91441dd 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { GAMVariable } from '$lib/gam';
+	import { post } from '$lib/messenger';
 	import Fabric from '$templates/components/Fabric.svelte';
 	import ArrowDown from '$templates/components/icons/ArrowDown.svelte';
 	import CrossIcon from '$templates/components/icons/CrossIcon.svelte';
-	import Resizer from '$templates/components/Resizer.svelte';
 
 	export let Trackingpixel: GAMVariable;
 	export let Researchpixel: GAMVariable;
@@ -53,6 +53,12 @@
 
 	let expanded = false;
 
+	function toggleExpanded() {
+		expanded = !expanded;
+		height = expanded ? 500 : 250;
+		post({ type: 'resize', value: { height } });
+	}
+
 	let height: number = -1;
 </script>
 
@@ -111,15 +117,14 @@
 		/>
 	</div>
 
-	<button on:click={() => (expanded = !expanded)} class="toggle-cross">
+	<button on:click={() => toggleExpanded()} class="toggle-cross">
 		<CrossIcon plus={expanded} />
 	</button>
 
-	<button on:click={() => (expanded = !expanded)} class="toggle-arrow">
+	<button on:click={() => toggleExpanded()} class="toggle-arrow">
 		<ArrowDown flip={expanded} />
 	</button>
 </aside>
-<Resizer {height} />
 
 <style lang="scss">
 	aside {

From 11653e0eff131515f74e1f2ef883e876936d7205 Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Tue, 14 Jan 2025 11:35:38 +0000
Subject: [PATCH 08/11] Stop jumpiness when expanding

---
 .../csr/fabric-expandable/index.svelte        | 75 ++++++++++---------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index c91441dd..5b52de41 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -51,6 +51,8 @@
 	export let Slide2Layer3MobileBackgroundImage: GAMVariable;
 	export let Slide2Layer3MobileBackgroundPosition: GAMVariable;
 
+	post({ type: 'resize', value: { height: 250 } });
+
 	let expanded = false;
 
 	function toggleExpanded() {
@@ -62,7 +64,7 @@
 	let height: number = -1;
 </script>
 
-<aside bind:clientHeight={height} class={expanded ? 'expanded' : ''}>
+<aside bind:clientHeight={height}>
 	<Fabric
 		TrackingPixel={Trackingpixel}
 		ResearchPixel={Researchpixel}
@@ -89,45 +91,48 @@
 		MobileLayer3BackgroundPosition={Slide1Layer3MobileBackgroundPosition}
 	/>
 
-	<div class="expanded-slide">
-		<Fabric
-			TrackingPixel={Trackingpixel}
-			ResearchPixel={Researchpixel}
-			ViewabilityPixel={Viewabilitypixel}
-			BackgroundScrollType={ScrollType}
-			BackgroundColour={Slide2BackgroundColour}
-			BackgroundImage={Slide2BackgroundImage}
-			BackgroundImagePosition={Slide2BackgroundPosition}
-			BackgroundImageRepeat={Slide2BackgroundRepeat}
-			MobileBackgroundImage={Slide2MobileBackgroundImage}
-			MobileBackgroundImagePosition={Slide2MobileBackgroundPosition}
-			MobileBackgroundImageRepeat={Slide2MobileBackgroundRepeat}
-			Layer1BackgroundImage={Slide2Layer1BackgroundImage}
-			Layer1BackgroundPosition={Slide2Layer1BackgroundPosition}
-			Layer2BackgroundImage={Slide2Layer2BackgroundImage}
-			Layer2BackgroundPosition={Slide2Layer2BackgroundPosition}
-			Layer3BackgroundImage={Slide2Layer3BackgroundImage}
-			Layer3BackgroundPosition={Slide2Layer3BackgroundPosition}
-			MobileLayer1BackgroundImage={Slide2Layer1MobileBackgroundImage}
-			MobileLayer1BackgroundPosition={Slide2Layer1MobileBackgroundPosition}
-			MobileLayer2BackgroundImage={Slide2Layer2MobileBackgroundImage}
-			MobileLayer2BackgroundPosition={Slide2Layer2MobileBackgroundPosition}
-			MobileLayer3BackgroundImage={Slide2Layer3MobileBackgroundImage}
-			MobileLayer3BackgroundPosition={Slide2Layer3MobileBackgroundPosition}
-		/>
-	</div>
+	<Fabric
+		TrackingPixel={Trackingpixel}
+		ResearchPixel={Researchpixel}
+		ViewabilityPixel={Viewabilitypixel}
+		BackgroundScrollType={ScrollType}
+		BackgroundColour={Slide2BackgroundColour}
+		BackgroundImage={Slide2BackgroundImage}
+		BackgroundImagePosition={Slide2BackgroundPosition}
+		BackgroundImageRepeat={Slide2BackgroundRepeat}
+		MobileBackgroundImage={Slide2MobileBackgroundImage}
+		MobileBackgroundImagePosition={Slide2MobileBackgroundPosition}
+		MobileBackgroundImageRepeat={Slide2MobileBackgroundRepeat}
+		Layer1BackgroundImage={Slide2Layer1BackgroundImage}
+		Layer1BackgroundPosition={Slide2Layer1BackgroundPosition}
+		Layer2BackgroundImage={Slide2Layer2BackgroundImage}
+		Layer2BackgroundPosition={Slide2Layer2BackgroundPosition}
+		Layer3BackgroundImage={Slide2Layer3BackgroundImage}
+		Layer3BackgroundPosition={Slide2Layer3BackgroundPosition}
+		MobileLayer1BackgroundImage={Slide2Layer1MobileBackgroundImage}
+		MobileLayer1BackgroundPosition={Slide2Layer1MobileBackgroundPosition}
+		MobileLayer2BackgroundImage={Slide2Layer2MobileBackgroundImage}
+		MobileLayer2BackgroundPosition={Slide2Layer2MobileBackgroundPosition}
+		MobileLayer3BackgroundImage={Slide2Layer3MobileBackgroundImage}
+		MobileLayer3BackgroundPosition={Slide2Layer3MobileBackgroundPosition}
+	/>
 
-	<button on:click={() => toggleExpanded()} class="toggle-cross">
-		<CrossIcon plus={expanded} />
-	</button>
+	<div class={expanded ? 'button-container expanded' : 'button-container'}>
+		<button on:click={() => toggleExpanded()} class="toggle-cross">
+			<CrossIcon plus={expanded} />
+		</button>
 
-	<button on:click={() => toggleExpanded()} class="toggle-arrow">
-		<ArrowDown flip={expanded} />
-	</button>
+		<button on:click={() => toggleExpanded()} class="toggle-arrow">
+			<ArrowDown flip={expanded} />
+		</button>
+	</div>
 </aside>
 
 <style lang="scss">
-	aside {
+	.button-container {
+		position: absolute;
+		top: 0;
+		width: 100%;
 		height: 250px;
 		transition: height 1s;
 

From f7dc8bfbd8d693425b5130ef7b704025c25caf0f Mon Sep 17 00:00:00 2001
From: Emma Imber <emma-jo.imber@guardian.co.uk>
Date: Tue, 14 Jan 2025 11:53:27 +0000
Subject: [PATCH 09/11] Fix clickthrough

---
 src/templates/csr/fabric-expandable/index.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index 5b52de41..6e0a77ea 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -135,6 +135,7 @@
 		width: 100%;
 		height: 250px;
 		transition: height 1s;
+		pointer-events: none;
 
 		&.expanded {
 			height: 500px;
@@ -155,6 +156,7 @@
 			0 0 1px 0 #fff;
 		border-color: #fff;
 		border-style: solid;
+		pointer-events: auto;
 	}
 
 	.toggle-cross {

From 8faa04447bcdfaf1abb890aa4c1f7505723a31e3 Mon Sep 17 00:00:00 2001
From: Emma Imber <108270776+emma-imber@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:51:49 +0000
Subject: [PATCH 10/11] Update src/templates/components/icons/CrossIcon.svelte

Co-authored-by: Jake <jake.kennedy@guardian.co.uk>
---
 src/templates/components/icons/CrossIcon.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/templates/components/icons/CrossIcon.svelte b/src/templates/components/icons/CrossIcon.svelte
index 6f9aa53a..f2ad7e9b 100644
--- a/src/templates/components/icons/CrossIcon.svelte
+++ b/src/templates/components/icons/CrossIcon.svelte
@@ -15,6 +15,7 @@
 	svg {
 		vertical-align: middle;
 		overflow: hidden;
+		transition: transform 1s;
 	}
 
 	.plus {

From f8b6b22dc051472148708c156a0330e21620ca08 Mon Sep 17 00:00:00 2001
From: Emma Imber <108270776+emma-imber@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:57:38 +0000
Subject: [PATCH 11/11] Update src/templates/csr/fabric-expandable/index.svelte

Co-authored-by: Jake <jake.kennedy@guardian.co.uk>
---
 src/templates/csr/fabric-expandable/index.svelte | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/templates/csr/fabric-expandable/index.svelte b/src/templates/csr/fabric-expandable/index.svelte
index 6e0a77ea..d0481c93 100644
--- a/src/templates/csr/fabric-expandable/index.svelte
+++ b/src/templates/csr/fabric-expandable/index.svelte
@@ -51,20 +51,14 @@
 	export let Slide2Layer3MobileBackgroundImage: GAMVariable;
 	export let Slide2Layer3MobileBackgroundPosition: GAMVariable;
 
-	post({ type: 'resize', value: { height: 250 } });
-
 	let expanded = false;
 
-	function toggleExpanded() {
-		expanded = !expanded;
-		height = expanded ? 500 : 250;
-		post({ type: 'resize', value: { height } });
-	}
+	const toggleExpanded = () => (expanded = !expanded);
 
-	let height: number = -1;
+	$: post({ type: 'resize', value: { height: expanded ? 500 : 250 } });
 </script>
 
-<aside bind:clientHeight={height}>
+<aside>
 	<Fabric
 		TrackingPixel={Trackingpixel}
 		ResearchPixel={Researchpixel}