updates site headline

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} />

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',
+    section: 'Global News',
-    SectionUrl: '',
+    hed: 'A beautiful page',
-    Hed: 'A beautiful page',
+    authors: 'Samuel Granados, Dea Bankova',
-    Authors: 'Samuel Granados, Dea Bankova',
+    published: '2022-09-12T08:30:00.000Z',
-    Published: '2022-09-12T08:30:00.000Z',
+    updated: '',
-    Updated: '',
   };
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <SiteHeadline {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
+  name="Demo"
-  args="{{
+  args={{
-    section: 'Graphics',
-    sectionUrl: 'https://graphics.reuters.com',
     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}"
+    hed={content.hed}
-    section="{content.Section}"
+    section={content.section}
-    sectionUrl="{content.SectionUrl}"
+    authors={content.authors.split(',')}
-    authors="{content.Authors.split(',')}"
+    publishTime={content.published}
-    publishTime="{content.Published}"
   />
 </Story>

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';
 
-  /**
+  interface Props {
-   * Headline
+    /** Headline */
-   * @type {string}
+    hed?: string;
-   * @required
+    /** Headline size */
-   */
+    hedSize?: HeadlineSize;
-  export let hed: string = 'Reuters Graphics Interactive';
+    /** Section title */
-  /**
+    section?: string;
-   * Headline size
+    /** Section URL, parsed as a string. Set to blank to remove link */
-   * @type {string}
+    sectionUrl?: string;
-   * @
+    /** Array of author names, which will be slugified to create links to Reuters author pages */
-   */
+    authors: string[];
-  export let hedSize: HeadlineSize = 'normal';
+    /** Publish time as a datetime string */
-  /**
+    publishTime: string;
-   * Section title.
+    /** Update time as a datetime string */
-   * @type {string}
+    updateTime?: string;
-   */
+    /** Add an id to to target with custom CSS */
-  export let section: string = 'Graphics';
+    id?: string;
-  /**
+    /** Add extra classes to target with custom CSS */
-   * Section url, parsed as a string. Set to blank to remove link.
+    class?: string;
-   * @type {string}
+    /**
-   */
+     * Custom function that returns an author page URL.
-  export let sectionUrl: string = 'https://graphics.reuters.com';
+     */
-  /**
+    getAuthorPage?: (author: string) => string;
-   * 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 };
 
-  import Block from '../Block/Block.svelte';
+  let {
-  import Byline from '../Byline/Byline.svelte';
+    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';
+        return 'text-4xl';
-        break;
       case 'small':
-        hedClass = 'text-2xl';
+        return 'text-2xl';
-        break;
       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>

src/components/SiteHeadline/stories/docs/archieML.md

@@ -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}"
-/>
-```

src/components/SiteHeadline/stories/docs/component.md

@@ -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"
-/>
-```