adds slot for dek. dek prop becomes markdown string. hed is inline markdown string. closes #23. closes #24

src/components/Headline/Headline.stories.svelte

@@ -8,13 +8,15 @@
   // @ts-ignore
   import withCrownDocs from './stories/docs/withCrown.md?raw';
   // @ts-ignore
+  import customHedDocs from './stories/docs/customHed.md?raw';
+  // @ts-ignore
   import crownImgSrc from './stories/crown.png';
 
   import Headline from './Headline.svelte';
 
   import {
     withComponentDocs,
-    withStoryDocs,
+    withStoryDocs
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
@@ -55,6 +57,17 @@
   </Headline>
 </Story>
 
+<Story name="Custom hed" {...withStoryDocs(customHedDocs)}>
+  <Headline>
+    <h1 class="custom-hed" slot='hed'>
+      <span class="small">The secret to</span>
+      “The Nutcracker's”
+      <span class="small">success</span>
+    </h1>
+    <p class="custom-dek" slot="dek">How “The Nutcracker” ballet became an <span>American holday staple</span>and a financial pillar of ballet companies across the country</p>
+  </Headline>
+</Story>
+
 <Story name="With crown" {...withStoryDocs(withCrownDocs)}>
   <Headline>
     <!-- Add a crown -->
@@ -68,3 +81,22 @@
     >
   </Headline>
 </Story>
+
+<style lang="scss">
+  h1.custom-hed {
+    span {
+      display: block;
+      &.small {
+        font-size: 1.4rem;
+      }
+    }
+  }
+  p.custom-dek {
+    span {
+      background-color: rgb(255, 255, 154);
+      padding: 2px 4px;
+      margin: 0 4px;
+      font-weight: 600;
+    }
+  }
+</style>

src/components/Headline/Headline.svelte

@@ -1,19 +1,23 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script lang="ts">
   /**
-   * Headline
+   * Headline, parsed as an _inline_ markdown string in an `h1` element.
+   * @type {string}
    */
   export let hed: string = 'Reuters Graphics Interactive';
   /**
-   * Dek
+   * Dek, parsed as a markdown string.
+   * @type {string}
    */
   export let dek: string | null = null;
   /**
    * Section title
+   * @type {string}
    */
   export let section: string | null = null;
 
   import Block from '../Block/Block.svelte';
+  import { marked } from 'marked';
 </script>
 
 <Block cls="mb-1">
@@ -29,14 +33,20 @@
         <p class="{'section-title'}">{section}</p>
       {/if}
       {#if $$slots.hed}
-        <!-- Headline override named slot -->
+        <!-- Headline named slot -->
         <slot name="hed" />
       {:else}
-        <h1>{hed}</h1>
+        <h1>{@html marked.parseInline(hed)}</h1>
       {/if}
-      {#if dek}
-        <p>{dek}</p>
+      {#if $$slots.dek}
+        <!-- Dek named slot-->
+        <slot name="dek" />
+      {:else}
+        {#if dek}
+          {@html marked(dek)}
+        {/if}
       {/if}
+      
     </div>
     {#if $$slots.byline || $$slots.dateline}
       <aside class="article-metadata" class:pt-1="{!dek}">

src/components/Headline/stories/docs/customHed.md

@@ -0,0 +1,35 @@
+Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline>
+  <h1 slot='hed' class="custom-hed">
+    <span class="small block">The secret to</span>
+    “The Nutcracker's”
+    <span class="small block">success</span>
+  </h1>
+  <p slot="dek" class="custom-dek">How “The Nutcracker” ballet became an <span class="highlight">American holday staple</span>and a financial pillar of ballet companies across the country</p>
+</Headline>
+
+<style lang="scss">
+  h1 {
+    span.block {
+      display: block;
+      &.small {
+        font-size: 1.4rem;
+      }
+    }
+  }
+  p.custom-dek {
+    span {
+      background-color: rgb(255, 255, 154);
+      padding: 2px 4px;
+      margin: 0 4px;
+      font-weight: 600;
+    }
+  }
+</style>
+```