Merge pull request #167 from reuters-graphics/ad-placement-names

Ad types and placement names

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'];

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...

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 = '';
 
+  /** 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. */
   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>

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}"

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';
     }
   };
 

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}

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
+<!-- First inline ad on the page -->
+<InlineAd n="{1}" />
+<!-- ... second ... -->
+<InlineAd n="{2}" />
+<!-- ... third and final. -->
+<InlineAd n="{3}" />
+```