first draft of byline

src/components/Byline/Byline.stories.svelte

@@ -12,9 +12,9 @@
     ...withComponentDocs(componentDocs),
     // https://storybook.js.org/docs/svelte/essentials/controls
     argTypes: {
-      hedSize: {
+      align: {
         control: 'select',
-        options: ['small', 'normal', 'big'],
+        options: ['left', 'center'],
       },
     },
   };
@@ -29,11 +29,13 @@
 <Story
   name="Default"
   args="{{
+    align: 'left',
     authors: [
       'Dea Bankova',
-      'Michael Ovaska',
-      'Samuel Granados',
+      'Aditi Bhandari',
       'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
     ],
     publishTime: new Date('2021-09-12').toISOString(),
     updateTime: new Date('2021-09-12T13:57:00').toISOString(),

src/components/Byline/Byline.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import slugify from 'slugify';
+  import { apdate } from 'journalize';
+
   /**
    * Array of author names, which will be slugified to create links to Reuters author pages
    */
@@ -13,6 +17,11 @@
    * @type {string}
    */
   export let updateTime: string = '';
+  /**
+   * Alignment of the byline.
+   * @type {string}
+   */
+  export let align: 'left' | 'center' = 'left';
   /**
    * Add an id to to target with custom CSS.
    * @type {string}
@@ -25,9 +34,16 @@
   let cls: string = '';
   export { cls as class };
 
-  import Block from '../Block/Block.svelte';
-  import slugify from 'slugify';
-  import { apdate } from 'journalize';
+  /**
+   * Custom function that returns an author page URL.
+   * @param author
+   */
+  export let getAuthorPage = (author: string): string => {
+    const authorSlug = slugify(author.trim(), { lower: true });
+    return `https://www.reuters.com/authors/${authorSlug}/`;
+  };
+
+  $: alignmentClass = align === 'left' ? 'text-left' : 'text-center';
 
   const isValidDate = (datetime) => {
     if (!datetime) return false;
@@ -48,18 +64,19 @@
     first.getDate() === second.getDate();
 </script>
 
-<Block id="{id}" class="byline-container {cls} " width="normal">
+<Block id="{id}" class="byline-container {alignmentClass} {cls}" width="normal">
   <aside class="article-metadata font-subhed">
-    <div class="byline-container">
-      <div class="byline body-caption">
+    <div class="byline-container body-caption">
+      {#if $$slots.byline}
+        <!-- Custom byline -->
+        <slot name="byline" />
+      {:else}
         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,
-              })}/"
+              class="no-underline whitespace-nowrap text-primary"
+              href="{getAuthorPage(author)}"
               rel="author"
             >
               {author.trim()}</a
@@ -67,13 +84,21 @@
             {#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
           {/each}
         {:else}
-          Reuters
+          <a
+            href="https://www.reuters.com"
+            class="no-underline whitespace-nowrap text-primary">Reuters</a
+          >
         {/if}
-      </div>
+      {/if}
     </div>
     <div class="dateline-container fmt-0 body-caption">
-      {#if isValidDate(publishTime)}
-        <div>
+      {#if $$slots.published}
+        <div class="whitespace-nowrap">
+          <!-- Custom published dateline -->
+          <slot name="published" />
+        </div>
+      {:else if isValidDate(publishTime)}
+        <div class="whitespace-nowrap">
           Published
           <time datetime="{publishTime}">
             {#if isValidDate(updateTime)}
@@ -86,8 +111,13 @@
           </time>
         </div>
       {/if}
-      {#if isValidDate(publishTime) && isValidDate(updateTime)}
-        <div>
+      {#if $$slots.updated}
+        <div class="whitespace-nowrap">
+          <!-- Custom updated dateline -->
+          <slot name="updated" />
+        </div>
+      {:else if isValidDate(publishTime) && isValidDate(updateTime)}
+        <div class="whitespace-nowrap">
           Last updated
           <time datetime="{updateTime}">
             {#if areSameDay(new Date(publishTime), new Date(updateTime))}
@@ -105,7 +135,7 @@
 <style lang="scss">
   @use '../../scss/mixins' as *;
 
-  .byline {
+  .byline-container {
     @include font-regular;
     a {
       @include font-bold;

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

@@ -1,6 +1,4 @@
-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.
+Byline and dateline.
 
 ```svelte
 <script>
@@ -10,9 +8,10 @@ Styles for this headline are intentionally restricted. It is meant to serve as a
 <Byline
   authors="{[
     'Dea Bankova',
-    'Michael Ovaska',
-    'Samuel Granados',
+    'Aditi Bhandari',
     'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
   ]}"
   publishTime="2021-09-12T00:00:00.000Z"
   updateTime="2021-09-12T12:57:00.000Z"

src/index.js

@@ -8,6 +8,7 @@ export { default as Article } from './components/Article/Article.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
+export { default as Byline } from './components/Byline/Byline.svelte';
 export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
 export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';