@reuters-graphics/graphics-components 1.0.27 → 1.0.29

package/dist/@types/components/AdSlot/@types/ads.d.ts

@@ -1,4 +1,34 @@
-export type AdType = 'leaderboard' | 'sponsorlogo' | 'native' | 'mpu' | 'billboard';
-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 DesktopPlacementName = 'reuters_desktop_leaderboard_atf' | 'reuters_desktop_native_1' | 'reuters_sponsorlogo' | 'reuters_billboard_desktop';
-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 LeaderboardAd = {
+    mobile: {
+        adType: 'leaderboard';
+        placementName: 'reuters_mobile_leaderboard';
+    };
+    desktop: {
+        adType: 'leaderboard';
+        placementName: 'reuters_desktop_leaderboard_atf';
+    };
+};
+export type SponsorshipAd = {
+    mobile: {
+        adType: 'sponsorlogo';
+        placementName: 'reuters_sponsorlogo';
+    };
+    desktop: {
+        adType: 'sponsorlogo';
+        placementName: 'reuters_sponsorlogo';
+    };
+};
+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 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'];

package/dist/@types/components/AdSlot/AdSlot.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { PlacementName, AdType } from './@types/ads';
+import type { DesktopAdType, DesktopPlacementName, MobileAdType, MobilePlacementName } from './@types/ads';
 declare const __propDef: {
     props: {
-        placementName: PlacementName;
-        adType: AdType;
+        placementName: DesktopPlacementName | MobilePlacementName;
+        adType: DesktopAdType | MobileAdType;
         /**
            * @TODO Unclear at what level this bit of config is used with placements...
            */ dataFreestarAd?: string;

package/dist/@types/components/AdSlot/InlineAd.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         /** Add an ID to target with SCSS. */ id?: string;
+        /** Number of the inline ad in sequence. Use to add multiple inline ads to a page. */ n?: 1 | 2 | 3 | '1' | '2' | '3';
         /** Add a class to target with SCSS. */ class?: string;
     };
     events: {

package/dist/components/AdSlot/AdSlot.svelte

@@ -12,7 +12,7 @@ onMount(() => {
         placementName,
         slotId: adId,
         targeting: {
-            div_id: adId,
+            div_id: placementName,
             type: adType,
         },
     };

package/dist/components/AdSlot/InlineAd.svelte

@@ -1,14 +1,16 @@
+<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
 <script>import Block from '../Block/Block.svelte';
 import ResponsiveAd from './ResponsiveAd.svelte';
 /** Add an ID to target with SCSS. */
 export let id = '';
+/** Number of the inline ad in sequence. Use to add multiple inline ads to a page. */
+export let n = 1;
 /** Add a class to target with SCSS. */
 let cls = 'my-12';
 export { cls as class };
-const desktopPlacementName = 'reuters_desktop_native_1';
+const desktopPlacementName = `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>

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -1,3 +1,4 @@
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
 <script>import ResponsiveAd from './ResponsiveAd.svelte';
 import { onMount } from 'svelte';
 /** Add an ID to target with SCSS. */
@@ -34,7 +35,6 @@ onMount(() => {
 
 <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}"

package/dist/components/AdSlot/ResponsiveAd.svelte

@@ -8,6 +8,12 @@ const getMobilePlacementName = (desktopPlacementName) => {
             return 'reuters_mobile_leaderboard';
         case 'reuters_sponsorlogo':
             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';
     }
@@ -21,8 +27,16 @@ const getAdType = (placementName) => {
             return 'sponsorlogo';
         case 'reuters_mobile_mpu_1':
             return 'mpu';
-        case 'reuters_billboard_desktop':
-            return 'billboard';
+        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';
     }

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <script>import Block from '../Block/Block.svelte';
 import ResponsiveAd from './ResponsiveAd.svelte';
 /** Add an ID to target with SCSS. */
@@ -12,7 +13,6 @@ export let adLabel = '';
 const desktopPlacementName = '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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",