@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/HeroHeadline/{stories → demo}/graphics/crash.svelte

@@ -1,6 +1,5 @@
 <script>
-  // export let assetsPath = './';
-  let width = null;
+  let width = $state();
 
   // @ts-ignore img
   import chartXs from './CRASH_1-xs.jpeg';
@@ -18,7 +17,7 @@
 
 <!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
 
-<div id="g-CRASH_1-box" bind:clientWidth="{width}">
+<div id="g-CRASH_1-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-CRASH_1-xs" class="g-artboard" style="">
@@ -26,8 +25,7 @@
       <div
         id="g-CRASH_1-xs-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -79,8 +77,7 @@
       <div
         id="g-CRASH_1-sm-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -132,8 +129,7 @@
       <div
         id="g-CRASH_1-md-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"
@@ -193,8 +189,7 @@
       <div
         id="g-CRASH_1-lg-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -254,8 +249,7 @@
       <div
         id="g-CRASH_1-xl-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
@@ -315,8 +309,7 @@
       <div
         id="g-CRASH_1-xl_copy-img"
         class="g-aiImg"
-        alt=""
-        style="{`background-image: url(${chartXxl});`}"
+        style={`background-image: url(${chartXxl});`}
       ></div>
       <div
         id="g-ai5-1"

package/dist/components/HeroHeadline/demo/graphics/crash.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Crash;
+type Crash = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Crash: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/HeroHeadline/{stories → demo}/graphics/quakemap.svelte

@@ -1,5 +1,5 @@
 <script>
-  let width = null;
+  let width = $state();
 
   // @ts-ignore raw
   import chartXs from './quake-map-top-xs.jpeg';
@@ -13,7 +13,7 @@
   import chartXl from '././quake-map-top-xl.jpeg';
 </script>
 
-<div id="g-quake-map-top-box" bind:clientWidth="{width}">
+<div id="g-quake-map-top-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-quake-map-top-xs" class="g-artboard" style="">
@@ -21,7 +21,7 @@
       <div
         id="g-quake-map-top-xs-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-1"
@@ -102,7 +102,7 @@
       <div
         id="g-quake-map-top-sm-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -183,7 +183,7 @@
       <div
         id="g-quake-map-top-md-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
       <div
         id="g-ai2-1"
@@ -271,7 +271,7 @@
       <div
         id="g-quake-map-top-lg-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -359,7 +359,7 @@
       <div
         id="g-quake-map-top-xl-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"

package/dist/components/HeroHeadline/demo/graphics/quakemap.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Quakemap;
+type Quakemap = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Quakemap: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/InfoBox/InfoBox.mdx

@@ -0,0 +1,122 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InfoBoxStories from './InfoBox.stories.svelte';
+
+<Meta of={InfoBoxStories} />
+
+# InfoBox
+
+The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="About this data"
+  text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# Archie ML doc
+[blocks]
+
+type: info-box
+title: What you need to know about the war
+text: Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
+
+Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.
+:end
+notes: [Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `InfoBox` component.
+
+```svelte
+<!-- graphics kit -->
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+# Graphics kit
+{#each content.blocks as block}
+  {#if block.type === 'info-box'}
+    <InfoBox title={block.title} text={block.text} notes={block.notes} />
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Lists
+
+Use markdown to add lists to `InfoBox`.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="What you need to know about the war"
+  text={"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.\n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.\n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines."}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Lists} />
+## Customisation
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox`, such as adding tables, icons and thumbnail images.
+
+```svelte
+<InfoBox title="About this data">
+  <!-- Optional custom header -->
+  {#snippet header()}
+    <h3>Global video game market</h3>
+  {/snippet}
+  <!-- Optional custom body -->
+  {#snippet body()}
+    <table>
+      <thead>
+        <tr>
+          <th>Year</th>
+          <th>Market size ($bln)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2024</td>
+          <td>274.63</td>
+        </tr>
+        <tr>
+          <td>2023</td>
+          <td>281.77</td>
+        </tr>
+        <tr>
+          <td>2022</td>
+          <td>249.55</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+  <!-- Optional custom footer -->
+  {#snippet updated()}
+    <div class="text-xs font-note">Source: Precedence Research</div>
+  {/snippet}
+</InfoBox>
+```
+
+<Canvas of={InfoBoxStories.Customised} />

package/dist/components/InfoBox/InfoBox.stories.svelte

@@ -1,50 +1,98 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import InfoBox from "./InfoBox.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/InfoBox",
-  component: InfoBox,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    theme: {
-      control: "select",
-      options: ["light", "dark"]
-    },
-    width: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    }
-  }
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InfoBox from './InfoBox.svelte';
   import BodyText from '../BodyText/BodyText.svelte';
-</script>
 
