@reuters-graphics/graphics-components 1.0.7 → 1.0.8--canary.c0819ff.0

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AdScriptsProps = typeof __propDef.props;
+export type AdScriptsEvents = typeof __propDef.events;
+export type AdScriptsSlots = typeof __propDef.slots;
+export default class AdScripts extends SvelteComponentTyped<AdScriptsProps, AdScriptsEvents, AdScriptsSlots> {
+}
+export {};

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * The unique placement name from FreeStar dashboard.
+           * @required
+           */ placementName: string;
+        /**
+           * The unique slot Id from FreeStar dashboard.
+           */ dataFreestarAd: string;
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ cls?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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/scripts/bootstrapLoad.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => void;
+export default _default;

package/dist/@types/components/AdSlot/scripts/getParameterByName.d.ts

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

package/dist/@types/components/AdSlot/scripts/ias.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<unknown>;
+export default _default;

package/dist/@types/components/Framer/Typeahead/index.svelte.d.ts

@@ -12,11 +12,11 @@ export default class Index extends SvelteComponentTyped<{
         index: number;
         embed: string;
     }) => boolean;
+    id?: string;
     extract?: (item: {
         index: number;
         embed: string;
     }) => any;
-    id?: string;
     disable?: (item: {
         index: number;
         embed: string;
@@ -80,11 +80,11 @@ declare const __propDef: {
             index: number;
             embed: string;
         }) => boolean;
+        id?: string;
         extract?: (item: {
             index: number;
             embed: string;
         }) => any;
-        id?: string;
         disable?: (item: {
             index: number;
             embed: string;

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

@@ -1,6 +1,8 @@
 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 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/AdScripts.svelte

@@ -0,0 +1,31 @@
+<script>import { onMount } from 'svelte';
+onMount(() => {
+    window.graphicsAdQueue = window.graphicsAdQueue || [];
+});
+</script>
+
+<svelte:head>
+  <link rel="preconnect" href="https://a.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://b.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://d.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://btloader.com/" crossorigin="" />
+  <link rel="preconnect" href="https://api.btloader.com/" crossorigin="" />
+  <link
+    rel="preconnect"
+    href="https://confiant-integrations.global.ssl.fastly.net"
+    crossorigin=""
+  />
+  <link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
+
+  <script
+    src="https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js"
+    on:load="{bootstrapLoad}"></script>
+
+  <script
+    src="https://a.pub.network/reuters-com/pubfig.min.js"
+    data-cfasync="false"
+    async></script>
+</svelte:head>

package/dist/components/AdSlot/AdSlot.svelte

@@ -0,0 +1,29 @@
+<script>/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
+/**
+ * The unique placement name from FreeStar dashboard.
+ * @required
+ */
+export let placementName;
+/**
+ * The unique slot Id from FreeStar dashboard.
+ */
+export let dataFreestarAd;
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+import { onMount } from 'svelte';
+import Block from '../Block/Block.svelte';
+onMount(() => {
+    window.graphicsAdQueue = window.graphicsAdQueue || [];
+    window.graphicsAdQueue.push({
+        placementName,
+        slotId: placementName,
+    });
+});
+</script>
+
+<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) -->
+<Block id="{id}" cls="freestar-adslot {cls}">
+  <div data-freestar-ad="{dataFreestarAd || null}" id="{placementName}"></div>
+</Block>

package/dist/components/AdSlot/scripts/bootstrapLoad.js

@@ -0,0 +1,64 @@
+import getParameterByName from './getParameterByName';
+import Ias from './ias';
+const ONETRUST_LOGS = 'ot_logs';
+const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
+const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
+export default () => {
+    const freestar = window.freestar || {};
+    freestar.queue = freestar.queue || [];
+    freestar.config = freestar.config || {};
+    freestar.config.enabled_slots = [];
+    freestar.initCallback = function () {
+        freestar.config.enabled_slots.length === 0 ?
+            (freestar.initCallbackCalled = false) :
+            freestar.newAdSlots(freestar.config.enabled_slots);
+    };
+    // Ask Rachel
+    freestar.config.channel = '/4735792/reuters.com/home';
+    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 {
+                ...onetrustResponse,
+                ias: iasResponse,
+            };
+        });
+    });
+    window.bootstrap.getResults((result) => {
+        // Set GAM
+        window.googletag = window.googletag || { cmd: [] };
+        window.googletag.cmd.push(() => {
+            window.googletag.pubads().enableSingleRequest();
+            window.googletag.pubads().enableAsyncRendering();
+            window.googletag.pubads().collapseEmptyDivs(true);
+            // 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);
+            }
+        });
+        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
+        });
+    });
+};
+//# sourceMappingURL=bootstrapLoad.js.map

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

