From aed72b9bdab5fabc236091200c4ba13a834abe53 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 27 Mar 2025 15:19:04 -0700
Subject: [PATCH] updates tools header

---
 src/components/ToolsHeader/ToolsHeader.mdx    | 23 +++++
 .../ToolsHeader/ToolsHeader.stories.svelte    | 29 ++----
 src/components/ToolsHeader/ToolsHeader.svelte | 98 +++++++++++--------
 .../ToolsHeader/stories/docs/component.md     | 13 ---
 4 files changed, 86 insertions(+), 77 deletions(-)
 create mode 100644 src/components/ToolsHeader/ToolsHeader.mdx
 delete mode 100644 src/components/ToolsHeader/stories/docs/component.md

diff --git a/src/components/ToolsHeader/ToolsHeader.mdx b/src/components/ToolsHeader/ToolsHeader.mdx
new file mode 100644
index 00000000..12473023
--- /dev/null
+++ b/src/components/ToolsHeader/ToolsHeader.mdx
@@ -0,0 +1,23 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ToolsHeaderStories from './ToolsHeader.stories.svelte';
+
+<Meta of={ToolsHeaderStories} />
+
+# ToolsHeader
+
+The `ToolsHeader` component adds a header with the Reuters Graphics logo for internal tooling sites.
+
+> **Note:** Don't use this component for public pages.
+
+```svelte
+<script>
+  import { ToolsHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<ToolsHeader>
+  <!-- Anything else goes to the right of the logo -->
+</ToolsHeader>
+```
+
+<Canvas of={ToolsHeaderStories.Demo} />
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
index 5116fbcc..e7685ec7 100644
--- a/src/components/ToolsHeader/ToolsHeader.stories.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -1,31 +1,18 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ToolsHeader from './ToolsHeader.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page furniture/ToolsHeader',
     component: ToolsHeader,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <div>
-      <ToolsHeader {...args} />
-    </div>
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{}}" />
+<Story name="Demo" tags={['!autodocs', '!dev']}>
+  <div>
+    <ToolsHeader />
+  </div>
+</Story>
 
 <style>
   div {
diff --git a/src/components/ToolsHeader/ToolsHeader.svelte b/src/components/ToolsHeader/ToolsHeader.svelte
index 100dcba8..2d68b00f 100644
--- a/src/components/ToolsHeader/ToolsHeader.svelte
+++ b/src/components/ToolsHeader/ToolsHeader.svelte
@@ -1,60 +1,72 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) -->
 <script lang="ts">
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Make the header stick when user scrolls.
-   */
-  export let sticky = false;
-
-  /**
-   * Background CSS
-   */
-  export let background: string = 'transparent';
-
-  /**
-   * Border bottom CSS
-   */
-  export let borderBottom: string = '1px solid #dedede';
-
-  /**
-   * Colour props passed to `ReutersGraphicsLogo` component.
-   */
-  export let logoProps: {
-    logoColour?: string;
-    textColor?: string;
-  } = { logoColour: '#404040' };
-
-  /**
-   * Link the logo points to.
-   */
-  export let homeLink: string = '/';
-
   import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Snippet content */
+    children?: Snippet;
+
+    /** ID of the header container */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Make the header stick when user scrolls.
+     */
+    sticky?: boolean;
+    /**
+     * Background CSS
+     */
+    background?: string;
+    /**
+     * Border bottom CSS
+     */
+    borderBottom?: string;
+    /**
+     * Colour props passed to `ReutersGraphicsLogo` component.
+     */
+    logoProps?: {
+      logoColour?: string;
+      textColor?: string;
+    };
+    /**
+     * Link the logo points to.
+     */
+    homeLink?: string;
+  }
+
+  let {
+    children,
+    id = '',
+    class: cls = '',
+    sticky = false,
+    background = 'transparent',
+    borderBottom = '1px solid #dedede',
+    logoProps = { logoColour: '#404040' },
+    homeLink = '/',
+  }: Props = $props();
 </script>
 
 <header
   {id}
-  class="{cls}"
+  class={cls}
   class:sticky
   style:background
-  style:border-bottom="{borderBottom}"
+  style:border-bottom={borderBottom}
 >
   <div class="logo-container">
-    <a href="{homeLink}">
+    <a href={homeLink}>
       <ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
     </a>
   </div>
-  <div class="menu-items-container">
-    <!-- Any additional content -->
-    <slot />
-  </div>
+
+  <!-- Any additional content -->
+  {#if children}
+    <div class="menu-items-container">
+      {@render children()}
+    </div>
+  {/if}
 </header>
 
 <style lang="scss">
diff --git a/src/components/ToolsHeader/stories/docs/component.md b/src/components/ToolsHeader/stories/docs/component.md
deleted file mode 100644
index a951a97d..00000000
--- a/src/components/ToolsHeader/stories/docs/component.md
+++ /dev/null
@@ -1,13 +0,0 @@
-A header for internal tooling sites.
-
-> **Note:** Don't use this component for public pages.
-
-```svelte
-<script>
-  import { ToolsHeader } from '@reuters-graphics/graphics-components';
-</script>
-
-<ToolsHeader>
-  <!-- Anything else goes right of the logo -->
-</ToolsHeader>
-```