@reuters-graphics/graphics-components 1.0.29 → 1.1.0

package/dist/actions/cssVariables/cssVariables.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../docs/utils/docsPage.js';
+
+<Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# `cssVariables`
+
+An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this:
+
+```svelte
+<script>
+  import { cssVariables } from '@reuters-graphics/graphics-components';
+
+  export let height = 300;
+  export let textColour = 'red';
+
+  // Create an object of variable names and CSS values...
+  $: variables = {
+    height: height + 'px',
+    textColour: textColour,
+  };
+</script>
+
+<!-- Attach it to a parent element with the action -->
+<div use:cssVariables="{variables}">
+  <p>My text...</p>
+</div>
+
+<style lang="scss">
+  /**
+   * Now use your variables in your SCSS!
+   */
+  div {
+    height: var(--height);
+    p {
+      color: var(--textColour);
+    }
+  }
+</style>
+```

package/dist/actions/resizeObserver/resizeObserver.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/blocks';
+import { parameters } from '../../docs/utils/docsPage.js';
+
+<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# `resizeObserver`
+
+An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this:
+
+```svelte
+<script>
+  import { resizeObserver } from '@reuters-graphics/graphics-components';
+
+  let elementWidth = 0;
+</script>
+
+<div use:resizeObserver="{(element) => (elementWidth = element.clientWidth)}">
+  My width is: {elementWidth}
+</div>
+```

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

@@ -27,7 +27,7 @@ export interface ScrollerStep {
     /**
      * Optional props for background component
      */
-    backgroundProps?: Object;
+    backgroundProps?: object;
     /**
      * Foreground can either be a component or markdown-formatted string.
      * @required
@@ -36,5 +36,5 @@ export interface ScrollerStep {
     /**
      * Optional props for foreground component
      */
-    foregroundProps?: Object;
+    foregroundProps?: object;
 }

package/dist/components/@types/global.js

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

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

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

package/dist/components/AdSlot/AdScripts.svelte

@@ -1,18 +1,15 @@
-<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 }
-    );
-    // Load Freestar script
-    loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
-  });
+<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>
 
 <svelte:head>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<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> {
+}
+export {};

package/dist/components/AdSlot/AdSlot.svelte

@@ -1,35 +1,40 @@
-<script>import { onMount } from 'svelte';
-import { getRandomAdId } from './utils';
+<script>import { onMount } from "svelte";
+import { getRandomAdId } from "./utils";
 export let placementName;
 export let adType;
