From 478f16472a8f0e61b47461ef2e2a5b887f14a1f6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:46:42 -0700
Subject: [PATCH] set up snippets in Headline.svelte, working on docs

---
 src/components/Headline/Headline.mdx          |  5 +--
 .../Headline/Headline.stories.svelte          |  4 +--
 src/components/Headline/Headline.svelte       | 36 ++++++++-----------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index afbdf0b8..4e9fdf5c 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -52,8 +52,9 @@ The `Headline` component creates the Reuters Graphics headline.
 />
 ```
 
-## With custom hed
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+## With custom hed
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
 
 ```svelte
 <script>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 3610b645..51da9ece 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 customHed()}
+    {#snippet hed()}
       <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 customDek()}
+    {#snippet dek()}
       <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
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 7b8fbb6b..f14194d9 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -10,20 +10,16 @@
   import Markdown from '../Markdown/Markdown.svelte';
 
   interface Props {
-    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
-    hed: string;
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
     /** 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;
+    /** Dek, parsed as a markdown string OR as a custom snippet. */
+    dek?: string | Snippet;
     /** Custom crown snippet */
     crown?: Snippet;
     /** Section title */
@@ -41,11 +37,9 @@
   let {
     hed = 'Reuters Graphics Interactive',
     byline,
-    customHed,
     class: cls = '',
     hedSize = 'normal',
     dek,
-    customDek,
     crown,
     section,
     authors = [],
@@ -93,23 +87,23 @@
             {section}
           </p>
         {/if}
-        {#if customHed}
-          <!-- Headline snippet -->
-          {@render customHed()}
-        {:else}
+        {#if typeof hed === 'string'}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
+        {:else if hed}
+          <!-- Headline snippet -->
+          {@render hed()}
         {/if}
-        {#if customDek}
-          <!-- Dek snippet-->
-          <div class="dek fmx-auto fmb-6">
-            {@render customDek()}
-          </div>
-        {:else if dek}
+        {#if typeof dek === 'string'}
           <div class="dek fmx-auto fmb-6">
             <Markdown source={dek} />
           </div>
+        {:else if dek}
+          <!-- Dek snippet-->
+          <div class="dek fmx-auto fmb-6">
+            {@render dek()}
+          </div>
         {/if}
       </div>
       {#if byline}
@@ -132,7 +126,7 @@
   @use '../../scss/mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
-      max-width: $column-width-normal;
+      max-width: mixins.$column-width-normal;
     }
     :global(.dek p) {
       @include mixins.fmt-0;