@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import LeaderboardAd from './LeaderboardAd.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof LeaderboardAd;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LeaderboardAdProps = typeof __propDef.props;
-export type LeaderboardAdEvents = typeof __propDef.events;
-export type LeaderboardAdSlots = typeof __propDef.slots;
-export default class LeaderboardAd extends SvelteComponent<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const LeaderboardAd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LeaderboardAd = InstanceType<typeof LeaderboardAd>;
+export default LeaderboardAd;

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -1,36 +1,52 @@
 <!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
-<script>import ResponsiveAd from "./ResponsiveAd.svelte";
-import { onMount } from "svelte";
-export let id = "";
-export let cls = "";
-export { cls as class };
-let windowWidth = 1200;
-$: adSize = windowWidth < 1024 ? 110 : 275;
-const desktopPlacementName = "reuters_desktop_leaderboard_atf";
-let sticky = false;
-let unstick = false;
-onMount(() => {
-  const handleScroll = () => {
-    const scrollTop = window.scrollY;
-    if (scrollTop >= adSize * 1.1) {
-      sticky = true;
-      setTimeout(() => {
-        unstick = true;
+<script lang="ts">
+  import type { LeaderboardAd } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+  }
+
+  let { id = '', class: cls = '' }: Props = $props();
+
+  let windowWidth = $state(1200);
+  let adSize = $derived(windowWidth < 1024 ? 110 : 275);
+
+  const desktopPlacementName: LeaderboardAd['desktop']['placementName'] =
+    'reuters_desktop_leaderboard_atf';
+
+  let sticky = $state(false);
+  // Handles transition out... somewhat dumb, but here we are...
+  let unstick = $state(false);
+
+  onMount(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      if (scrollTop >= adSize * 1.1) {
+        sticky = true;
         setTimeout(() => {
-          sticky = false;
-        }, 400);
-      }, 1500);
-      window.removeEventListener("scroll", handleScroll);
-    }
-  };
-  window.addEventListener("scroll", handleScroll);
-  return () => {
-    window.removeEventListener("scroll", handleScroll);
-  };
-});
+          unstick = true;
+          setTimeout(() => {
+            sticky = false;
+          }, 400);
+        }, 1500);
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <div
   class="freestar-adslot leaderboard__sticky {cls}"

package/dist/components/AdSlot/LeaderboardAd.svelte.d.ts

@@ -1,20 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Add an ID to target with SCSS. */ id?: string;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LeaderboardAdProps = typeof __propDef.props;
-export type LeaderboardAdEvents = typeof __propDef.events;
-export type LeaderboardAdSlots = typeof __propDef.slots;
-/** `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) */
-export default class LeaderboardAd extends SvelteComponent<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
+import type { LeaderboardAd } from './@types/ads';
+interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
 }
-export {};
+/** `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) */
+declare const LeaderboardAd: import("svelte").Component<Props, {}, "">;
+type LeaderboardAd = ReturnType<typeof LeaderboardAd>;
+export default LeaderboardAd;

package/dist/components/AdSlot/OneTrust.svelte

@@ -1,39 +1,44 @@
 <!-- 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/throttle";
-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);
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { throttle } from 'es-toolkit';
+
+  let lastScroll = 0;
+  let showManagePreferences = true;
+
+  const togglePrefs = (on: boolean = 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';
     }
