From dc06946fe146e3f88ba2bcfbd3302a9e3d757990 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 10 Mar 2025 11:46:48 -0700
Subject: [PATCH 1/2] migrates reuters graphics logo

---
 .../ReutersGraphicsLogo.mdx                   | 21 ++++++++++++++++
 .../ReutersGraphicsLogo.stories.svelte        | 24 ++++---------------
 .../ReutersGraphicsLogo.svelte                |  9 +++----
 .../stories/docs/component.md                 | 11 ---------
 4 files changed, 30 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
 delete mode 100644 src/components/ReutersGraphicsLogo/stories/docs/component.md

diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
new file mode 100644
index 00000000..6e7c817b
--- /dev/null
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte';
+
+<Meta of={ReutersGraphicsLogoStories} />
+
+# ReutersGraphicsLogo
+
+The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo.
+
+> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
+
+```svelte
+<script>
+  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersGraphicsLogo />
+```
+
+<Canvas of={ReutersGraphicsLogoStories.Demo} />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
index c5243444..787cc903 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -1,26 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
-
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Logos/ReutersGraphicsLogo',
     component: ReutersGraphicsLogo,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <ReutersGraphicsLogo {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{}}" />
+<Story name="Demo" />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
index 6fe397dc..cb6e31bc 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
@@ -1,8 +1,5 @@
 <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--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
diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md
deleted file mode 100644
index 6980dcaf..00000000
--- a/src/components/ReutersGraphicsLogo/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Reuters Graphics team logo.
-
-> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
-
-```svelte
-<script>
-  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReutersGraphicsLogo />
-```

From bda6f2b80d3adc15c245b8f783b5a65c522cb7dd Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Wed, 12 Mar 2025 12:14:07 +0000
Subject: [PATCH 2/2] add colour pickers to argTypes in story meta

---
 .../ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
index 787cc903..34093134 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -4,6 +4,10 @@
   const { Story } = defineMeta({
     title: 'Components/Logos/ReutersGraphicsLogo',
     component: ReutersGraphicsLogo,
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
   });
 </script>