@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SiteFooter/svgs/Instagram.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  InstagramProps */
-/** @typedef {typeof __propDef.events}  InstagramEvents */
-/** @typedef {typeof __propDef.slots}  InstagramSlots */
-export default class Instagram extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type InstagramProps = typeof __propDef.props;
-export type InstagramEvents = typeof __propDef.events;
-export type InstagramSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Instagram: import("svelte").Component<Props, {}, "">;
+type Instagram = ReturnType<typeof Instagram>;
+export default Instagram;

package/dist/components/SiteFooter/svgs/LinkedIn.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg

package/dist/components/SiteFooter/svgs/LinkedIn.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  LinkedInProps */
-/** @typedef {typeof __propDef.events}  LinkedInEvents */
-/** @typedef {typeof __propDef.slots}  LinkedInSlots */
-export default class LinkedIn extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type LinkedInProps = typeof __propDef.props;
-export type LinkedInEvents = typeof __propDef.events;
-export type LinkedInSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const LinkedIn: import("svelte").Component<Props, {}, "">;
+type LinkedIn = ReturnType<typeof LinkedIn>;
+export default LinkedIn;

package/dist/components/SiteFooter/svgs/Pictures.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  PicturesProps */
-/** @typedef {typeof __propDef.events}  PicturesEvents */
-/** @typedef {typeof __propDef.slots}  PicturesSlots */
-export default class Pictures extends SvelteComponent<{
+export default Pictures;
+type Pictures = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type PicturesProps = typeof __propDef.props;
-export type PicturesEvents = typeof __propDef.events;
-export type PicturesSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Pictures: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/SiteFooter/svgs/Twitter.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg

package/dist/components/SiteFooter/svgs/Twitter.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  TwitterProps */
-/** @typedef {typeof __propDef.events}  TwitterEvents */
-/** @typedef {typeof __propDef.slots}  TwitterSlots */
-export default class Twitter extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type TwitterProps = typeof __propDef.props;
-export type TwitterEvents = typeof __propDef.events;
-export type TwitterSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Twitter: import("svelte").Component<Props, {}, "">;
+type Twitter = ReturnType<typeof Twitter>;
+export default Twitter;

package/dist/components/SiteFooter/svgs/Videos.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  VideosProps */
-/** @typedef {typeof __propDef.events}  VideosEvents */
-/** @typedef {typeof __propDef.slots}  VideosSlots */
-export default class Videos extends SvelteComponent<{
+export default Videos;
+type Videos = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type VideosProps = typeof __propDef.props;
-export type VideosEvents = typeof __propDef.events;
-export type VideosSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Videos: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/SiteFooter/svgs/YouTube.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg

package/dist/components/SiteFooter/svgs/YouTube.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  YouTubeProps */
-/** @typedef {typeof __propDef.events}  YouTubeEvents */
-/** @typedef {typeof __propDef.slots}  YouTubeSlots */
-export default class YouTube extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type YouTubeProps = typeof __propDef.props;
-export type YouTubeEvents = typeof __propDef.events;
-export type YouTubeSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const YouTube: import("svelte").Component<Props, {}, "">;
+type YouTube = ReturnType<typeof YouTube>;
+export default YouTube;

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

@@ -1,24 +1,34 @@
-<script>
+<script lang="ts">
   import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
   import CloseIcon from '../svgs/Close.svelte';
   import { normalizeUrl } from '../NavBar/utils/index.js';
 
-  export let data = [];
-  export let isMobileMenuOpen = false;
-  export let releaseMobileMenu = () => {};
+  interface Props {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data?: any;
+    isMobileMenuOpen?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    releaseMobileMenu?: any;
+  }
+
+  let {
+    data = {},
+    isMobileMenuOpen = false,
+    releaseMobileMenu = () => {},
+  }: Props = $props();
 </script>
 
 {#if isMobileMenuOpen}
   <div
     class="overlay"
     aria-modal="true"
-    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, rgba(64,64,64,.08));
-    `}"
+    `}
   >
     <header class="header">
       <div class="logo">
@@ -27,7 +37,7 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" on:click="{releaseMobileMenu}">
+      <button class="button close-button" onclick={releaseMobileMenu}>
         <div class="button-container">
           <CloseIcon />
         </div>
@@ -35,14 +45,14 @@
     </header>
     {#each data.sections as section}
       <section class="section">
-        <a class="section-link" href="{normalizeUrl(section.url)}"
+        <a class="section-link" href={normalizeUrl(section.url)}
           >{section.name}</a
         >
         {#if section.children}
           <ul class="subsections">
             {#each section.children as sub}
               <li>
-                <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+                <a class="subsection-link" href={normalizeUrl(sub.url)}>
                   {sub.name}
                 </a>
               </li>
@@ -80,6 +90,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   color: var(--nav-primary);
   overflow: auto;
 }
+
 .header {
   position: sticky;
   top: 0;
@@ -91,10 +102,12 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   box-sizing: border-box;
   background: var(--nav-background);
 }
+
 .logo {
   font-size: 0;
   width: 94px;
 }
+
 .close-button {
   width: 40px;
   height: 40px;
@@ -129,41 +142,59 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .close-button:focus-visible .button-container {
   border: 2px solid var(--nav-accent);
 }
+
+.header {
+  border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+}
 .header {
   padding-left: 2.2222222222vw;
+}
+.header {
   padding-right: 2.2222222222vw;
-  border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 @media (max-width: 1023px) {
   .header {
     padding-left: 4.2666666667vw;
+  }
+  .header {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .header {
     padding-left: 32px;
+  }
+  .header {
     padding-right: 32px;
   }
 }
+
 .section {
-  padding-left: 2.2222222222vw;
-  padding-right: 2.2222222222vw;
   padding-top: 16px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--tr-muted-grey);
   width: 100%;
   max-width: 100%;
 }
+.section {
+  padding-left: 2.2222222222vw;
+}
+.section {
+  padding-right: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .section {
     padding-left: 4.2666666667vw;
+  }
+  .section {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .section {
     padding-left: 32px;
+  }
+  .section {
     padding-right: 32px;
   }
 }
@@ -175,6 +206,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 2.2222222222vw;
   grid-row-gap: 16px;
+}
+.section .subsections {
   grid-column-gap: 2.2222222222vw;
 }
 @media (max-width: 1023px) {

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

@@ -1,29 +1,8 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
-    data?: any[] | undefined;
-    isMobileMenuOpen?: boolean | undefined;
-    releaseMobileMenu?: (() => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    data?: any;
+    isMobileMenuOpen?: boolean;
+    releaseMobileMenu?: 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: {
-        data?: any[] | undefined;
-        isMobileMenuOpen?: boolean | undefined;
-        releaseMobileMenu?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Index: import("svelte").Component<Props, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

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

@@ -1,10 +1,14 @@
-<script>
-  export let rotate = false;
+<script lang="ts">
+  interface Props {
+    rotate?: boolean;
+  }
+
+  let { rotate = false }: Props = $props();
 </script>
 
 <svg
   class="arrow"
-  class:rotated="{rotate}"
+  class:rotated={rotate}
   focusable="false"
   aria-hidden="true"
   xmlns="http://www.w3.org/2000/svg"

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

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  DownArrowProps */
-/** @typedef {typeof __propDef.events}  DownArrowEvents */
-/** @typedef {typeof __propDef.slots}  DownArrowSlots */
-export default class DownArrow extends SvelteComponent<{
-    rotate?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    rotate?: boolean;
 }
-export type DownArrowProps = typeof __propDef.props;
-export type DownArrowEvents = typeof __propDef.events;
-export type DownArrowSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        rotate?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const DownArrow: import("svelte").Component<Props, {}, "">;
+type DownArrow = ReturnType<typeof DownArrow>;
+export default DownArrow;

package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -1,26 +1,26 @@
-<script>
+<script lang="ts">
   import NavDropdown from './index.svelte';
   import { normalizeUrl } from '../utils';
 
-  export let sections = [];
+  let { sections = [] } = $props();
 </script>
 
 <NavDropdown>
-  <div class="more-sections">
+  <div class="more-sections" data-chromatic="ignore">
     <div class="groupContainer">
       {#each sections as section}
         <section
           class="more-section-group"
-          class:has-children="{section.children}"
+          class:has-children={section.children}
         >
-          <a href="{normalizeUrl(section.url)}" class="section-link">
+          <a href={normalizeUrl(section.url)} class="section-link">
             {section.name}
           </a>
           {#if section.children}
             <ul class="subsections">
               {#each section.children as sub}
                 <li>
-                  <a class="subsection-link" href="{normalizeUrl(sub.url)}"
+                  <a class="subsection-link" href={normalizeUrl(sub.url)}
                     >{sub.name}</a
                   >
                 </li>
@@ -47,6 +47,7 @@ a:hover {
   color: inherit;
   text-decoration: underline !important;
 }
+
 .more-sections {
   position: relative;
 }
@@ -57,17 +58,20 @@ a:hover {
     column-gap: 64px;
   }
 }
+
 .more-section-group.has-children {
   margin-bottom: 20px;
 }
 .more-section-group .subsections {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 2.2222222222vw;
   padding: 0;
   margin: 0;
   list-style: none;
 }
+.more-section-group .subsections {
+  grid-column-gap: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .more-section-group .subsections {
     grid-column-gap: 4.2666666667vw;

package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte.d.ts

@@ -1,25 +1,5 @@
-/** @typedef {typeof __propDef.props}  MoreDropdownProps */
-/** @typedef {typeof __propDef.events}  MoreDropdownEvents */
-/** @typedef {typeof __propDef.slots}  MoreDropdownSlots */
-export default class MoreDropdown extends SvelteComponent<{
-    sections?: any[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type MoreDropdownProps = typeof __propDef.props;
-export type MoreDropdownEvents = typeof __propDef.events;
-export type MoreDropdownSlots = 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 MoreDropdown: import("svelte").Component<{
+    sections?: any[];
+}, {}, "">;
+type MoreDropdown = ReturnType<typeof MoreDropdown>;
+export default MoreDropdown;

package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -1,29 +1,29 @@
-<script>
+<script lang="ts">
   import { normalizeUrl } from '../utils';
 
   import NavDropdown from './index.svelte';
 
-  export let section = {};
-  export let headingText;
+  let { section = {}, headingText } = $props();
 
-  $: splitCount =
+  let splitCount = $derived(
     section.children && section.children.length > 7 ?
       Math.ceil(section.children.length / 2)
-    : 0;
+    : 0
+  );
 </script>
 
 <NavDropdown {headingText}>
-  <a href="{normalizeUrl(section.url)}">
+  <a href={normalizeUrl(section.url)}>
     <span class="heading">
       Browse {section.name}
     </span>
   </a>
-  <div class="sections">
+  <div class="sections" data-chromatic="ignore">
     {#if splitCount > 0}
       <ul class="sections-group">
         {#each section.children.slice(0, splitCount) as sub}
           <li>
-            <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+            <a class="subsection-link" href={normalizeUrl(sub.url)}>
               {sub.name}
             </a>
           </li>
@@ -33,7 +33,7 @@
     <ul class="sections-group">
       {#each section.children.slice(splitCount) as sub}
         <li>
-          <a class="subsection-link" href="{normalizeUrl(sub.url)}">
+          <a class="subsection-link" href={normalizeUrl(sub.url)}>
             {sub.name}
           </a>
         </li>
@@ -49,6 +49,7 @@ a:hover {
   color: var(--nav-primary, var(--tr-dark-grey));
   text-decoration: underline !important;
 }
+
 .sections {
   display: flex;
 }
@@ -79,6 +80,7 @@ a:hover {
     margin-top: 0;
   }
 }
+
 .subsection-link {
   line-height: 18px;
   font-weight: 400;
@@ -90,6 +92,7 @@ a:hover {
 .subsection-link:hover {
   text-decoration: underline;
 }
+
 span.heading {
   line-height: 1.333;
   font-size: 16px;
@@ -112,6 +115,7 @@ span.heading:hover {
   color: inherit;
   text-decoration: underline !important;
 }
+
 li > a {
   line-height: 1.75;
   letter-spacing: 0;