initial byline stab

src/components/Block/Block.svelte

@@ -38,7 +38,10 @@
   .article-block {
     max-width: var(--normal-column-width, 660px);
     @include fmx-auto;
-    @include fmy-5;
+    // Note to P: Don't want any default top-bottom margin by default here b/c
+    // it's too hard to get rid of. Let's add default within components
+    // with class tokens...
+    // @include fmy-5;
 
     &.narrower {
       max-width: var(--narrower-column-width, 330px);

src/components/Byline/Byline.stories.svelte

@@ -0,0 +1,41 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import Byline from './Byline.svelte';
+
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/Byline" component="{Byline}" {...metaProps} />
+
+<Template let:args>
+  <Byline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    authors: [
+      'Dea Bankova',
+      'Michael Ovaska',
+      'Samuel Granados',
+      'Prasanta Kumar Dutta',
+    ],
+    publishTime: new Date('2021-09-12').toISOString(),
+    updateTime: new Date('2021-09-12T13:57:00').toISOString(),
+  }}"
+/>

src/components/Byline/Byline.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  /**
+   * 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 = '';
+  /**
+   * Add an id to to target with custom CSS.
+   * @type {string}
+   */
+  export let id: string = '';
+  /**
+   * Add extra classes to target with custom CSS.
+   * @type {string}
+   */
+  let cls: string = '';
+  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();
+</script>
+
+<Block id="{id}" class="byline-container {cls} " width="normal">
+  <aside class="article-metadata 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>
+</Block>
+
+<style lang="scss">
+  @use '../../scss/mixins' as *;
+
+  .byline {
+    @include font-regular;
+    a {
+      @include font-bold;
+      text-decoration-line: none;
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+  }
+
+  @media (min-width: $column-width-narrower) {
+    .dateline-container {
+      div {
+        white-space: nowrap;
+        display: inline-block;
+        &:not(:last-child) {
+          &:after {
+            content: '·';
+            margin: 0 2px 0 5px;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,20 @@
+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.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Byline
+  authors="{[
+    'Dea Bankova',
+    'Michael Ovaska',
+    'Samuel Granados',
+    'Prasanta Kumar Dutta',
+  ]}"
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```