From da5c61d4f94add8f018866c4a6d43237f2bb46a3 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 25 Mar 2025 08:53:48 -0700
Subject: [PATCH] updates site headline

---
 src/components/SiteHeadline/SiteHeadline.mdx  |  66 +++++++++++
 .../SiteHeadline/SiteHeadline.stories.svelte  |  54 +++------
 .../SiteHeadline/SiteHeadline.svelte          | 107 ++++++++----------
 .../SiteHeadline/stories/docs/archieML.md     |  26 -----
 .../SiteHeadline/stories/docs/component.md    |  21 ----
 5 files changed, 130 insertions(+), 144 deletions(-)
 create mode 100644 src/components/SiteHeadline/SiteHeadline.mdx
 delete mode 100644 src/components/SiteHeadline/stories/docs/archieML.md
 delete mode 100644 src/components/SiteHeadline/stories/docs/component.md

diff --git a/src/components/SiteHeadline/SiteHeadline.mdx b/src/components/SiteHeadline/SiteHeadline.mdx
new file mode 100644
index 00000000..734d242b
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.mdx
@@ -0,0 +1,66 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SiteHeadlineStories from './SiteHeadline.stories.svelte';
+
+<Meta of={SiteHeadlineStories} />
+
+# SiteHeadline
+
+The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
+
+```svelte
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline
+  hed="Ukraine makes suprising gains in swift counteroffensive"
+  authors={[
+    'Dea Bankova',
+    'Michael Ovaska',
+    'Samuel Granados',
+    'Prasanta Kumar Dutta',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+<Canvas of={SiteHeadlineStories.Demo} />
+
+## Using with ArchieML docs
+
+With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+section: Global News # Optional
+sectionUrl: https://www.reuters.com/graphics/ # Optional
+hed: A beautiful page
+authors: Samuel Granados, Dea Bankova
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+... which you'll pass to the `SiteHeadline` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section={content.section}
+  sectionUrl={content.sectionUrl}
+  hed={content.hed}
+  authors={content.authors.split(',')}
+  publishTime={content.published}
+  updateTime={content.updated}
+/>
+```
+
+<Canvas of={SiteHeadlineStories.ArchieML} />
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index 6a4faf92..0988b413 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -1,51 +1,32 @@
-<script module>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SiteHeadline from './SiteHeadline.svelte';
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/SiteHeadline',
     component: SiteHeadline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       hedSize: {
         control: 'select',
         options: ['small', 'normal', 'big'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore raw
-  import archieML from './stories/docs/archieML.md?raw';
-
-  import { withStoryDocs } from '$lib/docs/utils/withParams.js';
-
   const content = {
-    Section: 'Global News',
-    SectionUrl: '',
-    Hed: 'A beautiful page',
-    Authors: 'Samuel Granados, Dea Bankova',
-    Published: '2022-09-12T08:30:00.000Z',
-    Updated: '',
+    section: 'Global News',
+    hed: 'A beautiful page',
+    authors: 'Samuel Granados, Dea Bankova',
+    published: '2022-09-12T08:30:00.000Z',
+    updated: '',
   };
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <SiteHeadline {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
-    section: 'Graphics',
-    sectionUrl: 'https://graphics.reuters.com',
+  name="Demo"
+  args={{
     hed: 'Ukraine makes surprising gains in counteroffensive',
     authors: [
       'Dea Bankova',
@@ -55,15 +36,14 @@
     ],
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),
-  }}"
+  }}
 />
 
-<Story name="ArchieML" {...withStoryDocs(archieML)}>
+<Story name="ArchieML" tags={['!autodocs', '!dev']}>
   <SiteHeadline
-    hed="{content.Hed}"
-    section="{content.Section}"
-    sectionUrl="{content.SectionUrl}"
-    authors="{content.Authors.split(',')}"
-    publishTime="{content.Published}"
+    hed={content.hed}
+    section={content.section}
+    authors={content.authors.split(',')}
+    publishTime={content.published}
   />
 </Story>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index b1b647a8..f1d5cc1b 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -1,75 +1,62 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) -->
 <script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+
   /**
    * Used to set headline class fluid size from text-2xl to text-4xl
    */
   type HeadlineSize = 'small' | 'normal' | 'big';
 
