@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SiteHeader/NavBar/index.svelte

@@ -1,122 +1,124 @@
-<script>
+<script lang="ts">
   import DownArrow from './DownArrow.svelte';
   import SectionDropdown from './NavDropdown/SectionDropdown.svelte';
   import MoreDropdown from './NavDropdown/MoreDropdown.svelte';
   import { normalizeUrl } from './utils/index';
   import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
 
-  export let sections = [];
+  let { sections = [] } = $props();
 
-  const activeSection = getContext('nav-active-section');
+  const activeSection =
+    getContext<Writable<null | string>>('nav-active-section');
 
-  let windowWidth = 1200;
+  let windowWidth = $state(1200);
 
-  $: getDisplayCount = () => {
+  let getDisplayCount = $derived(() => {
     if (windowWidth >= 1300) return 7;
     return 5;
-  };
+  });
 
-  let navTimeout;
+  let navTimeout = $state<ReturnType<typeof setTimeout>>();
   const timeout = 250;
 
-  $: displayCount = getDisplayCount();
-  $: displaySections = sections.slice(0, displayCount);
-  $: hiddenSections = sections.slice(displayCount);
+  let displayCount = $derived(getDisplayCount());
+  let displaySections = $derived(sections.slice(0, displayCount));
+  let hiddenSections = $derived(sections.slice(displayCount));
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 <div class="nav-bar">
   <nav aria-label="Main navigation">
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <ul class="nav-list">
       {#each displaySections as section}
         {#if section.children}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             class="nav-item category link"
-            on:mouseenter="{() => {
+            onmouseenter={() => {
               navTimeout = setTimeout(
                 () => activeSection.set(section.id),
                 timeout
               );
-            }}"
-            on:focus="{() => activeSection.set(section.id)}"
-            on:mouseleave="{() => {
+            }}
+            onfocus={() => activeSection.set(section.id)}
+            onmouseleave={() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}"
-            on:blur="{() => {
+            }}
+            onblur={() => {
               clearTimeout(navTimeout);
               activeSection.set(null);
-            }}"
-            on:click="{() => {
+            }}
+            onclick={() => {
               if ($activeSection === section.id) {
                 clearTimeout(navTimeout);
                 activeSection.set(null);
               }
-            }}"
+            }}
           >
             <div
               class="nav-button link"
-              class:open="{section.id === $activeSection}"
+              class:open={section.id === $activeSection}
             >
-              <a href="{normalizeUrl(section.url)}">
+              <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
               <button class="button">
-                <DownArrow rotate="{section.id === $activeSection}" />
+                <DownArrow rotate={section.id === $activeSection} />
               </button>
             </div>
             {#if $activeSection === section.id}
               <SectionDropdown
                 {section}
-                headingText="{`Latest in ${section.name}`}"
+                headingText={`Latest in ${section.name}`}
               />
             {/if}
           </li>
         {:else}
           <li class="nav-item category link">
             <div class="nav-button link">
-              <a href="{normalizeUrl(section.url)}">
+              <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
             </div>
           </li>
         {/if}
       {/each}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
       <li
         class="nav-item"
-        on:mouseenter="{() => {
+        onmouseenter={() => {
           navTimeout = setTimeout(() => activeSection.set('more'), timeout);
-        }}"
-        on:focus="{() => activeSection.set('more')}"
-        on:mouseleave="{() => {
+        }}
+        onfocus={() => activeSection.set('more')}
+        onmouseleave={() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}"
-        on:blur="{() => {
+        }}
+        onblur={() => {
           clearTimeout(navTimeout);
           activeSection.set(null);
-        }}"
-        on:click="{() => {
+        }}
+        onclick={() => {
           if ($activeSection === 'more') {
             clearTimeout(navTimeout);
             activeSection.set(null);
           }
-        }}"
+        }}
       >
         <div
           class="nav-button more link"
-          class:open="{$activeSection === 'more'}"
+          class:open={$activeSection === 'more'}
         >
           <button class="button">
-            <span>More <DownArrow rotate="{$activeSection === 'more'}" /></span>
+            <span>More <DownArrow rotate={$activeSection === 'more'} /></span>
           </button>
         </div>
         {#if $activeSection === 'more'}
-          <MoreDropdown sections="{hiddenSections}" />
+          <MoreDropdown sections={hiddenSections} />
         {/if}
       </li>
     </ul>
@@ -144,6 +146,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     display: none;
   }
 }
+
 .nav-list {
   display: block;
   list-style: none;
@@ -154,6 +157,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: 16px;
   line-height: 1.5;
 }
