diff --git a/src/components/AdSlot/@types/ads.ts b/src/components/AdSlot/@types/ads.ts index 5f033f2c..8e9965b3 100644 --- a/src/components/AdSlot/@types/ads.ts +++ b/src/components/AdSlot/@types/ads.ts @@ -1,31 +1,52 @@ -export type AdType = - | 'leaderboard' - | 'sponsorlogo' - | 'native' - | 'mpu' - | 'billboard'; +export type LeaderboardAd = { + mobile: { + adType: 'leaderboard'; + placementName: 'reuters_mobile_leaderboard'; + }; + desktop: { + adType: 'leaderboard'; + placementName: 'reuters_desktop_leaderboard_atf'; + }; +}; -export type PlacementName = - | 'reuters_desktop_leaderboard_atf' - | 'reuters_mobile_leaderboard' - | 'reuters_desktop_native_1' - | 'reuters_mobile_mpu_1' - | 'reuters_sponsorlogo' - | 'reuters_billboard_desktop'; +export type SponsorshipAd = { + mobile: { + adType: 'sponsorlogo'; + placementName: 'reuters_sponsorlogo'; + }; + desktop: { + adType: 'sponsorlogo'; + placementName: 'reuters_sponsorlogo'; + }; +}; -export type DesktopPlacementName = - | 'reuters_desktop_leaderboard_atf' - | 'reuters_desktop_native_1' - | 'reuters_sponsorlogo' - | 'reuters_billboard_desktop'; +export type InlineAd = { + mobile: { + adType: 'mpu' | 'native' | 'mpu2'; + placementName: 'reuters_mobile_mpu_1' | 'reuters_mobile_mpu_2' | 'reuters_mobile_mpu_3'; + }; + desktop: { + adType: 'native' | 'canvas' | 'flex'; + placementName: 'reuters_desktop_native_1' | 'reuters_desktop_native_2' | 'reuters_desktop_native_3'; + }; +}; -export type MobilePlacementName = - DesktopPlacementName extends 'reuters_desktop_leaderboard_atf' - ? 'reuters_mobile_leaderboard' - : DesktopPlacementName extends 'reuters_desktop_native_1' - ? 'reuters_mobile_mpu_1' - : DesktopPlacementName extends 'reuters_sponsorlogo' - ? 'reuters_sponsorlogo' - : DesktopPlacementName extends 'reuters_billboard_desktop' - ? 'reuters_mobile_mpu_1' - : never; +export type DesktopPlacementName = | + LeaderboardAd['desktop']['placementName'] | + SponsorshipAd['desktop']['placementName'] | + InlineAd['desktop']['placementName']; + +export type MobilePlacementName = | + LeaderboardAd['mobile']['placementName'] | + SponsorshipAd['mobile']['placementName'] | + InlineAd['mobile']['placementName']; + +export type DesktopAdType = | + LeaderboardAd['desktop']['adType'] | + SponsorshipAd['desktop']['adType'] | + InlineAd['desktop']['adType']; + +export type MobileAdType = | + LeaderboardAd['mobile']['adType'] | + SponsorshipAd['mobile']['adType'] | + InlineAd['mobile']['adType']; diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte index bc0e0b6c..fc47239c 100644 --- a/src/components/AdSlot/AdSlot.svelte +++ b/src/components/AdSlot/AdSlot.svelte @@ -1,10 +1,15 @@ -
Advertisement ยท Scroll to continue
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte index 313828d3..d1ec7124 100644 --- a/src/components/AdSlot/LeaderboardAd.svelte +++ b/src/components/AdSlot/LeaderboardAd.svelte @@ -1,5 +1,6 @@ + -
{#if adLabel} diff --git a/src/components/AdSlot/stories/docs/inline.md b/src/components/AdSlot/stories/docs/inline.md index 1269d315..abac191c 100644 --- a/src/components/AdSlot/stories/docs/inline.md +++ b/src/components/AdSlot/stories/docs/inline.md @@ -33,3 +33,14 @@ Add programmatic ads inline on your page. {/each} ``` + +You may add **up to three** inline ads per page, but must set the `n` prop on multiple ads in sequential order, 1 - 3. + +```svelte + + + + + + +```