@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Video/utils.js

@@ -0,0 +1,13 @@
+/** Returns the CSS positions for the controls button */
+export const getButtonPosition = (controlsPosition, borderOffset) => {
+    if (controlsPosition === 'top left')
+        return `top: ${borderOffset}px; left: ${borderOffset}px;`;
+    if (controlsPosition === 'top right')
+        return `top: ${borderOffset}px; right: ${borderOffset}px;`;
+    if (controlsPosition === 'bottom left')
+        return `bottom: ${borderOffset}px; left: ${borderOffset}px;`;
+    if (controlsPosition === 'bottom right')
+        return `bottom: ${borderOffset}px; right: ${borderOffset}px;`;
+    // Otherwise, centre it
+    return `top: 50%; left: 50%; transform: translate(-50%, -50%);`;
+};

package/dist/components/Visible/Visible.mdx

@@ -0,0 +1,33 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as VisibleStories from './Visible.stories.svelte';
+
+<Meta of={VisibleStories} />
+
+# Visible
+
+The `Visible` component wraps around other components or HTML elements and uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to determine if they are visible on the page.
+
+This is useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
+
+By default, `visible` will switch between `false` and `true` whenever the element is in our out of view. To trigger this just once, set the prop `once` to `true`. This is useful for loading expensive media when they first come into view and then keeping them around once they're loaded.
+
+> **Note:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.
+
+```svelte
+<script>
+  import { Visible } from '@reuters-graphics/graphics-components';
+</script>
+
+<Visible>
+  {#snippet children(visible)}
+    {#if visible}
+      <p>Visible!</p>
+    {:else}
+      <p>Not yet visible.</p>
+    {/if}
+  {/snippet}
+</Visible>
+```
+
+<Canvas of={VisibleStories.Demo} />

package/dist/components/Visible/Visible.stories.svelte

@@ -1,26 +1,22 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import defaultSnippet from "./stories/snippets/default.svelte?raw";
-import Visible from "./Visible.svelte";
-import { withSource, withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Utilities/Visible",
-  component: Visible,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Visible from './Visible.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Visible',
+    component: Visible,
+  });
 </script>
 
-<Template let:args>
-  <Visible {...args} let:visible>
-    {#if visible}
-      <p>Visible!</p>
-    {:else}
-      <p>Not yet visible.</p>
-    {/if}
+<Story name="Demo" tags={['!autodocs', '!dev']}>
+  <Visible>
+    {#snippet children(visible)}
+      {#if visible}
+        <p>Visible!</p>
+      {:else}
+        <p>Not yet visible.</p>
+      {/if}
+    {/snippet}
   </Visible>
-</Template>
-
-<Story name="Default" {...withSource({ svelte: defaultSnippet })} />
+</Story>

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import Visible from './Visible.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;
     };
-    title: string;
-    component: typeof Visible;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type VisibleProps = typeof __propDef.props;
-export type VisibleEvents = typeof __propDef.events;
-export type VisibleSlots = typeof __propDef.slots;
-export default class Visible extends SvelteComponent<VisibleProps, VisibleEvents, VisibleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Visible: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Visible = InstanceType<typeof Visible>;
+export default Visible;

package/dist/components/Visible/Visible.svelte

@@ -1,44 +1,81 @@
 <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
-<script>import { onMount } from "svelte";
-export let once = false;
-export let top = 0;
-export let bottom = 0;
-export let left = 0;
-export let right = 0;
-export let threshold = 0;
-let visible = false;
-let container;
-onMount(() => {
-  if (typeof IntersectionObserver !== "undefined") {
-    const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        visible = entries[0].isIntersecting;
-        if (visible && once) {
-          observer.unobserve(container);
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Whether to change visibility just once.
+     *
+     * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
+     */
+    once?: boolean;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
+    top?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
+    bottom?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
+    left?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
+    right?: number;
+    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
+    threshold?: number;
+    children?: Snippet<[boolean]>;
+  }
+
+  let {
+    once = false,
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
+    threshold = 0,
+    children,
+  }: Props = $props();
+
+  let visible = $state(false);
+  let container: HTMLElement | undefined = $state(undefined);
+
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          visible = entries[0].isIntersecting;
+          if (visible && once && container) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+          threshold,
         }
-      },
-      {
-        rootMargin,
-        threshold
+      );
+      if (container) observer.observe(container);
+      return () => {
+        if (container) observer.observe(container);
+      };
+    }
+    function handler() {
+      if (container) {
+        const bcr = container.getBoundingClientRect();
+        visible =
+          bcr.bottom + bottom > 0 &&
+          bcr.right + right > 0 &&
+          bcr.top - top < window.innerHeight &&
+          bcr.left - left < window.innerWidth;
+      }
+      if (visible && once) {
+        window.removeEventListener('scroll', handler);
       }
-    );
-    observer.observe(container);
-    return () => observer.unobserve(container);
-  }
-  function handler() {
-    const bcr = container.getBoundingClientRect();
-    visible = bcr.bottom + bottom > 0 && bcr.right + right > 0 && bcr.top - top < window.innerHeight && bcr.left - left < window.innerWidth;
-    if (visible && once) {
-      window.removeEventListener("scroll", handler);
     }
-  }
-  window.addEventListener("scroll", handler);
-  return () => window.removeEventListener("scroll", handler);
-});
+    window.addEventListener('scroll', handler);
+    return () => window.removeEventListener('scroll', handler);
+  });
 </script>
 