-  } else {
-    if (showManagePreferences && window.scrollY > 250) {
-      togglePrefs(false);
+  };
+
+  const handleScroll = () => {
+    if (lastScroll > window.scrollY) {
+      if (!showManagePreferences) {
+        togglePrefs(true);
+      }
+    } else {
+      if (showManagePreferences && window.scrollY > 250) {
+        togglePrefs(false);
+      }
     }
-  }
-  lastScroll = window.scrollY;
-};
-onMount(() => {
-  if (typeof window === "undefined") return;
-  const throttledHandle = throttle(handleScroll, 250);
-  window.addEventListener("scroll", throttledHandle, {
-    passive: true
-  });
-  return () => {
-    window.removeEventListener("scroll", throttledHandle);
+    lastScroll = window.scrollY;
   };
-});
+
+  onMount(() => {
+    if (typeof window === 'undefined') return;
+    const throttledHandle = throttle(handleScroll, 250);
+    window.addEventListener('scroll', throttledHandle, {
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener('scroll', throttledHandle);
+    };
+  });
 </script>

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

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type OneTrustProps = typeof __propDef.props;
-export type OneTrustEvents = typeof __propDef.events;
-export type OneTrustSlots = typeof __propDef.slots;
-export default class OneTrust extends SvelteComponent<OneTrustProps, OneTrustEvents, OneTrustSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const OneTrust: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OneTrust = InstanceType<typeof OneTrust>;
+export default OneTrust;

package/dist/components/AdSlot/ResponsiveAd.svelte

@@ -1,51 +1,75 @@
-<script>import AdSlot from "./AdSlot.svelte";
-export let desktopPlacementName;
-export let mobileBreakpoint = 1024;
-let windowWidth;
-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 = (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";
+<script lang="ts">
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
+  import AdSlot from './AdSlot.svelte';
+
+  interface Props {
+    desktopPlacementName: DesktopPlacementName;
+    mobileBreakpoint?: number;
   }
-};
-$: placementName = windowWidth && windowWidth < mobileBreakpoint ? getMobilePlacementName(desktopPlacementName) : desktopPlacementName;
-$: adType = getAdType(placementName);
+
+  let { desktopPlacementName, mobileBreakpoint = 1024 }: Props = $props();
+
+  let windowWidth: number | undefined = $state();
+
+  const getMobilePlacementName = (
+    desktopPlacementName: DesktopPlacementName
+  ): MobilePlacementName => {
+    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 getAdType = (
+    placementName: DesktopPlacementName | MobilePlacementName
+  ): DesktopAdType | MobileAdType => {
+    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';
+    }
+  };
+
+  let placementName = $derived(
+    windowWidth && windowWidth < mobileBreakpoint ?
+      getMobilePlacementName(desktopPlacementName)
+    : desktopPlacementName
+  );
+  let adType = $derived(getAdType(placementName));
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 {#if windowWidth}
   {#key placementName}

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { DesktopPlacementName } from './@types/ads';
-declare const __propDef: {
-    props: {
-        desktopPlacementName: DesktopPlacementName;
-        mobileBreakpoint?: number;
-    };
-    events: {
-        [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 SvelteComponent<ResponsiveAdProps, ResponsiveAdEvents, ResponsiveAdSlots> {
+interface Props {
+    desktopPlacementName: DesktopPlacementName;
+    mobileBreakpoint?: number;
 }
-export {};
+declare const ResponsiveAd: import("svelte").Component<Props, {}, "">;
+type ResponsiveAd = ReturnType<typeof ResponsiveAd>;
+export default ResponsiveAd;

package/dist/components/AdSlot/{stories/docs/sponsorship.md → SponsorshipAd.mdx}

@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SponsorshipAdStories from './SponsorshipAd.stories.svelte';
+
+<Meta of={SponsorshipAdStories} />
+
+# SponsorshipAd
+
 Add a sponsorship ad to your page.
 
 > **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
@@ -17,7 +25,7 @@ Add a sponsorship ad to your page.
 <script>
   import { SponsorshipAd } from '@reuters-graphics/graphics-components';
 
-  export let embedded = false;
+  let { embedded = false } = $props();
 </script>
 
 <!-- Check if in an embed context! -->
@@ -25,3 +33,5 @@ Add a sponsorship ad to your page.
   <SponsorshipAd />
 {/if}
 ```
+
+<Canvas of={SponsorshipAdStories.Demo} />

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

@@ -1,24 +1,20 @@
-<script context="module">import SponsorshipAd from "./SponsorshipAd.svelte";
-import adDocs from "./stories/docs/sponsorship.md?raw";
-import { withComponentDocs } from "./../../docs/utils/withParams";
-export const meta = {
-  title: "Components/Ads & analytics/SponsorshipAd",
-  component: SponsorshipAd,
-  ...withComponentDocs(adDocs)
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import AdScripts from './AdScripts.svelte';
+  import SponsorshipAd from './SponsorshipAd.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/SponsorshipAd',
+    component: SponsorshipAd,
+  });
 </script>
 
-<Template>
+{#snippet template()}
   <div>
     <AdScripts />
     <SponsorshipAd />
   </div>
-</Template>
+{/snippet}
 
-<Story name="Default" />
+<Story name="Demo" children={template} />

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import SponsorshipAd from './SponsorshipAd.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof SponsorshipAd;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [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;
-export default class SponsorshipAd extends SvelteComponent<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SponsorshipAd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SponsorshipAd = InstanceType<typeof SponsorshipAd>;
+export default SponsorshipAd;

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -1,11 +1,25 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
-<script>import Block from "../Block/Block.svelte";
-import ResponsiveAd from "./ResponsiveAd.svelte";
-export let id = "";
-let cls = "my-12";
-export { cls as class };
-export let adLabel = "";
-const desktopPlacementName = "reuters_sponsorlogo";
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import type { SponsorshipAd } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+
+  interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Label placed directly above the sponsorship ad
+     */
+    adLabel?: string;
+  }
+
+  let { id = '', class: cls = 'my-12', adLabel = '' }: Props = $props();
+
+  const desktopPlacementName: SponsorshipAd['desktop']['placementName'] =
+    'reuters_sponsorlogo';
 </script>
 
 <Block {id} class="freestar-adslot {cls}">

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

@@ -1,23 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-        /**
-           * Label placed directly above the sponsorship ad
-           */ adLabel?: string;
-    };
-    events: {
-        [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-ads-analytics-sponsorshipad--docs) */
-export default class SponsorshipAd extends SvelteComponent<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
+import type { SponsorshipAd } from './@types/ads';
+interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Label placed directly above the sponsorship ad
+     */
+    adLabel?: string;
 }
-export {};
+/** `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) */
+declare const SponsorshipAd: import("svelte").Component<Props, {}, "">;
+type SponsorshipAd = ReturnType<typeof SponsorshipAd>;
+export default SponsorshipAd;