From 760f559956f49ce559108a0d6fbc51e3c4985cb9 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 6 Mar 2025 12:01:56 -0800
Subject: [PATCH] updates  EmbedPreviewerLink

---
 .../EmbedPreviewerLink/EmbedPreviewerLink.mdx | 19 ++++++++++++++
 .../EmbedPreviewerLink.stories.svelte         | 26 +++++--------------
 .../EmbedPreviewerLink.svelte                 |  3 +--
 .../stories/docs/component.md                 | 11 --------
 4 files changed, 26 insertions(+), 33 deletions(-)
 create mode 100644 src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
 delete mode 100644 src/components/EmbedPreviewerLink/stories/docs/component.md

diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
new file mode 100644
index 00000000..bb7cb5fb
--- /dev/null
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+import * as EmbedPreviewerLinkStories from './EmbedPreviewerLink.stories.svelte';
+
+<Meta of={EmbedPreviewerLinkStories} />
+
+# EmbedPreviewerLink
+
+A tool for previewing the embeds in development. This adds an icon at the bottom of the page that, when clicked, opens a preview page with the embeds.
+
+```svelte
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+</script>
+
+<EmbedPreviewerLink {dev} />
+```
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
index fa380bef..afdc73a2 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -1,30 +1,16 @@
 <script module lang="ts">
   import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Utilities/EmbedPreviewerLink',
     component: EmbedPreviewerLink,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <EmbedPreviewerLink {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     dev: true,
-  }}"
+  }}
 />
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
index 7420449e..21ea835e 100644
--- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
   import Fa from 'svelte-fa/src/fa.svelte';
   import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
   interface Props {
@@ -12,7 +11,7 @@
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon="{faWindowRestore}" />
+      <Fa icon={faWindowRestore} />
     </a>
   </div>
 {/if}
diff --git a/src/components/EmbedPreviewerLink/stories/docs/component.md b/src/components/EmbedPreviewerLink/stories/docs/component.md
deleted file mode 100644
index 35b360b1..00000000
--- a/src/components/EmbedPreviewerLink/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-An embed tool for development in graphics kit.
-
-```svelte
-<script>
-  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
-
-  import { dev } from '$app/env';
-</script>
-
-<EmbedPreviewerLink dev="{dev}" />
-```