@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -1,49 +1,91 @@
 <!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photopack--docs) -->
-<script>export let images = [];
-export let layouts = [];
-export let gap = 15;
-const random4 = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
-export let id = "photopack-" + random4() + random4();
-let cls = "";
-export { cls as class };
-export let width = "normal";
-export let textWidth = "normal";
-import Block from "../Block/Block.svelte";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-import Markdown from "../Markdown/Markdown.svelte";
-let containerWidth;
-const groupRows = (images2, layout2) => {
-  if (!layout2) return images2.map((img) => [img]);
-  let i = 0;
-  const rows2 = [];
-  for (const rowLength of layout2.rows) {
-    const row = [];
-    for (const imgI of [...Array(rowLength).keys()]) {
-      row.push(images2[imgI + i]);
-    }
-    rows2.push(row);
-    i += rowLength;
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  // Utils
+  import { random4 } from '../../utils';
+  import { groupRows } from './utils';
+
+  // Types
+  export interface Image {
+    src: string;
+    altText: string;
+    caption?: string;
+    maxHeight?: number;
+  }
+
+  export interface Layout {
+    breakpoint: number;
+    rows: number[];
+  }
+
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  interface Props {
+    /** Array of image objects */
+    images: Image[];
+    /** Array of layout objects */
+    layouts?: Layout[];
+    /** Gap between images. */
+    gap?: number;
+    /** Add an ID to target with SCSS. Should be unique from all other elements. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class: string;
+    /** Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    width: ContainerWidth;
+    /** Set a different width for captions within the text well. For example, "normal" to keep captions inline with the rest of the text well.
+     *
+     *  Can't ever be wider than `width`: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    textWidth: ContainerWidth;
   }
-  return rows2;
-};
-$: layouts.sort((a, b) => a.breakpoint < b.breakpoint ? 1 : -1);
-$: layout = layouts.find(
-  (l) => (
-    // Must have valid rows schema, i.e., adds to the total number of images
-    l.rows.reduce((a, b) => a + b, 0) === images.length && // Breakpoint is higher than container width
-    (containerWidth || 0) >= l.breakpoint
-  )
-);
-$: rows = groupRows(images, layout);
+
+  let {
+    images,
+    layouts,
+    gap = 15,
+    id = 'photopack-' + random4() + random4(),
+    class: cls = '',
+    width = 'normal',
+    textWidth = 'normal',
+  }: Props = $props();
+
+  let containerWidth = $state(0); // or undefined?
+
+  /**
+   *
+   * Sort layouts by descending breakpoints.
+   *
+   * @NOTE - We can't use `sort` directly on the array because it mutates the original array; we can't update a state inside a derived expression: https://svelte.dev/docs/svelte/runtime-errors#Client-errors-state_unsafe_mutation
+   *
+   * So, we need to use `toSorted` instead.
+   */
+  let sortedLayouts = $derived(
+    layouts?.toSorted((a, b) => (a.breakpoint < b.breakpoint ? 1 : -1))
+  );
+
+  let layout = $derived(
+    sortedLayouts?.find(
+      (l) =>
+        // Must have valid rows schema, i.e., adds to the total number of images
+        l.rows.reduce((a, b) => a + b, 0) === images.length &&
+        // Breakpoint is higher than container width
+        (containerWidth || 0) >= l.breakpoint
+    )
+  );
+
+  let rows = $derived(groupRows(images, layout));
 </script>
 
 <Block {width} {id} class="photopack fmy-6 {cls}">
-  <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
+  <div class="photopack-container w-full" bind:clientWidth={containerWidth}>
     {#each rows as row, ri}
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom="{ri < rows.length - 1 ? gap + 'px' : ''}"
+        style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''}
       >
         {#each row as img, i}
           <figure
@@ -52,9 +94,9 @@ $: rows = groupRows(images, layout);
           >
             <img
               class="m-0 w-full h-full object-cover"
-              src="{img.src}"
-              alt="{img.altText}"
-              style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
+              src={img.src}
+              alt={img.altText}
+              style:max-height={img.maxHeight ? img.maxHeight + 'px' : ''}
             />
             {#if !img.altText}
               <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
@@ -64,14 +106,14 @@ $: rows = groupRows(images, layout);
       </div>
     {/each}
   </div>
-  <PaddingReset containerIsFluid="{width === 'fluid'}">
+  <PaddingReset containerIsFluid={width === 'fluid'}>
     <div class="notes contents">
-      <Block width="{textWidth}" class="photopack-captions-container">
+      <Block width={textWidth} class="photopack-captions-container">
         {#each rows as row, ri}
           {#each row as img, i}
             {#if img.caption}
               <div id="{id}-figure-{ri}-{i}" class="caption">
-                <Markdown source="{img.caption}" />
+                <Markdown source={img.caption} />
               </div>
             {/if}
           {/each}

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

@@ -1,53 +1,33 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Array of image objects
-           * @required
-           */ images?: {
-            src: string;
-            altText: string;
-            caption?: string;
-            maxHeight?: number;
-        }[];
-        /**
-           * Array of layout objects
-           * @required
-           */ layouts?: {
-            breakpoint: number;
-            rows: number[];
-        }[];
-        /**
-           * Gap between images.
-           * @type {number}
-           */ gap?: number;
-        /**
-           * Add an ID to target with SCSS. Should be unique from all other elements.
-           * @type {string}
-           */ id?: string;
-        /**
-           * Add a class to target with SCSS.
-           * @type {string}
-           */ class?: string;
-        /** Width of the component within the text well. */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
-        /**
-           * Set a different width for captions within the text well, for example,
-           * "normal" to keep captions inline with the rest of the text well.
-           * Can't ever be wider than `width`.
-           * @type {string}
-           */ textWidth?: "normal" | "wide" | "wider" | "widest" | "fluid";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PhotoPackProps = typeof __propDef.props;
-export type PhotoPackEvents = typeof __propDef.events;
-export type PhotoPackSlots = typeof __propDef.slots;
-/** `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photopack--docs) */
-export default class PhotoPack extends SvelteComponent<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
+export interface Image {
+    src: string;
+    altText: string;
+    caption?: string;
+    maxHeight?: number;
+}
+export interface Layout {
+    breakpoint: number;
+    rows: number[];
 }
-export {};
+type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+interface Props {
+    /** Array of image objects */
+    images: Image[];
+    /** Array of layout objects */
+    layouts?: Layout[];
+    /** Gap between images. */
+    gap?: number;
+    /** Add an ID to target with SCSS. Should be unique from all other elements. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class: string;
+    /** Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    width: ContainerWidth;
+    /** Set a different width for captions within the text well. For example, "normal" to keep captions inline with the rest of the text well.
+     *
+     *  Can't ever be wider than `width`: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid' */
+    textWidth: ContainerWidth;
+}
+/** `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-photopack--docs) */
+declare const PhotoPack: import("svelte").Component<Props, {}, "">;
+type PhotoPack = ReturnType<typeof PhotoPack>;
+export default PhotoPack;

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

@@ -0,0 +1,2 @@
+import type { Image, Layout } from './PhotoPack.svelte';
+export declare const groupRows: (images: Image[], layout?: Layout) => Image[][];

package/dist/components/PhotoPack/utils.js

@@ -0,0 +1,17 @@
+export const groupRows = (images, layout) => {
+    // Default layout, one img per row
+    if (!layout)
+        return images.map((img) => [img]);
+    // Otherwise, chunk into rows according to layout scheme
+    let i = 0;
+    const rows = [];
+    for (const rowLength of layout.rows) {
+        const row = [];
+        for (const imgI of [...Array(rowLength).keys()]) {
+            row.push(images[imgI + i]);
+        }
+        rows.push(row);
+        i += rowLength;
+    }
+    return rows;
+};

package/dist/components/PymChild/PymChild.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+import * as PymChildStories from './PymChild.stories.svelte';
+
+<Meta of={PymChildStories} />
+
+# PymChild
+
+The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling={500} />
+```
+
+You can access the Pym.js child via `pym` in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import { PymChild, pym } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pym.child) pym.child.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+```

package/dist/components/PymChild/PymChild.stories.svelte

@@ -1,20 +1,11 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import PymChild from "./PymChild.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Utilities/PymChild",
-  component: PymChild,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PymChild from './PymChild.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/PymChild',
+    component: PymChild,
+  });
 </script>
 
-<Template let:args>
-  <PymChild {...args} />
-  <div>Nothing to see here. 😎</div>
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" tags={['!autodocs', '!dev']} />

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import PymChild from './PymChild.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;
     };
-    title: string;
-    component: typeof PymChild;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PymChildProps = typeof __propDef.props;
-export type PymChildEvents = typeof __propDef.events;
-export type PymChildSlots = typeof __propDef.slots;
-export default class PymChild extends SvelteComponent<PymChildProps, PymChildEvents, PymChildSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PymChild: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PymChild = InstanceType<typeof PymChild>;
+export default PymChild;

package/dist/components/PymChild/PymChild.svelte

@@ -1,11 +1,18 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
-<script>export let polling = 500;
-import { onMount } from "svelte";
-import pym from "pym.js";
-import { pymChildStore } from "./stores.js";
-let pymChild;
-onMount(() => {
-  pymChild = new pym.Child({ polling });
-  pymChildStore.set(pymChild);
-});
+<script lang="ts">
+  import pym from 'pym.js';
+  import { pym as pymState } from './state.svelte.js';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Pym.js polling interval */
+    polling?: number;
+  }
+
+  let { polling = 500 }: Props = $props();
+
+  onMount(() => {
+    let pymChild = new pym.Child({ polling });
+    pymState.child = pymChild;
+  });
 </script>

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** Pym.js polling interval */ polling?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PymChildProps = typeof __propDef.props;
-export type PymChildEvents = typeof __propDef.events;
-export type PymChildSlots = typeof __propDef.slots;
-/** `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) */
-export default class PymChild extends SvelteComponent<PymChildProps, PymChildEvents, PymChildSlots> {
+interface Props {
+    /** Pym.js polling interval */
+    polling?: number;
 }
-export {};
+/** `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) */
+declare const PymChild: import("svelte").Component<Props, {}, "">;
+type PymChild = ReturnType<typeof PymChild>;
+export default PymChild;

package/dist/components/PymChild/state.svelte.d.ts

@@ -0,0 +1,6 @@
+import type p from 'pym.js';
+type PymChild = {
+    child: p.Child | null;
+};
+export declare const pym: PymChild;
+export {};

package/dist/components/PymChild/state.svelte.js

@@ -0,0 +1 @@
+export const pym = $state({ child: null });

package/dist/components/ReferralBlock/ReferralBlock.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReferralBlockStories from './ReferralBlock.stories.svelte';
+
+<Meta of={ReferralBlockStories} />
+
+# ReferralBlock
+
+The `ReferralBlock` component creates a set of referral links from recent Reuters.com stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
+
+> Note: The `section` or `collection` prop determines which section or collection stories are from.
+>
+> You can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for [World - Europe](https://www.reuters.com/world/europe/) stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
+>
+> You should get the collection alias from the dotcom team.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock
+  section="/lifestyle/sports/"
+  class="fmy-0"
+  heading="More World Cup coverage"
+/>
+```
+
+<Canvas of={ReferralBlockStories.Demo} />
+
+## Collections
+
+TK - Check if this is still relevant.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
+```
+
+<Canvas of={ReferralBlockStories.ByCollection} />
+```

package/dist/components/ReferralBlock/ReferralBlock.stories.svelte

@@ -1,61 +1,51 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import collectionDocs from "./stories/docs/collection.md?raw";
-import ReferralBlock from "./ReferralBlock.svelte";
-import { withComponentDocs, withStoryDocs } from "$docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Page furniture/ReferralBlock",
-  component: ReferralBlock,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    },
-    section: {
-      control: "select",
-      options: [
-        "/world/",
-        "/world/europe/",
-        "/lifestyle/",
-        "/lifestyle/sports/",
-        "/legal/",
-        "/business/",
-        "/business/energy/"
-      ]
-    },
-    number: {
-      control: "select",
-      options: [2, 4, 6, 8]
-    }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReferralBlock from './ReferralBlock.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/ReferralBlock',
+    component: ReferralBlock,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      section: {
+        control: 'select',
+        options: [
+          '/world/',
+          '/world/europe/',
+          '/lifestyle/',
+          '/lifestyle/sports/',
+          '/legal/',
+          '/business/',
+          '/business/energy/',
+        ],
+      },
+      number: {
+        control: 'select',
+        options: [2, 4, 6, 8],
+      },
+    },
+  });
 </script>
 
-<Template let:args>
-  <ReferralBlock {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     section: '/lifestyle/sports/',
-    number: 4,
     class: 'fmy-0',
     heading: 'More World Cup coverage',
-  }}"
+  }}
 />
 
 <Story
   name="By collection"
-  args="{{
+  exportName="ByCollection"
+  args={{
     collection: 'x-trump',
     number: 6,
     class: 'fmy-8',
     heading: 'The latest Trump coverage',
-  }}"
-  {...withStoryDocs(collectionDocs)}
+  }}
 />

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

@@ -1,37 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
-        section: {
-            control: string;
-            options: string[];
-        };
-        number: {
-            control: string;
-            options: number[];
-        };
+import ReferralBlock from './ReferralBlock.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;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof ReferralBlock;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ReferralBlockProps = typeof __propDef.props;
-export type ReferralBlockEvents = typeof __propDef.events;
-export type ReferralBlockSlots = typeof __propDef.slots;
-export default class ReferralBlock extends SvelteComponent<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ReferralBlock: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ReferralBlock = InstanceType<typeof ReferralBlock>;
+export default ReferralBlock;