better is-prominent

guardian · Dec 21, 2023 · 26df873 · 26df873
1 parent 8a5c245
commit 26df873
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/lib/gam.ts b/src/lib/gam.ts
@@ -1,9 +1,9 @@
 const CLICK_MACRO = '%%CLICK_URL_UNESC%%';
 const CACHE_BUST = '%%CACHEBUSTER%%';
 
-type GAMVariable<T extends string = string> = `[%${T}%]` | '';
+type GAMVariable<T extends string = string> = T;
 
-const gamVar = <T extends string>(s: T): GAMVariable<T> => `[%${s}%]`;
+const gamVar = <T extends string>(s: T): `[%${GAMVariable<T>}%]` => `[%${s}%]`;
 
 const replaceGAMVariables = (
 	input: string,

diff --git a/src/templates/components/ManualCard.svelte b/src/templates/components/ManualCard.svelte
@@ -9,9 +9,15 @@
 	export let callToAction: string;
 	export let buttonColour: string;
 	export let direction = 'row';
+	export let isProminent = false;
 </script>
 
-<a class="card" href={url} style={`--direction: ${direction}`}>
+<a
+	class="card"
+	class:is-prominent={isProminent}
+	href={url}
+	style={`--direction: ${direction}`}
+>
 	<div class="media">
 		<picture>
 			<img src={image} alt="" />
@@ -127,7 +133,7 @@
 			margin: 10px 0px;
 		}
 
-		:global(.is-prominent) .card:nth-child(1) {
+		.is-prominent.card:nth-child(1) {
 			display: flex;
 			flex-direction: row;
 			align-items: stretch;

diff --git a/src/templates/csr/manual-multiple/index.svelte b/src/templates/csr/manual-multiple/index.svelte
@@ -64,6 +64,8 @@
 		},
 	];
 
+	const isProminent = IsProminent === 'true';
+
 	offers = offers.filter((offer) => offer.title !== '');
 
 	let height: number = -1;
@@ -81,13 +83,14 @@
 			{Explainer}
 		</svelte:fragment>
 	</ManualHeader>
-	<div class="cards-container" class:is-prominent={IsProminent}>
-		{#each offers as offer}
+	<div class="cards-container" class:is-prominent={isProminent}>
+		{#each offers as offer, i}
 			<ManualCard
 				image={offer.image}
 				url={offer.url}
 				callToAction={offer.linkText}
 				buttonColour="#005689"
+				isProminent={isProminent && i === 0}
 			>
 				<svelte:fragment slot="title">
 					{offer.title}