added docs on snippets

src/components/Byline/Byline.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/blocks';
 
 import * as BylineStories from './Byline.stories.svelte';
 
@@ -24,3 +24,28 @@ Easily add a byline and dateline to your story.
   updateTime="2021-09-12T12:57:00.000Z"
 />
 ```
+
+## Cutom byline, published and updated datelines
+
+You can customise the byline, published and updated datelines using [snippets](https://svelte.dev/docs/svelte/snippet), which are the Svelte 5 version of slots. You can pass any string or html as snippets.
+
+```svelte
+<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  <!-- Optional custom byline -->
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+
+  <!-- Optional custom published dateline -->
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+
+  <!-- Optional custom updated dateline -->
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>
+```
+
+<Canvas of={BylineStories.Customised} />

src/components/Byline/Byline.stories.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <Story
-  name="Default"
+  name="Demo"
   args={{
     align: 'left',
     authors: [
@@ -30,17 +30,15 @@
   }}
 />
 
-<Story name="Custom datelines">
-  <Byline
-    authors={['Reuters Graphics staff']}
-    getAuthorPage={() => `https://www.reuters.com/graphics/`}
-    publishTime="2021-09-12T00:00:00Z"
-    updateTime="2021-09-12T13:57:00Z"
-  >
-    {#snippet customPublished()}
+<Story name="Customised">
+  <Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+    {#snippet byline()}
+      <strong>BY REUTERS GRAPHICS</strong>
+    {/snippet}
+    {#snippet published()}
       PUBLISHED on some custom date and time
     {/snippet}
-    {#snippet customUpdated()}
+    {#snippet updated()}
       <em>Updated every 5 minutes</em>
     {/snippet}
   </Byline>

src/components/Byline/Byline.svelte

@@ -10,7 +10,7 @@
     /**
      * Array of author names, which will be slugified to create links to Reuters author pages
      */
-    authors: string[];
+    authors?: string[];
     /**
      * Publish time as a datetime string.
      */
@@ -39,15 +39,19 @@
      * Custom function that returns an author page URL.
      */
     getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet | null;
     /**
      * Optional snippet for a custom published dateline.
      */
     // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
-    customPublished?: Snippet | null;
+    published?: Snippet | null;
     /**
      * Optional snippet for a custom updated dateline.
      */
-    customUpdated?: Snippet | null;
+    updated?: Snippet | null;
   }
 
   let {
@@ -61,8 +65,9 @@
       const authorSlug = slugify(author.trim(), { lower: true });
       return `https://www.reuters.com/authors/${authorSlug}/`;
     },
-    customPublished = null,
-    customUpdated = null,
+    byline = null,
+    published = null,
+    updated = null,
   }: Props = $props();
 
   let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
@@ -92,32 +97,37 @@
 <Block {id} class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
     <div class="byline body-caption fmb-1">
-      By
-      {#if authors.length > 0}
-        {#each authors as author, i}
-          <a
-            class="no-underline whitespace-nowrap text-primary font-bold"
-            href={getAuthorPage(author)}
-            rel="author"
-          >
-            {author.trim()}</a
-          >{#if authors.length > 1 && i < authors.length - 2},{/if}
-          {#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
-        {/each}
+      {#if byline}
+        <!-- Custom byline -->
+        {@render byline()}
       {:else}
-        <a
-          href="https://www.reuters.com"
-          class="no-underline whitespace-nowrap text-primary font-bold"
-          >Reuters</a
-        >
+        By
+        {#if authors.length > 0}
+          {#each authors as author, i}
+            <a
+              class="no-underline whitespace-nowrap text-primary font-bold"
+              href={getAuthorPage(author)}
+              rel="author"
+            >
+              {author.trim()}</a
+            >{#if authors.length > 1 && i < authors.length - 2},{/if}
+            {#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
+          {/each}
+        {:else}
+          <a
+            href="https://www.reuters.com"
+            class="no-underline whitespace-nowrap text-primary font-bold"
+            >Reuters</a
+          >
+        {/if}
       {/if}
     </div>
     <div class="dateline body-caption fmt-0">
-      {#if customPublished}
+      {#if published}
         <div class="whitespace-nowrap inline-block">
           <!-- Custom published dateline snippet -->
           <time datetime={publishTime}>
-            {@render customPublished()}
+            {@render published()}
           </time>
         </div>
       {:else if isValidDate(publishTime)}
@@ -134,11 +144,11 @@
           </time>
         </div>
       {/if}
-      {#if customUpdated}
+      {#if updated}
         <div class="whitespace-nowrap inline-block">
           <!-- Custom updated dateline snippet -->
           <time datetime={updateTime}>
-            {@render customUpdated()}
+            {@render updated()}
           </time>
         </div>
       {:else if isValidDate(publishTime) && isValidDate(updateTime)}