@@ -0,0 +1,12 @@
+export default (name, url = window.location.href) => {
+    // eslint-disable-next-line no-useless-escape
+    name = name.replace(/[\[\]]/g, '\\$&');
+    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+    const results = regex.exec(url);
+    if (!results)
+        return null;
+    if (!results[2])
+        return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+};
+//# sourceMappingURL=getParameterByName.js.map

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

@@ -0,0 +1,25 @@
+const IAS_REQUEST_TIMEOUT = 600;
+export default () => {
+    return new Promise((resolve) => {
+        const timerId = setTimeout(() => {
+            resolve('Resolved with timeout');
+        }, IAS_REQUEST_TIMEOUT);
+        const setupIAS = () => {
+            clearTimeout(timerId);
+            window.__iasPET = window.__iasPET || {};
+            window.__iasPET.queue = window.__iasPET.queue || [];
+            window.__iasPET.pubId = '931336'; // Ask Rachel
+            resolve('loaded');
+        };
+        // Set up IAS pet.js
+        const script = document.createElement('script');
+        script.src = '//static.adsafeprotected.com/iasPET.1.js';
+        script.setAttribute('async', 'async');
+        document.head.appendChild(script);
+        script.onload = setupIAS;
+        script.onerror = () => {
+            resolve('error');
+        };
+    });
+};
+//# sourceMappingURL=ias.js.map

package/dist/components/Article/Article.svelte

