From 2f7c40f6c18eb4c7f0e83256a417253a897e7980 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:17:31 -0700
Subject: [PATCH] migrated Headline.svelte

---
 .../Headline/Headline.stories.svelte          |   5 +-
 src/components/Headline/Headline.svelte       | 123 +++++++++---------
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 76ff4ec0..3610b645 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -54,14 +54,14 @@
 
 <Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
-    {#snippet hed()}
+    {#snippet customHed()}
       <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
     {/snippet}
-    {#snippet dek()}
+    {#snippet customDek()}
       <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
@@ -72,7 +72,6 @@
 </Story>
 
 <Story name="Crown image" exportName="CrownImage">
-  >
   <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 3a2e39b0..7b8fbb6b 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -1,59 +1,62 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
+  // Types
   import type { HeadlineSize } from './../@types/global';
+  import type { Snippet } from 'svelte';
 
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-
-  /** Add extra classes to the block tag to target it with custom CSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Headline size
-   * @type {string}
-   */
-  export let hedSize: HeadlineSize = 'normal';
-
-  /**
-   * Dek, parsed as a markdown string.
-   * @type {string}
-   */
-  export let dek: string | null = null;
-  /**
-   * Section title
-   * @type {string}
-   */
-  export let section: string | null = null;
-  /**
-   * 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 = '';
-
-  /**
-   * Width of the headline.
-   */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
-
+  // Components
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
 
-  let hedClass: string;
-  $: {
+  interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
+    hed: string;
+    /** Custom byline snippet */
+    byline?: Snippet;
+    /** Custom headline snippet */
+    customHed?: Snippet;
+    /** Add extra classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /** Headline size: small, normal, big, bigger, biggest */
+    hedSize?: HeadlineSize;
+    /** Dek, parsed as a markdown string. */
+    dek?: string;
+    /** Custom dek snippet */
+    customDek?: Snippet;
+    /** Custom crown snippet */
+    crown?: Snippet;
+    /** Section title */
+    section?: 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;
+    /** Width of the headline: normal, wide, wider, widest */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+  }
+
+  let {
+    hed = 'Reuters Graphics Interactive',
+    byline,
+    customHed,
+    class: cls = '',
+    hedSize = 'normal',
+    dek,
+    customDek,
+    crown,
+    section,
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    width = 'normal',
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $state('text-3xl');
+  $effect(() => {
     switch (hedSize) {
       case 'biggest':
         hedClass = 'text-6xl';
@@ -70,16 +73,16 @@
       default:
         hedClass = 'text-3xl';
     }
-  }
+  });
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
   <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
-      {#if $$slots.crown}
+      {#if crown}
         <div class="crown-container">
-          <!-- Crown named slot -->
-          <slot name="crown" />
+          <!-- Crown snippet -->
+          {@render crown()}
         </div>
       {/if}
       <div class="title">
@@ -90,18 +93,18 @@
             {section}
           </p>
         {/if}
-        {#if $$slots.hed}
-          <!-- Headline named slot -->
-          <slot name="hed" />
+        {#if customHed}
+          <!-- Headline snippet -->
+          {@render customHed()}
         {:else}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
         {/if}
-        {#if $$slots.dek}
-          <!-- Dek named slot-->
+        {#if customDek}
+          <!-- Dek snippet-->
           <div class="dek fmx-auto fmb-6">
-            <slot name="dek" />
+            {@render customDek()}
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
@@ -109,9 +112,9 @@
           </div>
         {/if}
       </div>
-      {#if $$slots.byline}
+      {#if byline}
         <!-- Custom byline/dateline -->
-        <slot name="byline" />
+        {@render byline()}
       {:else if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"