-<Template let:args>
-  <InfoBox {...args} />
-</Template>
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/InfoBox',
+    component: InfoBox,
+    tags: ['autodocs'],
+    argTypes: {
+      theme: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
 
-<Story name="Default">
+<Story name="Demo">
   <BodyText
-    text="If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."
+    text="Bacon ipsum dolor amet turducken buffalo beef ribs bresaola pancetta ribeye pork belly doner hamburger biltong cupim porchetta chuck ham tenderloin. Turducken bresaola jerky chicken."
   />
   <InfoBox
     title="About this data"
-    text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
-    notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+    text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+    notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
   />
   <BodyText
-    text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
+    text="Ham drumstick tail ribeye pancetta, leberkas hamburger chicken spare ribs buffalo jerky sausage ground round meatball. Leberkas kevin short loin, tri-tip shank spare ribs buffalo beef pork belly corned beef chislic tongue."
   />
 </Story>
-
-<Story name="List">
-  <InfoBox
-    title="What you need to know about the war"
-    text="{"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}"
-  />
+<Story
+  name="Lists"
+  tags={['!autodocs', '!dev']}
+  args={{
+    title: 'What you need to know about the war',
+    text: "- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. ",
+  }}
+/>
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <InfoBox>
+    {#snippet header()}
+      <h3>Global video game market</h3>
+    {/snippet}
+    {#snippet body()}
+      <table>
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Market size ($bln)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>2024</td>
+            <td>274.63</td>
+          </tr>
+          <tr>
+            <td>2023</td>
+            <td>281.77</td>
+          </tr>
+          <tr>
+            <td>2022</td>
+            <td>249.55</td>
+          </tr>
+        </tbody>
+      </table>
+    {/snippet}
+    {#snippet footer()}
+      <div class="text-xs font-note">Source: Precedence Research</div>
+    {/snippet}
+  </InfoBox>
 </Story>
+
+<style>h3 {
+  margin: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: center;
+}
+
+th {
+  background-color: #f2f2f2;
+}</style>

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

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

package/dist/components/InfoBox/InfoBox.svelte

@@ -1,14 +1,62 @@
 <!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
-<script>export let title = null;
-export let text = "";
-export let notes = null;
-export let width = "normal";
-let cls = "";
-export { cls as class };
-export let id = "";
-export let theme = "light";
-import Block from "../Block/Block.svelte";
-import Markdown from "../Markdown/Markdown.svelte";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  type Theme = 'light' | 'dark';
+
+  interface Props {
+    /**
+     * Title of the box
+     */
+    title?: string | null;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text?: string;
+    /**
+     * Additional footnotes
+     */
+    notes?: string | null;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Add extra classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Page theme
+     */
+    theme?: Theme;
+    /** Optional custom header snippet */
+    header?: Snippet;
+    /** Optional custom body snippet */
+    body?: Snippet;
+    /** Optional custom footer snippet */
+    footer?: Snippet;
+  }
+
+  let {
+    title = null,
+    text,
+    notes = null,
+    width = 'normal',
+    class: cls = '',
+    id = '',
+    theme = 'light',
+    header,
+    body,
+    footer,
+  }: Props = $props();
+
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 </script>
 
 <aside class="infobox {theme}">
@@ -17,36 +65,36 @@ import Markdown from "../Markdown/Markdown.svelte";
     {id}
     class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
   >
-    {#if $$slots.header}
+    {#if header}
       <div class="header fmb-2">
-        <!-- Custom title content -->
-        <slot name="header" />
+        <!-- Custom header content -->
+        {@render header()}
       </div>
     {:else if title}
       <div class="header fmb-2">
-        <Markdown source="{title}" />
+        <Markdown source={title} />
       </div>
     {/if}
 
-    {#if $$slots.body}
+    {#if body}
       <div class="body">
-        <!-- Custom content -->
-        <slot name="body" />
+        <!-- Custom body content -->
+        {@render body()}
       </div>
     {:else}
       <div class="body">
-        <Markdown source="{text}" />
+        <Markdown source={text || ''} />
       </div>
     {/if}
 
-    {#if $$slots.footer}
+    {#if footer}
       <div class="footer fmt-2">
         <!-- Custom footer content -->
-        <slot name="footer" />
+        {@render footer()}
       </div>
     {:else if notes}
       <div class="footer fmt-2">
-        <Markdown source="{notes}" />
+        <Markdown source={notes} />
       </div>
     {/if}
   </Block>

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

@@ -1,47 +1,43 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * Title of the box
-           */ title?: string | null;
-        /**
-           * Contents of the note as a markdown string
-           */ text?: string;
-        /**
-           * Additional footnotes
-           */ notes?: string | null;
-        /**
-           * Width of the component within the text well.
-           * @type {string}
-           */ width?: ContainerWidth;
-        /**
-           * Add extra classes to the block tag to target it with custom CSS.
-           * @type {string}
-           */ class?: string;
-        /**
-           * Add an id to the block tag to target it with custom CSS.
-           * @type {string}
-           */ id?: string;
-        /**
-           * Page theme
-           */ theme?: "light" | "dark";
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        body: {};
-        footer: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InfoBoxProps = typeof __propDef.props;
-export type InfoBoxEvents = typeof __propDef.events;
-export type InfoBoxSlots = typeof __propDef.slots;
-/** `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) */
-export default class InfoBox extends SvelteComponent<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
+type Theme = 'light' | 'dark';
+interface Props {
+    /**
+     * Title of the box
+     */
+    title?: string | null;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text?: string;
+    /**
+     * Additional footnotes
+     */
+    notes?: string | null;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Add extra classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Page theme
+     */
+    theme?: Theme;
+    /** Optional custom header snippet */
+    header?: Snippet;
+    /** Optional custom body snippet */
+    body?: Snippet;
+    /** Optional custom footer snippet */
+    footer?: Snippet;
 }
-export {};
+/** `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) */
+declare const InfoBox: import("svelte").Component<Props, {}, "">;
+type InfoBox = ReturnType<typeof InfoBox>;
+export default InfoBox;