@reuters-graphics/graphics-components 2.0.3 → 3.0.1

package/dist/actions/cssVariables/cssVariables.mdx

@@ -11,18 +11,17 @@ An action you can use to easily set [CSS variables](https://developer.mozilla.or
 <script>
   import { cssVariables } from '@reuters-graphics/graphics-components';
 
-  export let height = 300;
-  export let textColour = 'red';
+  let { height = 300, textColour = 'red' } = $props();
 
   // Create an object of variable names and CSS values...
-  $: variables = {
+  let variables = $derived({
     height: height + 'px',
     textColour: textColour,
-  };
+  });
 </script>
 
 <!-- Attach it to a parent element with the action -->
-<div use:cssVariables="{variables}">
+<div use:cssVariables={variables}>
   <p>My text...</p>
 </div>
 

package/dist/actions/cssVariables/index.d.ts

@@ -1,4 +1,4 @@
-declare function _default(node: any, props: any): {
-    update(newProps: any): void;
+declare const _default: (node: HTMLElement, props: Record<string, string>) => {
+    update(newProps: Record<string, string>): void;
 };
 export default _default;

package/dist/actions/cssVariables/index.js

@@ -1,20 +1,18 @@
 // Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars
 export default (node, props) => {
-  Object.entries(props).forEach(([key, value]) => {
-    node.style.setProperty(`--${key}`, value);
-  });
-
-  return {
-    update(newProps) {
-      Object.entries(newProps).forEach(([key, value]) => {
+    Object.entries(props).forEach(([key, value]) => {
         node.style.setProperty(`--${key}`, value);
-        delete props[key];
-      });
-
-      Object.keys(props).forEach((name) => {
-        node.style.removeProperty(`--${name}`);
-      });
-      props = newProps;
-    },
-  };
+    });
+    return {
+        update(newProps) {
+            Object.entries(newProps).forEach(([key, value]) => {
+                node.style.setProperty(`--${key}`, value);
+                delete props[key];
+            });
+            Object.keys(props).forEach((name) => {
+                node.style.removeProperty(`--${name}`);
+            });
+            props = newProps;
+        },
+    };
 };

package/dist/actions/resizeObserver/index.d.ts

@@ -1,4 +1,4 @@
-declare function _default(element: any, onResize: any): {
+declare const _default: (element: HTMLElement, onResize: (el: Element) => unknown) => {
     destroy: () => void;
 };
 export default _default;

package/dist/actions/resizeObserver/index.js

@@ -1,25 +1,23 @@
 // Shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165
 let observer;
 let callbacks;
-
 export default (element, onResize) => {
-  if (!observer) {
-    callbacks = new WeakMap();
-    observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const onResize = callbacks.get(entry.target);
-        if (onResize) onResize(entry.target);
-      }
-    });
-  }
-
-  callbacks.set(element, onResize);
-  observer.observe(element);
-
-  return {
-    destroy: () => {
-      callbacks.delete(element);
-      observer.unobserve(element);
-    },
-  };
+    if (!observer) {
+        callbacks = new WeakMap();
+        observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const onResize = callbacks.get(entry.target);
+                if (onResize)
+                    onResize(entry.target);
+            }
+        });
+    }
+    callbacks.set(element, onResize);
+    observer.observe(element);
+    return {
+        destroy: () => {
+            callbacks.delete(element);
+            observer.unobserve(element);
+        },
+    };
 };

package/dist/actions/resizeObserver/resizeObserver.mdx

@@ -14,7 +14,7 @@ An action you can use to easily to check when a DOM element's dimensions change
   let elementWidth = 0;
 </script>
 