-  /**
-   * Headline
-   * @type {string}
-   * @required
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-  /**
-   * Headline size
-   * @type {string}
-   * @
-   */
-  export let hedSize: HeadlineSize = 'normal';
-  /**
-   * Section title.
-   * @type {string}
-   */
-  export let section: string = 'Graphics';
-  /**
-   * Section url, parsed as a string. Set to blank to remove link.
-   * @type {string}
-   */
-  export let sectionUrl: string = 'https://graphics.reuters.com';
-  /**
-   * Array of author names, which will be slugified to create links to Reuters author pages
-   */
-  export let authors: string[] = [];
-  /**
-   * Publish time as a datetime string.
-   * @type {string}
-   */
-  export let publishTime: string = '';
-  /**
-   * Update time as a datetime string.
-   * @type {string}
-   */
-  export let updateTime: string = '';
-  /**
-   * Add an id to to target with custom CSS.
-   * @type {string}
-   */
-  export let id: string = '';
-  /**
-   * Add extra classes to target with custom CSS.
-   * @type {string}
-   */
-  let cls: string = '';
-  export { cls as class };
+  interface Props {
+    /** Headline */
+    hed?: string;
+    /** Headline size */
+    hedSize?: HeadlineSize;
+    /** Section title */
+    section?: string;
+    /** Section URL, parsed as a string. Set to blank to remove link */
+    sectionUrl?: string;
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
+    authors: string[];
+    /** Publish time as a datetime string */
+    publishTime: string;
+    /** Update time as a datetime string */
+    updateTime?: string;
+    /** Add an id to to target with custom CSS */
+    id?: string;
+    /** Add extra classes to target with custom CSS */
+    class?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+  }
 
-  import Block from '../Block/Block.svelte';
-  import Byline from '../Byline/Byline.svelte';
+  let {
+    hed,
+    hedSize = 'normal',
+    section = 'Graphics',
+    sectionUrl = 'https://graphics.reuters.com',
+    authors,
+    publishTime,
+    updateTime = '',
+    id = '',
+    class: cls = '',
+    getAuthorPage,
+  }: Props = $props();
 
-  let hedClass;
-  $: {
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $derived.by(() => {
     switch (hedSize) {
       case 'big':
-        hedClass = 'text-4xl';
-        break;
+        return 'text-4xl';
       case 'small':
-        hedClass = 'text-2xl';
-        break;
+        return 'text-2xl';
       default:
-        hedClass = 'text-3xl';
+        return 'text-3xl';
     }
-  }
+  });
 </script>
 
 <Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
@@ -80,7 +67,7 @@
           class="section-title mb-0 font-subhed text-xs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
         >
           {#if sectionUrl}
-            <a class="no-underline !text-secondary" href="{sectionUrl}"
+            <a class="no-underline !text-secondary" href={sectionUrl}
               >{section}</a
             >
           {:else}
@@ -94,6 +81,6 @@
         </h1>
       {/if}
     </div>
-    <Byline {authors} {publishTime} {updateTime} />
+    <Byline {authors} {publishTime} {updateTime} {getAuthorPage} />
   </header>
 </Block>
diff --git a/src/components/SiteHeadline/stories/docs/archieML.md b/src/components/SiteHeadline/stories/docs/archieML.md
deleted file mode 100644
index 02c8e94a..00000000
--- a/src/components/SiteHeadline/stories/docs/archieML.md
+++ /dev/null
@@ -1,26 +0,0 @@
-```yaml
-section: Graphics
-sectionUrl: https://www.reuters.com/graphics/
-hed: A beautiful page
-authors: Samuel Granados,Dea Bankova
-published: 2022-09-12T08:30:00.000Z
-updated:
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { SiteHeadline } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-</script>
-
-<SiteHeadline
-  section="{content.section}"
-  sectionUrl="{content.sectionUrl}"
-  hed="{content.hed}"
-  authors="{content.authors.split(',')}"
-  publishTime="{content.published}"
-  updateTime="{content.updated}"
-/>
-```
diff --git a/src/components/SiteHeadline/stories/docs/component.md b/src/components/SiteHeadline/stories/docs/component.md
deleted file mode 100644
index 0adb6e32..00000000
--- a/src/components/SiteHeadline/stories/docs/component.md
+++ /dev/null
@@ -1,21 +0,0 @@
-A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
-
-Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
-
-```svelte
-<script>
-  import { SiteHeadline } from '@reuters-graphics/graphics-components';
-</script>
-
-<SiteHeadline
-  hed="Ukraine makes suprising gains in swift counteroffensive"
-  authors="{[
-    'Dea Bankova',
-    'Michael Ovaska',
-    'Samuel Granados',
-    'Prasanta Kumar Dutta',
-  ]}"
-  publishTime="2021-09-12T00:00:00.000Z"
-  updateTime="2021-09-12T12:57:00.000Z"
-/>
-```