Merge pull request #216 from reuters-graphics/mf-previewer

Updates EmbedPreviewerLink

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
+
+The `EmbedPreviewerLink` component is a tool for previewing the embeds in development. It adds an icon at the bottom of the page that, when clicked, opens a previewer with the embeds.
+
+```svelte
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+</script>
+
+<EmbedPreviewerLink {dev} />
+```

src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte

@@ -1,30 +1,17 @@
 <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"
+  tags={['!autodocs', '!dev']}
+  args={{
     dev: true,
-  }}"
+  }}
 />

src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte

@@ -11,7 +11,7 @@
 {#if dev}
   <div>
     <a rel="external" href="/embed-previewer">
-      <Fa icon="{faWindowRestore}" />
+      <Fa icon={faWindowRestore} />
     </a>
   </div>
 {/if}

src/components/EmbedPreviewerLink/stories/docs/component.md

@@ -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}" />
-```