adds notes on getAuthorPage prop to Byline;

src/components/Byline/Byline.mdx

@@ -58,7 +58,7 @@ updateTime: 2021-09-12T12:57:00.000Z
 
 <Canvas of={BylineStories.Demo} />
 
-## Cutomisation
+## Custom byline, published and updated datelines
 
 Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
 
@@ -82,3 +82,25 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline,
 ```
 
 <Canvas of={BylineStories.Customised} />
+
+## Custom author page
+
+By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.
+
+To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.
+
+```svelte
+<!-- Pass a custom function as `getAuthorPage` -->
+<Byline
+  authors={['Dea Bankova', 'Prasanta Kumar Dutta', 'Anurag Rao', 'Mariano Zafra']}
+  publishTime="2021-09-12T00:00:00Z"
+  updateTime="2021-09-12T13:57:00Z"
+  getAuthorPage={(author: string) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+/>
+
+```
+
+<Canvas of={BylineStories.CustomAuthorPage} />
+````

src/components/Byline/Byline.stories.svelte

@@ -18,7 +18,6 @@
 <Story
   name="Demo"
   args={{
-    align: 'left',
     authors: [
       'Dea Bankova',
       'Prasanta Kumar Dutta',
@@ -43,3 +42,21 @@
     {/snippet}
   </Byline>
 </Story>
+
+<Story
+  name="Custom author page"
+  exportName="CustomAuthorPage"
+  args={{
+    authors: [
+      'Dea Bankova',
+      'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
+    ],
+    publishTime: '2021-09-12T00:00:00Z',
+    updateTime: '2021-09-12T13:57:00Z',
+    getAuthorPage: (author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    },
+  }}
+/>

src/components/Byline/Byline.svelte

@@ -1,8 +1,8 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
+  import { getAuthorPageUrl } from '../../utils';
   import Block from '../Block/Block.svelte';
-  import slugify from 'slugify';
   import { apdate } from 'journalize';
   import type { Snippet } from 'svelte';
 
@@ -46,7 +46,6 @@
     /**
      * Optional snippet for a custom published dateline.
      */
-    // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
     published?: Snippet;
     /**
      * Optional snippet for a custom updated dateline.
@@ -61,10 +60,7 @@
     align = 'left',
     id = '',
     cls = '',
-    getAuthorPage = (author: string): string => {
-      const authorSlug = slugify(author.trim(), { lower: true });
-      return `https://www.reuters.com/authors/${authorSlug}/`;
-    },
+    getAuthorPage = getAuthorPageUrl,
     byline,
     published,
     updated,

src/components/Headline/Headline.mdx

@@ -6,7 +6,7 @@ import * as HeadlineStories from './Headline.stories.svelte';
 
 # Headline
 
-The `Headline` component creates the Reuters Graphics headline.
+The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.
 
 ```svelte
 <script>
@@ -14,29 +14,15 @@ The `Headline` component creates the Reuters Graphics headline.
 </script>
 
 <Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'World News'}
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
 />
 ```
 
 <Canvas of={HeadlineStories.Demo} />
 
-## Dek
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'Global news'}
-/>
-```
-
-## With byline
+## With authors and publish time
 
 ```svelte
 <script>

src/components/Headline/Headline.stories.svelte

@@ -26,11 +26,9 @@
 <Story
   name="Demo"
   args={{
-    section: 'World News',
     hed: 'Reuters Graphics interactive',
-    hedSize: 'normal',
-    dek: '',
-    authors: [],
+    dek: 'The beginning of a beautiful page',
+    section: 'World News',
   }}
 />
 

src/components/Headline/Headline.svelte

@@ -26,6 +26,10 @@
     section?: string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors?: string[];
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
     /** Publish time as a datetime string. */
     publishTime?: string;
     /** Update time as a datetime string. */
@@ -106,10 +110,7 @@
           </div>
         {/if}
       </div>
-      {#if byline}
-        <!-- Custom byline/dateline -->
-        {@render byline()}
-      {:else if authors.length > 0 || publishTime}
+      {#if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"
           {authors}
@@ -117,6 +118,9 @@
           {updateTime}
           align="center"
         />
+      {:else if byline}
+        <!-- Custom byline/dateline -->
+        {@render byline()}
       {/if}
     </header>
   </Block>

src/utils/index.ts

@@ -0,0 +1,9 @@
+import slugify from 'slugify';
+
+/**
+ * Custom function that returns an author page URL.
+ */
+export const getAuthorPageUrl = (author: string): string => {
+  const authorSlug = slugify(author.trim(), { lower: true });
+  return `https://www.reuters.com/authors/${authorSlug}/`;
+};