-<div bind:this="{container}">
-  <!-- An element or component -->
-  <slot {visible} />
+<div bind:this={container}>
+  {#if children}
+    {@render children(visible)}
+  {/if}
 </div>

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

@@ -1,32 +1,24 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Whether to change visibility just once.
-           *
-           * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
-           */ once?: boolean;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */ top?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */ bottom?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */ left?: number;
-        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */ right?: number;
-        /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */ threshold?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            visible: boolean;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type VisibleProps = typeof __propDef.props;
-export type VisibleEvents = typeof __propDef.events;
-export type VisibleSlots = typeof __propDef.slots;
-/** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) */
-export default class Visible extends SvelteComponent<VisibleProps, VisibleEvents, VisibleSlots> {
+import { type Snippet } from 'svelte';
+interface Props {
+    /**
+     * Whether to change visibility just once.
+     *
+     * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
+     */
+    once?: boolean;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
+    top?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
+    bottom?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
+    left?: number;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
+    right?: number;
+    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
+    threshold?: number;
+    children?: Snippet<[boolean]>;
 }
-export {};
+/** `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) */
+declare const Visible: import("svelte").Component<Props, {}, "">;
+type Visible = ReturnType<typeof Visible>;
+export default Visible;

package/dist/docs/contributing/component-guidelines.mdx

@@ -20,7 +20,7 @@ By default, component's are written in TypeScript, which adds robust type-checki
 
 ### Typing and documenting component props
 
-Document props using [JSDoc comments](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) (be sure to mark required props) and type props with TypeScript.
+Document props using [JSDoc comments](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html) and type props with TypeScript.
 
 Here are a few examples:
 
@@ -28,27 +28,16 @@ Here are a few examples:
 
 ```svelte
 <script lang="ts">
-  /** Height of the component */
-  export let height: number = 250;
-  /** Text colour */
-  export let colour: string = 'blue';
-</script>
-```
-
-#### Documenting required props
+  interface Props {
+    /** Required text content */
+    text: string;
+    /** Optional height of the component */
+    height?: number;
+    /** Optional text colour */
+    colour?: string;
+  }
 
-```svelte
-<script lang="ts">
-  /**
-   * Image source
-   * @required
-   */
-  export let src: string;
-  /**
-   * AltText for the image
-   * @required
-   */
-  export let altText: string;
+  let { text, height = 250, colour = 'blue' }: Props = $props();
 </script>
 ```
 
@@ -58,40 +47,22 @@ Here are a few examples:
 <script lang="ts">
   type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
 
-  /** Width of the component within the text well. */
-  export let width: ContainerWidth = 'normal';
-
   interface Person {
     name: string;
     age: number;
   }
 
-  /**
-   * Array of people
-   * @required
-   */
-  export let people: Person[];
-</script>
-```
-
-#### Future syntax
-
-Using some future syntax like [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) in your components currently breaks the automatic discovery of JSDoc comments in your component, which are used to fill in the [ArgsTable](https://storybook.js.org/docs/react/writing-docs/doc-block-argstable).
-
-So instead of...
-
-```javascript
-const prop = myObject?.myOptionalProp;
-```
-
-...unfortunately, use something old-fashioned like...
+  interface Props {
+    /** Array of people */
+    people: Person[];
+    /** Optional width of the component within the text well. */
+    width?: ContainerWidth;
+  }
 
-```javascript
-const prop = myObject.myOptionalProp ? myObject.myOptionalProp : null;
+  let { people, width = 'normal' }: Props = $props();
+</script>
 ```
 
-If your component docs still aren't working, check if you're using other future-JS sytax, for now.
-
 ## Styles
 
 ### Theming
@@ -148,7 +119,7 @@ Use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c
 
 ```svelte
 <script>
-  export let textColour = '#333';
+  let { textColour = '#333' } = $props();
 </script>
 
 <div style="--textColour: {textColour};">

package/dist/docs/contributing/quickstart.mdx

@@ -23,24 +23,14 @@ Make a new git branch for your new component, like...
 git checkout -b my-component
 ```
 
-This library includes a basic template for creating and documenting your component with Storybook you can use to get started.
-
-Just run...
-
-```
-pnpm new
-```
-
-... which will create a new directory for your component and copy over an example Svelte component and story page.
-
 To start developing your component, start the dev server with...
 
 ```
 pnpm start
 ```
 
-When you're ready to share your chart, commit your branch to GitHub, make a PR and we'll get it published!
+When you're ready to share your component, commit your branch to GitHub, make a PR and we'll get it published!
 
 ```
-git push origin my-chart
+git push origin my-component
 ```

package/dist/docs/contributing/writing-component-stories.mdx

@@ -9,24 +9,23 @@ As well as writing your component, you should also document how to use it using
 
 ## What's a story?
 
-Paraphrasing [Storybook's definition](https://storybook.js.org/docs/svelte/writing-stories/introduction): A story captures the rendered state of a Svelte component, given certain props. Translation: It's a demo of what your component can do.
+Paraphrasing [Storybook's definition](https://storybook.js.org/docs/get-started/whats-a-story): A story captures the rendered state of a Svelte component, given certain props. Translation: It's a demo of what your component can do.
 
 In Storybook, you create a story page for your component, which can itself contain several "stories" or demos of how your component works.
 
-To make a story page, you'll create a `*.stories.svelte` file next to your component like this:
+To make a story page, you'll create a `*.stories.svelte` and a `*.mdx` file next to your component like this:
 
 ```
 src/
   components/
     YourComponent/
+      YourComponent.mdx
       YourComponent.svelte
       YourComponent.stories.svelte
 ```
 
-Your component's story page will then have at least one story that shows how it can be used.
+The `*.stories.svelte` component is where you will define the stories or specific demos of your component. The `*.mdx` file is where you can write extended documentation about your component.
 
 ## How do I write stories?
 
-Read through the recipes docs for some common examples of how you may want to write and customise your stories.
-
-If you're comparing the recipes to Storybook's own docs, note that all the examples use "Svelte Native" story format. (Storybook is technically a React-first tool that's been retrofit to also support a number of other frameworks, including Svelte.)
+Read more about writing stories using the Svelte component story format (CSF) [here](https://github.com/storybookjs/addon-svelte-csf?tab=readme-ov-file#-usage) and writing accompanying MDX docs [here](https://storybook.js.org/docs/writing-docs/mdx).

package/dist/docs/docs-components/ThemeBuilder/Customiser/Value.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { cloneDeep, set } from 'lodash-es';
+import { cloneDeep } from 'es-toolkit';
+import { set } from 'es-toolkit/compat';
 
 import ColourPicker from './ColourPicker.jsx';
 

package/dist/docs/docs-components/ThemeBuilder/ThemeBuilder.jsx

@@ -6,7 +6,7 @@ import ThemeSwitch from './ThemeSwitch/Switch';
 import { Unstyled } from '@storybook/blocks';
 // @ts-ignore scss
 import classes from './styles.module.scss';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep } from 'es-toolkit';
 import darkTheme from '../../../components/Theme/themes/dark';
 import lightTheme from '../../../components/Theme/themes/light';
 

package/dist/docs/guides/archieml.mdx

@@ -21,11 +21,11 @@ Let's look at a basic component, a `ProfileCard`, with a demo that looks like th
 
 <ProfileCard
   name="Kitty"
-  age="{2}"
+  age={2}
   img="https://cats.com/cat1.jpg"
-  birthday="{new Date('2020-09-25')}"
+  birthday={new Date('2020-09-25')}
   bio="Some notes.\n\nWith multiple paragraphs."
-  isGood="{true}"
+  isGood={true}
 />
 ```
 
@@ -100,12 +100,12 @@ Notice all the values in the data are **strings**. More on that soon.
     <!-- ... -->
   {:else if block.type === 'profile-card'}
     <ProfileCard
-      name="{block.name}"
-      age="{parseInt(block.age)}"
-      img="{`${assets}/${block.picture}`}"
-      birthday="{new Date(block.birthday)}"
-      bio="{block.bio}"
-      isGood="{block.isGood === 'true'}"
+      name={block.name}
+      age={parseInt(block.age)}
+      img={`${assets}/${block.picture}`}
+      birthday={new Date(block.birthday)}
+      bio={block.bio}
+      isGood={block.isGood === 'true'}
     />
     <!-- ... -->
   {/if}
@@ -136,12 +136,12 @@ Once we've identified we have the right block for our component, we need to conv
 
 ```svelte
 <ProfileCard
-  name="{block.name}"
-  age="{parseInt(block.age)}"
-  img="{`${assets}/${block.picture}`}"
-  birthday="{new Date(block.birthday)}"
-  bio="{block.bio}"
-  isGood="{block.isGood === 'true'}"
+  name={block.name}
+  age={parseInt(block.age)}
+  img={`${assets}/${block.picture}`}
+  birthday={new Date(block.birthday)}
+  bio={block.bio}
+  isGood={block.isGood === 'true'}
 />
 ```
 
@@ -163,7 +163,7 @@ For example, we're converting Tom's age into a number with JavaScript's [parseIn
 {block.isGood === 'true'}
 ```
 
-**Especially note** how we're using the `assets` module we talked about in ["Using with the Graphics Kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached.
+**Especially note** how we're using the `assets` module we talked about in ["Using with the graphics kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached.
 
 ```svelte
 {`${assets}/${block.picture}`}
@@ -191,7 +191,7 @@ Let's look at another example component:
 ```svelte
 <Timeline
   title="A brief history of BitCoin"
-  dates="{[
+  dates={[
     {
       date: new Date('1992-01-01'),
       subhed:
@@ -208,7 +208,7 @@ Let's look at another example component:
       subhed: 'The Winklevoss twins buy in',
       img: `${assets}/images/winkle-boys.jpeg`,
     },
-  ]}"
+  ]}
 />
 ```
 

package/dist/docs/guides/graphics-kit.mdx

@@ -3,13 +3,13 @@ import { parameters } from '../utils/docsPage.js';
 import Highlight from '../docs-components/Highlight/Highlight';
 
 <Meta
-  title="Guides/Using with the Graphics Kit"
+  title="Guides/Using with the graphics kit"
   parameters={{ ...parameters }}
 />
 
-# Using with the Graphics Kit
+# Using with the graphics kit
 
-Our graphics components are designed to work seemlessly with the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder.
+Our graphics components are designed to work seemlessly with the [graphics kit](https://reuters-graphics.github.io/bluprint_graphics-kit/) as well as just about any Svelte-based page builder.
 
 **There is, however, one gotcha to watch out for:**
 
@@ -19,7 +19,7 @@ When working with multimedia files like images or videos, components expect all
 
 ❌ `./myImage.jpg`
 
-In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
+In the graphics kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!
 
 ```svelte
 <script>
@@ -30,5 +30,5 @@ In the Graphics Kit, that means you'll need to prefix relative paths with the sp
 </script>
 
 <!-- Use the assets module to prefix the path to your image. -->
-<FeautrePhoto src="{`${assets}/imgs/myImage.jpg`}" />
+<FeautrePhoto src="{assets}/imgs/myImage.jpg" />
 ```

package/dist/docs/guides/svelte-components.mdx

@@ -19,14 +19,16 @@ A component is usually composed of several parts: JavaScript for managing data,
 ```svelte
 <!-- JavaScript -->
 <script>
-  export let imgSrc = 'https://reuters.com/image.jpg';
-  export let altText = 'A cat';
-  export let caption = 'Mousing all day is hard work ...';
+  let {
+    imgSrc = 'https://reuters.com/image.jpg',
+    altText = 'A cat',
+    caption = 'Mousing all day is hard work ...',
+  } = $props();
 </script>
 
 <!-- HTML -->
 <figure>
-  <img src="{imgSrc}" alt="{altText}" />
+  <img src={imgSrc} alt={altText} />
   <figcaption>{caption}</figcaption>
 </figure>
 
@@ -47,11 +49,11 @@ A component is usually composed of several parts: JavaScript for managing data,
 To use a component, you first need to import it. For example, below is a component called `Button.svelte`:
 
 ```svelte
+<!-- Button.svelte -->
 <script>
-  export let text = 'Click me';
+  let { text = 'Click me' } = $props();
 </script>
 
-<!-- Button.svelte -->
 <button>{text}</button>
 ```
 
@@ -131,8 +133,6 @@ The component's props are `src`, `altTtext`, `caption` and `width` and each show
 
 ## Next steps
 
-To learn more about Svelte, you're not short of great tutorials. There are dozens of YouTube videos, online courses and articles to introduce you to more advanced features of the framework. Watch out for our own training courses on the Graphics Team to learn more about Svelte or JavaScript. But in a pinch, each desk has at least one developer who can help you through any problems as you're working with Svelte.
+To learn more about Svelte, check out the [official interactive tutorial](https://svelte.dev/tutorial/svelte/welcome-to-svelte).
 
 All are also welcome to join the "⚙️ Graphics Dev Group" channel in Teams, where we occasionally chat about code tips or tricks.
-
-> **NOTE:** As of now, we are using version 4 Svelte syntax. We will soon upgrade to version 5, but for now, we recommend looking for older tutorials online and not the official guides for the latest version.