incorporate byline into headlines

src/components/Headline/Headline.stories.svelte

@@ -44,6 +44,7 @@
     section: 'World News',
     hed: 'Reuters Graphics interactive',
     hedSize: 'normal',
+    authors: ['Dea Bankova', 'Aditi Bhandari'],
   }}"
 />
 
@@ -52,16 +53,9 @@
     hed="{'Reuters Graphics Interactive'}"
     dek="{'The beginning of a beautiful page'}"
     section="{'Global news'}"
-  >
-    <!-- Use named slots to add a byline... -->
-    <span slot="byline">By <strong>Peppa Pig</strong></span>
-    <!-- ...and a dateline. -->
-    <span slot="dateline"
-      >Published <time datetime="{new Date('2020-01-01').toISOString()}"
-        >Jan. 1, 2020</time
-      ></span
-    >
-  </Headline>
+    authors="{['Dea Bankova', 'Aditi Bhandari']}"
+    publishTime="{new Date('2020-01-01').toISOString()}"
+  />
 </Story>
 
 <Story name="Custom hed" {...withStoryDocs(customHedDocs)}>
@@ -79,16 +73,16 @@
 </Story>
 
 <Story name="With crown" {...withStoryDocs(withCrownDocs)}>
-  <Headline>
+  <Headline publishTime="{new Date('2020-01-01').toISOString()}">
     <!-- Add a crown -->
     <img slot="crown" src="{crownImgSrc}" alt="Illustration of Europe" />
     <!-- Override the hed with a named slot -->
     <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
-    <span slot="dateline"
+    <!-- <span slot="dateline"
       >Published <time datetime="{new Date('2020-01-01').toISOString()}"
         >Jan. 1, 2020</time
       ></span
-    >
+    > -->
   </Headline>
 </Story>
 

src/components/Headline/Headline.svelte

@@ -24,8 +24,23 @@
    * @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 = '';
 
   import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
   import { marked } from 'marked';
 
   let hedClass;
@@ -57,7 +72,7 @@
         <slot name="crown" />
       </div>
     {/if}
-    <div class="title">
+    <div class="title mb-3">
       {#if section}
         <p class="section-title">{section}</p>
       {/if}
@@ -74,31 +89,16 @@
         {@html marked(dek)}
       {/if}
     </div>
-    {#if $$slots.byline || $$slots.dateline}
-      <aside
-        class="article-metadata pb-0 font-not text-primary text-center leading-none"
-        class:pt-2="{!dek}"
-        class:pt-8="{dek}"
-      >
-        {#if $$slots.byline}
-          <div class="byline-container">
-            <div class="byline">
-              <!-- Byline named slot -->
-              <slot name="byline" />
-            </div>
-          </div>
-        {/if}
-        {#if $$slots.dateline}
-          <div
-            class="dateline-container text-xxs tracking-wide text-secondary uppercase"
-          >
-            <div class="published">
-              <!-- Dateline named slot -->
-              <slot name="dateline" />
-            </div>
-          </div>
-        {/if}
-      </aside>
+    {#if $$slots.byline}
+      <!-- Custom byline/dateline -->
+      <slot name="byline" />
+    {:else if authors.length > 0 || publishTime}
+      <Byline
+        authors="{authors}"
+        publishTime="{publishTime}"
+        updateTime="{updateTime}"
+        align="center"
+      />
     {/if}
   </header>
 </Block>

src/components/SiteHeadline/SiteHeadline.svelte

@@ -53,26 +53,7 @@
   export { cls as class };
 
   import Block from '../Block/Block.svelte';
-  import slugify from 'slugify';
-  import { apdate } from 'journalize';
-
-  const isValidDate = (datetime) => {
-    if (!datetime) return false;
-    if (!Date.parse(datetime)) return false;
-    return true;
-  };
-
-  const formatTime = (datetime) =>
-    new Date(datetime).toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit',
-      timeZoneName: 'short',
-    });
-
-  const areSameDay = (first, second) =>
-    first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate();
+  import Byline from '../Byline/Byline.svelte';
 
   let hedClass;
   $: {
@@ -113,93 +94,20 @@
         </h1>
       {/if}
     </div>
-    <aside class="article-metadata mt-2 font-subhed">
-      <div class="byline-container">
-        <div class="byline body-caption">
-          By
-          {#if authors.length > 0}
-            {#each authors as author, i}
-              <a
-                class="no-underline"
-                href="https://www.reuters.com/authors/{slugify(author.trim(), {
-                  lower: true,
-                })}/"
-                rel="author"
-              >
-                {author.trim()}</a
-              >{#if authors.length > 1 && i < authors.length - 2},{/if}
-              {#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
-            {/each}
-          {:else}
-            Reuters
-          {/if}
-        </div>
-      </div>
-      <div class="dateline-container fmt-0 body-caption">
-        {#if isValidDate(publishTime)}
-          <div>
-            Published
-            <time datetime="{publishTime}">
-              {#if isValidDate(updateTime)}
-                {apdate(new Date(publishTime))}
-              {:else}
-                {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
-                  publishTime
-                )}
-              {/if}
-            </time>
-          </div>
-        {/if}
-        {#if isValidDate(publishTime) && isValidDate(updateTime)}
-          <div>
-            Last updated
-            <time datetime="{updateTime}">
-              {#if areSameDay(new Date(publishTime), new Date(updateTime))}
-                {formatTime(updateTime)}
-              {:else}
-                {apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(
-                  updateTime
-                )}
-              {/if}
-            </time>
-          </div>
-        {/if}
-      </div>
-    </aside>
+    <Byline
+      authors="{authors}"
+      publishTime="{publishTime}"
+      updateTime="{updateTime}"
+    />
   </header>
 </Block>
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
 
-  .byline {
-    @include font-bold;
-    a {
-      text-decoration-line: none;
-      &:hover {
-        text-decoration-line: underline;
-      }
-    }
-  }
-
   @media (max-width: $column-width-narrow) {
     h1 {
       @include font-semibold;
     }
   }
-
-  @media (min-width: $column-width-narrower) {
-    .dateline-container {
-      display: flex;
-      flex-flow: wrap;
-      div {
-        &:not(:last-child) {
-          &:after {
-            content: '·';
-            @include fmx-1;
-          }
-        }
-      }
-    }
-  }
 </style>