From 2d0d0263e3e77db1e6ccc9039f29535fb67599cb Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 13:45:17 -0800
Subject: [PATCH 1/5] updates infobox

---
 src/components/InfoBox/InfoBox.stories.mdx    |  19 +++
 src/components/InfoBox/InfoBox.stories.svelte |  33 ++----
 src/components/InfoBox/InfoBox.svelte         | 108 ++++++++++--------
 .../InfoBox/stories/docs/component.md         |  17 ---
 4 files changed, 88 insertions(+), 89 deletions(-)
 create mode 100644 src/components/InfoBox/InfoBox.stories.mdx
 delete mode 100644 src/components/InfoBox/stories/docs/component.md

diff --git a/src/components/InfoBox/InfoBox.stories.mdx b/src/components/InfoBox/InfoBox.stories.mdx
new file mode 100644
index 00000000..ee571ae6
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.stories.mdx
@@ -0,0 +1,19 @@
+# InfoBox
+
+InfoBox is used to provide additional information that needs to be visually set aside from the main content flowm, such as methodology, detailed notes about data, and extra context as text stories.
+
+Switch the theme prop to `dark` for a dark page infobox.
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.
+
+```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/)'}
+/>
+```
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 6ccd3d47..2ebb2125 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -1,15 +1,12 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import InfoBox from './InfoBox.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/InfoBox',
     component: InfoBox,
