@reuters-graphics/graphics-components 3.0.5 → 3.0.8

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/Headpile/Headpile.mdx

@@ -0,0 +1,37 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadpileStories from './Headpile.stories.svelte';
+
+<Meta of={HeadpileStories} />
+
+# Headpile
+
+The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.
+
+It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.
+
+```svelte
+<script>
+  import { Headpile } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<Headpile
+  figures={[
+    {
+      img: `${assets}/images/person-A.jpg`,
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      text: 'Burhan was little known in public life until taking part in the coup ...',
+    },
+    {
+      img: `${assets}/images/person-B.jpg`,
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
+    },
+  ]}
+/>
+```
+
+<Canvas of={HeadpileStories.Demo} />

package/dist/components/Headpile/Headpile.stories.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Headpile from './Headpile.svelte';
+
+  import hed1 from './images/abdel.png';
+  import hed2 from './images/hemedti.png';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Headpile',
+    component: Headpile,
+    argTypes: {},
+  });
+
+  const defaultArgs = [
+    {
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      img: hed1,
+      text: 'Burhan was little known in public life until taking part in the coup against Bashir in 2019 after a popular uprising against his rule. In August 2019, his role as de facto head of state was affirmed when he became head of the Sovereign Council, a body comprising civilian and military leaders formed to oversee the transition towards elections.',
+      // colour: '#957caa',
+    },
+    {
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      img: hed2,
+      text: "Popularly known as Hemedti, Dagalo rose from lowly beginnings as a camel trader to head a widely feared Arab militia that crushed a revolt in Darfur, winning him influence and eventually a role as Sudan's former deputy head of state.\r\n\r\nOver the past decade, he has been a key figure in Sudanese politics, aiding in the ousting of Bashir in 2019 and suppressing pro-democracy protests. As the country limped from one economic crisis to another, Hemedti became one of Sudan’s richest men, exporting gold from mines in Darfur seized by his fighters.",
+      colour: '#afb776',
+    },
+  ];
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    figures: defaultArgs,
+  }}
+/>

package/dist/components/Headpile/Headpile.stories.svelte.d.ts

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

