@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,55 +1,44 @@
-import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * Title of the graphic
-           * @type {string}
-           */ title?: string | null;
-        /**
-           * Description of the graphic, passed in as a markdown string.
-           * @type {string}
-           */ description?: string | null;
-        /**
-           * iframe title
-           * @required
-           */ frameTitle?: string;
-        /**
-           * Notes to the graphic, passed in as a markdown string.
-           * @type {string}
-           */ notes?: string | null;
-        /**
-           * iframe aria label
-           * @required
-           */ ariaLabel?: string;
-        /** iframe id */ id?: string;
-        /**
-           * Datawrapper embed URL
-           * @required
-           */ src: string;
-        /** iframe scrolling option */ scrolling?: "auto" | "yes" | "no";
-        /** Width of the chart within the text well. */ 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;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        notes: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DatawrapperChartProps = typeof __propDef.props;
-export type DatawrapperChartEvents = typeof __propDef.events;
-export type DatawrapperChartSlots = typeof __propDef.slots;
-/** `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) */
-export default class DatawrapperChart extends SvelteComponent<DatawrapperChartProps, DatawrapperChartEvents, DatawrapperChartSlots> {
+type ScrollingOption = 'auto' | 'yes' | 'no';
+interface Props {
+    /** Title of the graphic */
+    title?: string;
+    /** Description of the graphic, passed in as a markdown string. */
+    description?: string;
+    /**
+     * iframe title
+     */
+    frameTitle: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /**
+     * iframe aria label
+     */
+    ariaLabel: string;
+    id: string;
+    /**
+     * Datawrapper embed URL
+     */
+    src: string;
+    /** iframe scrolling option */
+    scrolling: ScrollingOption;
+    /** Width of the chart within the text well. */
+    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`.
+     */
+    textWidth: ContainerWidth;
+    /** Custom headline and chatter snippet */
+    titleSnippet?: Snippet;
+    /** Custom notes and source snippet */
+    notesSnippet?: Snippet;
 }
-export {};
+/** `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) */
+declare const DatawrapperChart: import("svelte").Component<Props, {}, "">;
+type DatawrapperChart = ReturnType<typeof DatawrapperChart>;
+export default DatawrapperChart;

package/dist/components/DocumentCloud/DocumentCloud.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
+
+<Meta of={DocumentCloudStories} />
+
+# DocumentCloud
+
+The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org).
+
+The document must have its access level set to **public** before it can be embedded. The `slug` can be found after the final slash in the document's URL.
+
+For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The `slug` is `3259984-Trump-Intelligence-Allegations`.
+
+```svelte
+<script>
+  import { DocumentCloud } from '@reuters-graphics/graphics-components';
+</script>
+
+<DocumentCloud
+  slug="3259984-Trump-Intelligence-Allegations"
+  altText="These Reports Allege Trump Has Deep Ties To Russia"
+/>
+```
+
+<Canvas of={DocumentCloudStories.Demo} />

package/dist/components/DocumentCloud/DocumentCloud.stories.svelte

@@ -1,32 +1,23 @@
-<script context="module">import DocumentCloud from "./DocumentCloud.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Multimedia/DocumentCloud",
-  component: DocumentCloud,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DocumentCloud from './DocumentCloud.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/DocumentCloud',
+    component: DocumentCloud,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
 </script>
 
-<Template let:args>
-  <DocumentCloud {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    width: 'normal',
+  name="Demo"
+  args={{
     slug: '3259984-Trump-Intelligence-Allegations',
     altText: 'These Reports Allege Trump Has Deep Ties To Russia',
-  }}"
+  }}
 />

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

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

package/dist/components/DocumentCloud/DocumentCloud.svelte

@@ -1,20 +1,41 @@
 <!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
