@reuters-graphics/graphics-components 3.0.17 → 3.0.19

package/dist/components/AdSlot/AdScripts.svelte

@@ -7,7 +7,7 @@
   onMount(() => {
     window.graphicsAdQueue = window.graphicsAdQueue || [];
     loadScript(
-      'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
+      'https://www.reuters.com/static/js/bootstrap/v1.1.2/bootstrap.static.js',
       { onload: loadBootstrap, async: false }
     );
     // Load Freestar script

package/dist/components/Analytics/Analytics.svelte

@@ -1,10 +1,5 @@
 <!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
-
 <script module>
-  // GTM configuration
-  const GTM_ID = 'GTM-P9TTSWG2';
-  const GTM_SCRIPT = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${GTM_ID}');`;
-
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
 
@@ -24,6 +19,8 @@
 
   import { onMount } from 'svelte';
   import { ga, chartbeat } from './providers';
+  import GoogleTagManager from './GTM.svelte';
+
   interface Props {
     /**
      * Used to associate a page with its author(s) in Chartbeat.
@@ -39,20 +36,4 @@
   });
 </script>
 
-<svelte:head>
-  <!-- Google Tag Manager -->
-  {@html `<${'script'}>${GTM_SCRIPT}</script>`}
-  <!-- End Google Tag Manager -->
-</svelte:head>
-
-<!-- Google Tag Manager (noscript) -->
-<noscript>
-  <iframe
-    src="https://www.googletagmanager.com/ns.html?id={GTM_ID}"
-    height="0"
-    width="0"
-    style="display:none;visibility:hidden"
-    title=""
-  ></iframe>
-</noscript>
-<!-- End Google Tag Manager (noscript) -->
+<GoogleTagManager />

package/dist/components/Analytics/GTM.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  const GTM_ID = 'GTM-P9TTSWG2';
+</script>
+
+<svelte:head>
+  <!-- Google Tag Manager -->
+  <link href="https://www.googletagmanager.com" rel="preconnect" />
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      'gtm.start': new Date().getTime(),
+      event: 'gtm.js',
+    });
+  </script>
+  <script async src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}>
+  </script>
+  <!-- End Google Tag Manager -->
+</svelte:head>
+
+<!-- Google Tag Manager (noscript) -->
+<noscript>
+  <iframe
+    src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+    height="0"
+    width="0"
+    style="display:none;visibility:hidden"
+    title=""
+  ></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->

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

@@ -0,0 +1,18 @@
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Gtm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Gtm = InstanceType<typeof Gtm>;
+export default Gtm;

package/dist/components/ScrollerVideo/ScrollerVideo.mdx

@@ -172,7 +172,7 @@ With the graphics kit, you'll likely get your text and prop values from an Archi
   {#if block.type == 'scroller-video'}
     <ScrollerVideo
       id={block.id}
-      src={`${assets}/${block.src}}`}
+      src={`${assets}/${block.src}`}
       height={block.height}
     >
       <!-- Loop through foregrounds to add text blurbs that appear/disappear at specific times -->
@@ -348,8 +348,11 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
     <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
     <ScrollerVideo
       src="my-video.mp4"
-      videoPercentage={progress}
+      height="100lvh"
       trackScroll={false}
+      videoPercentage={progress}
+      transitionSpeed={40}
+      showDebugInfo
     />
   {/snippet}
   {#snippet foregroundSnippet()}

package/dist/components/ScrollerVideo/ScrollerVideo.svelte

@@ -200,7 +200,10 @@
         videoPercentage >= 0 &&
         videoPercentage <= 1
       ) {
-        scrollerVideo.setVideoPercentage(videoPercentage);
+        scrollerVideo.setVideoPercentage(videoPercentage, {
+          jump: false,
+          transitionSpeed: restProps.transitionSpeed || 8,
+        });
       }
     }
   });

package/dist/components/ScrollerVideo/demo/AdvancedUsecases.svelte

@@ -67,35 +67,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-#progress-bar {
-  background-color: rgba(0, 0, 0, 0.8);
-  position: absolute;
-  z-index: 4;
-  right: 0;
-  padding: 1rem;
-  top: 0;
-}
-#progress-bar progress {
-  height: 6px;
-  background-color: rgba(255, 0, 0, 0.2666666667); /* Background color of the entire bar */
-  margin: 0;
-}
-#progress-bar progress::-webkit-progress-value {
-  background-color: white;
-  border-radius: 10px;
-}
-#progress-bar progress::-webkit-progress-bar {
-  background-color: #444444;
-  border-radius: 10px;
-}
-#progress-bar p {
-  font-family: var(--theme-font-family-sans-serif);
-  color: white;
-  font-size: var(--theme-font-size-xs);
-  padding: 0;
-  margin: 0;
-}
-
 .step-foreground-container {
   height: 100lvh;
   width: 50%;

package/dist/components/ScrollerVideo/demo/WithScrollerBase.svelte

@@ -14,6 +14,7 @@
       height="100lvh"
       trackScroll={false}
       videoPercentage={progress}
+      transitionSpeed={40}
       showDebugInfo
     />
   {/snippet}
@@ -38,33 +39,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-#progress-bar {
-  background-color: rgba(0, 0, 0, 0.8);
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  padding: 1rem;
-}
-#progress-bar progress {
-  height: 6px;
-  background-color: rgba(255, 0, 0, 0.2666666667); /* Background color of the entire bar */
-}
-#progress-bar progress::-webkit-progress-value {
-  background-color: white;
-  border-radius: 10px;
-}
-#progress-bar progress::-webkit-progress-bar {
-  background-color: #444444;
-  border-radius: 10px;
-}
-#progress-bar p {
-  font-family: var(--theme-font-family-sans-serif);
-  color: white;
-  font-size: var(--theme-font-size-xs);
-  padding: 0;
-  margin: 0;
-}
-
 .step-foreground-container {
   height: 100lvh;
   width: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",