-    ...withComponentDocs(componentDocs),
+    tags: ['autodocs'],
     argTypes: {
       theme: {
         control: 'select',
@@ -20,29 +17,17 @@
         options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import BodyText from '../BodyText/BodyText.svelte';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <InfoBox {...args} />
-  {/snippet}
-</Template>
-
-<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."
   />
   <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."
@@ -52,6 +37,6 @@
 <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. "}"
+    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>
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
index 98ddbd0a..f52a6fe8 100644
--- a/src/components/InfoBox/InfoBox.svelte
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -1,47 +1,59 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { ContainerWidth } from '../@types/global';
 
   type Theme = 'light' | 'dark';
 
-  /**
-   * Title of the box
-   */
-  export let title: string | null = null;
+  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;
+  }
 
-  /**
-   * Contents of the note as a markdown string
-   */
-  export let text: string = '';
-
-  /**
-   * Additional footnotes
-   */ export let notes: string | null = null;
-
-  /**
-   * Width of the component within the text well.
-   * @type {string}
-   */
-  export let width: ContainerWidth = 'normal';
-
-  /**
-   * Add extra classes to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Add an id to the block tag to target it with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-
-  /**
-   * Page theme
-   */
-  export let theme: Theme = 'light';
+  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 '../Markdown/Markdown.svelte';
@@ -53,36 +65,36 @@
     {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>
diff --git a/src/components/InfoBox/stories/docs/component.md b/src/components/InfoBox/stories/docs/component.md
deleted file mode 100644
index 909ae106..00000000
--- a/src/components/InfoBox/stories/docs/component.md
+++ /dev/null
@@ -1,17 +0,0 @@
-InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
-
-Switch the theme prop to `dark` for a dark page infobox.
-
-Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
-
-```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/)'}"
-/>
-```

From cf1a18afaaa39ecd820c1b3d56d8228108da4c5c Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 14:13:47 -0800
Subject: [PATCH 2/5] migrated infobox, working on documentation

---
 .../{InfoBox.stories.mdx => InfoBox.mdx}      | 50 +++++++++++++++++--
 src/components/InfoBox/InfoBox.stories.svelte | 15 +++---
 2 files changed, 54 insertions(+), 11 deletions(-)
 rename src/components/InfoBox/{InfoBox.stories.mdx => InfoBox.mdx} (51%)

diff --git a/src/components/InfoBox/InfoBox.stories.mdx b/src/components/InfoBox/InfoBox.mdx
similarity index 51%
rename from src/components/InfoBox/InfoBox.stories.mdx
rename to src/components/InfoBox/InfoBox.mdx
index ee571ae6..85db0094 100644
--- a/src/components/InfoBox/InfoBox.stories.mdx
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -1,11 +1,13 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InfoBoxStories from './InfoBox.stories.svelte';
+
+<Meta of={InfoBoxStories} />
+
 # InfoBox
 
 InfoBox is used to provide additional information that needs to be visually set aside from the main content flowm, such as methodology, detailed notes about data, and extra context as text stories.
 
-Switch the theme prop to `dark` for a dark page infobox.
-
-Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.
-
 ```svelte
 <script>
   import { InfoBox } from '@reuters-graphics/graphics-components';
@@ -17,3 +19,43 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content
   notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
 />
 ```
+
+You can use InfoBoox as a list by creating a list with a **ArchieML doc** in the **Graphics Kit** like this:
+
+```yaml
+# TEST THIS START HERE
+[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.
+- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.
+- **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.
+:end
+[]
+```
+
+```svelte
+<!-- Graphics Kit -->
+<script>
+  import { BodyText } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+# Graphics Kit
+{#each content.blocks as block}
+  {#if block.type === 'text'}
+    <BodyText text={block.text} />
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+## List
+
+## Theme
+
+Switch the theme prop to `dark` for a dark page infobox.
+
+## Customisation
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 2ebb2125..dcc39d58 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -33,10 +33,11 @@
     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."
   />
 </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>
+<Story
+  name="List"
+  tags={['!autodocs']}
+  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>

From b4bd717f09bd05767f220998113e1a212e7ec240 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 15:59:19 -0800
Subject: [PATCH 3/5] finished infobox, adds docs

---
 src/components/InfoBox/InfoBox.mdx            | 54 ++++++++++++++--
 src/components/InfoBox/InfoBox.stories.svelte | 63 ++++++++++++++++++-
 src/components/InfoBox/InfoBox.svelte         |  2 +-
 3 files changed, 110 insertions(+), 9 deletions(-)

diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx
index 85db0094..eaeef2de 100644
--- a/src/components/InfoBox/InfoBox.mdx
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
 
 import * as InfoBoxStories from './InfoBox.stories.svelte';
 
@@ -20,10 +20,12 @@ InfoBox is used to provide additional information that needs to be visually set
 />
 ```
 
-You can use InfoBoox as a list by creating a list with a **ArchieML doc** in the **Graphics Kit** like this:
+## Lists
+
+You can use InfoBoox as a list by creating a list with a **ArchieML doc** in the **Graphics Kit** like in this [example](/story/components-text-elements-infobox--lists):
 
 ```yaml
-# TEST THIS START HERE
+# ArchieML
 [infoBox]
 title: What you need to know about the war
 text:
@@ -50,12 +52,52 @@ text:
 {/each}
 ```
 
-## List
-
 ## Theme
 
 Switch the theme prop to `dark` for a dark page infobox.
 
 ## Customisation
 
-Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the content as needed, e.g. adding icons and thumbnail images.
+Use [snippets](https://svelte.dev/docs/svelte/snippet), which are the Svelte 5 version of slots, to customise the content as needed, e.g. adding tables, icons and thumbnail images, like in this [example](/story/components-text-elements-infobox--customised).
+
+```svelte
+<InfoBox title="About this data">
+  <!-- Optional custom header -->
+  {#snippet header()}
+    <h3>COVID-19 deaths</h3>
+  {/snippet}
+  <!-- Optional custom body -->
+  {#snippet body()}
+    <table>
+      <thead>
+        <tr>
+          <th>Country</th>
+          <th>Infections</th>
+          <th>Deaths</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>United States</td>
+          <td>1,000,000</td>
+          <td>100,000</td>
+        </tr>
+        <tr>
+          <td>United Kingdom</td>
+          <td>500,000</td>
+          <td>50,000</td>
+        </tr>
+        <tr>
+          <td>Italy</td>
+          <td>250,000</td>
+          <td>25,000</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+  <!-- Optional custom footer -->
+  {#snippet updated()}
+    <em>Note: This is dummy data</em>
+  {/snippet}
+</InfoBox>
+```
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index dcc39d58..34033a82 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -34,10 +34,69 @@
   />
 </Story>
 <Story
-  name="List"
+  name="Lists"
   tags={['!autodocs']}
   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>
+/>
+<Story name="Customised">
+  <InfoBox>
+    {#snippet header()}
+      <h3>COVID-19 deaths</h3>
+    {/snippet}
+    {#snippet body()}
+      <table>
+        <thead>
+          <tr>
+            <th>Country</th>
+            <th>Infections</th>
+            <th>Deaths</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>United States</td>
+            <td>1,000,000</td>
+            <td>100,000</td>
+          </tr>
+          <tr>
+            <td>United Kingdom</td>
+            <td>500,000</td>
+            <td>50,000</td>
+          </tr>
+          <tr>
+            <td>Italy</td>
+            <td>250,000</td>
+            <td>25,000</td>
+          </tr>
+        </tbody>
+      </table>
+    {/snippet}
+    {#snippet footer()}
+      <em>Note: This is dummy data</em>
+    {/snippet}
+  </InfoBox>
+</Story>
+
+<style lang="scss">
+  h3 {
+    margin: 0;
+  }
+  // Style the table nicely
+  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>
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
index f52a6fe8..52d915a8 100644
--- a/src/components/InfoBox/InfoBox.svelte
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -13,7 +13,7 @@
     /**
      * Contents of the note as a markdown string
      */
-    text: string;
+    text?: string;
     /**
      * Additional footnotes
      */

From d54a407a5b64c2b5900a97c79ee85c85f21d63bf Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 10:59:13 -0700
Subject: [PATCH 4/5] updates dependencies, docs

---
 src/components/BodyText/BodyText.mdx          |  2 +-
 src/components/InfoBox/InfoBox.mdx            | 79 ++++++++++++-------
 src/components/InfoBox/InfoBox.stories.svelte | 28 +++----
 3 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx
index 9cd25312..483c6b0e 100644
--- a/src/components/BodyText/BodyText.mdx
+++ b/src/components/BodyText/BodyText.mdx
@@ -30,7 +30,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
 
 ## Using with ArchieML docs
 
-With the graphics kit, you'll likely get your text value from an ArchieML doc.
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
 # Archie ML doc
diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx
index eaeef2de..6d58ae91 100644
--- a/src/components/InfoBox/InfoBox.mdx
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as InfoBoxStories from './InfoBox.stories.svelte';
 
@@ -6,7 +6,7 @@ import * as InfoBoxStories from './InfoBox.stories.svelte';
 
 # InfoBox
 
-InfoBox is used to provide additional information that needs to be visually set aside from the main content flowm, such as methodology, detailed notes about data, and extra context as text stories.
+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>
@@ -20,84 +20,103 @@ InfoBox is used to provide additional information that needs to be visually set
 />
 ```
 
-## Lists
+<Canvas of={InfoBoxStories.Demo} />
 
-You can use InfoBoox as a list by creating a list with a **ArchieML doc** in the **Graphics Kit** like in this [example](/story/components-text-elements-infobox--lists):
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
-# ArchieML
-[infoBox]
+# Archie ML doc
+[blocks]
+
+type: info-box
 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.
-- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.
-- **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.
+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 { BodyText } from '@reuters-graphics/graphics-components';
+  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 === 'text'}
-    <BodyText text={block.text} />
+  {#if block.type === 'info-box'}
+    <InfoBox title={block.title} text={block.text} notes={block.notes} />
     <!-- ... -->
   {/if}
 {/each}
 ```
 
-## Theme
+<Canvas of={InfoBoxStories.Demo} />
 
-Switch the theme prop to `dark` for a dark page infobox.
+## 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), which are the Svelte 5 version of slots, to customise the content as needed, e.g. adding tables, icons and thumbnail images, like in this [example](/story/components-text-elements-infobox--customised).
+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>COVID-19 deaths</h3>
+    <h3>Global video game market</h3>
   {/snippet}
   <!-- Optional custom body -->
   {#snippet body()}
     <table>
       <thead>
         <tr>
-          <th>Country</th>
-          <th>Infections</th>
-          <th>Deaths</th>
+          <th>Year</th>
+          <th>Market size ($bln)</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>United States</td>
-          <td>1,000,000</td>
-          <td>100,000</td>
+          <td>2024</td>
+          <td>274.63</td>
         </tr>
         <tr>
-          <td>United Kingdom</td>
-          <td>500,000</td>
-          <td>50,000</td>
+          <td>2023</td>
+          <td>281.77</td>
         </tr>
         <tr>
-          <td>Italy</td>
-          <td>250,000</td>
-          <td>25,000</td>
+          <td>2022</td>
+          <td>249.55</td>
         </tr>
       </tbody>
     </table>
   {/snippet}
   <!-- Optional custom footer -->
   {#snippet updated()}
-    <em>Note: This is dummy data</em>
+    <em>Source: Precedence Research</em>
   {/snippet}
 </InfoBox>
 ```
+
+<Canvas of={InfoBoxStories.Customised} />
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index 34033a82..fa8a23a5 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -35,47 +35,43 @@
 </Story>
 <Story
   name="Lists"
-  tags={['!autodocs']}
+  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">
+<Story name="Customised" tags={['!autodocs', '!dev']}>
   <InfoBox>
     {#snippet header()}
-      <h3>COVID-19 deaths</h3>
+      <h3>Global video game market</h3>
     {/snippet}
     {#snippet body()}
       <table>
         <thead>
           <tr>
-            <th>Country</th>
-            <th>Infections</th>
-            <th>Deaths</th>
+            <th>Year</th>
+            <th>Market size ($bln)</th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>United States</td>
-            <td>1,000,000</td>
-            <td>100,000</td>
+            <td>2024</td>
+            <td>274.63</td>
           </tr>
           <tr>
-            <td>United Kingdom</td>
-            <td>500,000</td>
-            <td>50,000</td>
+            <td>2023</td>
+            <td>281.77</td>
           </tr>
           <tr>
-            <td>Italy</td>
-            <td>250,000</td>
-            <td>25,000</td>
+            <td>2022</td>
+            <td>249.55</td>
           </tr>
         </tbody>
       </table>
     {/snippet}
     {#snippet footer()}
-      <em>Note: This is dummy data</em>
+      <em>Source: Precedence Research</em>
     {/snippet}
   </InfoBox>
 </Story>

From 6733906f59abe0bcf3fd8b6321f0401b13e2ee62 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 11:24:35 +0000
Subject: [PATCH 5/5] small cleanup for oxford comma and our standard lorem
 ipsum

---
 src/components/InfoBox/InfoBox.mdx            | 6 +++---
 src/components/InfoBox/InfoBox.stories.svelte | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx
index 6d58ae91..9c23d192 100644
--- a/src/components/InfoBox/InfoBox.mdx
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -6,7 +6,7 @@ import * as InfoBoxStories from './InfoBox.stories.svelte';
 
 # 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.
+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>
@@ -24,7 +24,7 @@ The `InfoBox` component creates a stylised text box that provides additional inf
 
 ## Using with ArchieML docs
 
-With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
 
 ```yaml
 # Archie ML doc
@@ -114,7 +114,7 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox
   {/snippet}
   <!-- Optional custom footer -->
   {#snippet updated()}
-    <em>Source: Precedence Research</em>
+    <div class="text-xs font-note">Source: Precedence Research</div>
   {/snippet}
 </InfoBox>
 ```
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
index fa8a23a5..f07fc990 100644
--- a/src/components/InfoBox/InfoBox.stories.svelte
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -22,7 +22,7 @@
 
 <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"
@@ -30,7 +30,7 @@
     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
@@ -71,7 +71,7 @@
       </table>
     {/snippet}
     {#snippet footer()}
-      <em>Source: Precedence Research</em>
+      <div class="text-xs font-note">Source: Precedence Research</div>
     {/snippet}
   </InfoBox>
 </Story>