-/**
- * @TODO Unclear at what level this bit of config is used with placements...
- */
-export let dataFreestarAd = '__970x250';
+export let dataFreestarAd = "__970x250";
 const adId = getRandomAdId();
 onMount(() => {
-    const adSlot = {
-        placementName,
-        slotId: adId,
-        targeting: {
-            div_id: placementName,
-            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.
+  const adSlot = {
+    placementName,
+    slotId: adId,
+    targeting: {
+      div_id: placementName,
+      type: adType
     }
-    else {
-        window.graphicsAdQueue = window.graphicsAdQueue || [];
-        window.graphicsAdQueue.push(adSlot);
+  };
+  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);
+  }
+  return () => {
+    const freestar2 = window?.freestar;
+    if (freestar2) {
+      freestar2.queue.push(function() {
+        freestar2.deleteAdSlots(adId);
+      });
     }
+  };
 });
 </script>
 
 <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+
+<style>div :global(iframe) {
+  width: 100%;
+}</style>

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { DesktopAdType, DesktopPlacementName, MobileAdType, MobilePlacementName } from './@types/ads';
 declare const __propDef: {
     props: {
@@ -12,10 +12,12 @@ declare const __propDef: {
         [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 SvelteComponentTyped<AdSlotProps, AdSlotEvents, AdSlotSlots> {
+export default class AdSlot extends SvelteComponent<AdSlotProps, AdSlotEvents, AdSlotSlots> {
 }
 export {};

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

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

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+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> {
+}
+export {};

package/dist/components/AdSlot/InlineAd.svelte

@@ -1,23 +1,20 @@
 <!-- @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. */
+<script>import Block from "../Block/Block.svelte";
+import ResponsiveAd from "./ResponsiveAd.svelte";
+export let id = "";
 export let n = 1;
-/** Add a class to target with SCSS. */
-let cls = 'my-12';
+let cls = "my-12";
 export { cls as class };
 const desktopPlacementName = `reuters_desktop_native_${n}`;
 </script>
 
-<Block id="{id}" class="freestar-adslot {cls}">
+<Block {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}" />
+          <ResponsiveAd {desktopPlacementName} />
         </div>
       </div>
     </div>

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

@@ -1,19 +1,21 @@
-import { SvelteComponentTyped } from "svelte";
+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';
+        /** 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-InlineAd--default) */
-export default class InlineAd extends SvelteComponentTyped<InlineAdProps, InlineAdEvents, InlineAdSlots> {
+export default class InlineAd extends SvelteComponent<InlineAdProps, InlineAdEvents, InlineAdSlots> {
 }
 export {};

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

@@ -0,0 +1,35 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import adDocs from './stories/docs/leaderboard.md?raw';
+
+  import AdScripts from './AdScripts.svelte';
+  import LeaderboardAd from './LeaderboardAd.svelte';
+
+  import { withComponentDocs } from './../../docs/utils/withParams';
+
+  const meta = {
+    ...withComponentDocs(adDocs),
+  };
+</script>
+
+<Meta title="Components/LeaderboardAd" component="{LeaderboardAd}" {...meta} />
+
+<Template>
+  <div>
+    <AdScripts />
+    <LeaderboardAd />
+  </div>
+</Template>
+
+<Story name="Default" />
+
+<style>
+  div {
+    min-height: 200vh;
+    background-size: 40px 40px;
+    background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
+      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
+  }
+</style>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  LeaderboardAdProps */
+/** @typedef {typeof __propDef.events}  LeaderboardAdEvents */
+/** @typedef {typeof __propDef.slots}  LeaderboardAdSlots */
+export default class LeaderboardAd extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LeaderboardAdProps = typeof __propDef.props;
+export type LeaderboardAdEvents = typeof __propDef.events;
+export type LeaderboardAdSlots = 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/LeaderboardAd.svelte

@@ -1,35 +1,32 @@
 <!-- @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. */
-export let id = '';
-/** Add a class to target with SCSS. */
-export let cls = '';
+<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';
+const desktopPlacementName = "reuters_desktop_leaderboard_atf";
 let sticky = false;
-// Handles transition out... somewhat dumb, but here we are...
 let unstick = false;
 onMount(() => {
-    const handleScroll = () => {
-        const scrollTop = window.scrollY;
-        if (scrollTop >= adSize * 1.1) {
-            sticky = true;
-            setTimeout(() => {
-                unstick = true;
-                setTimeout(() => {
-                    sticky = false;
-                }, 400);
-            }, 1500);
-            window.removeEventListener('scroll', handleScroll);
-        }
-    };
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-        window.removeEventListener('scroll', handleScroll);
-    };
+  const handleScroll = () => {
+    const scrollTop = window.scrollY;
+    if (scrollTop >= adSize * 1.1) {
+      sticky = true;
+      setTimeout(() => {
+        unstick = true;
+        setTimeout(() => {
+          sticky = false;
+        }, 400);
+      }, 1500);
+      window.removeEventListener("scroll", handleScroll);
+    }
+  };
+  window.addEventListener("scroll", handleScroll);
+  return () => {
+    window.removeEventListener("scroll", handleScroll);
+  };
 });
 </script>
 
@@ -37,16 +34,16 @@ onMount(() => {
 
 <div
   class="leaderboard__sticky {cls}"
-  class:sticky="{sticky}"
-  class:unstick="{unstick}"
-  id="{id}"
+  class:sticky
+  class:unstick
+  {id}
   style="--height: {adSize}px;"
 >
   <div class="ad-block">
     <div class="ad-slot__container">
       <div class="ad-slot__inner">
         <div>
-          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+          <ResponsiveAd {desktopPlacementName} />
         </div>
       </div>
     </div>

package/dist/{@types/components → components}/AdSlot/LeaderboardAd.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;
@@ -8,11 +8,13 @@ declare const __propDef: {
         [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-LeaderboardAd--default) */
-export default class LeaderboardAd extends SvelteComponentTyped<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
+export default class LeaderboardAd extends SvelteComponent<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
 }
 export {};

package/dist/components/AdSlot/OneTrust.svelte

@@ -1,39 +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';
+<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);
     }
-  };
-
-  const handleScroll = () => {
-    if (lastScroll > window.scrollY) {
-      if (!showManagePreferences) {
-        togglePrefs(true);
-      }
-    } else {
-      if (showManagePreferences && window.scrollY > 250) {
-        togglePrefs(false);
-      }
+  } else {
+    if (showManagePreferences && window.scrollY > 250) {
+      togglePrefs(false);
     }
-    lastScroll = window.scrollY;
-  };
-
-  onMount(() => {
-    window.addEventListener('scroll', throttle(handleScroll, 250), {
-      passive: true,
-    });
+  }
+  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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<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> {
+}
+export {};