Convert the CAPI Multiple PaidFor template to Svelte

src/lib/Previews.svelte

@@ -29,7 +29,8 @@
 	].join('');
 
 	export const widths = {
-		1300: 'desktop',
+		1300: 'wide',
+		980: 'desktop',
 		740: 'tablet',
 		360: 'mobile',
 	};

src/lib/capiMultiple.ts

@@ -0,0 +1,33 @@
+import type { GAMVariable } from './gam';
+import type { CapiCardOverride, Single } from './types/capi';
+
+const apiEndpoint =
+	'https://api.nextgen.guardianapps.co.uk/commercial/api/capi-multiple.json';
+
+function addHeadlineKicker(
+	overrideCards: CapiCardOverride[],
+	cardData: Single[],
+) {
+	for (let i = 0; i < overrideCards.length; i++) {
+		if (overrideCards[i]?.kicker && overrideCards[i]?.headline) {
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- headline should always be defined
+			cardData[i]!.articleHeadline = overrideCards[i]?.headline as string;
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we define the kicker here - it's an optional parameter
+			cardData[i]!.kicker = overrideCards[i]?.kicker as string;
+		}
+	}
+
+	return cardData;
+}
+
+function retrieveCapiData(cards: CapiCardOverride[], seriesUrl: GAMVariable) {
+	let request = `${apiEndpoint}?k=${encodeURI(seriesUrl)}`;
+	cards.forEach((card) => {
+		if (card.url) {
+			request += `&t=${encodeURI(card.url)}`;
+		}
+	});
+	return fetch(request).then((response) => response.json());
+}
+
+export { retrieveCapiData, addHeadlineKicker };

src/lib/types/capi.ts

@@ -1,3 +1,5 @@
+import type { GAMVariable } from '$lib/gam';
+
 export type Source = {
 	minWidth: string;
 	sizes: string;
@@ -44,4 +46,12 @@ export type Single = {
 	galleryTag: boolean;
 	videoTag: boolean;
 	branding: Branding;
+	kicker?: string;
+};
+
+export type CapiCardOverride = {
+	headline: GAMVariable;
+	image: GAMVariable;
+	url: GAMVariable;
+	kicker: GAMVariable;
 };

src/templates/components/CapiCard.svelte

@@ -1,16 +1,33 @@
 <script lang="ts">
 	import type { Single } from '$lib/types/capi';
 	import Sponsor from './Sponsor.svelte';
+	import AudioIcon from './icons/AudioIcon.svelte';
+	import CameraIcon from './icons/CameraIcon.svelte';
+	import VideoIcon from './icons/VideoIcon.svelte';
 
+	export let templateType: 'single' | 'multiple';
 	export let single: Single;
 	export let direction = 'row';
 
-	const { articleHeadline, articleUrl, articleText, articleImage } = single;
+	const {
+		articleHeadline,
+		articleUrl,
+		articleText,
+		articleImage,
+		audioTag,
+		galleryTag,
+		videoTag,
+		kicker,
+	} = single;
 	const pictureSupported =
 		articleImage.sources.length > 0 && 'srcset' in new Image();
 </script>
 
-<a href={articleUrl} style={`--direction: ${direction}`}>
+<a
+	class="{templateType}-card"
+	href={articleUrl}
+	style={`--direction: ${direction}`}
+>
 	<div class="media">
 		{#if pictureSupported}
 			<picture>
@@ -34,27 +51,66 @@
 		{/if}
 	</div>
 	<div class="text">
-		<h2>{articleHeadline}</h2>
-		<p>{articleText}</p>
+		<h2>
+			{#if kicker}
+				<span class="kicker">{kicker && kicker}</span><br />
+			{/if}
+			{#if audioTag}
+				<AudioIcon />
+			{:else if galleryTag}
+				<CameraIcon />
+			{:else if videoTag}
+				<VideoIcon />
+			{/if}
+			{articleHeadline}
+		</h2>
+		{#if templateType === 'single'}
+			<p>{articleText}</p>
+		{/if}
 	</div>
-	<Sponsor branding={single.branding} />
+	{#if templateType === 'single'}
+		<Sponsor branding={single.branding} />
+	{/if}
 </a>
 
-<style>
+<style lang="scss">
 	a {
+		color: #000000;
 		text-decoration: none;
-		color: inherit;
+	}
+
+	a.single-card {
 		display: grid;
 		gap: 20px;
 		padding: 10px;
 	}
 
-	.media {
+	a.multiple-card {
+		margin: 12px 10px 0px 10px;
+		display: block;
+		padding: 0 0 8px 0;
+		width: auto;
+		background-color: #f6f6f6;
+		border-top: 1px solid #69d1ca;
+	}
+
+	a.multiple-card:not(:first-of-type)::before {
+		content: '';
+		position: absolute;
+		top: 119px;
+		bottom: 102px;
+		margin-left: -10px;
+		width: 1px;
+		background: #dcdcdc;
+	}
+
+	a.single-card .media {
 		margin: -10px;
 	}
 
-	.text {
-		padding: 0;
+	a.multiple-card .media {
+		background-color: gray;
+		margin: 0;
 	}
 
 	picture,
@@ -63,32 +119,85 @@
 		width: 100%;
 	}
 
-	h2 {
-		margin: 0;
-		padding: 0 0 10px;
-		font-size: 1.25rem;
+	a.single-card .text {
+		padding: 0;
+
+		h2 {
+			margin: 0;
+			padding: 0 0 10px;
+			font-size: 1.25rem;
+		}
+
+		p {
+			display: none;
+			margin: 0;
+			padding: 0;
+		}
 	}
 
-	p {
-		display: none;
-		margin: 0;
-		padding: 0;
+	a.multiple-card .text {
+		padding: 0 5px;
+
+		h2 {
+			font-size: 1rem;
+			line-height: 1.25rem;
+			font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial,
+				'Lucida Grande', sans-serif;
+			font-weight: 500;
+			padding: 0px;
+			margin: 6px 0 8px 0;
+			color: #333;
+		}
+	}
+
+	.kicker {
+		color: #626262;
+	}
+
+	:global(svg.icon) {
+		fill: #767676;
+		height: 0.7em;
+		width: 1.2em;
+		line-height: inherit;
+		margin-right: 0.1em;
+	}
+
+	@media (max-width: 739px) {
+		a.multiple-card:not(:first-of-type) .media {
+			display: none;
+		}
 	}
 
 	@media (min-width: 740px) {
-		a {
+		a.single-card {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: repeat(2, auto);
 		}
 
-		.media {
+		a.single-card .media {
 			grid-row: span 2;
 		}
+
+		a.multiple-card {
+			margin: 12px 10px;
+		}
+
+		a.multiple-card:nth-child(n) {
+			display: block;
+		}
+
+		a.multiple-card .text h2 {
+			margin-bottom: 10px;
+		}
 	}
 
 	@media (min-width: 1140px) {
-		.text p {
+		a.single-card .text p {
 			display: block;
 		}
+
+		a.multiple-card:not(:first-of-type)::before {
+			top: 12px;
+		}
 	}
 </style>