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] 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
      */