+
 .nav-item {
   display: inline-flex;
   margin: 0;
@@ -209,6 +213,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   height: 4px;
   background: var(--nav-accent, var(--tr-orange));
 }
+
 .button {
   margin: 0;
   padding: 0;
@@ -224,6 +229,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .button:not(.focused) {
   outline: none;
 }
+
 .category {
   display: none;
 }

package/dist/components/SiteHeader/NavBar/index.svelte.d.ts

@@ -1,25 +1,5 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
-    sections?: any[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        sections?: any[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Index: import("svelte").Component<{
+    sections?: any[];
+}, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/SiteHeader/NavBar/utils/index.d.ts

@@ -1 +1 @@
-export function normalizeUrl(url: any): any;
+export declare const normalizeUrl: (url: string) => string;

package/dist/components/SiteHeader/NavBar/utils/index.js

@@ -1,2 +1 @@
-export const normalizeUrl = (url) =>
-  /^http/.test(url) ? url : `https://www.reuters.com${url}`;
+export const normalizeUrl = (url) => /^http/.test(url) ? url : `https://www.reuters.com${url}`;

package/dist/components/SiteHeader/SiteHeader.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+import * as SiteHeaderStories from './SiteHeader.stories.svelte';
+
+<Meta of={SiteHeaderStories} />
+
+# SiteHeader
+
+Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
+
+> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeader />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-siteheader--customised-theme))
+
+```svelte
+<script>
+  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteHeader />
+</Theme>
+```

package/dist/components/SiteHeader/SiteHeader.stories.svelte

@@ -1,35 +1,36 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import darkThemeDocs from "./stories/docs/darkTheme.md?raw";
-import SiteHeader from "./SiteHeader.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Page furniture/SiteHeader",
-  component: SiteHeader,
-  ...withComponentDocs(componentDocs),
-  argsTypes: {
-    themes: { control: { disable: true } }
-  }
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within, waitFor } from '@storybook/test';
+  import SiteHeader from './SiteHeader.svelte';
   import Theme from '../Theme/Theme.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/SiteHeader',
+    component: SiteHeader,
+    argTypes: {
+      themes: { control: { disable: true } },
+    },
+  });
 </script>
 
-<Template let:args>
+<Story
+  name="Demo"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('More'));
+    await waitFor(() =>
+      expect(canvas.getByText('Graphics')).toBeInTheDocument()
+    );
+    await userEvent.click(canvas.getByText('World'));
+    await waitFor(() => expect(canvas.getByText('Europe')).toBeInTheDocument());
+  }}
+>
   <div>
-    <SiteHeader {...args} />
+    <SiteHeader />
   </div>
-</Template>
-
-<Story name="Default" />
+</Story>
 
-<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
+<Story name="Customised theme">
   <div>
     <Theme base="dark">
       <SiteHeader />

package/dist/components/SiteHeader/SiteHeader.stories.svelte.d.ts