package/dist/components/Headpile/Headpile.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+  import KeyFigure from './KeyFigure.svelte';
+
+  interface Props {
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id: string;
+    /**
+     * Width of the container.
+     */
+    width: Extract<ContainerWidth, 'normal' | 'wide'>;
+    /**
+     * Default background colour to be used as a mount behind the headshot.
+     */
+    colour: string;
+    /**
+     * Individual figures -- i.e., people -- for the headpile.
+     */
+    figures: {
+      /**
+       * Headshot image src. Be sure to prefix the image
+       *
+       * ```typescript
+       * import { assets } from '$app/paths';
+       *
+       * const imgSrc = `${assets}/images/my-image.jpg`;
+       * ```
+       */
+      img: string;
+      /**
+       * Figure name.
+       */
+      name: string;
+      /**
+       * Figure role or title.
+       */
+      role?: string;
+      /**
+       * Text describing the person.
+       */
+      text: string;
+      /**
+       * Background colour to be used as a mount behind the headshot.
+       */
+      colour?: string;
+    }[];
+  }
+
+  let {
+    figures,
+    class: cls,
+    id,
+    width = 'normal',
+    colour = '#cccccc',
+  }: Props = $props();
+</script>
+
+<Block class="fmy-6 {cls} {id} {width}">
+  <div class="figures">
+    {#each figures as figure}
+      <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
+    {/each}
+  </div>
+</Block>
+
+<style>/* Generated from 
+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
+*/
+/* Generated from 
+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 */
+div.figures {
+  display: flex;
+  flex-direction: column;
+  gap: 2.75rem;
+}</style>

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

@@ -0,0 +1,53 @@
+import type { ContainerWidth } from '../@types/global';
+interface Props {
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id: string;
+    /**
+     * Width of the container.
+     */
+    width: Extract<ContainerWidth, 'normal' | 'wide'>;
+    /**
+     * Default background colour to be used as a mount behind the headshot.
+     */
+    colour: string;
+    /**
+     * Individual figures -- i.e., people -- for the headpile.
+     */
+    figures: {
+        /**
+         * Headshot image src. Be sure to prefix the image
+         *
+         * ```typescript
+         * import { assets } from '$app/paths';
+         *
+         * const imgSrc = `${assets}/images/my-image.jpg`;
+         * ```
+         */
+        img: string;
+        /**
+         * Figure name.
+         */
+        name: string;
+        /**
+         * Figure role or title.
+         */
+        role?: string;
+        /**
+         * Text describing the person.
+         */
+        text: string;
+        /**
+         * Background colour to be used as a mount behind the headshot.
+         */
+        colour?: string;
+    }[];
+}
+declare const Headpile: import("svelte").Component<Props, {}, "">;
+type Headpile = ReturnType<typeof Headpile>;
+export default Headpile;

package/dist/components/Headpile/Headshot.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  let { img = '', colour = 'var(--theme-colour-accent)' } = $props();
+</script>
+
+<div class="headshot-wrapper">
+  <div class="background" style="background-color: {colour};"></div>
+  <div class="headshot" style="background-image: url({img}); "></div>
+</div>
+
+<style>.headshot-wrapper {
+  width: 7rem;
+  height: 6.75rem;
+  position: relative;
+  margin-block-start: -1.75rem;
+  margin-block-end: -1.75rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.background {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 7rem;
+  height: 4.75rem;
+  display: inline-block;
+  border-radius: 0.25rem;
+}
+
+.headshot {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  background-size: 106%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  overflow: hidden;
+}</style>

package/dist/components/Headpile/Headshot.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Headshot: import("svelte").Component<{
+    img?: string;
+    colour?: string;
+}, {}, "">;
+type Headshot = ReturnType<typeof Headshot>;
+export default Headshot;

package/dist/components/Headpile/KeyFigure.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  import Headshot from './Headshot.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+
+  interface Props {
+    img: string;
+    name: string;
+    role?: string;
+    text: string;
+    colour?: string;
+  }
+
+  let { name, role, img, text, colour }: Props = $props();
+
+  const mobile = new MediaQuery('max-width: 600px');
+</script>
+
+<div>
+  <div class="wrapper-profile">
+    <div>
+      <Headshot {img} {colour} />
+    </div>
+    <div class="text">
+      <div class="title">{name}</div>
+      <div class="role">
+        {role || ''}
+      </div>
+      {#if !mobile.current}
+        <div class="description desktop">
+          <Markdown source={text} />
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if mobile.current}
+    <div class="description mobile">
+      <Markdown source={text} />
+    </div>
+  {/if}
+</div>
+
+<style>/* Generated from 
+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
+*/
+/* Generated from 
+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 */
+.wrapper-profile {
+  display: flex;
+  align-items: flex-start;
+  justify-content: start;
+  gap: 1rem;
+  width: 100%;
+  min-height: 5.5rem;
+}
+
+.title {
+  font-weight: 700;
+  font-size: var(--theme-font-size-base);
+  line-height: 1;
+}
+@media (max-width: 450px) {
+  .title {
+    font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+  }
+}
+
+.role {
+  border-block-start: 0.5px solid var(--tr-muted-grey);
+  margin-inline-start: -0.75rem;
+  padding-inline-start: 0.75rem;
+  margin-block-start: 0.25rem;
+  padding-block-start: 0.25rem;
+  font-family: var(--theme-font-family-note);
+  color: var(--theme-colour-text-secondary);
+  font-size: var(--theme-font-size-sm);
+  font-weight: 300;
+  line-height: 1.15;
+  margin-block-end: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+}
+@media (max-width: 450px) {
+  .role {
+    font-size: var(--theme-font-size-xs);
+  }
+}
+
+.description :global(p) {
+  font-family: var(--theme-font-family-note);
+  font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+  font-weight: 300;
+  margin-block-end: 0;
+  text-wrap: pretty;
+}
+.description.desktop {
+  display: block;
+}
+.description.mobile {
+  display: none;
+}
+@media (max-width: 600px) {
+  .description.desktop {
+    display: none;
+  }
+  .description.mobile {
+    display: block;
+  }
+}</style>

package/dist/components/Headpile/KeyFigure.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    img: string;
+    name: string;
+    role?: string;
+    text: string;
+    colour?: string;
+}
+declare const KeyFigure: import("svelte").Component<Props, {}, "">;
+type KeyFigure = ReturnType<typeof KeyFigure>;
+export default KeyFigure;

package/dist/components/ScrollerBase/ScrollerBase.svelte

@@ -133,7 +133,7 @@
   let wh = $state(0);
   let fixed = $state(false);
   let offset_top = 0;
-  let width = 1;
+  let width = $state(1);
 
   let top_px = $derived(Math.round(top * wh));
   let bottom_px = $derived(Math.round(bottom * wh));

package/dist/components/ScrollerBase/demo/ScrollerDemo.svelte

@@ -67,8 +67,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .scroller-demo-container {
-  width: 660px;
+  max-width: 660px;
   margin: auto;
+  background: #c5dfe8;
 }
 
 .step-foreground-container {

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/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as Headpile } from './components/Headpile/Headpile.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as Headpile } from './components/Headpile/Headpile.svelte';
 export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.5",
+  "version": "3.0.8",
   "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();
-};