@reuters-graphics/graphics-components 1.0.13 → 1.0.15

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

@@ -0,0 +1,4 @@
+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;

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

@@ -1,15 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { PlacementName, AdType } from './@types/ads';
 declare const __propDef: {
     props: {
+        placementName: PlacementName;
+        adType: AdType;
         /**
-           * The unique placement name from FreeStar dashboard.
-           * @required
-           */ placementName?: "reuters_desktop_native_1" | "reuters_mobile_mpu_1" | "reuters_sponsorlogo" | "reuters_desktop_canvas";
-        /**
-           * The unique slot Id from FreeStar dashboard.
+           * @TODO Unclear at what level this bit of config is used with placements...
            */ dataFreestarAd?: string;
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,7 +16,6 @@ declare const __propDef: {
 export type AdSlotProps = typeof __propDef.props;
 export type AdSlotEvents = typeof __propDef.events;
 export type AdSlotSlots = typeof __propDef.slots;
-/** `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) */
 export default class AdSlot extends SvelteComponentTyped<AdSlotProps, AdSlotEvents, AdSlotSlots> {
 }
 export {};

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlineAdProps = typeof __propDef.props;
+export type InlineAdEvents = typeof __propDef.events;
+export type InlineAdSlots = typeof __propDef.slots;
+/** `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) */
+export default class InlineAd extends SvelteComponentTyped<InlineAdProps, InlineAdEvents, InlineAdSlots> {
+}
+export {};

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  OneTrustProps */
+/** @typedef {typeof __propDef.events}  OneTrustEvents */
+/** @typedef {typeof __propDef.slots}  OneTrustSlots */
+export default class OneTrust extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type OneTrustProps = typeof __propDef.props;
+export type OneTrustEvents = typeof __propDef.events;
+export type OneTrustSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DesktopPlacementName } from './@types/ads';
+declare const __propDef: {
+    props: {
+        desktopPlacementName: DesktopPlacementName;
+        mobileBreakpoint?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResponsiveAdProps = typeof __propDef.props;
+export type ResponsiveAdEvents = typeof __propDef.events;
+export type ResponsiveAdSlots = typeof __propDef.slots;
+export default class ResponsiveAd extends SvelteComponentTyped<ResponsiveAdProps, ResponsiveAdEvents, ResponsiveAdSlots> {
+}
+export {};

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

@@ -0,0 +1 @@
+export declare const getRandomAdId: () => string;

package/dist/@types/index.d.ts

@@ -2,7 +2,7 @@ export { default as cssVariables } from "./actions/cssVariables/index.js";
 export { default as resizeObserver } from "./actions/resizeObserver/index.js";
 export { default as Article } from "./components/Article/Article.svelte";
 export { default as AdScripts } from "./components/AdSlot/AdScripts.svelte";
-export { default as AdSlot } from "./components/AdSlot/AdSlot.svelte";
+export { default as InlineAd } from "./components/AdSlot/InlineAd.svelte";
 export { default as BeforeAfter } from "./components/BeforeAfter/BeforeAfter.svelte";
 export { default as Block } from "./components/Block/Block.svelte";
 export { default as BodyText } from "./components/BodyText/BodyText.svelte";

package/dist/components/AdSlot/@types/ads.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ads.js.map

package/dist/components/AdSlot/AdScripts.svelte

@@ -2,35 +2,7 @@
   import { onMount } from 'svelte';
   import { loadBootstrap } from './adScripts/bootstrap';
   import { loadScript } from './adScripts/loadScript';
-  import { throttle } from 'lodash-es';
-
-  let lastScroll = 0;
-  let showManagePreferences = true;
-
-  const togglePrefs = (on = true) => {
-    const btn = document.getElementById('ot-sdk-btn-floating');
-    if (!btn) return;
-    if (on) {
-      showManagePreferences = true;
-      btn.style.bottom = '';
-    } else {
-      showManagePreferences = false;
-      btn.style.bottom = '-5rem';
-    }
-  };
-
-  const handleScroll = () => {
-    if (lastScroll > window.scrollY) {
-      if (!showManagePreferences) {
-        togglePrefs(true);
-      }
-    } else {
-      if (showManagePreferences && window.scrollY > 250) {
-        togglePrefs(false);
-      }
-    }
-    lastScroll = window.scrollY;
-  };
+  import OneTrust from './OneTrust.svelte';
 
   onMount(() => {
     window.graphicsAdQueue = window.graphicsAdQueue || [];
@@ -38,9 +10,6 @@
       'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
       loadBootstrap
     );
-    window.addEventListener('scroll', throttle(handleScroll, 250), {
-      passive: true,
-    });
   });
 </script>
 
@@ -60,3 +29,5 @@
   />
   <link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
 </svelte:head>
+
+<OneTrust />

package/dist/components/AdSlot/AdSlot.svelte

@@ -1,105 +1,35 @@
-<script>/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
+<script>import { onMount } from 'svelte';
+import { getRandomAdId } from './utils';
+export let placementName;
+export let adType;
 /**
- * The unique placement name from FreeStar dashboard.
- * @required
- */
-export let placementName = 'reuters_desktop_native_1';
-/**
- * The unique slot Id from FreeStar dashboard.
+ * @TODO Unclear at what level this bit of config is used with placements...
  */
 export let dataFreestarAd = '__970x250';
-/** Add an ID to target with SCSS. */
-export let id = '';
-/** Add a class to target with SCSS. */
-let cls = 'my-12';
-export { cls as class };
-import { onMount } from 'svelte';
-import Block from '../Block/Block.svelte';
-const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
-    .toString(16)
-    .substring(1);
-const randomAdId = 'ad-' + random4() + random4();
-const getAdType = (placementName) => {
-    switch (placementName) {
-        // case 'reuters_desktop_leaderboard_atf':
-        // case 'reuters_mobile_leaderboard':
-        //   return 'leaderboard';
-        case 'reuters_sponsorlogo':
-            return 'Sponsorlogo';
-        case 'reuters_mobile_mpu_1':
-            return 'mpu';
-        default:
-            return 'native';
-    }
-};
+const adId = getRandomAdId();
 onMount(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const adstest = urlParams.get('adstest');
-    window.graphicsAdQueue = window.graphicsAdQueue || [];
-    window.graphicsAdQueue.push({
+    const adSlot = {
         placementName,
-        slotId: randomAdId,
-        type: getAdType(placementName),
-        graphicId: window.location.pathname,
-        adstest,
-    });
+        slotId: adId,
+        targeting: {
+            div_id: adId,
+            type: adType,
+        },
+    };
+    // @ts-ignore
+    const freestar = window?.freestar;
+    // Add adSlot to freestar queue directly if already initialised
+    if (freestar) {
+        freestar.queue.push(function () {
+            freestar.newAdSlots([adSlot], freestar.config.channel);
+        });
+        // ... otherwise add to the graphicsAdQueue queue.
+    }
+    else {
+        window.graphicsAdQueue = window.graphicsAdQueue || [];
+        window.graphicsAdQueue.push(adSlot);
+    }
 });
 </script>
 
-<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) -->
-<Block id="{id}" class="freestar-adslot {cls}">
-  <div class="ad-block">
-    <div class="ad-label">Advertisement · Scroll to continue</div>
-    <div class="ad-container">
-      <div class="ad-slot__inner">
-        <div>
-          <div
-            data-freestar-ad="{dataFreestarAd || null}"
-            id="{randomAdId}"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Block>
-
-<style>div.ad-block {
-  border-bottom: 1px solid var(--theme-colour-brand-rules);
-  border-top: 1px solid var(--theme-colour-brand-rules);
-}
-div.ad-block div.ad-label {
-  font-family: Knowledge, "Source Sans Pro", Arial, Helvetica, sans-serif;
-  font-size: 14px;
-  margin: 6px 0;
-  line-height: 1.333;
-  color: var(--theme-colour-text-secondary);
-  width: 100%;
-  text-align: center;
-}
-div.ad-block div.ad-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 415px;
-}
-@media (max-width: 767.9px) {
-  div.ad-block div.ad-container {
-    min-height: 320px;
-  }
-}
-div.ad-block div.ad-container div.ad-slot__inner {
-  margin: auto 0;
-  width: 100%;
-  max-width: 100%;
-  flex: unset;
-}
-div.ad-block div.ad-container div.ad-slot__inner > div {
-  display: block;
-}
-div.ad-block div.ad-container div.ad-slot__inner > div div[data-freestar-ad] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}</style>
+<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>

