Merge pull request #264 from reuters-graphics/mf-tools-header

Updates ToolsHeader

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} />

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 {

src/components/ToolsHeader/ToolsHeader.svelte

@@ -1,42 +1,51 @@
-<!-- @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
@@ -51,10 +60,13 @@
       <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">

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

@@ -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>
-```