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