package/dist/components/AdSlot/InlineAd.svelte

@@ -0,0 +1,64 @@
+<script>import Block from '../Block/Block.svelte';
+import ResponsiveAd from './ResponsiveAd.svelte';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+let cls = 'my-12';
+export { cls as class };
+const desktopPlacementName = 'reuters_desktop_native_1';
+</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>
+    <div class="ad-container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+        </div>
+      </div>
+    </div>
+  </div>
+</Block>
+
+<style>div.ad-block {
+  border-bottom: 1px solid var(--theme-colour-brand-rules);
+  border-top: 1px solid var(--theme-colour-brand-rules);
+}
+div.ad-block div.ad-label {
+  font-family: Knowledge, "Source Sans Pro", Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  margin: 6px 0;
+  line-height: 1.333;
+  color: var(--theme-colour-text-secondary);
+  width: 100%;
+  text-align: center;
+}
+div.ad-block div.ad-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 415px;
+}
+@media (max-width: 767.9px) {
+  div.ad-block div.ad-container {
+    min-height: 320px;
+  }
+}
+div.ad-block div.ad-container div.ad-slot__inner {
+  margin: auto 0;
+  width: 100%;
+  max-width: 100%;
+  flex: unset;
+}
+div.ad-block div.ad-container div.ad-slot__inner > div {
+  display: block;
+}
+div.ad-block div.ad-container div.ad-slot__inner > div :global(div[data-freestar-ad]) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}</style>