-<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
+<div use:resizeObserver={(element) => (elementWidth = element.clientWidth)}>
   My width is: {elementWidth}
 </div>
 ```

package/dist/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    %sveltekit.head%
+  </head>
+  <body>
+    %sveltekit.body%
+  </body>
+</html>

package/dist/components/@types/global.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'svelte';
+import type { Component } from 'svelte';
 /**
  * Used for the list of <option> tags nested in a <select> input.
  */
@@ -18,23 +18,25 @@ export type HeadlineSize = 'small' | 'normal' | 'big' | 'bigger' | 'biggest';
  * A step in the Scroller component.
  */
 export interface ScrollerStep {
-    altText?: string;
     /**
      * A background component
-     * @required
      */
-    background: ComponentType;
+    background: Component;
     /**
      * Optional props for background component
      */
     backgroundProps?: object;
     /**
-     * Foreground can either be a component or markdown-formatted string.
-     * @required
+     * A component or markdown-formatted string
      */
-    foreground: ComponentType | string;
+    foreground: Component | string;
     /**
      * Optional props for foreground component
      */
     foregroundProps?: object;
+    /**
+     * Optional alt text for the background, read aloud after the foreground text. You can add it to each step or just to the first step to describe the entire scroller graphic.
+     */
+    altText?: string;
 }
+export type ForegroundPosition = 'middle' | 'left' | 'right' | 'left opposite' | 'right opposite';

package/dist/components/AdSlot/AdScripts.svelte

@@ -1,15 +1,18 @@
-<script>import { onMount } from "svelte";
-import { loadBootstrap } from "./adScripts/bootstrap";
-import { loadScript } from "./adScripts/loadScript";
-import OneTrust from "./OneTrust.svelte";
-onMount(() => {
-  window.graphicsAdQueue = window.graphicsAdQueue || [];
-  loadScript(
-    "https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js",
-    { onload: loadBootstrap, async: false }
-  );
-  loadScript("https://a.pub.network/reuters-com/pubfig.min.js");
-});
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { loadBootstrap } from './adScripts/bootstrap';
+  import { loadScript } from './adScripts/loadScript';
+  import OneTrust from './OneTrust.svelte';
+
+  onMount(() => {
+    window.graphicsAdQueue = window.graphicsAdQueue || [];
+    loadScript(
+      'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
+      { onload: loadBootstrap, async: false }
+    );
+    // Load Freestar script
+    loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
+  });
 </script>
 
 <svelte:head>

package/dist/components/AdSlot/AdScripts.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 AdScriptsProps = typeof __propDef.props;
-export type AdScriptsEvents = typeof __propDef.events;
-export type AdScriptsSlots = typeof __propDef.slots;
-export default class AdScripts extends SvelteComponent<AdScriptsProps, AdScriptsEvents, AdScriptsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AdScripts: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AdScripts = InstanceType<typeof AdScripts>;
+export default AdScripts;

package/dist/components/AdSlot/AdSlot.svelte

@@ -1,39 +1,61 @@
-<script>import { onMount } from "svelte";
-import { getRandomAdId } from "./utils";
-export let placementName;
-export let adType;
-export let dataFreestarAd = "__970x250";
-const adId = getRandomAdId();
-onMount(() => {
-  const adSlot = {
-    placementName,
-    slotId: adId,
-    targeting: {
-      div_id: placementName,
-      type: adType
-    }
-  };
-  const freestar = window?.freestar;
-  if (freestar) {
-    freestar.queue.push(function() {
-      freestar.newAdSlots([adSlot], freestar.config.channel);
-    });
-  } else {
-    window.graphicsAdQueue = window.graphicsAdQueue || [];
-    window.graphicsAdQueue.push(adSlot);
+<script lang="ts">
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
+  import { onMount } from 'svelte';
+  import { getRandomAdId } from './utils';
+
+  interface Props {
+    placementName: DesktopPlacementName | MobilePlacementName;
+    adType: DesktopAdType | MobileAdType;
+    /**
+     * @TODO Unclear at what level this bit of config is used with placements...
+     */
+    dataFreestarAd?: string;
   }
-  return () => {
-    const freestar2 = window?.freestar;
-    if (freestar2) {
-      freestar2.queue.push(function() {
-        freestar2.deleteAdSlots(adId);
+
+  let { placementName, adType, dataFreestarAd = '__970x250' }: Props = $props();
+
+  const adId = getRandomAdId();
+
+  onMount(() => {
+    const adSlot = {
+      placementName,
+      slotId: adId,
+      targeting: {
+        div_id: placementName,
+        type: adType,
+      },
+    };
+    // @ts-ignore window global
+    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);
     }
-  };
-});
+
+    return () => {
+      // @ts-ignore window global
+      const freestar = window?.freestar;
+      if (freestar) {
+        freestar.queue.push(function () {
+          freestar.deleteAdSlots(adId);
+        });
+      }
+    };
+  });
 </script>
 
-<div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
 
 <style>
   :global(div.freestar-adslot:has(.unfulfilled-ad)) {

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

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
 import type { DesktopAdType, DesktopPlacementName, MobileAdType, MobilePlacementName } from './@types/ads';
-declare const __propDef: {
-    props: {
-        placementName: DesktopPlacementName | MobilePlacementName;
-        adType: DesktopAdType | MobileAdType;
-        /**
-           * @TODO Unclear at what level this bit of config is used with placements...
-           */ dataFreestarAd?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AdSlotProps = typeof __propDef.props;
-export type AdSlotEvents = typeof __propDef.events;
-export type AdSlotSlots = typeof __propDef.slots;
-export default class AdSlot extends SvelteComponent<AdSlotProps, AdSlotEvents, AdSlotSlots> {
+interface Props {
+    placementName: DesktopPlacementName | MobilePlacementName;
+    adType: DesktopAdType | MobileAdType;
+    /**
+     * @TODO Unclear at what level this bit of config is used with placements...
+     */
+    dataFreestarAd?: string;
 }
-export {};
+declare const AdSlot: import("svelte").Component<Props, {}, "">;
+type AdSlot = ReturnType<typeof AdSlot>;
+export default AdSlot;

package/dist/components/AdSlot/{stories/docs/inline.md → InlineAd.mdx}

@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InlineAdStories from './InlineAd.stories.svelte';
+
+<Meta of={InlineAdStories} />
+
+# InlineAd
+
 Add programmatic ads inline on your page.
 
 > **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
@@ -17,7 +25,7 @@ Add programmatic ads inline on your page.
 <script>
   import { InlineAd } from '@reuters-graphics/graphics-components';
 
-  export let embedded = false;
+  let { embedded = false } = $props();
 </script>
 
 {#each content.blocks as block}
@@ -38,9 +46,11 @@ You may add **up to three** inline ads per page, but must set the `n` prop on mu
 
 ```svelte
 <!-- First inline ad on the page -->