-<script>export let width = "normal";
-export let slug;
-export let altText;
-export let id = "";
-let cls = "";
-export { cls as class };
-import Block from "../Block/Block.svelte";
+<script lang="ts">
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+
+  interface Props {
+    /**
+     * The unique identifier for the document.
+     */
+    slug: string;
+    /**
+     * Alt text for the document.
+     */
+    altText: string;
+    /**
+     * Width of the container, one of: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string; // Add a class to target with SCSS.
+  }
+
+  let {
+    slug,
+    altText,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props = $props();
 </script>
 
 <Block {width} {id} class="photo fmy-6 {cls}">
   <iframe
     class="h-screen"
     src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
-    title="{altText}"
-    width="700"
-    height="540"
+    title={altText}
     sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
   ></iframe>
 </Block>

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

@@ -1,32 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * Width of the container, one of: normal, wide, wider, widest or fluid
-           */ width?: ContainerWidth;
-        /**
-           * The unique identifier for the document.
-           * @required
-           */ slug: string;
-        /**
-           * Alt text for the document.
-           * @required
-           */ altText: string;
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DocumentCloudProps = typeof __propDef.props;
-export type DocumentCloudEvents = typeof __propDef.events;
-export type DocumentCloudSlots = typeof __propDef.slots;
-/** `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) */
-export default class DocumentCloud extends SvelteComponent<DocumentCloudProps, DocumentCloudEvents, DocumentCloudSlots> {
+interface Props {
+    /**
+     * The unique identifier for the document.
+     */
+    slug: string;
+    /**
+     * Alt text for the document.
+     */
+    altText: string;
+    /**
+     * Width of the container, one of: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
 }
-export {};
+/** `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) */
+declare const DocumentCloud: import("svelte").Component<Props, {}, "">;
+type DocumentCloud = ReturnType<typeof DocumentCloud>;
+export default DocumentCloud;

package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+import * as EmbedPreviewerLinkStories from './EmbedPreviewerLink.stories.svelte';
+
+<Meta of={EmbedPreviewerLinkStories} />
+
+# EmbedPreviewerLink
+
+The `EmbedPreviewerLink` component is a tool for previewing the embeds in development. It adds an icon at the bottom of the page that, when clicked, opens a previewer with the embeds.
+
+```svelte
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+</script>
+
+<EmbedPreviewerLink {dev} />
+```

package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte

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

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

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

package/dist/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte

@@ -1,12 +1,17 @@
-<script>export let dev = false;
-import Fa from "svelte-fa/src/fa.svelte";
-import { faWindowRestore } from "@fortawesome/free-regular-svg-icons";
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+  interface Props {
+    dev?: boolean;
+  }
+
+  let { dev = false }: Props = $props();
 </script>
 
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon="{faWindowRestore}" />
+      <Fa icon={faWindowRestore} />
     </a>
   </div>
 {/if}

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

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        dev?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type EmbedPreviewerLinkProps = typeof __propDef.props;
-export type EmbedPreviewerLinkEvents = typeof __propDef.events;
-export type EmbedPreviewerLinkSlots = typeof __propDef.slots;
-export default class EmbedPreviewerLink extends SvelteComponent<EmbedPreviewerLinkProps, EmbedPreviewerLinkEvents, EmbedPreviewerLinkSlots> {
+interface Props {
+    dev?: boolean;
 }
-export {};
+declare const EmbedPreviewerLink: import("svelte").Component<Props, {}, "">;
+type EmbedPreviewerLink = ReturnType<typeof EmbedPreviewerLink>;
+export default EmbedPreviewerLink;

package/dist/components/EndNotes/EndNotes.mdx

@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as EndNotesStories from './EndNotes.stories.svelte';
+
+<Meta of={EndNotesStories} />
+
+# EndNotes
+
+The `EndNotes` component adds notes such as sources, clarifiying notes and minor corrections that come at the end of a story.
+
+```svelte
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  const notes = [
+    {
+      title: 'Note',
+      text: 'Data is current as of today.',
+    },
+    {
+      title: 'Sources',
+      text: 'Data, Inc.',
+    },
+    {
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+    },
+  ];
+</script>
+
+<EndNotes {notes} />
+```
+
+<Canvas of={EndNotesStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[endNotes]
+title: Note
+text: Data is current as of today
+
+title: Sources
+text: Data, Inc.
+
+title: Edited by
+text: Editor, Copyeditor
+[]
+```
+
+... which you'll pass to the `EndNotes` component.
+
+```svelte
+<!-- graphics kit -->
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes notes={content.endNotes} />
+```
+
+<Canvas of={EndNotesStories.Demo} />

package/dist/components/EndNotes/EndNotes.stories.svelte

@@ -1,16 +1,15 @@
-<script context="module">import EndNotes from "./EndNotes.svelte";
-import componentDocs from "./stories/docs/component.md?raw";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/EndNotes",
-  component: EndNotes,
-  ...withComponentDocs(componentDocs)
-};
+<script module lang="ts">
+  import EndNotes from './EndNotes.svelte';
+
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/EndNotes',
+    component: EndNotes,
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
   const notes = [
     {
       title: 'Note',
@@ -27,8 +26,4 @@ export const meta = {
   ];
 </script>
 
-<Template let:args>
-  <EndNotes {...args} />
-</Template>
-
-<Story name="Default" args="{{ notes }}" />
+<Story name="Demo" args={{ notes }} />

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import EndNotes from './EndNotes.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 EndNotes;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    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;
-export default class EndNotes extends SvelteComponent<EndNotesProps, EndNotesEvents, EndNotesSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const EndNotes: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EndNotes = InstanceType<typeof EndNotes>;
+export default EndNotes;