package/dist/components/AdSlot/OneTrust.svelte

@@ -0,0 +1,39 @@
+<!-- This component manages the OneTrust prefs button, so it's not permanently fixed on page... -->
+<script>
+  import { onMount } from 'svelte';
+  import { throttle } from 'lodash-es';
+
+  let lastScroll = 0;
+  let showManagePreferences = true;
+
+  const togglePrefs = (on = true) => {
+    const btn = document.getElementById('ot-sdk-btn-floating');
+    if (!btn) return;
+    if (on) {
+      showManagePreferences = true;
+      btn.style.bottom = '';
+    } else {
+      showManagePreferences = false;
+      btn.style.bottom = '-5rem';
+    }
+  };
+
+  const handleScroll = () => {
+    if (lastScroll > window.scrollY) {
+      if (!showManagePreferences) {
+        togglePrefs(true);
+      }
+    } else {
+      if (showManagePreferences && window.scrollY > 250) {
+        togglePrefs(false);
+      }
+    }
+    lastScroll = window.scrollY;
+  };
+
+  onMount(() => {
+    window.addEventListener('scroll', throttle(handleScroll, 250), {
+      passive: true,
+    });
+  });
+</script>

package/dist/components/AdSlot/ResponsiveAd.svelte

@@ -0,0 +1,43 @@
+<script>import AdSlot from './AdSlot.svelte';
+export let desktopPlacementName;
+export let mobileBreakpoint = 1024;
+let windowWidth;
+const getMobilePlacementName = (desktopPlacementName) => {
+    switch (desktopPlacementName) {
+        case 'reuters_desktop_leaderboard_atf':
+            return 'reuters_mobile_leaderboard';
+        case 'reuters_sponsorlogo':
+            return 'reuters_sponsorlogo';
+        default:
+            return 'reuters_mobile_mpu_1';
+    }
+};
+const getAdType = (placementName) => {
+    switch (placementName) {
+        case 'reuters_desktop_leaderboard_atf':
+        case 'reuters_mobile_leaderboard':
+            return 'leaderboard';
+        case 'reuters_sponsorlogo':
+            return 'sponsorlogo';
+        case 'reuters_mobile_mpu_1':
+            return 'mpu';
+        case 'reuters_billboard_desktop':
+            return 'billboard';
+        default:
+            return 'native';
+    }
+};
+$: placementName =
+    windowWidth && windowWidth < mobileBreakpoint
+        ? getMobilePlacementName(desktopPlacementName)
+        : desktopPlacementName;
+$: adType = getAdType(placementName);
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+{#if windowWidth}
+  {#key placementName}
+    <AdSlot placementName="{placementName}" adType="{adType}" />
+  {/key}
+{/if}

package/dist/components/AdSlot/adScripts/bootstrap.js

@@ -16,17 +16,13 @@ export const loadBootstrap = () => {
             (freestar.initCallbackCalled = false) :
             freestar.newAdSlots(freestar.config.enabled_slots);
     };
-    // Ask Rachel
-    freestar.config.channel = '/4735792/reuters.com/home';
+    freestar.config.channel = '/4735792/reuters.com/graphics';
     window.initBootstrap({
         onetrust_logs: getParameterByName(ONETRUST_LOGS) || 'false',
         geolocation_mock: getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
         onetrust_script_id: ONETRUST_SCRIPT_ID,
     }, (onetrustResponse) => {
         const iasPromise = Ias();
-        // Ask Thea about Permutive implementation (considering there are no logged in users on Graphics)
-        // Should we use Permutive at all?
-        // Should we import ArcP SDK to graphics to get the same user as logged in on RCom?
         return Promise.all([iasPromise]).then((responses) => {
             const [iasResponse] = responses;
             return {
@@ -42,27 +38,33 @@ export const loadBootstrap = () => {
         window.googletag = window.googletag || { cmd: [] };
         window.googletag.cmd.push(() => {
             window.googletag.pubads().enableSingleRequest();
+            /**
+             * @TODO Property 'enableAsyncRendering' does not exist on type 'PubAdsService'.
+             */
+            // @ts-ignore
             window.googletag.pubads().enableAsyncRendering();
             window.googletag.pubads().collapseEmptyDivs(true);
+        });
+        // Set page-level key-values
+        // cf: https://help.freestar.com/help/using-key-values
+        freestar.queue.push(function () {
             // Global Ads test targeting
             const adstest = new URL(document.location.href).searchParams.get('adstest');
             if (adstest) {
                 window.googletag.pubads().setTargeting('adstest', adstest);
             }
-            // Ask Rachel about targeting
-            const template = document.querySelector('meta[name="ad:template"]')?.content;
-            if (template) {
-                window.googletag.pubads().setTargeting('template', template);
-            }
+            // Use the URL path to create a unique ID for the page.
+            const graphicId = window.location.pathname
+                .replace(/^\/(.*)\/$/, '$1')
+                .replaceAll('/', '-');
+            window.googletag.pubads().setTargeting('template', 'graphics');
+            window.googletag.pubads().setTargeting('graphicId', graphicId);
         });
         if (!Array.isArray(window.graphicsAdQueue)) {
             console.error('Ad queue not initialized!');
         }
         freestar.queue.push(function () {
-            freestar.newAdSlots(window.graphicsAdQueue || [], 'foobar');
-        });
-        freestar.queue.push(function () {
-            window.googletag.pubads().set('page_url', 'https://www.reuters.com/'); // This line should only be used for testing
+            freestar.newAdSlots(window.graphicsAdQueue || [], freestar.config.channel);
         });
     });
 };

package/dist/components/AdSlot/utils.js

@@ -0,0 +1,5 @@
+const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+export const getRandomAdId = () => 'ad-' + random4() + random4();
+//# sourceMappingURL=utils.js.map

package/dist/index.js

@@ -9,7 +9,7 @@ export {
 } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
-export { default as AdSlot } from './components/AdSlot/AdSlot.svelte';
+export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -55,6 +55,7 @@
     "@storybook/theming": "^7.4.2",
     "@sveltejs/vite-plugin-svelte": "^2.4.1",
     "@tsconfig/svelte": "^4.0.1",
+    "@types/google-publisher-tag": "^1.20240219.0",
     "@types/gtag.js": "^0.0.12",
     "@types/mdx": "^2.0.5",
     "@types/proper-url-join": "^2.1.1",
@@ -133,12 +134,17 @@
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
     "./components/@types/global.ts": "./dist/components/@types/global.ts",
+    "./components/AdSlot/@types/ads.ts": "./dist/components/AdSlot/@types/ads.ts",
     "./components/AdSlot/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
     "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
+    "./components/AdSlot/InlineAd.svelte": "./dist/components/AdSlot/InlineAd.svelte",
+    "./components/AdSlot/OneTrust.svelte": "./dist/components/AdSlot/OneTrust.svelte",
+    "./components/AdSlot/ResponsiveAd.svelte": "./dist/components/AdSlot/ResponsiveAd.svelte",
     "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.ts",
     "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.ts",
     "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.ts",
     "./components/AdSlot/adScripts/loadScript.ts": "./dist/components/AdSlot/adScripts/loadScript.ts",
+    "./components/AdSlot/utils.ts": "./dist/components/AdSlot/utils.ts",
     "./components/Analytics/Analytics.svelte": "./dist/components/Analytics/Analytics.svelte",
     "./components/Analytics/providers/chartbeat.ts": "./dist/components/Analytics/providers/chartbeat.ts",
     "./components/Analytics/providers/ga.ts": "./dist/components/Analytics/providers/ga.ts",