@reuters-graphics/graphics-components 3.0.6 → 3.0.9

package/dist/components/Analytics/Analytics.svelte

@@ -3,13 +3,11 @@
 <script module>
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
-  import { registerPageview as registerParselyPageview } from './providers/parsely';
 
   /** Register virtual pageviews when using client-side routing in multipage applications. */
   function registerPageview() {
     registerChartbeatPageview();
     registerGAPageview();
-    registerParselyPageview();
   }
 
   export { registerPageview };
@@ -21,7 +19,7 @@
   }
 
   import { onMount } from 'svelte';
-  import { ga, chartbeat, parsely } from './providers';
+  import { ga, chartbeat } from './providers';
   interface Props {
     /**
      * Used to associate a page with its author(s) in Chartbeat.
@@ -34,6 +32,5 @@
   onMount(() => {
     ga();
     chartbeat(authors);
-    parsely();
   });
 </script>

package/dist/components/Analytics/providers/index.d.ts

@@ -1,3 +1,2 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
-export { default as parsely } from './parsely';

package/dist/components/Analytics/providers/index.js

@@ -1,3 +1,2 @@
 export { default as ga } from './ga';
 export { default as chartbeat } from './chartbeat';
-export { default as parsely } from './parsely';

package/dist/components/Theme/@types/component.d.ts

@@ -37,11 +37,11 @@ export interface CustomFont {
     family?: Partial<FontFamily>;
     size?: Partial<FontSize>;
 }
-export interface Theme {
+export interface ThemeConfig {
     colour: Colour;
     font: Font;
 }
-export interface CustomTheme {
+export interface CustomThemeConfig {
     colour?: Partial<Colour>;
     font?: Partial<CustomFont>;
     [customProperty: string]: unknown;

package/dist/components/Theme/Theme.svelte

@@ -14,7 +14,7 @@
   import mergeThemes from './utils/merge.js';
 
   // Types
-  import type { CustomTheme, Theme } from './@types/component';
+  import type { CustomThemeConfig, ThemeConfig } from './@types/component';
   import type { Snippet } from 'svelte';
   type Base = 'light' | 'dark';
 
@@ -22,7 +22,7 @@
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme | Theme;
+    theme?: CustomThemeConfig | ThemeConfig;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

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

@@ -2,17 +2,17 @@
  * Pre-made themes you can import.
  */
 export declare const themes: {
-    light: Theme;
-    dark: Theme;
+    light: ThemeConfig;
+    dark: ThemeConfig;
 };
-import type { CustomTheme, Theme } from './@types/component';
+import type { CustomThemeConfig, ThemeConfig } from './@types/component';
 import type { Snippet } from 'svelte';
 type Base = 'light' | 'dark';
 interface Props {
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme | Theme;
+    theme?: CustomThemeConfig | ThemeConfig;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't

package/dist/components/Theme/themes/common.js

@@ -1,4 +1,4 @@
-/** @type {Omit<import('../@types/component').Theme, "colour">} */
+/** @type {Omit<import('../@types/component').ThemeConfig, "colour">} */
 /* Generated from
 https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=21&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
 */

package/dist/components/Theme/themes/dark.js

@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {

package/dist/components/Theme/themes/light.js

@@ -1,6 +1,6 @@
 import common from './common.js';
 
-/** @type {import('../@types/component').Theme} */
+/** @type {import('../@types/component').ThemeConfig} */
 export default {
   ...common,
   colour: {

package/dist/components/Theme/utils/merge.d.ts

@@ -1,5 +1,5 @@
-import type { Theme, CustomTheme } from '../@types/component';
+import type { ThemeConfig, CustomThemeConfig } from '../@types/component';
 /**
  * Deep merges theme objects.
  */
-export default function merge<T extends Record<string, unknown>>(target: T, ...sources: (Theme | CustomTheme)[]): T;
+export default function merge<T extends Record<string, unknown>>(target: T, ...sources: (ThemeConfig | CustomThemeConfig)[]): T;

package/dist/components/Visible/Visible.mdx

@@ -19,7 +19,8 @@ By default, `visible` will switch between `false` and `true` whenever the elemen
   import { Visible } from '@reuters-graphics/graphics-components';
 </script>
 
-<Visible>
+<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with `px` or `%` units -->
+<Visible top="10px">
   {#snippet children(visible)}
     {#if visible}
       <p>Visible!</p>

package/dist/components/Visible/Visible.stories.svelte

@@ -2,6 +2,7 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Visible from './Visible.svelte';
+  import VisibleDemo from './demo/VisibleDemo.svelte';
 
   const { Story } = defineMeta({
     title: 'Components/Utilities/Visible',
@@ -9,14 +10,6 @@
   });
 </script>
 
-<Story name="Demo" tags={['!autodocs', '!dev']}>
-  <Visible>
-    {#snippet children(visible)}
-      {#if visible}
-        <p>Visible!</p>
-      {:else}
-        <p>Not yet visible.</p>
-      {/if}
-    {/snippet}
-  </Visible>
+<Story name="Demo">
+  <VisibleDemo />
 </Story>

package/dist/components/Visible/Visible.svelte

@@ -9,14 +9,14 @@
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
-    top?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
-    bottom?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
-    left?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
-    right?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    top?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    bottom?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    left?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    right?: string;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;
@@ -24,10 +24,10 @@
 
   let {
     once = false,
-    top = 0,
-    bottom = 0,
-    left = 0,
-    right = 0,
+    top = '0px',
+    bottom = '0px',
+    left = '0px',
+    right = '0px',
     threshold = 0,
     children,
   }: Props = $props();
@@ -37,7 +37,7 @@
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+      const rootMargin = `${bottom} ${left} ${top} ${right}`;
 
       const observer = new IntersectionObserver(
         (entries) => {
@@ -53,28 +53,18 @@
       );
       if (container) observer.observe(container);
       return () => {
-        if (container) observer.observe(container);
+        if (container) observer.unobserve(container);
       };
     }
-    function handler() {
-      if (container) {
-        const bcr = container.getBoundingClientRect();
-        visible =
-          bcr.bottom + bottom > 0 &&
-          bcr.right + right > 0 &&
-          bcr.top - top < window.innerHeight &&
-          bcr.left - left < window.innerWidth;
-      }
-      if (visible && once) {
-        window.removeEventListener('scroll', handler);
-      }
-    }
-    window.addEventListener('scroll', handler);
-    return () => window.removeEventListener('scroll', handler);
   });
 </script>
 
-<div bind:this={container}>
+<div
+  bind:this={container}
+  class="visibility-tracker"
+  class:visible
+  class:not-visible={!visible}
+>
   {#if children}
     {@render children(visible)}
   {/if}

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

@@ -6,14 +6,14 @@ interface Props {
      * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
      */
     once?: boolean;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
-    top?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
-    bottom?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
-    left?: number;
-    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
-    right?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    top?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    bottom?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    left?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    right?: string;
     /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
     threshold?: number;
     children?: Snippet<[boolean]>;

package/dist/components/Visible/demo/VisibleDemo.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Visible from '../Visible.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import Block from '../../Block/Block.svelte';
+  import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
+  import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
+
+  let top = '150px';
+
+  const demoText =
+    'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';
+
+  let demoText2 = $derived(
+    `The top value for \`rootMargin\` is set to \`${top}px\` in this demo. Read about how \`rootMargin\` affects the <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Intersection Observer's behaviour here</a>.`
+  );
+
+  const text =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+
+<BodyText text={`**${demoText}**`} />
+
+<BodyText text={`**${demoText2}**`} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+
+<Visible {top} once={false}>
+  {#snippet children(visible)}
+    {#if visible}
+      <FeaturePhoto
+        src={sharkSrc}
+        altText="A shark!"
+        caption="Carcharodon carcharias - REUTERS"
+      />
+    {:else}
+      <Block><h2>Not yet visible.</h2></Block>
+    {/if}
+  {/snippet}
+</Visible>
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />

package/dist/components/Visible/demo/VisibleDemo.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VisibleDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type VisibleDemo = ReturnType<typeof VisibleDemo>;
+export default VisibleDemo;

package/dist/globals.d.ts

@@ -21,14 +21,6 @@ declare global {
     };
     /** Graphics ads */
     graphicsAdQueue: any[];
-    /** Parsely */
-    PARSELY: {
-      onLoad: () => void;
-      beacon: {
-        trackPageView: () => void;
-      };
-      updateDefaults: (params: any) => void;
-    };
   }
 }
 

package/package.json

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

package/dist/components/Analytics/providers/parsely.d.ts

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

package/dist/components/Analytics/providers/parsely.js

@@ -1,29 +0,0 @@
-const SITE_ID = 'reuters.com';
-const attachScript = () => {
-    const b = document.body;
-    const e = document.createElement('script');
-    e.id = 'parsely-cfg';
-    e.src = `//cdn.parsely.com/keys/${SITE_ID}/p.js`;
-    e.setAttribute('async', '');
-    e.setAttribute('defer', '');
-    b.appendChild(e);
-};
-export default () => {
-    window.PARSELY = window.PARSELY || {
-        autotrack: false,
-        onReady() {
-            window.PARSELY.updateDefaults({
-                data: {
-                    is_logged_in: false,
-                },
-            });
-            window.PARSELY.beacon.trackPageView();
-        },
-    };
-    attachScript();
-};
-export const registerPageview = () => {
-    if (typeof window === 'undefined' || !window.PARSELY)
-        return;
-    window.PARSELY.beacon.trackPageView();
-};