From 98b3c6a3dc8c200ff54ebdb911c058b26d1bd2ca Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Wed, 24 Jul 2024 18:18:48 +0100
Subject: [PATCH 1/2] updated ad types and placement names for inline ads

---
 src/components/AdSlot/@types/ads.ts          | 77 +++++++++++++-------
 src/components/AdSlot/AdSlot.svelte          | 11 ++-
 src/components/AdSlot/InlineAd.svelte        |  9 ++-
 src/components/AdSlot/LeaderboardAd.svelte   |  6 +-
 src/components/AdSlot/ResponsiveAd.svelte    | 45 +++++++++---
 src/components/AdSlot/SponsorshipAd.svelte   |  7 +-
 src/components/AdSlot/stories/docs/inline.md |  8 ++
 7 files changed, 111 insertions(+), 52 deletions(-)

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 string> =
-  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 @@
 <script lang="ts">
-  import type { PlacementName, AdType } from './@types/ads';
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
   import { onMount } from 'svelte';
   import { getRandomAdId } from './utils';
 
-  export let placementName: PlacementName;
-  export let adType: AdType;
+  export let placementName: DesktopPlacementName | MobilePlacementName;
+  export let adType: DesktopAdType | MobileAdType;
 
   /**
    * @TODO Unclear at what level this bit of config is used with placements...
diff --git a/src/components/AdSlot/InlineAd.svelte b/src/components/AdSlot/InlineAd.svelte
index f3449009..7feb2ad3 100644
--- a/src/components/AdSlot/InlineAd.svelte
+++ b/src/components/AdSlot/InlineAd.svelte
@@ -1,19 +1,22 @@
+<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import { DesktopPlacementName } from './@types/ads';
+  import { InlineAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   /** Add an ID to target with SCSS. */
   export let id: string = '';
 
+  /** Update to add multiple inline ads to a page. */
+  export let n: 1 | 2 | 3 | '1' | '2' | '3' = 1;
+
   /** Add a class to target with SCSS. */
   let cls: string = 'my-12';
   export { cls as class };
 
-  const desktopPlacementName: DesktopPlacementName = 'reuters_desktop_native_1';
+  const desktopPlacementName: InlineAd['desktop']['placementName'] = `reuters_desktop_native_${n}`;
 </script>
 
-<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
 <Block id="{id}" class="freestar-adslot {cls}">
   <div class="ad-block">
     <div class="ad-label">Advertisement · Scroll to continue</div>
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 @@
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
 <script lang="ts">