@@ -26,7 +26,7 @@ $: columnWidthVars = {
 <main>
   <article
     id="{id}"
-    class:embedded="{embedded}"
+    class:embedded
     role="{role}"
     use:cssVariables="{columnWidthVars}"
   >

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -65,6 +65,12 @@ let isFocused = false;
 let containerWidth;
 $: containerHeight =
     containerWidth && heightRatio ? containerWidth * heightRatio : height;
+$: w = (imgOffset && imgOffset.width) || 0;
+$: x = w * offset;
+$: figStyle = `width:100%;height:${containerHeight}px;`;
+$: imgStyle = 'width:100%;height:100%;';
+$: beforeOverlayClip =
+    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
 const onFocus = () => (isFocused = true);
 const onBlur = () => (isFocused = false);
 const handleKeyDown = (e) => {
@@ -114,12 +120,6 @@ const start = (e) => {
 const end = () => {
     sliding = false;
 };
-$: w = (imgOffset && imgOffset.width) || 0;
-$: x = w * offset;
-$: figStyle = `width:100%;height:${containerHeight}px;`;
-$: imgStyle = 'width:100%;height:100%;';
-$: beforeOverlayClip =
-    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
 if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
     console.warn('Missing required src or alt props for BeforeAfter component');
 }

package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte

@@ -6,12 +6,11 @@ import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon={faWindowRestore} />
+      <Fa icon="{faWindowRestore}" />
     </a>
   </div>
 {/if}
 
-
 <style>div {
   position: fixed;
   bottom: 5px;
@@ -23,4 +22,4 @@ div a {
 }
 div a:hover {
   color: #666;
-}</style>
+}</style>

package/dist/components/Framer/Framer.svelte

@@ -28,7 +28,7 @@
   $: embedTitles = getUniqNames(embeds);
 
   // @ts-ignore
-  let pymParent;
+  let pymParent; // eslint-disable-line no-unused-vars
 
   const reframe = (embed) => {
     // Bit of hack for handling adding query strings dynamically to embeds.

package/dist/components/Framer/Resizer/index.svelte

@@ -106,6 +106,7 @@
       <div
         class="handle"
         tabindex="0"
+        role="button"
         style="left: calc({offset * 100}% - 5px);"
         on:mousedown="{start}"
         on:focus="{onFocus}"

package/dist/components/Framer/Typeahead/index.svelte

@@ -57,6 +57,23 @@
   let prevResults = '';
   let isFocused = false;
 
+  $: options = { pre: '<mark>', post: '</mark>', extract };
+  $: results =
+    value !== ''
+      ? fuzzy
+          .filter(value, data, options)
+          .filter(({ score }) => score > 0)
+          .slice(0, limit)
+          .filter((result) => !filter(result.original))
+          .map((result) => ({ ...result, disabled: disable(result.original) }))
+      : data.map((d) => ({ string: extract(d), original: d }));
+
+  $: resultsId = results.map((result) => extract(result.original)).join('');
+  $: showResults = !hideDropdown && results.length > 0 && isFocused;
+  $: if (showDropdownOnFocus) {
+    showResults = showResults && isFocused;
+  }
+
   afterUpdate(() => {
     if (prevResults !== resultsId && autoselect) {
       selectedIndex = getNextNonDisabledIndex();
@@ -137,23 +154,6 @@
 
   const open = () => (hideDropdown = false);
   const close = () => (hideDropdown = true);
-
-  $: options = { pre: '<mark>', post: '</mark>', extract };
-  $: results =
-    value !== ''
-      ? fuzzy
-          .filter(value, data, options)
-          .filter(({ score }) => score > 0)
-          .slice(0, limit)
-          .filter((result) => !filter(result.original))
-          .map((result) => ({ ...result, disabled: disable(result.original) }))
-      : data.map((d) => ({ string: extract(d), original: d }));
-
-  $: resultsId = results.map((result) => extract(result.original)).join('');
-  $: showResults = !hideDropdown && results.length > 0 && isFocused;
-  $: if (showDropdownOnFocus) {
-    showResults = showResults && isFocused;
-  }
 </script>
 
 <svelte:window
@@ -171,6 +171,7 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown="{results.length > 0}"
+  aria-controls="{id}-listbox"
   aria-expanded="{showResults ||
     (isFocused && value.length > 0 && results.length === 0)}"
   id="{id}-typeahead"
@@ -247,6 +248,12 @@
             selectedIndex = index;
             select();
           }}"
+          on:keyup="{(e) => {
+            if (e.key !== 'Enter') return;
+            if (result.disabled) return;
+            selectedIndex = index;
+            select();
+          }}"
           on:mouseenter="{() => {
             if (result.disabled) return;
             selectedIndex = index;

package/dist/components/HeroHeadline/Hero.svelte

@@ -71,25 +71,6 @@ import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
 import Block from '../Block/Block.svelte';
 import Byline from '../Byline/Byline.svelte';
 import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-let hedClass;
-$: {
-    switch (hedSize) {
-        case 'biggest':
-            hedClass = 'text-6xl';
-            break;
-        case 'bigger':
-            hedClass = 'text-5xl';
-            break;
-        case 'big':
-            hedClass = 'text-4xl';
-            break;
-        case 'small':
-            hedClass = 'text-2xl';
-            break;
-        default:
-            hedClass = 'text-3xl';
-    }
-}
 </script>
 
 <div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">

package/dist/components/PhotoPack/docProps.js

@@ -5,23 +5,23 @@ export const getPhotoPackPropsFromDoc = (docBlock, assetsPath = '') => {
         cls: docBlock.Class,
         width: docBlock.Width,
         textWidth: docBlock.textWidth,
-        gap: docBlock.Gap && isNaN(docBlock.Gap)
-            ? null
-            : parseInt(docBlock.Gap),
+        gap: docBlock.Gap && isNaN(docBlock.Gap) ?
+            null :
+            parseInt(docBlock.Gap),
         images: docBlock.Images.map((img) => ({
-            src: /^https?:\/\/|^\/\//i.test(img.Src)
-                ? img.Src
-                : urlJoin(assetsPath, img.Src),
+            src: /^https?:\/\/|^\/\//i.test(img.Src) ?
+                img.Src :
+                urlJoin(assetsPath, img.Src),
             altText: img.AltText,
             caption: img.Caption,
-            maxHeight: img.MaxHeight && isNaN(img.MaxHeight)
-                ? null
-                : parseFloat(img.MaxHeight),
+            maxHeight: img.MaxHeight && isNaN(img.MaxHeight) ?
+                null :
+                parseFloat(img.MaxHeight),
         })),
         layouts: docBlock.Layouts.map((layout) => ({
-            breakpoint: isNaN(layout.Breakpoint)
-                ? null
-                : parseFloat(layout.Breakpoint),
+            breakpoint: isNaN(layout.Breakpoint) ?
+                null :
+                parseFloat(layout.Breakpoint),
             rows: layout.Rows.split(',').map((r) => parseInt(r.trim())),
         })),
     };

package/dist/components/Scroller/Embedded/index.svelte

@@ -8,11 +8,19 @@ import Foreground from './Foreground.svelte';
 {#each steps as step, index}
   <!-- Background first -->
   {#if embeddedLayout === 'bf'}
-    <Background {step} {index} {backgroundWidth} />
-    <Foreground {step} {index} />
-  <!-- Foreground first, default -->
+    <Background
+      step="{step}"
+      index="{index}"
+      backgroundWidth="{backgroundWidth}"
+    />
+    <Foreground step="{step}" index="{index}" />
+    <!-- Foreground first, default -->
   {:else}
-    <Foreground {step} {index} />
-    <Background {step} {index} {backgroundWidth} />
+    <Foreground step="{step}" index="{index}" />
+    <Background
+      step="{step}"
+      index="{index}"
+      backgroundWidth="{backgroundWidth}"
+    />
   {/if}
-{/each}
+{/each}

package/dist/components/Sharer/Sharer.svelte

@@ -1,90 +1,88 @@
 <script>
-import Fa from 'svelte-fa/src/fa.svelte';
-import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
-import { throttle } from 'lodash-es';
-import handleTweet from './utils/twitter';
-import handlePost from './utils/facebook';
-import UAParser from 'ua-parser-js';
-import { onMount } from 'svelte';
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
+  import { faTwitter } from '@fortawesome/free-brands-svg-icons';
+  import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+  import { throttle } from 'lodash-es';
+  import handleTweet from './utils/twitter';
+  import handlePost from './utils/facebook';
+  import UAParser from 'ua-parser-js';
+  import { onMount } from 'svelte';
 
-const uaParser = new UAParser();
+  const uaParser = new UAParser();
 
-const getMetaContent = (property) => {
-  const el = document.querySelector(`meta[property="${property}"]`);
-  if (el) return el.getAttribute('content');
-  return '';
-};
-const handleShare = async function() {
-  if (showSecondaryDialogue) {
-    showSecondaryDialogue = false;
-    return;
-  }
-  if (
-    navigator &&
-    navigator.share &&
-    uaParser.getBrowser().name !== 'Safari'
-  ) {
-    try {
-      await navigator.share({
-        title: getMetaContent('og:title'),
-        text: getMetaContent('og:description'),
-        url: window.location.href,
-      });
-    } catch (err) {
-      console.log('Share error', err);
+  const getMetaContent = (property) => {
+    const el = document.querySelector(`meta[property="${property}"]`);
+    if (el) return el.getAttribute('content');
+    return '';
+  };
+  const handleShare = async function () {
+    if (showSecondaryDialogue) {
+      showSecondaryDialogue = false;
+      return;
     }
-  // Otherwise copy URL to a clipboard
-  } else {
-    showSecondaryDialogue = true;
-  }
-};
-let lastScroll = 0;
-let showShare = false;
-let showSecondaryDialogue = false;
-function handleScroll() {
-  if (lastScroll > window.scrollY) {
-    if (!showShare) {
-      showShare = true;
+    if (
+      navigator &&
+      navigator.share &&
+      uaParser.getBrowser().name !== 'Safari'
+    ) {
+      try {
+        await navigator.share({
+          title: getMetaContent('og:title'),
+          text: getMetaContent('og:description'),
+          url: window.location.href,
+        });
+      } catch (err) {
+        console.log('Share error', err);
+      }
+      // Otherwise copy URL to a clipboard
+    } else {
+      showSecondaryDialogue = true;
     }
-  } else {
-    if (showShare) {
-      if (showSecondaryDialogue) {
-        showSecondaryDialogue = false;
-      } else {
-        showShare = false;
+  };
+  let lastScroll = 0;
+  let showShare = false;
+  let showSecondaryDialogue = false;
+  function handleScroll() {
+    if (lastScroll > window.scrollY) {
+      if (!showShare) {
+        showShare = true;
+      }
+    } else {
+      if (showShare) {
+        if (showSecondaryDialogue) {
+          showSecondaryDialogue = false;
+        } else {
+          showShare = false;
+        }
       }
     }
+    lastScroll = window.scrollY;
   }
-  lastScroll = window.scrollY;
-}
-onMount(() => {
-  window.addEventListener('scroll', throttle(handleScroll, 250));
-});
+  onMount(() => {
+    window.addEventListener('scroll', throttle(handleScroll, 250));
+  });
 </script>
 
-
-<div class="sharetool" class:active={showShare}>
-  <div class="drawer" class:active={showSecondaryDialogue }>
+<div class="sharetool" class:active="{showShare}">
+  <div class="drawer" class:active="{showSecondaryDialogue}">
     <button
-      on:click={handleShare}
+      on:click="{handleShare}"
       title="Share this!"
-      disabled={showSecondaryDialogue}
-      class='box-shadow-low'
+      disabled="{showSecondaryDialogue}"
+      class="box-shadow-low"
     >
-      <div><Fa fw icon={faShareAlt} /></div>
+      <div><Fa fw icon="{faShareAlt}" /></div>
     </button>
-    <button on:click={handleTweet} title="Twitter">
-      <div><Fa fw icon={faTwitter} /></div>
+    <button on:click="{handleTweet}" title="Twitter">
+      <div><Fa fw icon="{faTwitter}" /></div>
     </button>
-    <button on:click={handlePost} title="Facebook">
-      <div><Fa fw icon={faFacebookF} /></div>
+    <button on:click="{handlePost}" title="Facebook">
+      <div><Fa fw icon="{faFacebookF}" /></div>
     </button>
   </div>
 </div>
 
-
 <style>.sharetool.active {
   bottom: 10px;
 }
@@ -154,4 +152,4 @@ onMount(() => {
   .drawer.active {
     width: calc(9.5rem + 4px);
   }
-}</style>
+}</style>

package/dist/components/Video/Controls.svelte

@@ -29,7 +29,7 @@
 <button
   on:click="{forwardBtnClick}"
   style="
-    opacity: {controlsOpacity}; 
+    opacity: {controlsOpacity};
     top: {controlsPosition === 'top left' || controlsPosition === 'top right'
     ? `${10}px`
     : controlsPosition === 'center'

package/dist/index.js

@@ -5,9 +5,11 @@ export { default as resizeObserver } from './actions/resizeObserver/index.js';
 // Components
 export {
   default as Analytics,
-  registerPageview,
+  registerPageview
 } 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 BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
@@ -43,7 +45,7 @@ export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,
   // @ts-ignore
-  themes,
+  themes
 } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.7",
+  "version": "1.0.8--canary.c0819ff.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -15,6 +15,7 @@
   "scripts": {
     "start": "storybook dev -p 3000",
     "new": "node ./bin/newComponent/index.cjs",
+    "lint": "npx eslint --fix --ext .ts,.js,.svelte src",
     "build:package": "node ./bin/buildPackage/index.js",
     "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
@@ -68,8 +69,8 @@
     "colord": "^2.9.3",
     "css-color-converter": "^2.0.0",
     "deep-object-diff": "^1.1.9",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-import": "^2.27.5",
@@ -78,7 +79,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-svelte": "^2.33.1",
+    "eslint-plugin-svelte": "^2.35.1",
     "fs-extra": "^11.1.1",
     "kleur": "^4.1.5",
     "mermaid": "^10.3.0",
@@ -131,6 +132,11 @@
     "./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/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
+    "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
+    "./components/AdSlot/scripts/bootstrapLoad.ts": "./dist/components/AdSlot/scripts/bootstrapLoad.ts",
+    "./components/AdSlot/scripts/getParameterByName.ts": "./dist/components/AdSlot/scripts/getParameterByName.ts",
+    "./components/AdSlot/scripts/ias.ts": "./dist/components/AdSlot/scripts/ias.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",