@@ -1,30 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argsTypes: {
-        themes: {
-            control: {
-                disable: boolean;
-            };
-        };
+import SiteHeader from './SiteHeader.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof SiteHeader;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SiteHeaderProps = typeof __propDef.props;
-export type SiteHeaderEvents = typeof __propDef.events;
-export type SiteHeaderSlots = typeof __propDef.slots;
-export default class SiteHeader extends SvelteComponent<SiteHeaderProps, SiteHeaderEvents, SiteHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SiteHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SiteHeader = InstanceType<typeof SiteHeader>;
+export default SiteHeader;

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -1,44 +1,53 @@
 <!-- @component `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-siteheader--docs) -->
-<script>import ReutersLogo from "../ReutersLogo/ReutersLogo.svelte";
-import NavBar from "./NavBar/index.svelte";
-import starterData from "./data.json";
-import { onMount, setContext } from "svelte";
-import { writable } from "svelte/store";
-import MenuIcon from "./svgs/Menu.svelte";
-import MobileMenu from "./MobileMenu/index.svelte";
-setContext("nav-active-section", writable(null));
-let data = starterData;
-$: sections = data[0].sections;
-let isMobileMenuOpen = false;
-onMount(async () => {
-  if (new URL(document.location.href).origin !== "https://www.reuters.com") {
-    return;
-  }
-  try {
-    const response = await fetch(
-      "https://www.reuters.com/site-api/header/?" + new URLSearchParams({
-        _website: "reuters",
-        outputType: "json"
-      })
-    );
-    const headerData = await response.json();
-    if (!headerData[0].sections) return;
-    data = headerData;
-  } catch {
-    console.warn("Unable to fetch site header data");
-  }
-});
+<script lang="ts">
+  import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
+  import NavBar from './NavBar/index.svelte';
+  import starterData from './data.json';
+  import { onMount, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import MenuIcon from './svgs/Menu.svelte';
+  import MobileMenu from './MobileMenu/index.svelte';
+
+  setContext('nav-active-section', writable<null | string>(null));
+
+  let data = $state(starterData);
+
+  let sections = $derived(data[0].sections);
+
+  let isMobileMenuOpen = $state(false);
+
+  onMount(async () => {
+    // Only fire on prod...
+    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
+      return;
+    }
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/header/?' +
+          new URLSearchParams({
+            _website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const headerData = await response.json();
+      // Dumb verification...
+      if (!headerData[0].sections) return;
+      data = headerData;
+    } catch {
+      console.warn('Unable to fetch site header data');
+    }
+  });
 </script>
 
 <header
-  style="{`
+  style={`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --nav-accent: var(--theme-colour-brand-logo, #fa6400);
     --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
     --theme-font-family-sans-serif: Knowledge, sans-serif;
-  `}"
+  `}
 >
   <a href="#main-content" class="skip-link"> Skip to main content </a>
   <div class="nav-container show-nav">
@@ -67,10 +76,10 @@ onMount(async () => {
                 class="menu-button"
                 aria-label="Menu"
                 aria-haspopup="true"
-                aria-expanded="{isMobileMenuOpen}"
-                on:click="{() => {
+                aria-expanded={isMobileMenuOpen}
+                onclick={() => {
                   isMobileMenuOpen = !isMobileMenuOpen;
-                }}"
+                }}
               >
                 <div class="button-container">
                   <MenuIcon />
@@ -86,10 +95,10 @@ onMount(async () => {
 
 <MobileMenu
   {isMobileMenuOpen}
-  releaseMobileMenu="{() => {
+  releaseMobileMenu={() => {
     isMobileMenuOpen = false;
-  }}"
-  data="{data[0]}"
+  }}
+  data={data[0]}
 />
 
 <style>@charset "UTF-8";
@@ -113,6 +122,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .nav-container a {
   text-decoration: none;
 }
+
 .scroll-container {
   height: calc(var(--page-height) - 50vh);
   pointer-events: none;
@@ -124,9 +134,8 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   pointer-events: auto;
   border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
+
 .main-bar {
-  padding-left: 2.2222222222vw;
-  padding-right: 2.2222222222vw;
   margin: 0 auto;
   box-sizing: border-box;
   display: flex;
@@ -134,15 +143,25 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   justify-content: space-between;
   max-width: 1440px;
 }
+.main-bar {
+  padding-left: 2.2222222222vw;
+}
+.main-bar {
+  padding-right: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .main-bar {
     padding-left: 4.2666666667vw;
+  }
+  .main-bar {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .main-bar {
     padding-left: 32px;
+  }
+  .main-bar {
     padding-right: 32px;
   }
 }
@@ -151,6 +170,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     height: 56px;
   }
 }
+
 .logo-container {
   align-self: center;
 }
@@ -166,6 +186,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     min-width: 94px;
   }
 }
+
 .spacer-container {
   margin-left: auto;
   display: flex;
@@ -186,6 +207,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     width: 88px;
   }
 }
+
 .mobile-button-group {
   margin-left: auto;
   display: flex;
@@ -197,6 +219,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     display: none;
   }
 }
+
 .mobile-menu {
   margin-left: 8px;
 }
@@ -238,6 +261,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 .mobile-menu .menu-button:focus-visible .button-container {
   border: 2px solid var(--nav-accent);
 }
+
 .skip-link {
   position: absolute;
   left: -10000px;
@@ -246,6 +270,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   height: 1px;
   overflow: hidden;
 }
+
 .skip-link:focus {
   position: static;
   width: auto;

package/dist/components/SiteHeader/SiteHeader.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SiteHeaderProps = typeof __propDef.props;
-export type SiteHeaderEvents = typeof __propDef.events;
-export type SiteHeaderSlots = typeof __propDef.slots;
 /** `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-siteheader--docs) */
-export default class SiteHeader extends SvelteComponent<SiteHeaderProps, SiteHeaderEvents, SiteHeaderSlots> {
-}
-export {};
+declare const SiteHeader: import("svelte").Component<Record<string, never>, {}, "">;
+type SiteHeader = ReturnType<typeof SiteHeader>;
+export default SiteHeader;