-<InlineAd n="{1}" />
+<InlineAd n={1} />
 <!-- ... second ... -->
-<InlineAd n="{2}" />
+<InlineAd n={2} />
 <!-- ... third and final. -->
-<InlineAd n="{3}" />
+<InlineAd n={3} />
 ```
+
+<Canvas of={InlineAdStories.Demo} />

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

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

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import InlineAd from './InlineAd.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 InlineAd;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InlineAdProps = typeof __propDef.props;
-export type InlineAdEvents = typeof __propDef.events;
-export type InlineAdSlots = typeof __propDef.slots;
-export default class InlineAd extends SvelteComponent<InlineAdProps, InlineAdEvents, InlineAdSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const InlineAd: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InlineAd = InstanceType<typeof InlineAd>;
+export default InlineAd;

package/dist/components/AdSlot/InlineAd.svelte

@@ -1,11 +1,22 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
-<script>import Block from "../Block/Block.svelte";
-import ResponsiveAd from "./ResponsiveAd.svelte";
-export let id = "";
-export let n = 1;
-let cls = "my-12";
-export { cls as class };
-const desktopPlacementName = `reuters_desktop_native_${n}`;
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import type { InlineAd } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+
+  interface 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. Defaults to `my-12`. */
+    class?: string;
+  }
+
+  let { id = '', class: cls = 'my-12', n = 1 }: Props = $props();
+
+  const desktopPlacementName: InlineAd['desktop']['placementName'] = `reuters_desktop_native_${n}`;
 </script>
 
 <Block {id} class="freestar-adslot {cls}">

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

@@ -1,21 +1,13 @@
-import { SvelteComponent } 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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-ads-analytics-inlinead--docs) */
-export default class InlineAd extends SvelteComponent<InlineAdProps, InlineAdEvents, InlineAdSlots> {
+import type { InlineAd } from './@types/ads';
+interface 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. Defaults to `my-12`. */
+    class?: string;
 }
-export {};
+/** `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) */
+declare const InlineAd: import("svelte").Component<Props, {}, "">;
+type InlineAd = ReturnType<typeof InlineAd>;
+export default InlineAd;

package/dist/components/AdSlot/{stories/docs/leaderboard.md → LeaderboardAd.mdx}

@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as LeaderboardAdStories from './LeaderboardAd.stories.svelte';
+
+<Meta of={LeaderboardAdStories} />
+
+# LeaderboardAd
+
 Add a leaderboard ad to your page.
 
 > **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
@@ -19,3 +27,5 @@ Add a leaderboard ad to your page.
 <LeaderboardAd />
 <SiteHeader />
 ```
+
+<Canvas of={LeaderboardAdStories.Demo} />

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

@@ -1,32 +1,29 @@
-<script context="module">import LeaderboardAd from "./LeaderboardAd.svelte";
-import adDocs from "./stories/docs/leaderboard.md?raw";
-import { withComponentDocs } from "./../../docs/utils/withParams";
-export const meta = {
-  title: "Components/Ads & analytics/LeaderboardAd",
-  component: LeaderboardAd,
-  ...withComponentDocs(adDocs)
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+<script module lang="ts">
   import AdScripts from './AdScripts.svelte';
+  import LeaderboardAd from './LeaderboardAd.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/LeaderboardAd',
+    component: LeaderboardAd,
+  });
 </script>
 
-<Template>
+{#snippet template()}
   <div>
     <AdScripts />
     <LeaderboardAd />
   </div>
-</Template>
+{/snippet}
 
-<Story name="Default" />
+<Story name="Demo" children={template} />
 
 <style>
   div {
     min-height: 200vh;
     background-size: 40px 40px;
-    background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
+    background-image:
+      linear-gradient(to right, lightgrey 1px, transparent 1px),
       linear-gradient(to bottom, lightgrey 1px, transparent 1px);
   }
 </style>