From b901bb3c369e15e95154ddb4ad5a4cda6e992f36 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 15:55:13 -0700
Subject: [PATCH] migrates reuters logo

---
 src/components/ReutersLogo/ReutersLogo.mdx    | 19 +++++++++
 .../ReutersLogo/ReutersLogo.stories.svelte    | 23 ++---------
 src/components/ReutersLogo/ReutersLogo.svelte | 40 +++++++++----------
 .../ReutersLogo/stories/docs/component.md     |  9 -----
 4 files changed, 43 insertions(+), 48 deletions(-)
 create mode 100644 src/components/ReutersLogo/ReutersLogo.mdx
 delete mode 100644 src/components/ReutersLogo/stories/docs/component.md

diff --git a/src/components/ReutersLogo/ReutersLogo.mdx b/src/components/ReutersLogo/ReutersLogo.mdx
new file mode 100644
index 00000000..e4d3b63e
--- /dev/null
+++ b/src/components/ReutersLogo/ReutersLogo.mdx
@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersLogoStories from './ReutersLogo.stories.svelte';
+
+<Meta of={ReutersLogoStories} />
+
+# ReutersLogo
+
+The `ReutersLogo` component contains the official Reuters logo.
+
+```svelte
+<script>
+  import { ReutersLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersLogo />
+```
+
+<Canvas of={ReutersLogoStories.Demo} />
diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte
index 87499cf6..5ab6725f 100644
--- a/src/components/ReutersLogo/ReutersLogo.stories.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte
@@ -1,30 +1,15 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ReutersLogo from './ReutersLogo.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Logos/ReutersLogo',
     component: ReutersLogo,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       logoColour: { control: 'color' },
       textColour: { control: 'color' },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <ReutersLogo {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" />
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
index 49a4a00f..aadffaee 100644
--- a/src/components/ReutersLogo/ReutersLogo.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
 <script lang="ts">
-  
-  
-  
   interface Props {
     /** "Kinesis" colour */
     logoColour?: string;
@@ -12,7 +9,11 @@
     width?: string;
   }
 
-  let { logoColour = '#D64000', textColour = '#212223', width = '100%' }: Props = $props();
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
@@ -21,22 +22,6 @@
   viewBox="0 0 1760.4 558.7"
   style="width: {width}; --logoColour: {logoColour}; --textColour: {textColour};"
 >
-  <defs>
-    <style>
-      .cls-1 {
-        fill: var(--logoColour);
-      }
-
-      .cls-1,
-      .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: var(--textColour);
-      }
-    </style>
-  </defs>
   <g id="Primary_Logo" data-name="Primary Logo">
     <g>
       <g>
@@ -186,3 +171,18 @@
     </g>
   </g>
 </svg>
+
+<style>
+  .cls-1 {
+    fill: var(--logoColour);
+  }
+
+  .cls-1,
+  .cls-2 {
+    stroke-width: 0px;
+  }
+
+  .cls-2 {
+    fill: var(--textColour);
+  }
+</style>
diff --git a/src/components/ReutersLogo/stories/docs/component.md b/src/components/ReutersLogo/stories/docs/component.md
deleted file mode 100644
index 18cd0d66..00000000
--- a/src/components/ReutersLogo/stories/docs/component.md
+++ /dev/null
@@ -1,9 +0,0 @@
-The official Reuters logo.
-
-```svelte
-<script>
-  import { ReutersLogo } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReutersLogo />
-```