From f1020c6161675711b01f7a8e7482a0472275d551 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 11:27:28 -0700
Subject: [PATCH] set up markdown

---
 .../docs/component.md => Markdown.mdx}        | 14 ++++++--
 .../Markdown/Markdown.stories.svelte          | 33 ++++---------------
 2 files changed, 18 insertions(+), 29 deletions(-)
 rename src/components/Markdown/{stories/docs/component.md => Markdown.mdx} (84%)

diff --git a/src/components/Markdown/stories/docs/component.md b/src/components/Markdown/Markdown.mdx
similarity index 84%
rename from src/components/Markdown/stories/docs/component.md
rename to src/components/Markdown/Markdown.mdx
index 5ba4ae0a..be7b5a37 100644
--- a/src/components/Markdown/stories/docs/component.md
+++ b/src/components/Markdown/Markdown.mdx
@@ -1,15 +1,23 @@
-The Markdown component renders markdown into HTML. That's it!
+import { Meta, Canvas } from '@storybook/blocks';
 
----
+import * as MarkdownStories from './Markdown.stories.svelte';
+
+<Meta of={MarkdownStories} />
+
+# Markdown
+
+The `Markdown` component renders a markdown string into HTML.
 
 ```svelte
 <script>
   import { Markdown } from '@reuters-graphics/graphics-components';
 </script>
 
-<Markdown source="{'My markdown **string**!'}" />
+<Markdown source={'My *awesome* text in **markdown**.'} />
 ```
 
+<Canvas of={MarkdownStories.Demo} />
+
 ... well, almost.
 
 Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.
diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte
index 99464d60..5c55660a 100644
--- a/src/components/Markdown/Markdown.stories.svelte
+++ b/src/components/Markdown/Markdown.stories.svelte
@@ -1,35 +1,16 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Markdown from './Markdown.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/Markdown',
     component: Markdown,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Block from '../Block/Block.svelte';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <Block>
-      <Markdown {...args} />
-    </Block>
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    source: 'This is *some* text in **markdown**.',
-  }}"
+  name="Demo"
+  args={{
+    source: 'My *awesome* text in **markdown**.',
+  }}
 />