add island for fetching onward content json to link up with the hosted onward component

Author: cemms1

dotcom-rendering/src/components/FetchHostedOnwards.island.tsx

@@ -0,0 +1,48 @@
+import { useApi } from '../lib/useApi';
+import type { Branding } from '../types/branding';
+import type { TrailType } from '../types/trails';
+import { HostedContentOnwards } from './HostedContentOnwards';
+
+type Props = {
+	url: string;
+	branding?: Branding;
+};
+
+type OnwardsResponse = {
+	result: {
+		owner: string;
+		trails: Array<TrailType>;
+		// trails: Array<{
+		// 	/** URL of the article, used for the anchor tag */
+		// 	url: string;
+		// 	/** Headline of the article represented by trail */
+		// 	headline: string;
+		// 	/** Image thumbnail details for the article */
+		// 	image: {
+		// 		/** Trail image URL */
+		// 		src: string;
+		// 		/** Alt text for the trail image */
+		// 		alt: string;
+		// 	};
+		// 	format: FEFormat;
+		// }>;
+	};
+};
+
+export const FetchHostedOnwards = ({ branding, url }: Props) => {
+	const { data } = useApi<OnwardsResponse>(url);
+
+	const { result: { trails = [] } = {} } = data ?? {};
+
+	if (!trails.length) {
+		return null;
+	}
+
+	return (
+		<HostedContentOnwards
+			trails={trails}
+			brandName={branding?.sponsorName ?? ''}
+			accentColor={branding?.hostedCampaignColour}
+		/>
+	);
+};

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -10,9 +10,9 @@ import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { CallToActionAtom } from '../components/CallToActionAtom';
 import { Caption } from '../components/Caption';
+import { FetchHostedOnwards } from '../components/FetchHostedOnwards.island';
 import { HostedContentDisclaimer } from '../components/HostedContentDisclaimer';
 import { HostedContentHeader } from '../components/HostedContentHeader';
-import { HostedContentOnwards } from '../components/HostedContentOnwards';
 import { Island } from '../components/Island';
 import { MainMedia } from '../components/MainMedia';
 import { Section } from '../components/Section';
@@ -26,7 +26,6 @@ import { palette as themePalette } from '../palette';
 import type { Article } from '../types/article';
 import type { Block } from '../types/blocks';
 import type { RenderingTarget } from '../types/renderingTarget';
-import type { TrailType } from '../types/trails';
 import { Stuck } from './lib/stickiness';
 
 interface Props {
@@ -168,42 +167,6 @@ const sideBorders = css`
 		border-right: 1px solid ${themePalette('--article-border')};
 	}
 `;
-// This is dummy data until we have the actual trails for hosted content onwards.
-export const trails: TrailType[] = [
-	{
-		url: 'https://www.theguardian.com/money/gallery/2026/mar/27/loft-style-apartments-for-sale-in-england-in-pictures',
-		headline: 'Loft-style apartments for sale in England – in pictures',
-		format: { design: 27, display: 1, theme: 6 },
-		dataLinkName: 'media | group-0 | card-@1',
-		image: {
-			src: 'https://media.guim.co.uk/276ed08e0380a9a3045a779ea1ca8c93f7c1b51e/500_0_5000_4000/2000.jpg',
-			altText:
-				'Loft-style apartment interior in Clapton, east London with industrial design elements',
-		},
-	},
-	{
-		url: 'https://www.theguardian.com/books/2026/apr/01/under-water-by-tara-menon-review-love-loss-and-a-longing-for-the-ocean',
-		headline:
-			'Under Water by Tara Menon review – love, loss and a longing for the ocean',
-		format: { design: 27, display: 1, theme: 6 },
-		dataLinkName: 'media | group-0 | card-@2',
-		image: {
-			src: 'https://media.guim.co.uk/95d6b3df9e3471344dc19a32d94bb3d5ff6f5016/205_5_2978_2382/2000.jpg',
-			altText: 'Tropical fish',
-		},
-	},
-	{
-		url: 'https://www.theguardian.com/money/gallery/2026/feb/27/homes-a-short-walk-from-the-sea-in-england-and-scotland-in-pictures',
-		headline:
-			'Homes a short walk from the sea in England and Scotland – in pictures',
-		format: { design: 27, display: 1, theme: 6 },
-		dataLinkName: 'media | group-0 | card-@3',
-		image: {
-			src: 'https://media.guim.co.uk/9879e5d3275b5dae8c8bfd8e1ac700332e2de8c4/237_0_3750_3000/2000.jpg',
-			altText: 'Craster, Northumberland',
-		},
-	},
-];
 
 export const HostedArticleLayout = (props: WebProps | AppProps) => {
 	const {
@@ -364,11 +327,14 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 					</div>
 
 					<div css={onwardContentStyles}>
-						<HostedContentOnwards
-							trails={trails}
-							brandName="TrendAI"
-							accentColor={branding?.hostedCampaignColour}
-						/>
+						<Island priority="feature" defer={{ until: 'idle' }}>
+							<FetchHostedOnwards
+								url={
+									'http://localhost:9000/advertiser-content/we-are-still-in/faces-of-we-are-still-in/onward.json'
+								}
+								branding={branding}
+							/>
+						</Island>
 					</div>
 
 					{cta && (

dotcom-rendering/src/layouts/HostedVideoLayout.tsx

@@ -11,9 +11,9 @@ import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { CallToActionAtom } from '../components/CallToActionAtom';
 import { Caption } from '../components/Caption';
+import { FetchHostedOnwards } from '../components/FetchHostedOnwards.island';
 import { HostedContentDisclaimer } from '../components/HostedContentDisclaimer';
 import { HostedContentHeader } from '../components/HostedContentHeader';
-import { HostedContentOnwards } from '../components/HostedContentOnwards';
 import { Island } from '../components/Island';
 import { MainMedia } from '../components/MainMedia';
 import { Section } from '../components/Section';
@@ -28,7 +28,6 @@ import type { Article } from '../types/article';
 import type { Block } from '../types/blocks';
 import type { FEElement } from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
-import { trails } from './HostedArticleLayout';
 import { Stuck } from './lib/stickiness';
 
 interface Props {
@@ -323,11 +322,9 @@ export const HostedVideoLayout = (props: WebProps | AppProps) => {
 					</div>
 
 					<div css={onwardContentStyles}>
-						<HostedContentOnwards
-							trails={trails} //Temporary trails dummy data which is exported from HostedArticleLayout
-							brandName="TrendAI"
-							accentColor={branding?.hostedCampaignColour}
-						/>
+						<Island priority="feature" defer={{ until: 'idle' }}>
+							<FetchHostedOnwards branding={branding} />
+						</Island>
 					</div>
 
 					{cta && (