@reuters-graphics/graphics-components 3.10.0 → 4.0.0

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

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Gtm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const GTM: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Gtm = InstanceType<typeof Gtm>;
-export default Gtm;
+type GTM = InstanceType<typeof GTM>;
+export default GTM;

package/dist/components/BlogPost/BlogPost.svelte

@@ -10,9 +10,10 @@
      */
     slugTitle: string;
     /**
-     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the post's
+     * canonical URL against your project's base path. Defaults to an identity function.
      */
-    base: string;
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */
@@ -33,7 +34,7 @@
   let {
     title = 'Reuters Graphics blog post',
     slugTitle = 'Reuters Graphics blog post',
-    base = '',
+    resolve = (pathname: string) => pathname,
     authors = [],
     publishTime = '',
     updateTime = '',
@@ -54,14 +55,14 @@
   <PostHeadline
     hed={title}
     sluggableHed={slugTitle}
-    {base}
+    {resolve}
     {authors}
     {publishTime}
     {updateTime}
     {id}
     {cls}
   />
-  <a href="{base}/{shortPubDate}/{slugify(slugTitle)}/" hidden>
+  <a href={resolve(`/${shortPubDate}/${slugify(slugTitle)}/`)} hidden>
     {title}
   </a>
   {@render children?.()}

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

@@ -9,9 +9,10 @@ interface Props {
      */
     slugTitle: string;
     /**
-     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the post's
+     * canonical URL against your project's base path. Defaults to an identity function.
      */
-    base: string;
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */

package/dist/components/BlogPost/CopyLink.svelte

@@ -9,8 +9,11 @@
     publishedDate?: string;
     /** The heading of the post. */
     hed?: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The ARIA label for the copy link button. */
     ariaLabel?: string;
     /** The message to display before copying the link. */
@@ -22,7 +25,7 @@
   let {
     publishedDate = '',
     hed = '',
-    base = '',
+    resolve = (pathname: string) => pathname,
     ariaLabel = 'Copy link to this post',
     copyMessageBefore = 'Copy link',
     copyMessageAfter = 'Copied',
@@ -44,7 +47,7 @@
       e.preventDefault();
       clicked = true;
       navigator.clipboard.writeText(
-        `${window.location.origin}${base}/${publishDate}/${slugify(hed)}/`
+        `${window.location.origin}${resolve(`/${publishDate}/${slugify(hed)}/`)}`
       );
       setTimeout(() => {
         clicked = false;

package/dist/components/BlogPost/CopyLink.svelte.d.ts

@@ -3,8 +3,11 @@ interface Props {
     publishedDate?: string;
     /** The heading of the post. */
     hed?: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The ARIA label for the copy link button. */
     ariaLabel?: string;
     /** The message to display before copying the link. */

package/dist/components/BlogPost/PostHeadline.svelte

@@ -16,8 +16,11 @@
      * published links to the post.
      */
     sluggableHed: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */
@@ -33,7 +36,7 @@
   let {
     hed = 'Reuters Graphics blog post',
     sluggableHed = 'Reuters Graphics blog post',
-    base = '',
+    resolve = (pathname: string) => pathname,
     authors = [],
     publishTime = '',
     updateTime = '',
@@ -105,7 +108,7 @@
               <CopyLink
                 hed={sluggableHed}
                 publishedDate={publishTime}
-                {base}
+                {resolve}
               /></span
             >
           </a>

package/dist/components/BlogPost/PostHeadline.svelte.d.ts

@@ -8,8 +8,11 @@ interface Props {
      * published links to the post.
      */
     sluggableHed: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */

package/dist/components/BlogPost/utils.d.ts

@@ -1,6 +1,7 @@
 /**
  * Converts a date string to a short date format.
  * @param d - The date string to be converted.
- * @returns The short date format string.
+ * @returns The short date format string (`YYYY-MM-DD`), or an empty string if
+ * `d` is missing or not a valid date.
  */
 export declare const getShortDate: (d: string) => string;

package/dist/components/BlogPost/utils.js

@@ -1,6 +1,12 @@
 /**
  * Converts a date string to a short date format.
  * @param d - The date string to be converted.
- * @returns The short date format string.
+ * @returns The short date format string (`YYYY-MM-DD`), or an empty string if
+ * `d` is missing or not a valid date.
  */
-export const getShortDate = (d) => new Date(d).toISOString().split('T')[0];
+export const getShortDate = (d) => {
+    const date = new Date(d);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    return date.toISOString().split('T')[0];
+};

package/dist/components/BlogTOC/BlogTOC.svelte

@@ -19,8 +19,11 @@
 
   interface Props {
     posts: Post[];
-    /** Base path prepended to post links, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build post links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The label for the table of contents toggle button. */
     label?: string;
     /** The maximum height of the table of contents list in pixels. */
@@ -29,7 +32,7 @@
 
   let {
     posts,
-    base = '',
+    resolve = (pathname: string) => pathname,
     label = 'Show all articles',
     maxHeight = 300,
   }: Props = $props();
@@ -51,7 +54,7 @@
           const existing = acc.find((entry) => entry.dateKey === dateKey);
           const event = {
             title: post.title,
-            titleLink: `${base}/#${slugify(post.slugTitle)}`,
+            titleLink: `${resolve('/')}#${slugify(post.slugTitle)}`,
           };
           if (existing) {
             existing.events.push(event);

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

@@ -5,13 +5,16 @@ interface Post {
 }
 interface Props {
     posts: Post[];
-    /** Base path prepended to post links, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build post links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The label for the table of contents toggle button. */
     label?: string;
     /** The maximum height of the table of contents list in pixels. */
     maxHeight?: number;
 }
-declare const BlogToc: import("svelte").Component<Props, {}, "">;
-type BlogToc = ReturnType<typeof BlogToc>;
-export default BlogToc;
+declare const BlogTOC: import("svelte").Component<Props, {}, "">;
+type BlogTOC = ReturnType<typeof BlogTOC>;
+export default BlogTOC;

package/dist/components/BlogTOC/TOCList.svelte.d.ts

@@ -17,6 +17,6 @@ interface Props {
     id?: string;
     class?: string;
 }
-declare const TocList: import("svelte").Component<Props, {}, "listHeight">;
-type TocList = ReturnType<typeof TocList>;
-export default TocList;
+declare const TOCList: import("svelte").Component<Props, {}, "listHeight">;
+type TOCList = ReturnType<typeof TOCList>;
+export default TOCList;

package/dist/components/Headpile/Headpile.svelte

@@ -28,9 +28,9 @@
        * Headshot image src. Be sure to prefix the image
        *
        * ```typescript
-       * import { assets } from '$app/paths';
+       * import { asset } from '$app/paths';
        *
-       * const imgSrc = `${assets}/images/my-image.jpg`;
+       * const imgSrc = asset('/images/my-image.jpg');
        * ```
        */
       img: string;

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

@@ -24,9 +24,9 @@ interface Props {
          * Headshot image src. Be sure to prefix the image
          *
          * ```typescript
-         * import { assets } from '$app/paths';
+         * import { asset } from '$app/paths';
          *
-         * const imgSrc = `${assets}/images/my-image.jpg`;
+         * const imgSrc = asset('/images/my-image.jpg');
          * ```
          */
         img: string;

package/dist/components/LanguageButton/LanguageButton.svelte

@@ -5,8 +5,11 @@
     locale: string | undefined;
     /** Whether the article is embedded */
     embedded?: boolean;
-    /** The base URL for the article */
-    base?: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build locale links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Options for the language toggle button */
     buttonOptions?: {
       locale: string;
@@ -19,7 +22,7 @@
   let {
     locale = 'en',
     embedded = false,
-    base,
+    resolve = (pathname: string) => pathname,
     buttonOptions = {
       locale: 'es',
       label: 'Leer en español',
@@ -37,16 +40,16 @@
     if (embedded) {
       if (locale === translationLocale) {
         // If we're in the non-English article, link to the English article
-        return `${base}/embeds/en/page/`;
+        return resolve('/embeds/en/page/');
       } else {
-        return `${base}/embeds/${translationLocale}/page/`;
+        return resolve(`/embeds/${translationLocale}/page/`);
       }
     } else {
       if (locale === translationLocale) {
         // If we're in the non-English article, link to the English article
-        return `${base}/`;
+        return resolve('/');
       } else {
-        return `${base}/${translationLocale}/`;
+        return resolve(`/${translationLocale}/`);
       }
     }
   };

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

@@ -3,8 +3,11 @@ interface Props {
     locale: string | undefined;
     /** Whether the article is embedded */
     embedded?: boolean;
-    /** The base URL for the article */
-    base?: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build locale links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Options for the language toggle button */
     buttonOptions?: {
         locale: string;

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

@@ -49,6 +49,6 @@ interface Props {
     authors?: GraphicAuthor[];
 }
 /** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) */
-declare const Seo: import("svelte").Component<Props, {}, "">;
-type Seo = ReturnType<typeof Seo>;
-export default Seo;
+declare const SEO: import("svelte").Component<Props, {}, "">;
+type SEO = ReturnType<typeof SEO>;
+export default SEO;

package/dist/components/Video/Video.svelte

@@ -196,8 +196,8 @@
 {/snippet}
 
 <svelte:window
-  on:click={setInteractedWithDom}
-  on:touchstart={setInteractedWithDom}
+  onclick={setInteractedWithDom}
+  ontouchstart={setInteractedWithDom}
 />
 
 <GraphicBlock

package/dist/llm-docs/components/AdSlot.md

@@ -0,0 +1,11 @@
+# AdSlot
+
+**Import:** `import { AdSlot } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `placementName` | `DesktopPlacementName \| MobilePlacementName` | — | ✓ | — |
+| `adType` | `DesktopAdType \| MobileAdType` | — | ✓ | — |
+| `dataFreestarAd` | `string` | `'__970x250'` |  | — |

package/dist/llm-docs/components/Analytics.md

@@ -0,0 +1,89 @@
+# Analytics
+
+**Category:** Components/Ads & analytics/Analytics
+
+**Import:** `import { Analytics } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `authors` | `Author[]` | `[]` |  | Used to associate a page with its author(s) in Chartbeat. |
+
+## Examples
+
+### Demo
+
+```svelte
+<Analytics authors={[{ name: 'Jane Doe' }, { name: 'John Doe' }]} />
+```
+
+## Documentation
+
+# Analytics
+
+The `Analytics` component adds Google and Chartbeat analytics to your page.
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+
+  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
+</script>
+
+<Analytics {authors} />
+```
+
+## Environments
+
+Generally, you only want to send page analytics in production environments.
+
+In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
+
+For example, the following excludes analytics from pages in development or hosted on our preview server:
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+  import { dev } from '$app/environment';
+  import { page } from '$app/stores';
+</script>
+
+{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
+  <Analytics />
+{/if}
+```
+
+## Multipage apps
+
+If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
+
+This component exports a function you can call to register pageviews.
+
+For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
+
+```svelte
+<script>
+  import {
+    Analytics,
+    registerPageview,
+  } from '@reuters-graphics/graphics-components';
+  import { afterNavigate } from '$app/navigation';
+
+  let isFirstPageview = true;
+
+  afterNavigate(() => {
+    // We shouldn't fire on initial page load because the Analytics component
+    // already registers a reader's first pageview. After this component
+    // has initially mounted, we can be sure that further navigation is virtual
+    // and register pageviews using this function.
+    if (!isFirstPageview) {
+      registerPageview();
+    } else {
+      isFirstPageview = false;
+    }
+  });
+</script>
+
+<Analytics />
+```

package/dist/llm-docs/components/Article.md

@@ -0,0 +1,183 @@
+# Article
+
+**Category:** Components/Page layout/Article
+
+**Import:** `import { Article } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `embedded` | `boolean` | `false` |  | Set to true for embeddables. |
+| `id` | `string` | `''` |  | Add an id to the article tag to target it with custom CSS. |
+| `role` | `string \| null` | `null` |  | ARIA role of the article |
+| `columnWidths` | `ColumnWidths` | `{
+      narrower: 330,
+      narrow: 510,
+      normal: 660,
+      wide: 930,
+      wider: 1200,
+    }` |  | Set custom widths for the normal, wide and wider column dimensions |
+| `children` | `import('svelte').Snippet` | — |  | — |
+
+## Examples
+
+### Demo
+
+```svelte
+<Article id="article-story-basic">
+  <div class="demo-container">
+    <div class="background-label">Article well</div>
+    <div class="padding-label"><span>⇤</span>15px padding</div>
+  </div>
+</Article>
+```
+
+### Custom columns
+
+```svelte
+<h3>Default column widths</h3>
+
+<Article id="article-column-widths-demo">
+  <div class="article-boundaries">
+    <Block id="section-demo" width="narrower">narrower</Block>
+    <Block id="section-demo" width="narrow">narrow</Block>
+    <Block id="section-demo">normal</Block>
+    <Block id="section-demo" width="wide">wide</Block>
+    <Block id="section-demo" width="wider">wider</Block>
+    <Block id="section-demo" width="widest">widest</Block>
+    <Block id="section-demo" width="fluid">fluid</Block>
+  </div>
+</Article>
+<h3>Custom column widths</h3>
+<Article
+  id="article-column-widths-demo"
+  columnWidths={{
+    narrower: 250,
+    narrow: 400,
+    normal: 500,
+    wide: 675,
+    wider: 1400,
+  }}
+>
+  <div class="article-boundaries custom">
+    <Block id="section-demo" width="narrower">narrower</Block>
+    <Block id="section-demo" width="narrow">narrow</Block>
+    <Block id="section-demo">normal</Block>
+    <Block id="section-demo" width="wide">wide</Block>
+    <Block id="section-demo" width="wider">wider</Block>
+    <Block id="section-demo" width="widest">widest</Block>
+    <Block id="section-demo" width="fluid">fluid</Block>
+  </div>
+</Article>
+```
+
+## Documentation
+
+# Article
+
+The `Article` component contains all the contents of our story.
+
+> 📌 In most cases, **you don't need to mess with the `Article` component** because it's already set up in the graphics kit.
+
+```svelte
+<script>
+  import { Article } from '@reuters-graphics/graphics-components';
+</script>
+
+<Article>
+  <!-- The story content goes here! -->
+</Article>
+```
+
+## Custom column widths
+
+The `Article` component also establishes the widths of columns that contain individual sections of the story, such as text, photos, and charts. The default column widths follow a basic class scheme:
+
+- `narrower` The narrowest...
+- `narrow` A bit narrower than the default body text column
+- `normal` **The default width of the body text column**
+- `wide` A bit wider
+- `wider` A bit wider than wide...
+- `widest` Edge-to-edge, but _excluding_ the left and right padding on `Article`
+- `fluid` Fully edge-to-edge
+
+You can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` classes. These can then be used by the `Block` component or other elements housed inside `<Article>`.
+
+> **For most graphics kit pages, you shouldn't customise the column widths.** Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside graphics kit. The main exception is SREP stories.
+
+```svelte
+<!-- Set custom column widths -->
+<Article
+  columnWidths={{
+    narrower: 310,
+    narrow: 450,
+    normal: 550,
+    wide: 675,
+    wider: 1400,
+  }}
+>
+  <!-- Custom column widths get passed down to the `Block` component -->
+  <Block width="narrower" />
+  <Block width="narrow" />
+  <Block width="normal" />
+  <Block width="wide" />
+  <Block width="wider" />
+  <Block width="widest" />
+  <Block width="fluid" />
+</Article>
+```
+
+If you're not using our `Block` component, you can still inherit the column widths from `Article` and create your own custom containers by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) like this:
+
+```svelte
+<div class="my-special-container">
+  <!-- Story content -->
+</div>
+
+<style lang="scss">
+  div.my-special-container {
+    max-width: var(--wide-column-width);
+  }
+</style>
+```
+
+... or you can make your column widths entirely configurable by adding classes and manually specifying widths:
+
+```svelte
+<script>
+  let { width = 'normal' } = $props();
+</script>
+
+<div class="my-special-container {width}">
+  <!-- Story content -->
+</div>
+
+<style lang="scss">
+  div.my-special-container {
+    max-width: var(--normal-column-width);
+    &.narrower {
+      max-width: var(--narrower-column-width);
+    }
+    &.narrow {
+      max-width: var(--narrow-column-width);
+    }
+    &.wide {
+      max-width: var(--wide-column-width);
+    }
+    &.wider {
+      max-width: var(--wider-column-width);
+    }
+    &.widest {
+      max-width: 100%;
+    }
+    &.fluid {
+      width: calc(100% + 30px);
+      margin-inline-start: -15px;
+      max-width: none;
+    }
+  }
+</style>
+```
+
+Here's an example of how  `columnWidths` can be used to change column widths: