@reuters-graphics/graphics-components 1.0.29 → 1.1.0

package/dist/components/AdSlot/ResponsiveAd.svelte

@@ -1,50 +1,47 @@
-<script>import AdSlot from './AdSlot.svelte';
+<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';
-        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';
-    }
+const getMobilePlacementName = (desktopPlacementName2) => {
+  switch (desktopPlacementName2) {
+    case "reuters_desktop_leaderboard_atf":
+      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";
+  }
 };
-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_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';
-    }
+const getAdType = (placementName2) => {
+  switch (placementName2) {
+    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_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";
+  }
 };
-$: placementName =
-    windowWidth && windowWidth < mobileBreakpoint
-        ? getMobilePlacementName(desktopPlacementName)
-        : desktopPlacementName;
+$: placementName = windowWidth && windowWidth < mobileBreakpoint ? getMobilePlacementName(desktopPlacementName) : desktopPlacementName;
 $: adType = getAdType(placementName);
 </script>
 
@@ -52,6 +49,6 @@ $: adType = getAdType(placementName);
 
 {#if windowWidth}
   {#key placementName}
-    <AdSlot placementName="{placementName}" adType="{adType}" />
+    <AdSlot {placementName} {adType} />
   {/key}
 {/if}

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { DesktopPlacementName } from './@types/ads';
 declare const __propDef: {
     props: {
@@ -9,10 +9,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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 default class ResponsiveAd extends SvelteComponent<ResponsiveAdProps, ResponsiveAdEvents, ResponsiveAdSlots> {
 }
 export {};

package/dist/components/AdSlot/SponsorshipAd.stories.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import adDocs from './stories/docs/sponsorship.md?raw';
+
+  import AdScripts from './AdScripts.svelte';
+  import SponsorshipAd from './SponsorshipAd.svelte';
+
+  import { withComponentDocs } from './../../docs/utils/withParams';
+
+  const meta = {
+    ...withComponentDocs(adDocs),
+  };
+</script>
+
+<Meta title="Components/SponsorshipAd" component="{SponsorshipAd}" {...meta} />
+
+<Template>
+  <div>
+    <AdScripts />
+    <SponsorshipAd />
+  </div>
+</Template>
+
+<Story name="Default" />

package/dist/components/AdSlot/SponsorshipAd.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SponsorshipAdProps */
+/** @typedef {typeof __propDef.events}  SponsorshipAdEvents */
+/** @typedef {typeof __propDef.slots}  SponsorshipAdSlots */
+export default class SponsorshipAd extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SponsorshipAdProps = typeof __propDef.props;
+export type SponsorshipAdEvents = typeof __propDef.events;
+export type SponsorshipAdSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -1,19 +1,14 @@
 <!-- @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. */
-export let id = '';
-/** Add a class to target with SCSS. */
-let cls = 'my-12';
+<script>import Block from "../Block/Block.svelte";
+import ResponsiveAd from "./ResponsiveAd.svelte";
+export let id = "";
+let cls = "my-12";
 export { cls as class };
-/**
- * Label placed directly above the sponsorship ad
- */
-export let adLabel = '';
-const desktopPlacementName = 'reuters_sponsorlogo';
+export let adLabel = "";
+const desktopPlacementName = "reuters_sponsorlogo";
 </script>
 
-<Block id="{id}" class="freestar-adslot {cls}">
+<Block {id} class="freestar-adslot {cls}">
   <div class="ad-block">
     {#if adLabel}
       <div class="ad-label">
@@ -23,7 +18,7 @@ const desktopPlacementName = 'reuters_sponsorlogo';
     <div class="ad-container">
       <div class="ad-slot__inner">
         <div>
-          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+          <ResponsiveAd {desktopPlacementName} />
         </div>
       </div>
     </div>

package/dist/{@types/components → components}/AdSlot/SponsorshipAd.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** Add an ID to target with SCSS. */ id?: string;
@@ -11,11 +11,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SponsorshipAdProps = typeof __propDef.props;
 export type SponsorshipAdEvents = typeof __propDef.events;
 export type SponsorshipAdSlots = typeof __propDef.slots;
 /** `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) */
-export default class SponsorshipAd extends SvelteComponentTyped<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
+export default class SponsorshipAd extends SvelteComponent<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
 }
 export {};

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import getParameterByName from './getParameterByName';
 import Ias from './ias';
 const ONETRUST_LOGS = 'ot_logs';
@@ -11,9 +12,12 @@ export const loadBootstrap = () => {
     freestar.config = freestar.config || {};
     freestar.config.enabled_slots = [];
     freestar.initCallback = function () {
-        freestar.config.enabled_slots.length === 0 ?
-            (freestar.initCallbackCalled = false) :
+        if (freestar.config.enabled_slots.length === 0) {
+            freestar.initCallbackCalled = false;
+        }
+        else {
             freestar.newAdSlots(freestar.config.enabled_slots);
+        }
     };
     freestar.config.channel = '/4735792/reuters.com/graphics';
     window.initBootstrap({
@@ -30,7 +34,7 @@ export const loadBootstrap = () => {
             };
         });
     });
-    window.bootstrap.getResults((result) => {
+    window.bootstrap.getResults(() => {
         // Set GAM
         window.googletag = window.googletag || { cmd: [] };
         window.googletag.cmd.push(() => {
@@ -38,7 +42,7 @@ export const loadBootstrap = () => {
             /**
              * @TODO Property 'enableAsyncRendering' does not exist on type 'PubAdsService'.
              */
-            // @ts-ignore
+            // @ts-ignore window global
             window.googletag.pubads().enableAsyncRendering();
             window.googletag.pubads().collapseEmptyDivs(true);
         });
@@ -51,9 +55,11 @@ export const loadBootstrap = () => {
                 window.googletag.pubads().setTargeting('adstest', adstest);
             }
             // Use the URL path to create a unique ID for the page.
-            const graphicId = window.location.pathname.split('/')
+            const graphicId = window.location.pathname
+                .split('/')
                 // Get the first lowercase slug in the pathname, which is the graphic UID.
-                .filter(d => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] || 'unknown-graphic';
+                .filter((d) => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] ||
+                'unknown-graphic';
             window.googletag.pubads().setTargeting('template', 'graphics');
             window.googletag.pubads().setTargeting('graphicId', graphicId);
         });
@@ -65,4 +71,3 @@ export const loadBootstrap = () => {
         });
     });
 };
-//# sourceMappingURL=bootstrap.js.map

package/dist/components/AdSlot/adScripts/getParameterByName.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (name: string, url?: string) => string | null;
+export default _default;

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

@@ -9,4 +9,3 @@ export default (name, url = window.location.href) => {
         return '';
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
 };
-//# sourceMappingURL=getParameterByName.js.map

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const IAS_REQUEST_TIMEOUT = 600;
 export default () => {
     return new Promise((resolve) => {
@@ -22,4 +23,3 @@ export default () => {
         };
     });
 };
-//# sourceMappingURL=ias.js.map

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

@@ -1,9 +1,12 @@
 export const loadScript = (src, attributes) => {
     const { onload, async = true } = attributes || {};
+    const existingScript = document.querySelector(`script[src="${src}"]`);
+    if (existingScript)
+        return;
     const script = document.createElement('script');
-    script.addEventListener('load', onload);
+    if (onload)
+        script.addEventListener('load', onload);
     script.async = async;
     script.src = src;
     document.head.append(script);
 };
-//# sourceMappingURL=loadScript.js.map

package/dist/components/AdSlot/stories/docs/inline.md

@@ -0,0 +1,46 @@
+Add programmatic ads inline on your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { InlineAd } from '@reuters-graphics/graphics-components';
+
+  export let embedded = false;
+</script>
+
+{#each content.blocks as block}
+  <!-- ... -->
+
+  {#if block.Type === 'inline-ad'}
+    <!-- Check if in an embed context! -->
+    {#if !embedded}
+      <InlineAd />
+    {/if}
+  {/if}
+
+  <!-- ... -->
+{/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}" />
+```

package/dist/components/AdSlot/stories/docs/leaderboard.md

@@ -0,0 +1,21 @@
+Add a leaderboard ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import {
+    AdScripts,
+    LeaderboardAd,
+    SiteHeader,
+  } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+
+<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
+<LeaderboardAd />
+<SiteHeader />
+```

package/dist/components/AdSlot/stories/docs/sponsorship.md

@@ -0,0 +1,27 @@
+Add a sponsorship ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SponsorshipAd } from '@reuters-graphics/graphics-components';
+
+  export let embedded = false;
+</script>
+
+<!-- Check if in an embed context! -->
+{#if !embedded}
+  <SponsorshipAd />
+{/if}
+```

package/dist/components/AdSlot/utils.js

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

package/dist/components/Analytics/Analytics.stories.svelte

@@ -0,0 +1,42 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import environmentsDocs from './stories/docs/environments.md?raw';
+  // @ts-ignore raw
+  import multipageDocs from './stories/docs/multipage.md?raw';
+
+  import Analytics from './Analytics.svelte';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/Analytics"
+  component="{Analytics}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <Analytics {...args} />
+  <div>Nothing to see here</div>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    authors: [{ name: 'Jane Doe' }, { name: 'John Doe' }],
+  }}"
+/>
+
+<Story name="Environments" {...withStoryDocs(environmentsDocs)}>
+  <Analytics />
+  <div>Nothing to see here</div>
+</Story>
+
+<Story name="Multipage apps" {...withStoryDocs(multipageDocs)}>
+  <Analytics />
+  <div>Nothing to see here</div>
+</Story>

package/dist/components/Analytics/Analytics.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  AnalyticsProps */
+/** @typedef {typeof __propDef.events}  AnalyticsEvents */
+/** @typedef {typeof __propDef.slots}  AnalyticsSlots */
+export default class Analytics extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AnalyticsProps = typeof __propDef.props;
+export type AnalyticsEvents = typeof __propDef.events;
+export type AnalyticsSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/Analytics/Analytics.svelte

@@ -10,14 +10,11 @@
 </script>
 
 <!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) -->
-<script>/**
- * Used to associate a page with its author(s) in Chartbeat.
- */
-export let authors = [];
-import { onMount } from 'svelte';
-import { ga, chartbeat } from './providers';
+<script>export let authors = [];
+import { onMount } from "svelte";
+import { ga, chartbeat } from "./providers";
 onMount(() => {
-    ga();
-    chartbeat(authors);
+  ga();
+  chartbeat(authors);
 });
 </script>

package/dist/{@types/components → components}/Analytics/Analytics.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 /** Register virtual pageviews when using client-side routing in multipage applications. */
 export declare function registerPageview(): void;
 declare const __propDef: {
@@ -13,11 +13,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AnalyticsProps = typeof __propDef.props;
 export type AnalyticsEvents = typeof __propDef.events;
 export type AnalyticsSlots = typeof __propDef.slots;
 /** `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Analytics--default) */
-export default class Analytics extends SvelteComponentTyped<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
+export default class Analytics extends SvelteComponent<AnalyticsProps, AnalyticsEvents, AnalyticsSlots> {
 }
 export {};

package/dist/components/Analytics/providers/chartbeat.js

@@ -39,4 +39,3 @@ export const registerPageview = () => {
         title: document?.title,
     });
 };
-//# sourceMappingURL=chartbeat.js.map

package/dist/components/Analytics/providers/ga.js

@@ -20,6 +20,7 @@ export default () => {
             attachScript();
             /** @type {Gtag.Gtag} */
             window.gtag = function () {
+                // eslint-disable-next-line prefer-rest-params
                 window.dataLayer.push(arguments);
             };
             window.gtag('js', new Date());
@@ -42,4 +43,3 @@ export const registerPageview = () => {
         page_title: document?.title,
     });
 };
-//# sourceMappingURL=ga.js.map

package/dist/components/Analytics/providers/index.js

@@ -1,3 +1,2 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
-//# sourceMappingURL=index.js.map

package/dist/components/Analytics/stories/docs/component.md

@@ -0,0 +1,11 @@
+Add Google and Chartbeat analytics to your page.
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+
+  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
+</script>
+
+<Analytics authors="{authors}" />
+```

package/dist/components/Analytics/stories/docs/environments.md

@@ -0,0 +1,17 @@
+Generally, you only want to send page analytics in production environments.
+
+In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
+
+For example, the following excludes analytics from pages in development or hosted on our preview server:
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+  import { dev } from '$app/environment';
+  import { page } from '$app/stores';
+</script>
+
+{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
+  <Analytics />
+{/if}
+```

package/dist/components/Analytics/stories/docs/multipage.md

@@ -0,0 +1,31 @@
+If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
+
+This component also exports a function you can call to register pageviews.
+
+For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
+
+```svelte
+<script>
+  import {
+    Analytics,
+    registerPageview,
+  } from '@reuters-graphics/graphics-components';
+  import { afterNavigate } from '$app/navigation';
+
+  let isFirstPageview = true;
+
+  afterNavigate(() => {
+    // We shouldn't fire on initial page load because the Analytics component
+    // already registers a reader's first pageview. After this component
+    // has initially mounted, we can be sure that further navigation is virtual
+    // and register pageviews using this function.
+    if (!isFirstPageview) {
+      registerPageview();
+    } else {
+      isFirstPageview = false;
+    }
+  });
+</script>
+
+<Analytics />
+```