-  import { DesktopPlacementName } from './@types/ads';
+  import { LeaderboardAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
   import { onMount } from 'svelte';
 
@@ -13,7 +14,7 @@
   let windowWidth = 1200;
   $: adSize = windowWidth < 1024 ? 110 : 275;
 
-  const desktopPlacementName: DesktopPlacementName =
+  const desktopPlacementName: LeaderboardAd['desktop']['placementName'] =
     'reuters_desktop_leaderboard_atf';
 
   let sticky = false;
@@ -45,7 +46,6 @@
 
 <svelte:window bind:innerWidth="{windowWidth}" />
 
-<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
 <div
   class="leaderboard__sticky {cls}"
   class:sticky="{sticky}"
diff --git a/src/components/AdSlot/ResponsiveAd.svelte b/src/components/AdSlot/ResponsiveAd.svelte
index 51541a88..0f144939 100644
--- a/src/components/AdSlot/ResponsiveAd.svelte
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import type { DesktopPlacementName, PlacementName } from './@types/ads';
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
   import AdSlot from './AdSlot.svelte';
 
   export let desktopPlacementName: DesktopPlacementName;
@@ -9,30 +14,46 @@
 
   const getMobilePlacementName = (
     desktopPlacementName: DesktopPlacementName
-  ) => {
+  ): MobilePlacementName => {
     switch (desktopPlacementName) {
       case 'reuters_desktop_leaderboard_atf':
-        return 'reuters_mobile_leaderboard' as const;
+        return 'reuters_mobile_leaderboard';
       case 'reuters_sponsorlogo':
-        return 'reuters_sponsorlogo' as const;
+        return 'reuters_sponsorlogo';
+      case 'reuters_desktop_native_1':
+        return 'reuters_mobile_mpu_1';
+      case 'reuters_desktop_native_2':
+        return 'reuters_mobile_mpu_2';
+      case 'reuters_desktop_native_3':
+        return 'reuters_mobile_mpu_3';
       default:
-        return 'reuters_mobile_mpu_1' as const;
+        return 'reuters_mobile_mpu_1';
     }
   };
 
-  const getAdType = (placementName: PlacementName) => {
+  const getAdType = (
+    placementName: DesktopPlacementName | MobilePlacementName
+  ): DesktopAdType | MobileAdType => {
     switch (placementName) {
       case 'reuters_desktop_leaderboard_atf':
       case 'reuters_mobile_leaderboard':
-        return 'leaderboard' as const;
+        return 'leaderboard';
       case 'reuters_sponsorlogo':
-        return 'sponsorlogo' as const;
+        return 'sponsorlogo';
       case 'reuters_mobile_mpu_1':
-        return 'mpu' as const;
-      case 'reuters_billboard_desktop':
-        return 'billboard' as const;
+        return 'mpu';
+      case 'reuters_mobile_mpu_2':
+        return 'native';
+      case 'reuters_mobile_mpu_3':
+        return 'mpu2';
+      case 'reuters_desktop_native_1':
+        return 'native';
+      case 'reuters_desktop_native_2':
+        return 'canvas';
+      case 'reuters_desktop_native_3':
+        return 'flex';
       default:
-        return 'native' as const;
+        return 'native';
     }
   };
 
diff --git a/src/components/AdSlot/SponsorshipAd.svelte b/src/components/AdSlot/SponsorshipAd.svelte
index 9e42f54a..588df6b2 100644
--- a/src/components/AdSlot/SponsorshipAd.svelte
+++ b/src/components/AdSlot/SponsorshipAd.svelte
@@ -1,6 +1,7 @@
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import { DesktopPlacementName } from './@types/ads';
+  import { SponsorshipAd } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   /** Add an ID to target with SCSS. */
@@ -15,10 +16,10 @@
    */
   export let adLabel = '';
 
-  const desktopPlacementName: DesktopPlacementName = 'reuters_sponsorlogo';
+  const desktopPlacementName: SponsorshipAd['desktop']['placementName'] =
+    'reuters_sponsorlogo';
 </script>
 
-<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <Block id="{id}" class="freestar-adslot {cls}">
   <div class="ad-block">
     {#if adLabel}
diff --git a/src/components/AdSlot/stories/docs/inline.md b/src/components/AdSlot/stories/docs/inline.md
index 1269d315..15c160a2 100644
--- a/src/components/AdSlot/stories/docs/inline.md
+++ b/src/components/AdSlot/stories/docs/inline.md
@@ -33,3 +33,11 @@ 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.
+
+```svelte
+<InlineAd n="{1}" />
+<InlineAd n="{2}" />
+<InlineAd n="{3}" />
+```

From 58f0e005b95c450fbfe3d75885a1cc15d8612968 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Thu, 25 Jul 2024 10:14:32 +0100
Subject: [PATCH 2/2] better inline ad docs

---
 src/components/AdSlot/InlineAd.svelte        | 2 +-
 src/components/AdSlot/stories/docs/inline.md | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/AdSlot/InlineAd.svelte b/src/components/AdSlot/InlineAd.svelte
index 7feb2ad3..fe294d72 100644
--- a/src/components/AdSlot/InlineAd.svelte
+++ b/src/components/AdSlot/InlineAd.svelte
@@ -7,7 +7,7 @@
   /** Add an ID to target with SCSS. */
   export let id: string = '';
 
-  /** Update to add multiple inline ads to a page. */
+  /** Number of the inline ad in sequence. Use to add multiple inline ads to a page. */
   export let n: 1 | 2 | 3 | '1' | '2' | '3' = 1;
 
   /** Add a class to target with SCSS. */
diff --git a/src/components/AdSlot/stories/docs/inline.md b/src/components/AdSlot/stories/docs/inline.md
index 15c160a2..abac191c 100644
--- a/src/components/AdSlot/stories/docs/inline.md
+++ b/src/components/AdSlot/stories/docs/inline.md
@@ -34,10 +34,13 @@ 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.
+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
+<!-- First inline ad on the page -->
 <InlineAd n="{1}" />
+<!-- ... second ... -->
 <InlineAd n="{2}" />
+<!-- ... third and final. -->
 <InlineAd n="{3}" />
 ```