@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/EndNotes/EndNotes.svelte

@@ -1,23 +1,39 @@
 <!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) -->
-<script>export let notes = [];
-import Block from "../Block/Block.svelte";
-import Markdown from "../Markdown/Markdown.svelte";
+<script lang="ts">
+  interface EndNote {
+    /**
+     * Title of the note item
+     */
+    title: string;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text: string;
+  }
+
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  interface Props {
+    /**
+     * An array of endnote items.
+     */
+    notes: EndNote[];
+  }
+
+  let { notes }: Props = $props();
 </script>
 
 <Block class="notes fmt-6 fmb-8">
-  {#if notes}
-    {#each notes as note}
-      <div class="note-title">
-        <Markdown source="{note.title}" />
-      </div>
-      <div class="note-content">
-        <Markdown source="{note.text}" />
-      </div>
-    {/each}
-  {/if}
+  {#each notes as note}
+    <div class="note-title">
+      <Markdown source={note.title} />
+    </div>
+    <div class="note-content">
+      <Markdown source={note.text} />
+    </div>
+  {/each}
 </Block>
 
-<!-- svelte-ignore css-unused-selector -->
 <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
 */

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

@@ -1,32 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * An array of endnote items.
-           * @required
-           */ notes?: {
-            /**
-             * Title of the note item
-             */
-            title: string;
-            /**
-             * Contents of the note as a markdown string
-             * @required
-             */
-            text: string;
-        }[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EndNotesProps = typeof __propDef.props;
-export type EndNotesEvents = typeof __propDef.events;
-export type EndNotesSlots = typeof __propDef.slots;
-/** `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) */
-export default class EndNotes extends SvelteComponent<EndNotesProps, EndNotesEvents, EndNotesSlots> {
+interface EndNote {
+    /**
+     * Title of the note item
+     */
+    title: string;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text: string;
+}
+interface Props {
+    /**
+     * An array of endnote items.
+     */
+    notes: EndNote[];
 }
-export {};
+/** `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) */
+declare const EndNotes: import("svelte").Component<Props, {}, "">;
+type EndNotes = ReturnType<typeof EndNotes>;
+export default EndNotes;

package/dist/components/FeaturePhoto/FeaturePhoto.mdx

@@ -0,0 +1,72 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as FeaturePhotoStories from './FeaturePhoto.stories.svelte';
+
+<Meta of={FeaturePhotoStories} />
+
+# FeaturePhoto
+
+The `FeaturePhoto` component adds a full-width photo.
+
+```svelte
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<FeaturePhoto
+  src={`${assets}/images/myImage.jpg`}
+  altText="Some alt text"
+  caption="A caption"
+/>
+```
+
+<Canvas of={FeaturePhotoStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `FeaturePhoto` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... -->
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width={block.width}
+      src={`${assets}/${block.src}`}
+      altText={block.altText}
+      caption={block.caption}
+    />
+  {/if}
+{/each}
+```
+
+## Missing alt text
+
+`altText` is required in this component. If your photo is missing it, a small red text box will overlay the image.
+
+<Canvas of={FeaturePhotoStories.MissingAltText} />

package/dist/components/FeaturePhoto/FeaturePhoto.stories.svelte

@@ -1,66 +1,41 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import archieMLDocs from "./stories/docs/archieML.md?raw";
-import missingAltTextDocs from "./stories/docs/missingAltText.md?raw";
-import FeaturePhoto from "./FeaturePhoto.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Multimedia/FeaturePhoto",
-  component: FeaturePhoto,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FeaturePhoto from './FeaturePhoto.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/FeaturePhoto',
+    component: FeaturePhoto,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
     },
-    textWidth: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore jpg
-  import sharkSrc from './stories/shark.jpg';
+  import sharkSrc from './images/shark.jpg';
 </script>
 
-<Template let:args>
-  <FeaturePhoto {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    src: sharkSrc,
-    altText: 'A shark!',
-    width: 'normal',
-    caption: 'Carcharodon carcharias - REUTERS',
-  }}"
-/>
-
 <Story
-  name="ArchieML"
-  args="{{
+  name="Demo"
+  args={{
     src: sharkSrc,
     altText: 'A shark!',
-    width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
-  {...withStoryDocs(archieMLDocs)}
+  }}
 />
 
 <Story
   name="Missing altText"
-  args="{{
+  exportName="MissingAltText"
+  args={{
     src: sharkSrc,
-    width: 'normal',
     caption: 'Carcharodon carcharias - REUTERS',
-  }}"
-  {...withStoryDocs(missingAltTextDocs)}
+  }}
 />

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

@@ -1,33 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        width: {
-            control: string;
-            options: string[];
-        };
-        textWidth: {
-            control: string;
-            options: string[];
-        };
+import FeaturePhoto from './FeaturePhoto.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 FeaturePhoto;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FeaturePhotoProps = typeof __propDef.props;
-export type FeaturePhotoEvents = typeof __propDef.events;
-export type FeaturePhotoSlots = typeof __propDef.slots;
-export default class FeaturePhoto extends SvelteComponent<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FeaturePhoto: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FeaturePhoto = InstanceType<typeof FeaturePhoto>;
+export default FeaturePhoto;

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,59 +1,124 @@
 <!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
-<script>import { onMount } from "svelte";
-import Block from "../Block/Block.svelte";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-export let src;
-export let altText;
-export let id = "";
-let cls = "";
-export { cls as class };
-export let caption;
-export let height = 100;
-export let width = "normal";
-export let textWidth = "normal";
-export let lazy = false;
-export let top = 0;
-export let bottom = 0;
-export let left = 0;
-export let right = 0;
-let intersecting = false;
-let container;
-const intersectable = typeof IntersectionObserver !== "undefined";
-onMount(() => {
-  if (!lazy) return;
-  if (intersectable) {
-    const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries[0].isIntersecting;
-        if (intersecting) {
-          observer.unobserve(container);
-        }
-      },
-      {
-        rootMargin
-      }
-    );
-    observer.observe(container);
-    return () => observer.unobserve(container);
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  interface Props {
+    /**
+     * Photo source
+     */
+    src: string;
+    /**
+     * Photo altText
+     */
+    altText: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class?: string;
+    /**
+     * Photo caption
+     */
+    caption?: string;
+    /**
+     * Height of the photo placeholder when lazy-loading
+     */
+    height?: number;
+    /**
+     * Width of the container: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text vs the photo. For example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     */
+    lazy?: boolean;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.
+     */
+    top?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.
+     */
+    bottom?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.
+     */
+    left?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.
+     */
+    right?: number;
   }
-});
+
+  let {
+    src,
+    altText,
+    id = '',
+    class: cls = '',
+    caption,
+    height = 100,
+    width = 'normal',
+    textWidth = 'normal',
+    lazy = true,
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
+  }: Props = $props();
+
+  let intersecting = $state(false);
+  let container: HTMLElement;
+  const intersectable = typeof IntersectionObserver !== 'undefined';
+
+  onMount(() => {
+    if (!lazy) return;
+
+    if (intersectable) {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (intersecting) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+        }
+      );
+
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
+  });
 </script>
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
-    bind:this="{container}"
+    bind:this={container}
     aria-label="media"
     class="w-full flex flex-col relative"
   >
     {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" {src} alt="{altText}" />
+      <img class="w-full my-0" {src} alt={altText} />
     {:else}
-      <div class="placeholder w-full" style="{`height: ${height}px;`}"></div>
+      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
     {/if}
     {#if caption}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <Block width="{textWidth}" class="notes w-full fmy-0">
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <Block width={textWidth} class="notes w-full fmy-0">
           <figcaption>
             {caption}
           </figcaption>

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

@@ -1,60 +1,59 @@
-import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * Photo src
-           * @type {string}
-           * @required
-           */ src: string;
-        /**
-           * Photo altText
-           * @type {string}
-           * @required
-           */ altText: string;
-        /**
-           * Add an id to target with custom CSS.
-           * @type {string}
-           */ id?: string;
-        /**
-           * Add extra classes to target with custom CSS.
-           * @type {string}
-           */ class?: string;
-        /**
-           * Caption below the photo
-           * @type {string}
-           */ caption: string;
-        /**
-           * Height of the photo placeholder when lazy-loading
-           */ height?: number;
-        /**
-           * Width of the container, one of: normal, wide, wider, widest or fluid
-           */ width?: ContainerWidth;
-        /**
-           * Set a different width for the text within the text well, for example,
-           * "normal" to keep the title, description and notes inline with the rest
-           * of the text well. Can't ever be wider than `width`.
-           * @type {string}
-           */ textWidth?: ContainerWidth | null;
-        /**
-           * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
-           */ lazy?: boolean;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */ top?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */ bottom?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. */ left?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. */ right?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type FeaturePhotoProps = typeof __propDef.props;
-export type FeaturePhotoEvents = typeof __propDef.events;
-export type FeaturePhotoSlots = typeof __propDef.slots;
-/** `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) */
-export default class FeaturePhoto extends SvelteComponent<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
+interface Props {
+    /**
+     * Photo source
+     */
+    src: string;
+    /**
+     * Photo altText
+     */
+    altText: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class?: string;
+    /**
+     * Photo caption
+     */
+    caption?: string;
+    /**
+     * Height of the photo placeholder when lazy-loading
+     */
+    height?: number;
+    /**
+     * Width of the container: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text vs the photo. For example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     */
+    lazy?: boolean;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.
+     */
+    top?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.
+     */
+    bottom?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.
+     */
+    left?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.
+     */
+    right?: number;
 }
-export {};
+/** `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) */
+declare const FeaturePhoto: import("svelte").Component<Props, {}, "">;
+type FeaturePhoto = ReturnType<typeof FeaturePhoto>;
+export default FeaturePhoto;

package/dist/components/Framer/Framer.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+import * as FramerStories from './Framer.stories.svelte';
+
+<Meta of={FramerStories} />
+
+# FeaturePhoto
+
+An embed tool for development in the graphics kit.
+
+```svelte
+<script>
+  import { Framer } from '@reuters-graphics/graphics-components';
+
+  const embeds = ['/embeds/my-chart/index.html'];
+</script>
+
+<Framer {embeds} />
+```